Webデザインの学習を行う上でおすすめの書籍を下記の4つのステップに分けて、合計10冊を選びました。

  1. デザイン基礎知識
  2. Webデザインの基本知識
  3. HTML/CSS(+JavaScript)
  4. スキルアップ

本当におすすめできる書籍に厳選しているので、Webデザイン書籍選びで悩んでいる方はぜひ参考にしてみてください。

Step.1 デザイン基礎知識

まずはデザインに関する基本的な知識を身に付けることができる2冊です。Webデザイナーのして活躍されている人の多くがこの書籍を読んだことがあるのではないでしょうか。

これからWebデザイナーを目指す人にとって必須の知識を身に付けることができるので、ぜひ読んでみてください。

1. ノンデザイナーズ・デザインブック

これからデザインの勉強を始める人が、まず初めに読んでほしい一冊です。とても分かりやすくデザインの基本について説明されていて、デザイナーを目指している人はもちろん、デザイナーではない方も色々な場面で役に立つデザインの基本知識を得ることができます。

2. なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

Step.2 Webデザインの基本知識

次は、「Webデザイン」の基本を学ぶことができる書籍をご紹介します。

先にHTMLやCSSから勉強してもいいのですが、その前にWebデザインの全体像を把握しておくとより効率よくHTMLやCSSを学ぶことができると思います。

3. いちばんよくわかるWebデザインの基本

こちらはWebデザインにフォーカスして幅広いトピックについて説明されている書籍です。「Webデザインとは何か」について学ぶことができるので、HTMLやCSSについて勉強を始める前に、ぜひ読んでいただきたい一冊です。

4. Webデザイン良質見本帳

様々なテーマのデザインを取り上げて、その特徴やテクニックが紹介されている書籍です。デザインを制作する上でどのような所に気をつければいいのか、まさに「見本」として活用することができる一冊です。

5. Webデザイン、これからどうなるの?

Webデザインの「最新」と「これから」について説明されている書籍。「UI」「レイアウト」「グラフィック」「タイポグラフィ」「配色」について最新のトレンドを学ぶことができます。これからWebデザインを勉強する方だけでなく、実際にWebデザイナーとして働いている方もとても参考になるおすすめの一冊です。

Step.3 HTML/CSS(+JavaScript)

いよいよHTMLとCSSに関する書籍をご紹介します。HTMLとCSSを扱えるようになることが、Webデザイナーとしての第一歩ですね。

様々な書籍が発売されていますが、その中でも特に説明が分かりやすく初心者の方におすすめの書籍をご紹介します。

6. 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

7. HTML5&CSS3デザインきちんと入門

「HTMLとは何か」から始まり、1つ1つのテーマを学んでいくことができる書籍です。説明がとても分かりやすく、全くの初心者でも途中で挫折せずにHTMLとCSSの基本的な知識を覚えることができます。内容もしっかりしていて、HTML・CSSの最初の一冊としてはとてもおすすめです。

Step.4 スキルアップ

最後に、CSS設計、Sass、Githubの3つに関する書籍をご紹介しておきます。必ずしも必要な知識というわけではありませんが、Web制作の現場では当たり前に使われているものなので、早めに覚えておいて損はありません。

8. Web制作者のためのCSS設計の教科書

見た目は同じでも、きれいにCSSが欠かれていないと管理しづらく、修正も大変になってしまいます。「修正しやすいCSS」を身につけることによって、見た目だけじゃなく運用も意識したCSS設計を行えるようになります。

9. Web制作者のためのSassの教科書

Sassとは、CSSを管理しやすく、より効率的に書くための方法です。Web制作会社などでは、ほとんどの場合がCSSをそのまま書くのではなく、SassのようなCSSメタ言語を使って欠かれています。

10. Web制作者のためのGitHubの教科書

GithubはHTMLやCSS、JavaScriptなどのコードを管理するためのサービスです。複数人でコーディングを行う場合はコードの管理をGithubで行えば効率よく作業ができるのでとても役立ちます。

1人でコーディングを行う場合でも、バージョン管理ができたり、クラウド上にコードを残せるのでかなり役立ちます。

もっと本で勉強したい方は

ここまで紹介した10個の書籍を読めば、Webデザインに必要な知識はしっかりと身に付いていると思います。

もっと本で色々なことを知りたいという方のために、さらに専門的だったり応用的な内容の書籍をご紹介しておきます。

デザインテクニック

[買わせる]の心理学 消費者の心を動かすデザインの技法61

