2020年Webデザインの勉強に役立つ書籍・本まとめ

books-human-alone

こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。

今回は、Webデザインを学ぶ上で、
参考になるおすすめのデザインの書籍を
テーマ別に幾つか紹介しようと思います。

スポンサーリンク

この記事の目次

Webデザインの学習に役立つ書籍・本

「テーマ別おすすめのデザイン書籍・本」

 テーマ
 書籍名
 ① デザインの基礎  ノンデザイナーズ・デザインブック
 デザイン入門教室
 ② Webデザインの基本
 いちばんよくわかるWebデザインの基本
 Webデザイン、これからどうなるの?
 Webデザイン良質見本帳
 ③ デザイン
  ツール 
 Adobe
 Illustrator 
 Illustrator しっかり入門
 Adobe
 Photoshop
 Photoshop しっかり入門
 Adobe XD  世界一わかりやすいAdobe XD
 UIデザインとプロトタイプ制作の教科書
 Sketch  UIデザイナーのためのSketch入門&実践ガイド
 ④ HTML・CSS 
  (JavaScript)

 1冊ですべて身につく
 HTML & CSSとWebデザイン入門講座
 いちばんよくわかる
 HTML5&CSS3デザインきちんと入門
 HTML5&CSS3 標準デザイン講座
 30LESSONS
 HTML5/CSS3 モダンコーディング
 ⑤ デザインテクニック
 なるほどデザイン
 [買わせる] の心理学
 消費者の心を動かすデザインの技法61
 ⑥ レイアウト
 けっきょく、よはく。
 レイアウトデザイン見本帳
 レイアウトの意味と効果が学べるガイドブック
 レイアウト、基本の「き」
 ⑦ 配色  配色デザイン見本帳
 配色の基礎と考え方が学べるガイドブック
 配色スタイルハンドブック
 配色アイデア手帳
 めくって見つける新しいデザインの本
 ⑧ デザイン事例  Webデザインのロジック
 2万回のA/Bテストからわかった
 支持されるWebデザイン事例集

Webデザインをこれから学んでいく人、
現役のWebデザイナーの人にもきっと
参考になる書籍をピックアップしました。

それぞれ楽天ブックスとAmazon、
Kindleで飛べるようになっています。

スポンサーリンク

① デザインの基礎関連の書籍・本

「デザインの基礎となる書籍・本」

  • ノンデザイナーズ・デザインブック
  • デザイン入門教室

その他の書籍は下の記事を参考に。

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

Web限らずにデザインを学び始める人が、
一番はじめに読んで欲しい書籍の一冊。

 タイトル
 (書籍名)
 ノンデザイナーズ・デザインブック
 価格  ¥2,442 (税込)
 発売日  2016/6/30
 特徴 ・海外の訳本ですが、既に第4版まで
 出ているデザインの良書。
・デザインの4つの基本原則が解説
・デザインのコツ・意味をしっかり理解可能
・内容もかなり分かり易く書かれている。
・デザイナーを目指していない人でも
 デザインの基本が学べる。
 おすすめの人 ・これからデザインを学ぶ初心者
・非デザイナー
 その他  

デザイン入門教室

デザインの基本を抑えることができる一冊。

 タイトル
 (書籍名)
デザイン入門教室 [特別講座]
 確かな力を身につけられる
 学び、考え、作る授業
 価格  ¥2,035 (税込)
 発売日  2005/7/1
 特徴 ・デザインの基礎力となるグラフィック
 ワークや、企画・プレゼンまで図解と共に
 学べる良書。
・デザインの大切なところを一通り
 紹介していて基礎をしっかり学べる。
・書店でもよく見かける書籍。
 おすすめの人 ・これからデザインを学ぶ人
・デザイナー1年生の人
 その他  

② Webデザインの基本関連の書籍・本

「webデザインの基本が学べる書籍・本」

  • いちばんよくわかるWebデザイン
  • Webデザイン、これからどうなるの?

  • Webデザイン良質見本帳

いちばんよくわかるWebデザインの基本
きちんと入門

 
 

先ほど紹介したデザインの基本とまた違い
こちらはWebデザインに焦点を置いた書籍。

 タイトル
 (書籍名)
 いちばんよくわかるWebデザインの基本
 きちんと入門
 価格  ¥2,618 (税込)
 発売日  2017/2/25
 特徴 ・「Webデザインとは何なのか」について
 理解できる書籍の一冊。
