Webデザインの学習を行う上でおすすめの書籍を下記のテーマ別にまとめました。

  • デザイン基礎知識
  • Webデザインの基本
  • HTML/CSS/JavaScript
  • CSSテクニック
  • デザインテクニック
  • デザイン事例
  • 配色
  • レイアウト
  • デザインツール
  • 上級者向け

初心者向けの入門書から、現役デザイナーにとっても参考になる書籍を厳選したので、Webデザインのスキルアップを行う際にぜひ参考にしてください。

スポンサーリンク

デザイン基礎知識

まずはデザインに関する基本的な知識を身に付けることができる書籍です。

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

ノンデザイナーズ・デザインブック [第4版]
ノンデザイナーズ・デザインブック [第4版]
  • 著者Robin Williams
  • 出版日2016/09/20
  • 商品ランキング2,344位
  • Kindle版262ページ
  • 出版社マイナビ出版

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

2. デザイン入門教室

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design &IDEA)
デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design &IDEA)
  • 著者坂本 伸二
  • 出版日2015/06/30
  • 商品ランキング8,372位
  • Kindle版ページ
  • 出版社SBクリエイティブ

こちらもデザインに関して幅広い知識を身に付けることができる一冊です。レイアウトや配色、タイポグラフィなど、デザイナーになるためにはどれも欠かせない知識を一通り学ぶことができます。

3. デザインの基本ノート

デザインの基本ノート  仕事で使えるセンスと技術が一冊で身につく本
デザインの基本ノート 仕事で使えるセンスと技術が一冊で身につく本
  • 著者尾沢 早飛
  • 価格¥ 2,462(2018/08/21 10:05時点)
  • 出版日2018/07/21
  • 商品ランキング8,361位
  • 単行本184ページ
  • ISBN-104797396792
  • ISBN-139784797396799
  • 出版社SBクリエイティブ

レイアウトや配色から、印刷物のデザインで気をつけるべきポイントやデザイン制作のワークフローなど、デザインについて様々な視点での紹介がされている書籍です。これからデザインの勉強を始めるという方におすすめです。

Webデザインの基本

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

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

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック
いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック
  • 著者伊藤 庄平,益子 貴寛,久保 知己,宮田 優希,伊藤 由暁
  • 出版日2017/02/24
  • 商品ランキング30,510位
  • Kindle版251ページ
  • 出版社SBクリエイティブ

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

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

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
  • 著者久保田 涼子
  • 出版日2017/06/15
  • 商品ランキング38,682位
  • Kindle版195ページ
  • 出版社SBクリエイティブ

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

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

Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来
Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来
  • 著者森本 友理,鈴木 慶太朗,福岡 陽,三宅 太門
  • 出版日2018/01/17
  • 商品ランキング45,819位
  • Kindle版170ページ
  • 出版社エムディエヌコーポレーション(MdN)

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

HTML/CSS

HTMLとCSSを扱えるようになることが、Webデザイナーとしての第一歩です。様々な書籍が発売されていますが、その中でも分かりやすい書籍をご紹介します。

7. いちばんよくわかるHTML5&CSS3デザイン

いちばんよくわかるHTML5&CSS3デザインきちんと入門
いちばんよくわかるHTML5&CSS3デザインきちんと入門
  • 著者狩野 祐東
  • 出版日2016/10/26
  • 商品ランキング35,112位
  • Kindle版283ページ
  • 出版社SBクリエイティブ

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

8. HTML5/CSS3モダンコーディング

こちらもHTML、CSS、JavaScriptについて学ぶことができる書籍ですが、より実践的な内容が紹介されており、応用的な内容を取り扱っている書籍です。HTMLとCSSの入門書を読み終えたら、レベルアップのために活用するのがおすすめです。

JavaScriptのライブラリを使ったデザイン制作例も紹介されていて、少しだけ応用的なJavaScriptの使い方も学ぶことができます。

スポンサーリンク

CSSテクニック