心理学をデザイン制作で活用するテクニックが紹介されている書籍です。デザインは目的があり、その目的に適したデザインを作るためには見た目の美しさだけではだめで、実際に効果をあげるためのデザイン制作が必要となります。そんな実践的なデザイン制作を学ぶことができる一冊です。

ほんとに、フォント

フォントに関する

あるあるデザイン

よく目にするようなデザインに名前を付けて1つずつ紹介されている書籍です。初心者の方がデザインの引き出しを増やすのに役立ちそうですね。

デザイン事例

Webデザインのロジック

実際のWebデザイン制作事例を通して、デザインのポイントを学ぶことができる書籍です。通常では知ることができない、企業が公開しているWebサイトのデザイン制作過程を学ぶことができるため、とても貴重な情報を得ることが可能です。

2万回のA/Bテストからわかった 支持されるWebデザイン事例集

こちらも実際に公開されたWebサイトのA/Bテストの結果から、貴重な情報を知ることができる書籍です。A/Bテストの結果から、ちょっとしたデザインの違いが大きな影響を与えるということも理解することができ、とてもためになります。

配色

配色アイデア手帖 めくって見つける新しいデザインの本

テーマごとにおすすめの配色が紹介されている書籍です。印象別、年代別、国別、色相別に様々な配色の見本が全部で3175種類掲載されています。

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック

配色に関する基本的な知識から、テーマ別に配色の実践例が紹介されている書籍です。しっかりと知識を身に付けた上で具体例の解説へと進むことができるので、とても分かりやすく読み進めていくことができ、配色を学ぶ書籍としてはおすすめの一冊です。

レイアウト

けっきょく、よはく。

「余白」をテーマに、レイアウトについて例を取り上げながら説明されている書籍です。NG例とOK例が紹介されているので、それらを見比べながら正しいレイアウトとは何かについて学ぶことができます。

レイアウトデザイン見本帳 レイアウトの意味と効果が学べるガイドブック

印象別、年代別、国別、色相別に色々な配色の例が紹介されている、まさに見本帳に相応しい一冊です。配色に困った時は、この本の中から参考になる配色を探してみるといいアイデアが思い浮かぶかもしれません。

デザインツール

UIデザイナーのためのSketch入門&実践ガイド 改訂第2版

UIデザインツール「Sketch」の使い方が初心者向けに説明されている書籍です。シンボルやオーバーライドを活用できていないような人は、ぜひこの本を読んでみることをおすすめします。

世界一わかりやすいAdobe XD

Adobe製のUIデザインツール「Adobe XD」の使い方が分かりやすく紹介されている書籍です。基本中の基本から、作業を効率化するためのテクニックなども紹介されているので、UIデザインツールにXDを使っている方はぜひ一度読んでみてください。

Photoshop しっかり入門

Photoshopの使い方が初心者向けに分かりやすく説明されている書籍です。Photoshopの入門書は様々な種類のものが発売されていますが、個人的にはこの本が一番わかりやすく説明されていると思います。

Illustrator しっかり入門

こちらはIllustratorの入門書ですね。Photoshopと同様に分かりやすく説明されていて、これからIllustratorの使い方を覚えるという方にはおすすめの入門書です。

上級者向け

【新版】UI GRAPHICS

イケてるアプリやサービスのUIデザインに関する考え方などが紹介されている書籍です。かなり理論的な内容を扱っている書籍ですが、UIデザインのスキルを高めたいという人はこの本を読むと様々な発見があるのではないでしょうか。

内容も非常にしっかりしているので、おすすめの書籍です。

23. WEBデザイン 新・スタンダードテクニック37

最新のWebデザインのテクニックや手法が紹介されている書籍。入門書を読み終えて、HTMLとCSSがある程度使いこなせるようになったら読んでみると、新しい発見が色々とありますよ。

24. 超速! Webページ速度改善ガイド

Webサイトの表示速度を改善するための様々な方法が紹介されている書籍。ページ表示速度は検索順位に影響を及ぼす重要な要素の1つなので、Webサイトを作る時はページ表示速度に注意するようにしましょう。

HTML/CSSの中上級者向けおすすめ書籍はこちらの記事で詳しくご紹介しています。ぜひ参考にしてみてください。

書籍以外にも

書籍でWebデザインを勉強することもできますが、最近ではオンラインで学べるサービスも登場しています。自分に合った方法で学習を進めてみてください。

おすすめの記事