2020年版：Webデザインの勉強におすすめの本・書籍10冊＋α

本ページには広告が含まれます。

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

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

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

また、その他にもジャンル別でおすすめの書籍をご紹介しています。

Step.1 デザイン基礎知識

まずはこれからデザインを勉強するという方は必読の有名書籍です。Webデザイナーのして活躍されている人の多くがこの書籍を読んだことがあるのではないでしょうか。

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

これからデザインの勉強を始める人が、まず初めに読んでほしい一冊です。「デザインの4つの基本原則」について説明されている書籍で、これを身に付けるだけで、そうでない場合と比べてデザインのクオリティをぐっと高めることができます。

デザイナーを目指している人はもちろん、本のタイトルの通りデザイナーではない方にもおすすめで、色々な場面で役に立つデザインの基本知識を身に付けることができます。

ノンデザイナーズ・デザインブック　［第4版］

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

ノンデザイナーズ・デザインブックと合わせてこれからデザインを勉強するという方におすすめなのが、この「なるほどデザイン」です。かなり有名な書籍ですね。

デザインに関する幅広い基本知識やテクニック、考え方などを身に付けることができます。何度も何度も読み返して、知識として吸収してしまいましょう。

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

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

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

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

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

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

いちばんよくわかるWebデザインの基本きちんと入門　レイアウト／配色／写真／タイポグラフィ／最新テクニック

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

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

Webデザイン良質見本帳　目的別に探せて、すぐに使えるアイデア集

Step.3 HTML/CSS(+JavaScript)

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

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

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

Webクリエイターボックスという有名なサイトを運営されているManaさんという方が書かれた書籍です。初心者目線での説明がとても分かりやすく、これ一冊でたくさんの知識を身に付けることができます。

書籍の構成は下記のようになっていて、Webサイトの基本から始まりHTMLとCSSの使い方、そしてサイト制作例を通して実践的なテクニックなどを身に付けていくことができます。

最初に知っておこう！Webサイトの基本
Webの基本構造を作る！HTMLの基本
Webのデザインを作る！CSSの基本
フルスクリーンのWebサイトを作る
2カラムのWebサイトを制作する
タイル型のWebサイトを制作する
外部メディアを利用する

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

6. スラスラわかるHTML&CSSのきほん

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

スラスラわかるHTML&CSSのきほん第2版

Step.4 スキルアップ

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

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

見た目は同じでも、きれいにCSSが欠かれていないと管理しづらく、修正も大変になってしまいます。「美しいCSSのコードの書き方」を身につけることによって、Webデザイナーとしてのレベルを高めることができます。

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

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

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

Sassとは、CSSを管理しやすく、効率的に書くための方法の1つです。実際の制作の現場では、CSSをそのまま記述するケースはあまり多くなく、Sassなどを使ってCSSを記述することがほとんどです。

ある程度HTMLとCSSの基本知識を身に付けて、1人でサイトを作れるようになったらSassに挑戦してみるといいでしょう。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

参考：

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

Web制作者のためのGitHubの教科書チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ

Githubは、コードを便利に管理するためのツールです。複数人でコードを編集する場合は、Githubなどのコード管理ツールを利用する場合がほとんどです。

実際にWebコーディングの仕事を行う場合は、Github上に納品するというケースも少なくありません。1人でコーディングを行う場合でも、バージョン管理ができたり、クラウド上にコードを残せるのでかなり役立ちます。

Web制作者のためのGitHubの教科書チームの効率を最大化する共同開発ツール Web制作者のための教科書シリーズ

10. けっきょく、よはく。

「余白」をテーマに、事例を元にレイアウトに関する様々な知識が紹介されている1冊です。NG例とOK例が紹介されているので、デザインを改善する時の着眼点を知ることができるというのもおすすめポイントの1つです。

けっきょく、よはく。余白を活かしたデザインレイアウトの本

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

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

もっと本で色々なことを知りたいという方は、より専門的な書籍を読んでみるのがおすすめです。

デザインテクニック

ケースごとに最適なデザインのテクニックを身に付けておくことで、効果を生み出すデザインを作り出すことができます。

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

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

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

ほんとに、フォント

ほんとに、フォント。フォントを活かしたデザインレイアウトの本

この本は、フォントの種類を覚えるというよりは、どういう考え方でフォント選びを行うべきかということを身に付けることができる書籍です。

タイポグラフィはとても奥が深い世界なので、本当の力はデザイン制作を重ねていく中で身に付けていかなければなりませんが、この本を読むことによってスムーズにフォントの選び方やデザインの方法などの基本知識を身に付けることができるはずです。

あるあるデザイン

「あるある！」と思えるような、定番デザインがまとまっている一冊です。引き出しの数を増やしておくことで、デザインの選択肢を増やすことができるため、作ることができるデザインの幅がそれだけ広がります。

初心者の方こそ、この本を読んで定番デザインを覚えておくと役に立つと思います。

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

Webデザイン、これからどうなるの？　キーワードから探るデザイン動向の現在と未来

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

デザイン事例

デザインスキルを伸ばすためには、過去に制作されたデザインを自分の中の引き出しにしまっておき、それらを応用して新しいデザインを生み出せるようにすることが大切です。

Webデザインのロジック

Webデザインのロジック同業者に語りたくなるコンテンツイメージとブランディングのひみつ

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

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

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

配色

配色はセンスや感性も必要ですが、それ以上に必要なのが知識として配色のことを理解できているかどうかという点にあります。教えてもらわないと気づけないような、基本ルールや王道の配色パターンも存在しているので、ぜひ1冊読んでみてください。

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

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

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

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

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

レイアウト

レイアウトはデザイン制作における基本の1つです。しっかりと知識を身に付けておくのがおすすめです。

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

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

レイアウト・デザインの教科書

Webデザインに限らず、様々なジャンルのデザインに関するレイアウトを学ぶことができる書籍です。デザインのレイアウトはいくつかのパターンに分類することができ、それを知っているのとそうでない場合では、制作するデザインのクオリティに大きな違いが出てきます。ぜひレイアウトに関する知識は身に付けておきましょう。