・圧倒的な高密度の情報量
・短い区切りで読みやすく工夫されている。
・デザインの基本であるレイアウト4つの
 原則やレスポンシブデザインも記載
 おすすめの人 ・Webデザインの基本を学びたい人
 その他  

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

Webデザインの現代 (トレンド) と
未来について語られている書籍。

 タイトル
 (書籍名)
 Webデザイン、これからどうなるの?
 価格  ¥2,200 (税込)
 発売日  2018/1/17
 特徴 ・グラフィック、タイポグラフィ、UI、
 配色、レイアウト等のデザインの動向を
 学ぶことができる書籍。
 おすすめの人 ・最近のWebデザインの動向を知りたい人
 その他 ・今からWebデザインを学ぶ人だけでなく
 現役デザイナーにも参考になる。

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

色んなテーマ別のWebデザインを見れて
特徴、構成、見せ方などのテクニックが
わかるWebデザインの見本帳になります。

 タイトル
 (書籍名)
 目的別に探せて、すぐに使えるアイデア集
 
Webデザイン良質見本帳
 価格  ¥2,530 (税込)
 発売日  2017/6/16
 特徴 ・Webデザインの見本、参考イメージ、
 ターゲットに合わせた配色が紹介される。
・目的別、テーマ別で配色を学べる。
・ただ見本が載っているのでなくて、
 何がどう良いのか?、どんな表現方法があり
 ポイントはどこか?等についてきちんと解説
・デザインパターン、レイアウトも豊富。
具体的にコードについては説明なし
 おすすめの人 ・どんなWebデザインの配色表現をするか
 迷っている人
 その他  

③ デザインツール関連の書籍・本

「デザインツールの使い方が分かる書籍・本」

  • Illustrator しっかり入門
  • Photoshop しっかり入門

  • 世界一わかりやすいAdobe XD
  • UIデザイナーのためのSketch入門&実践ガイド

その他の書籍は下の記事を参考に。

Illustrator しっかり入門

初心者でも分かり易く嫌にならないくらい
丁寧にまとめてある入門書の一冊です。

 タイトル
 (書籍名)
 Illustrator しっかり入門
 価格  ¥2,178 (税込)
 発売日  2018/9/21
 対応バージョン  〜 Illustrator CC 2018
 特徴 基本操作をこの一冊で大体マスター可能
・ファイルの管理から描画の操作、カラー等
 基本的な情報がしっかりにまとめてある。
・作業別にレッスンが細かく分かれていて、
 必要な部分だけを抑えながら読める。
・1ページごとの情報量が多い。
・各パネルの機能説明を一覧で掲載している
 内容  Lesson1 Illustratorの基礎知識
 Lesson2 始めてのIllustrator
 Lesson3 基本図形の描き方と変形操作
 Lesson4 パスの描画と編集
 Lesson5 オブジェクトの編集とレイヤーの基本
 Lesson6 色とグラデーションの設定
 Lesson7 変形・合成・特殊効果
 Lesson8 画像の配置と編集
 Lesson9 文字操作と段落設定
 Lesson10 総合演習
 Lesson11 環境設定とデータ出力
 おすすめの人 ・Illustrator初心者
 その他 ・超初心者の場合は、初めの一歩の解説が
 やや少ないかも?

Photoshop しっかり入門

こちらもIllustratorの入門書と同じ
シリーズのPhotoshopの入門書です。

 タイトル
 (書籍名)
 Photoshop しっかり入門
 価格  ¥2,178 (税込)
 発売日  2018/5/22
 対応バージョン  〜 Photoshop CC 2018
 特徴 基本操作をこの一冊で大体マスター可能
・他の特徴はIllustratorシリーズと同じ内容
 内容  Lesson1 Photoshopの基礎知識
 Lesson2 はじめてのPhotoshop
 Lesson3 色調補正の基本
 Lesson4 選択範囲の作り方
 Lesson5 レイヤーの基本操作
 Lesson6 色の設定とペイント機能
 Lesson7 画像修正の基本
 Lesson8 フィルターの活用
 Lesson9 文字、パス、シェイプ
 Lesson10 総合演習
 Lesson11 便利な機能
 おすすめの人 ・Photoshop初心者
 その他 ・Illustratorと合わせて読むと良い。

世界一わかりやすいAdobe XD
UIデザインとプロトタイプ制作の教科書

