Web デザイン本ガイド - HTML/CSS、Figma、Photoshop を学ぶ順番

この記事は約 3 分で読めます。

「Web デザインの本」は 3 種類が混ざって売られている

書店で Web デザインの棚に並ぶ本は、実は性格の違う 3 種類が混在しています。HTML と CSS でページを組む「コーディング」の本、Figma や Photoshop という「ツール」の本、そしてレイアウトや配色という「デザイン原則」の本です。この区別をせずに 1 冊だけ買うと、「ツールは使えるのにデザインが決まらない」「原則は知っているのに形にできない」という偏りが生まれます。独学を設計するなら、3 本柱を意識して 1 本ずつ立てるのが確実です。

なお、バックエンドや JavaScript フレームワークまで含めた開発全般の選書は Web 開発本ガイド の守備範囲です。本記事は「見た目を設計して形にする」までを扱い、3 本柱それぞれの定番を 2026 年 8 月時点の当サイト収載書から立てていきます。

柱 1: コーディング - HTML/CSS で形にする力

スラスラわかるHTML&CSSのきほん 第3版 (狩野祐東、SB クリエイティブ、2022 年) は、1 つのストーリーに沿ってサイトを作り上げながらタグの意味と CSS レイアウトを覚える形式で、環境構築の壁を意図的に低くした最初の 1 冊です。HTML Living Standard 準拠で、モバイル対応サイトの制作手順まで通して体験できます。

その次は 作って学ぶ　HTML＆CSSモダンコーディング (エビスコム、マイナビ出版、2021 年) で、Flexbox と CSS Grid の使い分けを完成ページの組み立てを通じて身につけます。ヘッダー・ヒーロー・記事一覧とパーツ単位で章が進み、章末に別解のバリエーションが載っているため、「この場面ではどのレイアウト手法を選ぶか」という判断力が育ちます。

ページに動きを加える段階では 動くWebデザインアイディア帳 (久保田涼子・杉山彰啓、ソシム、2021 年) が逆引き事典として機能します。よく実装される動くパーツを 13 種類に分類し、ハンバーガーメニューやスクロールダウンなどをコード付きで引ける構成です。コピペで終わらせないよう、動きが何のためにあるかを扱う基礎知識の章が置かれている点が単なるスニペット集と違います。jQuery ベースの記述が中心なので、フレームワーク環境では読み替えが前提です。

柱 2: ツール - Figma と Photoshop

画面設計の道具は Figma が軸になります。これからはじめるFigma Web・UIデザイン入門 (阿部文人ほか、マイナビ出版、2022 年) は、アカウント作成からポートフォリオサイト・EC サイトなど 4 つの作例までを段階的に進む構成で、日本語化された画面に対応しています。ツールに初めて触る人はこちらが入りやすいでしょう。

Figma for UIデザイン［日本語版対応］ アプリ開発のためのデザイン、プロトタイプ、ハンドオフ (沢田俊介、翔泳社、2022 年) は、機能を網羅するリファレンス編と、写真投稿アプリを題材にワイヤーフレームからプロトタイプ・詳細デザインまで作るプラクティス編の 2 部構成で、デザインデータを実装者へ渡す (ハンドオフ) の章まで扱います。エンジニアと協業する実務の型を固めたい人は 2 冊目にこちらを重ねると効きます。

写真を扱うなら デザインの学校　これからはじめる Photoshopの本 (宮川千春・木俣カイ、技術評論社、2022 年版) が入口です。補正・切り抜き・合成・ポストカード制作と、講座と同じ順序で基本操作を一巡できます。高度なレタッチは射程外ですが、「ツールの名前と役割を把握する」段階を確実に終えられます。なおこのシリーズは年版が更新されていて、2026 年 4 月に「2026年対応［改訂第10版］」が出ています。これから買うなら最新の年版を選んでください。

柱 3: デザイン原則 - センスと呼ばれているものを分解する

レイアウト・デザインの教科書 (米倉明男・生田信一・青柳千郷、SB クリエイティブ、2019 年) は、近接・整列・反復・コントラストという配置の原則を実例で学ぶ教科書です。ツールの操作手順を含まない代わりに、Figma でも紙の資料でも通用する「何をどこに置くか」の判断力が残ります。

色で手が止まる人には 配色アイデア手帖 めくって見つける新しいデザインの本［完全保存版］第2版 (桜井輝子、SB クリエイティブ、2023 年) を。テーマ別のカラーパレットを見開きで引ける見本帳で、色彩理論の前提なしに使えます。体系的な色彩学の本ではなく「迷ったとき引く辞書」として、制作の傍らに置く種類の本です。

学ぶ順番のモデルルート

1. スラスラわかる HTML&CSS で 2〜3 週間、手を動かして 1 サイト作る
2. Figma 入門書 で模写を 2〜3 画面。ここでレイアウトの疑問が湧く
3. レイアウト・デザインの教科書と配色アイデア手帖で疑問に答えを与える
4. モダンコーディングと動く Web デザインアイディア帳で実装の幅を広げる

ツールと原則を交互に往復するのがこつです。原則の本だけを先に読み切っても、作るものがないと定着しません。

関連記事

• Web 開発本ガイド - フロントエンドからバックエンドまで
• 技術書と動画教材の使い分け - それぞれの強みを活かす
• 技術書の読む順番戦略 - 複数冊を組み合わせて理解を加速させる

まとめ

Web デザインの独学は、コーディング・ツール・デザイン原則の 3 本柱を 1 本ずつ立てれば見通しが立ちます。柱の偏りが「作れるのに決まらない」「知っているのに作れない」の正体です。Web デザインの本を探すときは、その 1 冊がどの柱の本なのかをまず見分けてください。