次は、少し応用的な内容のCSSについて紹介されている書籍をご紹介します。

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

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

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

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ
Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ
  • 著者平澤 隆,森田 壮
  • 出版日2017/09/15
  • 商品ランキング45,207位
  • Kindle版296ページ
  • 出版社インプレス

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

デザインテクニック

次に、デザイナーとしてレベルアップするためのテクニックを身に付けることができる書籍をご紹介します。

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

[買わせる]の心理学 消費者の心を動かすデザインの技法61
[買わせる]の心理学 消費者の心を動かすデザインの技法61
  • 著者中村 和正
  • 出版日2018/08/01
  • 商品ランキング4,889位
  • Kindle版162ページ
  • 出版社エムディエヌコーポレーション(MdN)

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

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

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
  • 著者筒井 美希
  • 価格¥ 2,160(2018/08/21 10:05時点)
  • 出版日2015/07/31
  • 商品ランキング441位
  • 単行本272ページ
  • ISBN-104844365177
  • ISBN-139784844365174
  • 出版社エムディエヌコーポレーション

デザイン事例

実際のデザイン事例を通して、デザインの現場での考え方やテクニックを学ぶことができる書籍をご紹介します。

13. Webデザインのロジック

Webデザインのロジック 同業者に語りたくなるコンテンツイメージとブランディングのひみつ
Webデザインのロジック 同業者に語りたくなるコンテンツイメージとブランディングのひみつ
  • 価格¥ 2,592(2018/08/20 16:40時点)
  • 出版日2018/02/26
  • 商品ランキング41,733位
  • 単行本(ソフトカバー)255ページ
  • ISBN-104866730358
  • ISBN-139784866730356
  • 出版社三才ブックス

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

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

2万回のA/Bテストからわかった 支持されるWebデザイン事例集
2万回のA/Bテストからわかった 支持されるWebデザイン事例集
  • 著者鬼石 真裕,KAIZEN TEAM
  • 価格¥ 2,678(2018/08/21 10:05時点)
  • 出版日2018/07/25
  • 商品ランキング511位
  • 単行本(ソフトカバー)192ページ
  • ISBN-104774199389
  • ISBN-139784774199382
  • 出版社技術評論社

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

配色

デザイン全体のイメージは、配色によって大きく変わります。配色に正解はありませんが、美しく見えるような配色のルールはある程度決まっているので、必ず覚えておきましょう。

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

配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック
配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック
  • 著者伊達千代
  • 価格¥ 2,700(2018/08/21 10:05時点)
  • 出版日2014/09/24
  • 商品ランキング5,711位
  • 単行本160ページ
  • ISBN-104844364529
  • ISBN-139784844364528
  • 出版社エムディエヌコーポレーション

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

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

配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]
配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]
  • 著者桜井 輝子
  • 価格¥ 1,922(2018/08/20 16:40時点)
  • 出版日2017/12/16
  • 商品ランキング482位
  • 単行本304ページ
  • ISBN-104797393246
  • ISBN-139784797393248
  • 出版社SBクリエイティブ

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

レイアウト

レイアウトはデザインにおいて重要な要素の1つです。ぜひレイアウトについてのしっかりとした知識を身に付けてください。

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

レイアウトデザイン見本帳 レイアウトの意味と効果が学べるガイドブック
レイアウトデザイン見本帳 レイアウトの意味と効果が学べるガイドブック
  • 著者関口 裕,内藤 タカヒコ,長井 美樹,佐々木 剛士,鈴木 貴子,市川 水緒
  • 価格¥ 2,700(2018/08/21 10:05時点)
  • 出版日2017/04/18
  • 商品ランキング30,513位
  • 単行本(ソフトカバー)160ページ
  • ISBN-104844366629
  • ISBN-139784844366621
  • 出版社エムディエヌコーポレーション

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

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

けっきょく、よはく。 余白を活かしたデザインレイアウトの本
けっきょく、よはく。 余白を活かしたデザインレイアウトの本
  • 著者ingectar-e
  • 価格¥ 1,944(2018/08/21 10:05時点)
  • 出版日2018/07/20
  • 商品ランキング877位
  • 単行本240ページ
  • ISBN-104802611692
  • ISBN-139784802611695
  • 出版社ソシム

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