Adobe Illustrator/Photoshopと
合わせ使えるようになっておきたい
UIデザインツール「Adobe XD」の
使い方が勉強できる書籍になります。

  タイトル
 (書籍名)
 世界一わかりやすいAdobe XD
 UIデザインとプロトタイプ制作の教科書
 価格  ¥2,728 (税込)
 発売日  2018/6/13
 対応バージョン  〜 Photoshop CC 2018
 特徴 ・基礎の基礎から制作テクニックまで、
 しっかり紹介されているデザイン本。
 おすすめの人 ・Webデザインの制作でUIも勉強したい人
 その他  

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

タイトル通りSkethの入門・実践書で、
Skethの使い方などが分かりやすくて
初心者のために書かれている一冊です。

 タイトル
 (書籍名)
 UIデザイナーのためのSketch入門&
 実践ガイド 改訂弟2版
 価格  ¥3,080 (税込)
 発売日  2018/11/16
 特徴 ・シンボル・オートバランスの活用が
 苦手な人はこの本が理解しやすい。
 おすすめの人 ・WebデザインでSketchを使う人
 その他  

④ HTML・CSS関連の書籍・本

HTML・CSS、 JavaScript・JQuery等の
  知識や使い方が分かる書籍・本」

  • 1冊ですべて身につく
    HTML & CSSとWebデザイン入門講座
  • いちばんよくわかる
    HTML5&CSS3デザインきちんと入門

  • HTML5&CSS3 標準デザイン講座
    30LESSONS
  • HTML5/CSS3 モダンコーディング

その他の書籍は下の記事を参考に。

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

「Webクリエイターボックス」の
Manaさんが書かれたHTML・CSS入門本。

 タイトル
 (書籍名)
 1冊ですべて身につく
 HTML &CSSとWebデザイン入門講座
 価格  ¥2,486 (税込)
 発売日  2019/3/16
 特徴 Amazonのベストセラー本
・Webサイト制作するための基礎から始まり
 HTML・CSSの基本が初心者に分かり易く
 説明されている。
プロの現場で役立つテクニックのみならず
 使い易く美しいデザインを作るコツも記載
 おすすめの人 ・Webbデザイナーとして活躍したい人
 その他  

いちばんよくわかる
HTML5&CSS3デザインきちんと入門

多数の図解による読みやすさや
項目ごとの詳しい解説が特徴的な一冊。

 タイトル
 (書籍名)
 いちばんよくわかる
 HTML5&CSS3デザインきちんと入門
 価格  ¥2,728 (税込)
 発売日  2016/10/27
 特徴 ・図解が多数使われていて、読み易い上に
 それなりに深い内容まで勉強できる書籍。
・Web制作の全体像を把握しやすい構成。
・1つ1つの項目が丁寧に書かれている。
レスポンシブデザインやフレックス
 ボックスについてもきちんと解説
・情報量もある程度ある。
 おすすめの人 ・1つ1つ納得しながら学習を進めたい人
・タブレットやスマホも意識したサイトを
 作りたい人
 その他  

HTML5&CSS3 標準デザイン講座
30LESSONS

HTML5&CSS3について
詳しくまとめられた書籍。

 タイトル
 (書籍名)
 HTML5&CSS3 標準デザイン講座
 30LESSONS
 価格  ¥2,838 (税込)
 発売日  2019/5/24
 特徴 ・分かり易さと内容の充実度で好評であった
 入門書の全面改訂版。
・講義パートと実習パートから成る。
 おすすめの人 ・Webデザインを独学してきた人や
 Webデザイン中級者で知識を整理したい人
 その他  

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

フロントエンジニアと活躍する方が
執筆したおすすめのWebデザイン学習本。

 タイトル
 (書籍名)
 HTML5/CSS3 モダンコーディング
 価格  ¥2,948 (税込)
 発売日  2015/11/3
 特徴 ・主流Webデザインの作り方やテクニックを
 幅広く学べる。
3つのサンプルサイトを実際に作っていく
 学習形式になっている。
・デベロッパーツールの使い方等にも触れて
 結構実用的な良書。
・解説が専門的で画像が少なめ。
 おすすめの人 ・サイト制作の流れから、色々なWeb
 デザインの作り方やテクニックを学びたい人
 その他 ・この本で制作する3つのサンプルは
 ネットで誰でもチェックすることが可能。
 ① スタンダードレイアウト
 ② グリッドレイアウト
 ③ シングルページ

⑤ デザインテクニック関連の書籍・本

「デザインのテクニックが学べる書籍・本」

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

なるほどデザイン

目で見て楽しめる、分かり易いデザイン解説書。

 タイトル
 (書籍名)
 なるほどデザイン
 価格  ¥2,200 (税込)
 発売日  2015/7/31
 特徴 ・文字を読んで理解するのではなくて、
 図解やイラストで見て理解する感じの本。
