Webデザインの入門書

ポートフォリオ、企業サイト、ECサイト、レシピアプリの四つの作例でFigmaを学ぶ。調査と情報整理、フレーム、スタイル、プロトタイプまで、画面制作の流れに沿って説明する。

415点のWebサイトを、印象、配色、業種、レイアウト、書体などの切り口で紹介。ページの見た目をパーツに分け、デザインが与える印象の理由を解説する。

HTML・CSSの基本から、画面幅に合わせたレイアウトまでを作例で学べます。練習問題や導入部分の動画もあり、読むだけで終わらせず手を動かして進められる構成です。

イベント、食品、ビジネス、ホテル、学習塾など38テーマのバナー作例を630点超収録。同じ題材の異なる表現を見ながら、配色、文字、配置のアイデアを得られる。

Webのレイアウト、配色、写真・図版、タイポグラフィをまとめた入門書。レスポンシブ設計やインタラクション、マーケティングにも触れ、画面を作る際の基本を広く扱う。

架空のカフェを題材に、コードを追加したときの画面の変化を確認しながら進めます。スマートフォン向けの表示や複数のレイアウトを、制作の流れの中で試せます。

SNSリンク集やブログ、招待状、レストランのサイトを題材に、HTMLとCSSを練習します。図解と手順を見ながら、少しずつ作れる範囲を広げる構成です。

完成コードや公開方法の資料はダウンロードで提供されます。

業種別の見本に加え、見出し、ボタン、装飾などのパーツも扱います。自分の案のどこを直すか、具体例から考えるときに使える一冊です。

付属素材をもっと増やしてほしいという読者の指摘があります。

操作に迷う画面と改善案を見比べ、使う人の行動に沿ってデザインを考えます。制作担当だけでなく、画面の確認や発注をする人にも向く内容です。

スマートフォン画面の制作から、オートレイアウト、部品の再利用、画面遷移へ進みます。機能を眺めるだけでなく、作例を完成させて覚えたい人向けです。

スマートフォンの作例が中心。2025年後半以降の投稿には、本と操作画面の違いへの指摘があります。

レイアウト、配色、タイポグラフィ、写真とイラストを広く扱います。制作の進め方や迷ったときの判断も学べるため、デザイン全体の入口として選べます。