デザインツール

続いて、デザインツールの使い方が分かりやすく紹介されている入門書をご紹介していきます。

19. UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド
UIデザイナーのための Sketch入門&実践ガイド
  • 著者吉竹 遼
  • 価格¥ 4,517(2018/08/21 07:31時点)
  • 出版日2017/05/23
  • 商品ランキング160,146位
  • 単行本288ページ
  • ISBN-104802510578
  • ISBN-139784802510578
  • 出版社ビー・エヌ・エヌ新社

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

20. 世界一わかりやすいAdobe XD

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書
世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書
  • 著者北村 崇
  • 価格¥ 2,678(2018/08/21 10:05時点)
  • 出版日2018/06/13
  • 商品ランキング4,061位
  • 単行本(ソフトカバー)240ページ
  • ISBN-104774198382
  • ISBN-139784774198385
  • 出版社技術評論社

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

21. Photoshop しっかり入門

Photoshop しっかり入門 増補改訂版 【CC完全対応】[Mac & Windows対応]
Photoshop しっかり入門 増補改訂版 【CC完全対応】[Mac & Windows対応]
  • 著者まきの ゆみ
  • 価格¥ 2,138(2018/08/21 10:05時点)
  • 出版日2018/05/22
  • 商品ランキング2,847位
  • 単行本252ページ
  • ISBN-104797397241
  • ISBN-139784797397246
  • 出版社SBクリエイティブ

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

22. Illustrator しっかり入門

Illustrator しっかり入門 [CC/CS6/CS5] (しっかり入門シリーズ)
Illustrator しっかり入門 [CC/CS6/CS5] (しっかり入門シリーズ)
  • 著者高野 雅弘
  • 価格¥ 2,138(2018/08/21 08:58時点)
  • 出版日2016/05/28
  • 商品ランキング14,352位
  • 単行本240ページ
  • ISBN-10479738476X
  • ISBN-139784797384765
  • 出版社SBクリエイティブ

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

上級者向け

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

現場のプロが教える WEBデザイン 新・スタンダードテクニック37
現場のプロが教える WEBデザイン 新・スタンダードテクニック37
  • 著者秋元 英輔,安藤 真衣子,五十嵐 亮太,稲葉 聡,大串 肇,小見 祐介,日下部 忠之,倉持 友喜,小杉 厚太,後藤 寛一,シオミ ユタカ,菅原 のびすけ,清野 奨,高遠 和也,高橋 としゆき,中村 大騎,羽野 めぐみ,肥田 真紀子,松本 奈央,miccweb,宮崎 優太郎,森崎 嘉友
  • 価格¥ 3,024(2018/08/21 10:05時点)
  • 出版日2015/08/18
  • 商品ランキング106,116位
  • 単行本256ページ
  • ISBN-104844365185
  • ISBN-139784844365181
  • 出版社エムディエヌコーポレーション

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

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

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)
超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)
  • 著者佐藤 歩,泉水 翔吾
  • 価格¥ 2,786(2018/08/20 20:49時点)
  • 出版日2017/11/23
  • 商品ランキング17,935位
  • 単行本(ソフトカバー)288ページ
  • ISBN-10477419400X
  • ISBN-139784774194004
  • 出版社技術評論社

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

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

まとめ

様々なWebデザイン関連の書籍をご紹介してきました。上記に挙げた書籍を一通り読みながら知識を身に付けていけば、Webデザイナーとして初心者とは言われないくらいの力を付けることができるでしょう。

書籍で勉強することは、知識を体系立てて吸収していくことができるので、とてもおすすめの方法です。書籍で基本的な知識を身に付けたら、手を動かしてアウトプットすることを忘れないようにしましょう。

書籍を読むと分かった気になってしまいがちですが、実際にやってみるとなかなか上手くできないというケースがほとんどです。

おすすめの記事