・内容も面白く、スラスラ読み切れる。
・デザインする上で必要な基礎、概念、
 ルール、プロセスが図解やイラスト、写真等
 ビジュアルで丁寧に解説されている。
・この本のデザイン構成と伝え方そのものが
 とても参考になる。(デザインの表現や企画に
 役立てたい内容)
 おすすめの人 ・これからデザインを学ぶ人
・デザインを依頼する企業の広告宣伝担当者
 その他  

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

デザイン制作において心理学を使う
テクニックがまとめてある書籍。

 タイトル
 (書籍名)
 [買わせる] の心理学  
 消費者の心を動かすデザインの技法61
 価格  ¥2,530 (税込)
 発売日  2018/8/1
 特徴 ・普通のデザイン書籍で学べない
 観点からアプローチして書かれている。
人の心理をつかむデザインの本質などを
 理解できるであろう興味深い一冊。
 おすすめの人 ・人の心理をつかむデザインを学びたい人
 その他  

⑥ レイアウト関連の書籍・本

「デザインのレイアウトが学べる書籍・本」

  • けっきょく、よはく。
    余白を活かしたデザインレイアウトの本
  • レイアウトデザイン見本帳
    レイアウトの意味と効果が学べるガイドブック

  • レイアウト、基本の「き」

その他の書籍は下の記事を参考に。

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

「余白」を題材に書かれている書籍。

 タイトル
 (書籍名)
 けっきょく、よはく。
 余白を活かしたデザインレイアウトの本
 価格  ¥1,980 (税込)
 発売日  2018/7/20
 特徴 ・余白(レイアウト)でデザインの良し悪しが
 決まってしまうことを教えてくれる一冊。
・NG・OK例それぞれ比較できて、
 具体的な場面を理解しやすい。
・余白以外に新人デザイナーがデザインで
 つまずきやすいところを教えてくれる。
・読みやすい工夫が色々ある。
 おすすめの人 ・レイアウトを学ぶ人
・(グラフィック) デザイナー
 その他  

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

デザイン配色を色相・印象・年代別等に
見ることができるデザインの見本帳。

 タイトル
 (書籍名)
 レイアウトデザイン見本帳
 レイアウトの意味と効果が学べるガイドブック
 価格  ¥2,750 (税込)
 発売日  2017/4/18
 特徴 ・配色・レイアウトのアイデアの参考になる
 おすすめの人 ・レイアウトを学ぶ人
・(グラフィック) デザイナー
 その他  

レイアウト、基本の「き」

レイアウトの基本の基本が学べる書籍。

 タイトル
 (書籍名)
 レイアウト、基本の「き」
 価格  ¥2,640 (税込)
 発売日  2017/4/10
 特徴 ・レイアウトのコツを教えてくれる本。
・レイアウト (余白) で当たり前すぎて
 忘れがちなことや、普段なかなか人に
 確認できないことが書かれている。
 おすすめの人 ・レイアウトを学ぶ人
・(グラフィック) デザイナー
 その他  

⑦ 配色関連の書籍・本

「デザインの配色が学べる書籍・本」

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

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

その他の書籍は下の記事を参考に。

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

配色の基本知識からアイデア、
配色の実践まで学べる分かり易い書籍。

 タイトル
 (書籍名)
 配色デザイン見本帳
 配色の基礎と考えが学べるガイドブック
 価格  ¥2,750 (税込)
 発売日  2014/9/24
 特徴 ・配色の入門書に相応しい本
・本のタイトルに「見本帳」とあるが、
 色彩や配色を学ぶ上で大切な基礎の部分が
 抜かりなく全部載っている。
・本の対象が色の知識が全くない人なので、
 かなり分かり易い内容。
・構成は「色の基本知識」「配色の基本」、
「配色の実践」と大きく3つに分かれる。
・RGBとCMYKが掲載してある。
 おすすめの人 ・配色の基礎・理論を学びたい人
 その他  

配色スタイルハンドブック

海外の方が執筆した配色に関する書籍で
オシャレでセンスがとても良い参考書。

 タイトル
 (書籍名)
 配色スタイルハンドブック
 価格  ¥2,640 (税込)
 発売日  2018/1/30
 特徴 ・海外の書籍を和訳した配色の書籍。
15の「雰囲気」がテーマの本
・全900以上のカラーバリエーション
日本の配色書籍にはないテイストの
 テーマが数多く載っている。
