Webデザインを独学で始めようとして書店に行くと、棚には似たようなタイトルの本がずらりと並んでいます。「どれを買えばいいのかわからず、結局1冊も買わずに帰ってきた」という経験がある方も多いのではないでしょうか。
Webデザインの本は、大きく分けると「デザインの考え方を学ぶ本」「コーディングを学ぶ本」「作例を見て引き出しを増やす本」の3種類があります。この違いを知らずに買うと、いま必要ではない本を手に取ってしまい、数ページで止まってしまいます。
この記事では、初心者が本を選ぶときの判断基準と、どういう順番で読み進めれば挫折しにくいかを整理しました。具体的な書籍名も挙げていますので、書店やオンラインストアで探すときの手がかりにしてください。
Webデザインの本は3つの種類に分けられる
本を選ぶ前に、この分類を頭に入れておくだけで迷いが激減します。
1. デザインの考え方を学ぶ本
配色、余白、フォント選び、レイアウトの原則といった、ツールを使わなくても通用する普遍的な知識を扱う本です。Webに限らず、チラシやスライド資料にも応用できる内容が中心になります。
このジャンルの本は、内容が古くなりにくいのが大きな利点です。数年前に出た本でも、書かれている原則は今もそのまま使えます。
このジャンルの代表的な1冊が、後ほど詳しく紹介する『ノンデザイナーズ・デザインブック』です。先に中身を確認しておきたい方はチェックしてみてください。
2. コーディングを学ぶ本
HTMLやCSSの書き方、レスポンシブ対応の実装方法などを扱う本です。デザインを実際のWebサイトとして形にするために必要な知識がまとまっています。
こちらは、逆に情報の鮮度が重要です。Web標準は更新され続けているため、できるだけ新しい版を選ぶ必要があります。
3. 作例を見て引き出しを増やす本
実際のWebサイトやデザイン作例を大量に掲載し、「こういう見せ方がある」という引き出しを増やすためのカタログ的な本です。手を動かすというより、眺めて使う本になります。
| 種類 | 学べること | 買うべき段階 | 鮮度の重要度 |
|---|---|---|---|
| 考え方の本 | 配色・余白・レイアウトの原則 | 最初 | 低い |
| コーディングの本 | HTML・CSSの実装 | 手を動かし始めるとき | 高い |
| 作例集 | デザインの引き出し | ある程度作れるようになってから | 中程度 |
初心者がやりがちな失敗が、いきなり分厚い作例集を買ってしまうことです。作例集は「作れる人が、迷ったときに引くための本」なので、基礎がない段階で買っても眺めて終わってしまいます。
初心者が本を選ぶときの5つの基準
1. 発行年と版を確認する
コーディング系の本は、できるだけ新しいものを選んでください。改訂版が出ている場合は、迷わず新しい版を選ぶのが原則です。デザイン理論の本については、多少古くても問題ありません。
Adobe XDを主題にした書籍は、Adobe XDの新規販売が終了しているため、これから学ぶ教材としては優先度が下がっています。ツール系の書籍は、扱っているツールが現在も提供されているかを確認してから購入してください。
2. 実際に中身を見て、文字量と図の比率を確かめる
Webデザインの本は、視覚的に理解するものが多いため、図版の量が学習効率を左右します。文章がぎっしり詰まった本は、内容は正確でも初心者には読み切れないことがあります。可能であれば書店で実物を確認し、難しければオンラインストアの試し読み機能を使ってください。
3. サンプルファイルの提供があるか
コーディング系の本は、サンプルファイルがダウンロードできるかどうかで進めやすさが変わります。自分の書いたコードと正解を突き合わせられるため、詰まったときに立ち止まる時間が短くなります。
4. 1冊で完結しようとしていないか
「これ1冊でWebデザイナーになれる」といった大きな謳い文句の本は、扱う範囲が広いぶん、各項目の掘り下げが浅くなる傾向があります。全体像をつかむ用途では役に立ちますが、それだけで実務レベルに届くと考えないほうが現実的です。
5. 自分の目的に合っているか
「就職を目指す」のか「自分のお店のサイトを自分で作りたい」のかで、必要な本はまったく変わります。前者ならコーディングとポートフォリオまで、後者ならWordPressやノーコードツールの操作本のほうが近道です。
目的別におすすめしたい本
ここからは、長く読まれている定番書を目的別に紹介します。改訂版が出ている場合は、最新の版を選んでください。
デザインの原則をゼロから学びたい
- 『ノンデザイナーズ・デザインブック』（Robin Williams著／マイナビ出版）：近接・整列・反復・コントラストという4つの原則を、豊富な作例で解説した定番書です。デザイナー以外の職種でも役立つ内容で、資料作成の質を上げたい方にも読まれています。
- 『なるほどデザイン』（筒井美希著／エムディエヌコーポレーション）：「デザインとは何をしていることなのか」を、目で見て理解できるように構成された本です。文章より図版が主役なので、活字が苦手な方でも進めやすい一冊といえます。
- 『デザイン入門教室［特別講義］』（坂本伸二著／SBクリエイティブ）：レイアウト、配色、文字組みといった基礎を、学び・考え・作るという流れで扱う入門書です。演習的な要素があるため、読むだけで終わらせたくない方に向いています。
HTML・CSSを身につけたい
- 『1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］』（Mana著／SBクリエイティブ）：HTMLとCSSの基本から、Webデザインの知識、制作の流れまでを1冊で扱う入門書です。第2版ではモバイルファーストやHTML Living Standardなど、内容が更新されています。最初の1冊として名前が挙がることの多い本のひとつです。
版元の情報はSBクリエイティブ公式サイトで確認できます。改訂の有無を調べるときに便利です。
レイアウトと余白の感覚を鍛えたい
- 『けっきょく、よはく。』（ingectar-e著／ソシム）：余白の使い方をテーマに、OK例とNG例を並べて比較する構成の本です。「なんとなく素人っぽい」の正体が余白にあることが、見ているうちにわかってきます。
- 『ほんとに、フォント。』（ingectar-e著／ソシム）：同じシリーズで、フォント選びに焦点を当てた一冊です。フォントを変えるだけで印象がどう変わるかを、作例で理解できます。
- 『あるあるデザイン』（ingectar-e著）：「よくあるレイアウトのパターン」をワンフレーズで覚えられる構成の本です。手が止まったときの引き出しとして使えます。
ingectar-eのシリーズはソシム公式サイトなどで刊行状況を確認できます。
Webサイトの作例を大量に見たい
- 『Webデザイン良質見本帳［第2版］』（久保田涼子著／SBクリエイティブ）：目的別にWebサイトの作例を探せる構成で、実務でデザインの方向性に迷ったときに引ける本です。ある程度作れるようになってからのほうが、価値を実感しやすくなります。
最初に買うなら「デザイン原則の本1冊」＋「HTML/CSSの入門書1冊」の2冊構成。作例集は、3冊目以降に回すのが失敗しにくい組み立てです。
挫折しない読む順番
本は買った順ではなく、目的の順に読むほうが定着します。おすすめの流れは次のとおりです。
ステップ1：デザイン原則の本を、通しで1周する
まずは考え方の本を最後まで読み切ります。完全に理解しようとせず、7割わかれば次に進むのがコツです。デザイン原則は、実際に手を動かしてから読み返すと理解が深まる性質があるため、1周目で完璧を目指す必要はありません。
ステップ2：HTML/CSSの入門書を写経する
次に、コーディングの入門書を1冊、実際にコードを打ちながら進めます。ここで大切なのは、コピー&ペーストせず自分でタイピングすることです。手を動かす量がそのまま定着量になります。
ステップ3：本と同じものを、題材を変えて作り直す
本のサンプルサイトを完成させたら、同じ手順で「架空のカフェのサイト」など自分で決めた題材をもう1本作ってみてください。ここで初めて、わかったつもりだった部分が浮き彫りになります。
ステップ4：作例集で引き出しを増やす
作れるようになってから作例集を開くと、「この見せ方は自分でも実装できそうだ」という視点で読めるようになります。この段階まで来て、ようやく作例集が武器になります。
ステップ5：デザイン原則の本に戻る
ステップ1で読んだ本をもう一度読み返してください。1周目とは比べものにならないほど内容が入ってきます。同じ本を2周するほうが、新しい本を2冊買うより効果が高い場面は少なくありません。
紙と電子書籍、どちらを選ぶか
紙の本が向いている場面
コーディングの入門書は、紙のほうが進めやすいという声が多くあります。パソコンの画面でコードを書きながら、手元の本を開いたままにできるためです。電子書籍だと、画面を分割するか端末をもう1台用意する必要が出てきます。
厚い技術書を開いたまま固定しておくのは意外と大変なので、ブックスタンド（書見台）があると作業が楽になります。角度を調整できるタイプなら、首への負担も軽減されます。
電子書籍が向いている場面
作例集やデザイン原則の本は、電子書籍でも問題なく読めます。持ち運びやすく、通勤時間などのすき間時間に開けるのが利点です。10インチ前後のタブレットがあれば、図版の多いデザイン書も見開きで読みやすくなります。
両方使うという選択
手を動かす本は紙、眺める本は電子、という使い分けが現実的です。本棚のスペースを圧迫しないよう、役割で分けると管理が楽になります。
よくある質問
Q. 何冊くらい買えばいいですか
最初は2冊で十分です。デザイン原則の本を1冊、HTML/CSSの入門書を1冊。この2冊を最後までやり切ってから、次に何が足りないかを判断して買い足すほうが無駄がありません。同時並行で何冊も開くと、どれも中途半端になります。
Q. 本だけでWebデザイナーになれますか
知識のインプットは本で十分にできますが、就職や案件獲得を保証するものではありません。実務ではポートフォリオや納品経験が問われるため、本で学んだあとに作品を作り続ける工程が必要になります。本は出発点であって、ゴールではないと考えてください。
Q. 中古で買っても大丈夫ですか
デザイン原則の本であれば中古でも問題ありません。ただしコーディング系の本は、古い版だと解説されている書き方が現在の推奨と異なる場合があります。技術書は新しい版を、理論書は中古も可という基準で判断してください。また、サンプルファイルのダウンロード期限が設定されている書籍もある点には留意が必要です。
Q. 図書館で借りるのはどうですか
本が自分に合うかを確かめる目的では有効です。ただし、コーディングの入門書は書き込みながら数週間かけて進めることになるため、手元に置ける形で用意したほうが実用的です。
Q. 動画教材と本、どちらを先に始めるべきですか
ツール操作は動画、考え方と辞書的な参照は本、という役割分担が効率的です。どちらか一方に絞る必要はありません。動画で操作を覚え、本で原則を固める組み合わせが、多くの学習者にとって進めやすい形といえます。
Q. 洋書は読んだほうがいいですか
初心者の段階では日本語の本で十分です。基礎が固まり、海外のデザイン事例を追いたくなった段階で検討すれば問題ありません。
まとめ
Webデザインの本は「考え方の本」「コーディングの本」「作例集」の3種類に分かれ、それぞれ買うべき段階が違います。初心者がまず手に取るべきは、デザイン原則の本とHTML/CSSの入門書の2冊です。作例集は、実際に作れるようになってからのほうが価値を発揮します。
選ぶときは、発行年と版、図版の量、サンプルファイルの有無を確認してください。そして読む順番としては、原則を1周してからコーディングを写経し、題材を変えて作り直したうえで、もう一度原則の本に戻る流れがおすすめです。本の冊数ではなく、1冊をどこまで使い倒したかで実力が決まります。自分の段階に合った1冊から始めてみてください。
