Webデザインの学習を行う上で2020年最新のおすすめの本を下記の4つのステップに分けて、合計10冊を選びました。
- デザイン基礎知識
- Webデザインの基本知識
- HTML/CSS(+ JavaScript)
- スキルアップ
本当におすすめできる書籍に厳選しているので、Webデザイン書籍選びで悩んでいる方はぜひ参考にしてみてください。
また、その他にもジャンル別でおすすめの書籍をご紹介しています。
Step.1 デザイン基礎知識
まずはこれからデザインを勉強するという方は必読の有名書籍です。Webデザイナーのして活躍されている人の多くがこの書籍を読んだことがあるのではないでしょうか。
1. ノンデザイナーズ・デザインブック
これからデザインの勉強を始める人が、まず初めに読んでほしい一冊です。「デザインの4つの基本原則」について説明されている書籍で、これを身に付けるだけで、そうでない場合と比べてデザインのクオリティをぐっと高めることができます。
デザイナーを目指している人はもちろん、本のタイトルの通りデザイナーではない方にもおすすめで、色々な場面で役に立つデザインの基本知識を身に付けることができます。
2. なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
ノンデザイナーズ・デザインブックと合わせてこれからデザインを勉強するという方におすすめなのが、この「なるほどデザイン」です。かなり有名な書籍ですね。
デザインに関する幅広い基本知識やテクニック、考え方などを身に付けることができます。何度も何度も読み返して、知識として吸収してしまいましょう。
Step.2 Webデザインの基本知識
次は、「Webデザイン」の基本を学ぶことができる書籍をご紹介します。
先にHTMLやCSSから勉強してもいいのですが、その前にWebデザインの全体像を把握しておくとより効率よくHTMLやCSSを学ぶことができると思います。
3. いちばんよくわかるWebデザインの基本
こちらはWebデザインにフォーカスして幅広いトピックについて説明されている書籍です。「Webデザインとは何か」について学ぶことができるので、HTMLやCSSについて勉強を始める前に、ぜひ読んでいただきたい一冊です。
4. 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サイトを制作する
- 外部メディアを利用する
6. スラスラわかるHTML&CSSのきほん
「HTMLとは何か」から始まり、1つ1つのテーマを学んでいくことができる書籍です。説明がとても分かりやすく、全くの初心者でも途中で挫折せずにHTMLとCSSの基本的な知識を覚えることができます。内容もしっかりしていて、HTMLとCSSを学ぶ最初の一冊としておすすめの書籍です。
Step.4 スキルアップ
最後に、CSS設計、Sass、Githubの3つに関する書籍をご紹介しておきます。必ずしも必要な知識というわけではありませんが、Web制作の現場では当たり前に使われているものなので、早めに覚えておいて損はありません。
7. Web制作者のためのCSS設計の教科書
見た目は同じでも、きれいにCSSが欠かれていないと管理しづらく、修正も大変になってしまいます。「美しいCSSのコードの書き方」を身につけることによって、Webデザイナーとしてのレベルを高めることができます。
8. Web制作者のためのSassの教科書
Sassとは、CSSを管理しやすく、効率的に書くための方法の1つです。実際の制作の現場では、CSSをそのまま記述するケースはあまり多くなく、Sassなどを使ってCSSを記述することがほとんどです。
ある程度HTMLとCSSの基本知識を身に付けて、1人でサイトを作れるようになったらSassに挑戦してみるといいでしょう。
参考：
9. Web制作者のためのGitHubの教科書
Githubは、コードを便利に管理するためのツールです。複数人でコードを編集する場合は、Githubなどのコード管理ツールを利用する場合がほとんどです。
実際にWebコーディングの仕事を行う場合は、Github上に納品するというケースも少なくありません。1人でコーディングを行う場合でも、バージョン管理ができたり、クラウド上にコードを残せるのでかなり役立ちます。
10. けっきょく、よはく。
「余白」をテーマに、事例を元にレイアウトに関する様々な知識が紹介されている1冊です。NG例とOK例が紹介されているので、デザインを改善する時の着眼点を知ることができるというのもおすすめポイントの1つです。
もっと本で勉強したい方は
ここまで紹介した10個の書籍を読めば、Webデザインに必要な知識はしっかりと身に付いていると思います。
もっと本で色々なことを知りたいという方は、より専門的な書籍を読んでみるのがおすすめです。
デザインテクニック
ケースごとに最適なデザインのテクニックを身に付けておくことで、効果を生み出すデザインを作り出すことができます。
[買わせる]の心理学 消費者の心を動かすデザインの技法61
心理学をデザイン制作で活用するテクニックが紹介されている書籍です。デザインは目的があり、その目的に適したデザインを作るためには見た目の美しさだけではだめで、実際に効果をあげるためのデザイン制作が必要となります。そんな実践的なデザイン制作を学ぶことができる一冊です。
ほんとに、フォント
この本は、フォントの種類を覚えるというよりは、どういう考え方でフォント選びを行うべきかということを身に付けることができる書籍です。
タイポグラフィはとても奥が深い世界なので、本当の力はデザイン制作を重ねていく中で身に付けていかなければなりませんが、この本を読むことによってスムーズにフォントの選び方やデザインの方法などの基本知識を身に付けることができるはずです。
あるあるデザイン
「あるある！」と思えるような、定番デザインがまとまっている一冊です。引き出しの数を増やしておくことで、デザインの選択肢を増やすことができるため、作ることができるデザインの幅がそれだけ広がります。
初心者の方こそ、この本を読んで定番デザインを覚えておくと役に立つと思います。
Webデザイン、これからどうなるの?
Webデザインの「最新」と「これから」について説明されている書籍。「UI」「レイアウト」「グラフィック」「タイポグラフィ」「配色」について最新のトレンドを学ぶことができます。これからWebデザインを勉強する方だけでなく、実際にWebデザイナーとして働いている方もとても参考になるおすすめの一冊です。
デザイン事例
デザインスキルを伸ばすためには、過去に制作されたデザインを自分の中の引き出しにしまっておき、それらを応用して新しいデザインを生み出せるようにすることが大切です。
Webデザインのロジック
実際のWebデザイン制作事例を通して、デザインのポイントを学ぶことができる書籍です。通常では知ることができない、企業が公開しているWebサイトのデザイン制作過程を学ぶことができるため、とても貴重な情報を得ることが可能です。
2万回のA/Bテストからわかった 支持されるWebデザイン事例集
こちらも実際に公開されたWebサイトのA/Bテストの結果から、貴重な情報を知ることができる書籍です。A/Bテストの結果から、ちょっとしたデザインの違いが大きな影響を与えるということも理解することができ、とてもためになります。
配色
配色はセンスや感性も必要ですが、それ以上に必要なのが知識として配色のことを理解できているかどうかという点にあります。教えてもらわないと気づけないような、基本ルールや王道の配色パターンも存在しているので、ぜひ1冊読んでみてください。
配色アイデア手帖 めくって見つける新しいデザインの本
テーマごとにおすすめの配色が紹介されている書籍です。印象別、年代別、国別、色相別に様々な配色の見本が全部で3175種類掲載されています。
配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック
配色に関する基本的な知識から、テーマ別に配色の実践例が紹介されている書籍です。しっかりと知識を身に付けた上で具体例の解説へと進むことができるので、とても分かりやすく読み進めていくことができ、配色を学ぶ書籍としてはおすすめの一冊です。
レイアウト
レイアウトはデザイン制作における基本の1つです。しっかりと知識を身に付けておくのがおすすめです。
レイアウトデザイン見本帳 レイアウトの意味と効果が学べるガイドブック
印象別、年代別、国別、色相別に色々な配色の例が紹介されている、まさに見本帳に相応しい一冊です。配色に困った時は、この本の中から参考になる配色を探してみるといいアイデアが思い浮かぶかもしれません。
レイアウト・デザインの教科書
Webデザインに限らず、様々なジャンルのデザインに関するレイアウトを学ぶことができる書籍です。デザインのレイアウトはいくつかのパターンに分類することができ、それを知っているのとそうでない場合では、制作するデザインのクオリティに大きな違いが出てきます。ぜひレイアウトに関する知識は身に付けておきましょう。
デザインツール
次はデザインツールに関する書籍をご紹介します。デザインツールは、それぞれのツールごとに色々な機能が搭載されていて、それらの機能を理解することで管理しやすいデザインを作ることができたり、効率よくデザイン制作作業が行えるようになります。
UIデザイナーのためのSketch入門&実践ガイド 改訂第2版
UIデザインツール「Sketch」の使い方が初心者向けに説明されている書籍です。シンボルやオーバーライドを活用できていないような人は、ぜひこの本を読んでみることをおすすめします。
世界一わかりやすいAdobe XD
Adobe製のUIデザインツール「Adobe XD」の使い方が分かりやすく紹介されている書籍です。基本中の基本から、作業を効率化するためのテクニックなども紹介されているので、UIデザインツールにXDを使っている方はぜひ一度読んでみてください。
Photoshop しっかり入門
Photoshopの使い方が初心者向けに分かりやすく説明されている書籍です。Photoshopの入門書は様々な種類のものが発売されていますが、個人的にはこの本が一番わかりやすく説明されていると思います。
Illustrator しっかり入門
こちらはIllustratorの入門書ですね。Photoshopと同様に分かりやすく説明されていて、これからIllustratorの使い方を覚えるという方にはおすすめの入門書です。
上級者向け
再度に、上級者向けのかなり専門的な書籍をいくつかご紹介しておきます。
【新版】UI GRAPHICS
イケてるアプリやサービスのUIデザインに関する考え方などが紹介されている書籍です。かなり理論的な内容を扱っている書籍ですが、UIデザインのスキルを高めたいという人はこの本を読むと様々な発見があるのではないでしょうか。
内容も非常にしっかりしているので、おすすめの書籍です。
WEBデザイン 新・スタンダードテクニック37
最新のWebデザインのテクニックや手法が紹介されている書籍。入門書を読み終えて、HTMLとCSSがある程度使いこなせるようになったら読んでみると、新しい発見が色々とありますよ。
超速! Webページ速度改善ガイド
Webサイトの表示速度を改善するための様々な方法が紹介されている書籍。ページ表示速度は検索順位に影響を及ぼす重要な要素の1つなので、Webサイトを作る時はページ表示速度に注意するようにしましょう。
HTML/CSSの中上級者向けおすすめ書籍はこちらの記事で詳しくご紹介しています。ぜひ参考にしてみてください。
書籍以外にも
書籍でWebデザインを勉強することもできますが、最近ではオンラインで学べるサービスも登場しています。自分に合った方法で学習を進めてみてください。