・カッコいいイメージ写真も程よく使われ
 アート寄りの配色書籍でセンスが良い。
・海外のデザインをよく参考にする人は、
 買って損がない書籍。
・女性好みの配色を作るのにも役立つ。
・RGBとCMYKが掲載してある。
 内容 ・15Contents
 NATURAL  ナチュラル
 CURIOSITY  好奇心
 DREAMY  ドリーミー
 MAGICAL  マジカル
 FRESH  フレッシュ
 SOLITUDE  孤独
 ROMANTIC  ロマンチック
 MYSTERIOUS  ミステリアス
 RETRO  レトロ
 TRANQUILITY  静けさ
 PLAYFUL わんぱく
 DELICATE  繊細
 TRENDY  トレンディ
 NOSTALGIA  ノスタルジア
 LUSH  蒼々
 おすすめの人 ・配色のアイデア・見本を知りたい人
 その他  

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

色々なテーマに沿って、おすすめの
配色パターンが紹介されている書籍で
デザイナーさんからの指示も高い一冊。

 タイトル
 (書籍名)
 配色アイデア手帖
 めくって見つける新しいデザインの本
 価格  ¥1,958 (税込)
 発売日  2017/12/16
 特徴 ・イメージを形にできる新しい配色の教科書
・様々な場面で使える配色のアイデアが
 これでもかと言う程に豊富にある。
 (配色パレットを使ったデザイン例有り)
・基本配色の組み合わせが網羅されている。
・全テーマ見開き完結で読みやすい。
・本のサイズ感もコンパクトで丁度良い。
・CMYK/RGB/カラーコードもきちんと掲載
・「印象別、年代別、国別、色相別」等
 全127項目のテーマと計3,175種類の配色。
・Amazonの「芸術理論・美学」カテゴリの
 書籍でも売り上げ1位獲得
・累計10万部突破の2018年一番売れた
 デザイン本シリーズ(2冊だけど)の一冊。
 内容 ・全13パートで構成されている。
 1. カジュアル・アクティブ・ポップ
 2. ロマンティク
 3. ナチュラル
 4. フレッシュ・クリア
 5. エレガント
 6. ゴージャス・ラグジュアリー
 7. ダイナミック・エスニック
 8. クラシック・シック
 9. ミステリアス
 10. シャープ・モダン
 11. カラフルワールド
 12. カラフルヒストリー
 13. レインボー・カラーパレット
 おすすめの人 ・配色のアイデア・見本を知りたい人
 その他  

⑧ デザイン事例関連の書籍・本

「実際のデザインの現場で役立つような
   考え方やテクニックなどが学べる書籍・本」

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

Webデザインのロジック

実際のWebサイトの事例を見ながら、
Webデザインの意図を学べる書籍。

 タイトル
 (書籍名)
 Webデザインのロジック
 同業者に語りたくなるコンテンツイメージと
 ブランディングのひみつ
 価格  ¥2,640 (税込)
 発売日  2018/2/26
 特徴 ・企業のWebサイトのデザイン過程を
 知ることができるデザイン本。
 おすすめの人 ・Webデザインのロジックを学びたい人
 その他  

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

この本も実際のA/Bテストのデータから、
優秀なWebデザインの事例を挙げている
貴重なデザイン情報参考の書籍の一冊。

 タイトル
 (書籍名)
 2万回のA/Bテストからわかった
 支持されるWebデザイン事例集
 価格  ¥2,728 (税込)
 発売日  2018/7/25
 特徴 ・実は少しのデザインの違いがあるだけで、
 反応や影響が大きく変化することを学べる。
 おすすめの人 ・支持されるWebデザインを知りたい人
 その他  

最後に

Webデザインの書籍も沢山ありますが、
その中でも特に読んでよかったものや
有名で人気なものをピックアップして
テーマ別に一通り紹介してみました。

紹介した書籍全部とは言いませんが、
ある程度これらのものに目を通せば
Webデザインの土台は出来てきます。

書籍で学ぶことはデザインの知識等を
体系立て自分のものにしていけるので、
動画学習や制作しながら覚えるのとは
また違った学びの方法になってきますね。

書籍である程度、知識が身についたら
あとは手を動かしてはデザイン制作し、
数をこなしスキル面も高めましょう。

たまに、書籍を全部読んだからといって
出来たつもりでいても実際やってみると、
出来ない事も意外に多くあると思います。

そうならないためにインプットしたら
アウトプットすることは大切ですね。

スポンサーリンク

シェアする