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

books-human-alone

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

今回は、Webデザインを学ぶ上で、
参考になるおすすめのデザインの書籍を
テーマ別にまとめた記事です。

スポンサーリンク

この記事の目次

Webデザインの書籍・本

この記事では、Webデザインを学べる
本を紹介していきます。

特に、次のような人は読んでみて下さい。

  • Webデザインの参考書が知りたい。
  • Webサイト作りを学びたい。

  • Webデザイナーを目指している。

また、デザイン書籍等を1ヶ月無料で読むなら、
Amazonの「Kindle Unlimitedimpression?a id=1222425&p id=170&pc id=185&pl id=4062 - 2021年Webデザインの勉強に役立つ書籍・本まとめ」がおすすめ。

スポンサーリンク

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

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

 系統  書籍名
 ⓪ デザイン基礎  ノンデザイナーズ・デザインブック
 デザイン入門教室 特別講義
 ①  Webデザイン
 基礎・セオリー
 いちばんよくわかるWebデザインの基本
 きちんと入門 [第2版]
 デザインの学校
 これからはじめるWebデザインの本 [改訂2版]
 HTML&CSSの基本がゼロから身につく
 Webデザインを見るだけノー
 ② Webデザインと
 HTML&CSS、
 サイト制作基本
 1冊ですべて身につく
 HTML &CSSとWebデザイン入門講座
 HTML&CSSとWebデザインが1冊で
 きちんと身につく本
 初心者からちゃんとしたプロになる
 Webデザイン基礎入門
 Webデザインの新しい教科書 改訂3版
 基礎から覚える、深く理解できる。
 これだけで基本がしっかり身につく
 HTML/CSS&Webデザイン1冊目の本
 実習で身につく!新しいWebデザインの教科書
 〜基礎から学べるHTML&CSSデザイン〜
 30時間でマスターWebデザイン 改訂版
 ドリル式 やさしくはじめる
 Webデザインの学校
 ③ Webデザイン知識  Webデザイン・スタンダード
 Webデザイン 第3版
 ウェブの仕事力が上がる標準ガイドブック
 Webデザイン、これからどうなるの?
 キーワードから探るデザイン動向の現在と未来
 ④ Webデザイン
 アイデア・見本
 目的別に探せて、すぐに使えるアイデア集
 Webデザイン良質見本帳
 動くWebデザインアイディア帳
 2万回のA/Bテストからわかった
 支持されるWebデザイン事例集
 Webデザインのロジック
 ⑤ Webデザイン
 実践スキル
 ほんの一手間で劇的に変わる
 HTML&CSSとWebデザイン実践講座
 動くWebデザインアイディア帳 実践編
 ⑥ Webデザインと
 UI/UXデザイン
 ノンデザイナーでもわかる
 UX+理論で作るWebデザイン
 プロが教える
 レスポンシブWebデザイン現場のメソッド
 レイアウト・UIのマルチデバイス対応手法
 ⑦ Webデザイン
 マーケティング
 コンバージョンを上げるWebデザイン改善集
 売れるWEBデザインマーケティング
 ⑧ HTML・CSS関連  いちばんよくわかる
 HTML5&CSS3デザインきちんと入門
 HTML5&CSS3 標準デザイン講座
 30LESSONS
 HTML5/CSS3 モダンコーディング
 ⑨ レイアウト  けっきょく、よはく。
 余白を活かしたデザインレイアウトの本
 レイアウトデザイン見本帳
 レイアウトの意味と効果が学べるガイドブック
 ⑩ タイポグラフィ  タイポグラフィの基本ルール
 プロに学ぶ、一生枯れない永久不滅テクニック
 知りたいタイポグラフィデザイン
 ブランディングのための
 カスタムフォントとタイポグラフィ
 ⑪ フォント・書体見本  実例付きフォント字典改訂版
 定番フォントガイドブック
 ⑫ 配色  配色デザイン見本帳
 配色の基礎と考えが学べるガイドブック
 配色スタイルハンドブック
 配色アイデア手帖
 めくって見つける新しいデザインの本
 ⑬ デザインツール
 Illustrator/Photoshop
 Illustrator しっかり入門
 これからはじめるIllustratorの本
 Photoshop しっかり入門
 これからはじめるPhotoshopの本
 これからはじめる
 Illustrator & Photoshopの本
 Illustrator & Photoshop
 デザインの作り方 アイデア図鑑
 Photoshop & Illustrator
 デザインテクニック大全
 世界一わかりやすい Illustrator &
 Photoshop & XD Webデザインの教科書
 Webデザインのための
 Photoshop+Illustratorテクニック
 ⑭ デザインツール
 Adobe XD
 Adobe XDではじめる
 Webデザイン & プロトタイピング
 一歩先行く現場のスキル
 豊富な作例で学ぶ Adobe XD
 Webデザイン入門
 ⑮ その他  Webデザインの現場で使えるVue.jsの教科書

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

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

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

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

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

Webデザインだけでなく、
デザイン全般の基礎を学べる本。

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

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

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

 タイトル
 (書籍名)
 ノンデザイナーズ・デザインブック
 価格  ¥2,398 (税込)
 発売日  2016/6/30
 特徴 ・海外の訳本ですが、既に第4版まで
 出ているデザインの良書。
・デザインのコツ・意味をしっかり理解可能
・内容もかなり分かり易く書かれている。
・デザイナーを目指していない人でも
 デザインの基本が学べる。
 内容  Chapter1 イントロダクション
 Chapter2 近接
 Chapter3 整列
 Chapter4 反復
 Chapter5 コントラスト
 Chapter6 4つのデザイン原則の復習
 Chapter7 カラーを使ったデザイン
 おすすめの人 ・これからデザインを学ぶ初心者
・非デザイナー
 その他  

デザイン入門教室

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

 タイトル
 (書籍名)
 デザイン入門教室
 特別講義
 価格  ¥2,035 (税込)
 発売日  2015/7/1
 特徴 ・デザインの基礎力となるグラフィック
 ワークや、企画・プレゼンまで図解と共に
 学べる良書。
・デザインの大切なところを一通り
 紹介していて基礎をしっかり学べる。
・書店でもよく見かける書籍。
 内容  1 デザインをはじめる前に – はじめに知っておくべき
 最重要ポイント
 2 レイアウトの基本ルール – 紙面イメージを決定する
 配置設計の基礎知識
 3 写真と画像 – 目的別で学ぶ、写真の選び方と使い方
 4 配色の基本 – 色には人の心を動かす力がある
 5 文字と書体 – 読みやすく、人を惹きつける文字の
 使い方
 6 文章のデザイン – 読みやすい文章制作の基礎知識
 7 インフォグラフィック – 情報の図式化と、
 グラフ・表の作り方
 8 実践演習 – 頭の中のイメージを具体化する
 デザイン実技
 おすすめの人 ・これからデザインを学ぶ人
・デザイナー1年生の人
 その他  

① Webデザインの基礎や
セオリー等が学べる書籍・本
「初心者向け」

「Webデザインの基礎関連本」

  • いちばんよくわかるWebデザインの基本
    きちんと入門 [第2版]
  • デザインの学校
    これからはじめるWebデザインの本 [改訂2版]

  • HTML&CSSの基本がゼロから身につく
    Webデザインを見るだけノート

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

Webデザイン入門のベストセラー本。
最新情報にアップデートして発売中。

 タイトル
 (書籍名)
 いちばんよくわかるWebデザインの基本
 きちんと入門 [第2版]
 価格  ¥2,618 (税込)
 発売日  2021/8/20
 特徴 ・「Webデザインとは何なのか」について
 理解できる書籍の一冊。
・圧倒的な高密度の情報量
・短い区切りで読みやすく工夫されている。
・デザインの基本であるレイアウト4つの
 原則やレスポンシブデザインも記載
 内容  Chapter 01 Webデザインの基本
 Chapter 02 レイアウト
 Chapter 03 配色
 Chapter 04 写真と図版
 Chapter 05 タイポグラフィ
 Chapter 06 HTML5とCSS3
 Chapter 07 インタラクション
 Chapter 08 運用とマーケティング
 おすすめの人 ・Webデザインの基本を一冊で学びたい人
 その他  

これからはじめるWebデザインの本
[改訂2版]

Webデザインを仕事にする上で
知っておきたい基本の知識等を、
やさしい文と絵で分かり易くまとめた本。

 タイトル
 (書籍名)
 デザインの学校
 これからはじめるWebデザインの本 [改訂2版]
 価格  ¥2,178 (税込)
 発売日  2018/9/7
 特徴 ・Webデザインの基本を短期間でしっかり
 学習できる内容。
・実践に必要な周辺知識も学べる。
 内容  01 Webサイトをデザインする
 02 最低限コレだけは!インターネットの
 しくみを知っておこう
 03 HTMLやCSSなど、Webブラウザ側の
 技術を知ろう
 04 Webサイトの構成要素 画像・文字・映像
 05 動的なWebサイトを作る技術
 06 Webサイトを保存・管理・生成する
 Webサーバ側の技術
 おすすめの人 ・超基本的なことからWebデザインを
 学びたい人
 その他  

HTML&CSSの基本がゼロから身につく
Webデザインを見るだけノート

イラストを見るだけでサクッと学べる
「見るだけノート」シリーズの
Webデザイン学習本になります。

 タイトル
 (書籍名)
 HTML&CSSの基本がゼロから身につく
 Webデザインを見るだけノート
 価格  ¥2,178 (税込)
 発売日  2020/9/11
 特徴 ・専門知識がなくても楽々Webサイトが
 作れる内容。
 内容  01 Webデザインを始める前に
 02 Webサイトの骨組みとなるHTMLの基本
 03 Webデザインを決めるCSSの基本
 04 目的別Webデザインの基本
 05 Webサイトの公開
 おすすめの人 ・イラストを見てサクッとWebデザインの
 基礎を学びたい人
 その他  

② WebデザインとHTML&CSS、
サイト制作の基本等が学べる書籍・本
「初心者〜中級者向け」

「WebデザインとHTML&CSSの本」

  • 1冊ですべて身につく
    HTML &CSSとWebデザイン入門講座
  • HTML&CSSとWebデザインが1冊で
    きちんと身につく本

  • 初心者からちゃんとしたプロになる
    Webデザイン基礎入門

  • Webデザインの新しい教科書 改訂3版
    基礎から覚える、深く理解できる。

  • これだけで基本がしっかり身につく
    HTML/CSS&Webデザイン1冊目の本
  • 実習で身につく!新しいWebデザインの教科書
    〜基礎から学べるHTML&CSSデザイン〜

  • 30時間でマスター Webデザイン 改訂版
  • ドリル式 やさしくはじめるWebデザインの学校

WebデザインとHTML&CSS、
サイト制作が学べる本は多くありますが、
特にはじめの2冊が個人的におすすめ。

なお、後半3冊はマイナーな本です。
他の人と被りたくない人はどうぞ。

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

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

 タイトル
 (書籍名)
 1冊ですべて身につく
 HTML &CSSとWebデザイン入門講座
 価格  ¥2,486 (税込)
 発売日  2019/3/16
 特徴 ・全国の書店員がおすすめする本 (CPU大賞)
 第1位受賞、2019年上半期売上 第1位。
Amazonのベストセラー本
・Webサイト制作するための基礎から始まり
 HTML・CSSの基本が初心者に分かり易く
 説明されている。
プロの現場で役立つテクニックのみならず
 使い易く美しいデザインを作るコツも記載
 内容  CHAPTER1 最初に知っておこう! Webサイトの基本
 CHAPTER2 Webの基本構造を作る! HTMLの基本
 CHAPTER3 Webのデザインを作る! CSSの基本
 CHAPTER4 フルスクリーンのWebサイトを制作する
 CHAPTER5 2カラムのWebサイトを制作する
 CHAPTER6 タイル型のWebサイトを制作する
 CHAPTER7 外部メディアを利用する
 おすすめの人 ・これからWebサイトを作り始める初心者
・HTMLとCSSを基本から学びたい人
・美しいデザインのWebサイトを作りたい人
 その他  

HTML&CSSとWebデザインが
1冊できちんと身につく本

Webサイト制作に必要なHTML・CSSの
知識に加え、Webデザインの定番の
レイアウトやデザインを学べる書籍。

 タイトル
 (書籍名)
 HTML&CSSとWebデザインが1冊で
 きちんと身につく本
 価格  ¥2,508 (税込)
 発売日  2017/7/21
 特徴 ・チュートリアル形式で、サンプルサイトを
 作りつつ必要な知識を順番に身につけれる。
複数のレイアウトを一冊で学べる。
・実践的なテクニックも多く掲載。
・言語の解説だけでなくWebデザインの
 基礎についても解説。
・レスポンシブデザインによる
 マルチデバイス対応が分かる。
・サンプルサイトは見栄えも拘ってある。
・サンプルデータがダウンロード可能。
 内容  Chapter1 知っておきたいサイトとデザインの
 きほん知識
 Chapter2 サイト制作の前に準備しておくこと
 Chapter3 知っておきたいHTMLのきほんと書き方
 Chapter4 知っておきたいCSSのきほんと書き方
 Chapter5 フルスクリーンページを制作する
 Chapter6 シングルカラムページを制作する
 Chapter7 2カラムページを制作する
 Chapter8 グリッドレイアウトページの制作と
 動画の埋め込み
 Chapter9 問い合わせページを制作する
 Chapter10 マルチデバイス対応ページを制作する
 appendix ポートフォリオサイトをオリジナルに
 改変してみよう
 おすすめの人 ・はじめてHTMLやCSSを学び、
 これからサイト制作をはじめる人
・超初心者ではないが未経験から
 Webデザイナーを目指している人
 その他  

初心者からちゃんとしたプロになる
Webデザイン基礎入門

WebデザインやHTML・CSSの学習を
「1日30分からはじめる」をテーマに、
優しくしっかり解説した書籍。

 タイトル
 (書籍名)
 初心者からちゃんとしたプロになる
 Webデザイン基礎入門
 価格  ¥2,750 (税込)
 発売日  2019/9/25
 特徴 ・プロWebデザイナーを目指す上で必要となる
 基本的な知識や技術を体系的に学べる。
・HTML・CSSの書き方を初歩から
 教えるだけでなく、サイトを制作し、
 公開・運営するために必要な基礎を全て解説
・各記事ごとに学習時間の目安が書いてあり
 授業や独習で学習教材として活用し易い作り
・サンプルは学習データとしてダウンロード可
 内容  Lesson1 Webサイトの成り立ち
 Lesson2 Webサイトの枠組みを知る
 Lesson3 Webデザインに必要な素材
 Lesson4 HTMLをマスターする
 Lesson5 CSSをマスターする
 Lesson6 シングルページのサイトを作る
 Lesson7 レスポンシブ対応サイトを作る
 Lesson8 Webサイトを公開してみよう
 Lesson9 SNS連携とWebサイトの運用
 おすすめの人 ・Webデザインを基礎から学びたい人
 その他  

Webデザインの新しい教科書 改訂3版
基礎から覚える、深く理解できる。

Webデザイン・Webサイト制作の
「正しい基礎」を伝える
Web制作入門書のロングセラー。

 タイトル
 (書籍名)
 Webデザインの新しい教科書 改訂3版
 基礎から覚える、深く理解できる。
 価格  ¥2,750 (税込)
 発売日  2021/5/28
 特徴 ・WWWやインターネットの仕組みを始まりに
 サイト制作のワークフロー、HTML・CSSの
 技術、Webサイトを公開・運用するまでの
 基礎知識を、系統立てて解説。
・改訂3版では、FlexboxやCSS Grid Layout
 といった、新しい技術使用の解説も追加。
・「なぜ、そうするのか?」といった背景や
 理由にも踏み込んで説明している。
・「自分で考える力」「ずっと役立つ
 応用力」が身につく。
 内容  Lesson1 Webデザインの世界を知る
 Lesson2 Webサイトを設計する
 Lesson3 HTMLの役割とできること
 Lesson4 CSSの役割とできること
 Lesson5 Webサイトを構成する素材
 Lesson6 Webサイトを表現する色
 Lesson7 Webサイトを公開する
 Lesson8 Webサイトを運用する
 Lesson9 Webサイトを制作する
 おすすめの人 ・Web・Webデザインの根本的な仕組みや
 技術の裏側にある背景を深く理解して
 Webデザインを学びたい人
 その他  

これだけで基本がしっかり身につく
HTML/CSS&Webデザイン1冊目の本

Webサイト制作をこれから学ぶ人へ送る
1冊目に最適な超最新のWebデザイン入門書。

 タイトル
 (書籍名)
 これだけで基本がしっかり身につく
 HTML/CSS&Webデザイン1冊目の本
 価格  ¥2,420 (税込)
 発売日  2021/10/14
 特徴 ・手を動かして、Webサイトを作ることを
 重視した構成。
・やさしく要点を押さえた解説。
・オシャレでバリエーション豊かなサンプル
 サイトで、制作できるサイトは計4種類。
・豊富な図解とイラスト、キャラクターによる
 ガイドになっている。
・コーディングの知識だけでなく、学習を
 続ける上での学び方のコツやポイントも紹介
・重要なポイントの理解を助ける動画もあり。
 内容  Part1 HTMLを書いてみよう
 Part2 SNSリンク集を作ってみよう
 Part3 2カラムページを作ってみよう
 Part4 1カラムページを作ってみよう
 Part5 複数ページのサイトを作ってみよう
 おすすめの人 ・1冊目の最新のWebデザイン入門書を
 探している人
 その他  

実習で身につく!新しいWebデザインの教科書
〜基礎から学べるHTML&CSSデザイン〜

Webデザインを基礎から習得できる、
コスパ最強?の学習書。

 タイトル
 (書籍名)
 実習で身につく!新しいWebデザインの教科書
 〜基礎から学べるHTML&CSSデザイン〜
 価格  ¥2,090 (税込)
 発売日  2018/3/19
 特徴 ・Webデザイン、HTML、CSSの基礎、
 Webレイアウトの基礎と応用等を
 図と写真を用いて基礎から詳しく説明。
・数多くの実習課題を掲載していて、
 Webサイトを実際に作成しつつ学習できる。
・レスポンシブデザインについても
 100ページにわたり、随所で解説。
・自作のWebサイトを客観的に評価する方法と
 チェックシートあり。
 内容  第1章  Webデザインの基礎知識
 第2章 HTMLの基礎
 第3章 CSSの基礎
 第4章 Webレイアウトの基礎
 第5章 Webレイアウトの応用
 第6章 拡張技術の活用
 第7章 Webサイトの検証と公開
 おすすめの人 ・コスパが良いWebデザイン学習本が欲しい人
 その他  

30時間でマスター
Webデザイン 改訂版

HTML5,CSS3によるWebページ作成を
例題を通して基礎から学べる入門テキスト。

 タイトル
 (書籍名)
 30時間でマスター
 Webデザイン 改訂版
 価格  ¥1,430 (税込)
 発売日  2019/10/18
 特徴 ・ステップを踏んだ分かり易い説明と、
 豊富な問題で構成し、Webデザインの基本を
 身につけられる。
・他のWeb入門書に比べて比較的価格が安い。
・巻末付録にJavaScriptによるプログラミング
 入門を収録している。
・オールカラー
・Windows10対応
 内容  第1章 Webサイト制作の基礎
 第2章 HTMLの基礎
 第3章 CSSの基礎
 第4章 Webサイトの制作
 第5章 JavaScriptの使用例
 付録  JavaScriptの基礎
 おすすめの人 ・WindowsでWebデザインを学ぶ人
 その他  

ドリル式 やさしくはじめる
Webデザインの学校

ドリルで考えながら、作りながら習得する
やさしく実践的なWebデザイン学習書。

 タイトル
 (書籍名)
 ドリル式 やさしくはじめる
 Webデザインの学校
 価格  ¥2,508 (税込)
 発売日  2016/8/12
 特徴 ・HTMLの知識なしで、レスポンシブWeb
 サイトまで作れるソフト「BiND」を学べる。
・内容は3コース構成
・チュートリアル用の素材は本書サポート
 サイトからダウンロード可能。
 内容  1 Basicコース – Webデザインの基本を
 覚えよう
 2 Drillコース – Webデザイン力を
 アップしよう
 3 Tutorialコース – BiNDでレスポンシブ
 サイトを作ってみよう
 おすすめの人 ・ドリル形式でWebデザインを学びたい人
・プロではないけどWebサイトを
 デザインしたり運営したりしないといけない人
 その他  

③ Webデザインの仕事をする上で
必要な知識等が学べる書籍・本
「初心者〜中級者向け」

「Webデザインの知識本」

  • Webデザイン・スタンダード
    伝わるビジュアルづくりと
    クリエイティブの最新技術
  • Webデザイン 第3版
    ウェブの仕事力が上がる標準ガイドブック

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

Webデザイン・スタンダード
伝わるビジュアルづくりと
クリエイティブの最新技術

制作現場でWebデザイナーに求められる
広範囲な知識とスキルを網羅した本。

 タイトル
 (書籍名)
 Webデザイン・スタンダード
 伝わるビジュアルづくりと
 クリエイティブの最新技術
 価格  ¥3,530 (税込)
 発売日  2018/12/26
 特徴 ・現場の第一線で活躍する著者の知見と
 ノウハウを解説。
・トーン&マナーやサイトの目的に合わせた
 デザインのバリエーションも実例をベースに
 紹介している。
 内容  Introduction | Webサイトができるまで
 Chapter1 | レイアウト
 Chapter2 | 配色
 Chapter3 | UXデザイン
 Chapter4 | UI・グラフィックデザイン
 Chapter5 | モーションデザイン
 おすすめの人 ・Webデザインを学び人、自分の領域を広げ
 ステップアップしたい人
 その他  

Webデザイン 第3版
ウェブの仕事力が上がる標準ガイドブック

Web業界の第一線で活躍する豪華な著者陣が
仕事に必要なWeb知識を最新動向を踏まえて
体系的・網羅的に分かり易く解説している本。

 タイトル
 (書籍名)
 Webデザイン 第3版
 ウェブの仕事力が上がる標準ガイドブック
 価格  ¥3,740 (税込)
 発売日  2018/10/22
 特徴 ・ビジュアルデザインの要点から、情報構造
 設計、HTML5、CSS3、アクセビリティ、
 プログラミング等の基礎まで解説。
・デザイン業務に関する知識を幅広く
 身につけられるように整理・体系化。
 内容  第1章 Webサイトの企画・設計
 第2章 素材とデザイン
 第3章 フロントエンド制作
 第4章 プログラミング
 おすすめの人 ・教科書的な少し固めな
 Webデザイン学習本が欲しい人
 その他  

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

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

 タイトル
 (書籍名)
 Webデザイン、これからどうなるの?
 キーワードから探るデザイン動向の現在と未来
 価格  ¥2,200 (税込)
 発売日  2018/1/17
 特徴 ・グラフィック、タイポグラフィ、UI、
 配色、レイアウト等のデザインの動向を
 学ぶことができる書籍。
・各分野の第一線で活躍するクリエイターや
 識者が今のWebデザインに対する独自の
 意見等を交えつつ執筆したコラムも掲載。
 内容  1 UI
 2 レイアウト
 3 グラフィック
 4 タイポグラフィ
 5 配色
 おすすめの人 ・最近のWebデザインの動向を知りたい人
 その他 ・今からWebデザインを学ぶ人だけでなく
 現役デザイナーにも参考になる。

④ Webデザインのアイデア・
見本となる書籍・本「中級者向け」

「Webデザインのアイデア・見本」

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

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

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

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

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

 タイトル
 (書籍名)
 目的別に探せて、すぐに使えるアイデア集
 
Webデザイン良質見本帳
 価格  ¥2,530 (税込)
 発売日  2017/6/16
 特徴 ・Webデザインの見本、参考イメージ、
 ターゲットに合わせた配色が紹介される。
・415点の厳選した良質なWebサイト掲載。
・目的別、テーマ別で配色を学べる。
・ただ見本が載っているのでなくて、
 何がどう良いのか?、どんな表現方法があり
 ポイントはどこか?等についてきちんと解説
・デザインパターン、レイアウトも豊富。
具体的にコードについては説明なし
 内容  0 Webデザインの基礎知識
 1 印象から考えるデザイン
 2 配色から考えるデザイン
 3 業種・ジャンル別から考えるデザイン
 4 レイアウトや構図から考えるデザイン
 5 素材・フォント・プログラムを使ったデザイン
 6 トレンドのデザイン
 7 パーツ別デザイン
 おすすめの人 ・どんなWebデザインの配色表現をするか
 迷っている人
 その他  

動くWebデザインアイディア帳

サイトを動かす第一歩を踏み出すための
動きの逆引き事典。

 タイトル
 (書籍名)
 動くWebデザインアイディア帳
 価格  ¥3,080 (税込)
 発売日  2021/2/27
 特徴 ・近年のWebサイトで使用されている
 基本的な動きの原理や仕組みをサンプル
 コードと共に紹介。
・19種類の既往から探せて、すぐに使える。
・専用サイトから簡単にコードをコピー&
 ペースとして利用できる。
 内容  01 サンプルサイトから見る機能に関わる動き
 02 「動くWebデザイン」の基礎知識
 03 Webサイトの動きを実現する仕組みと準備
 04 ローディング・画面遷移
 05 ナビゲーション・メニュー
 06 ギャラリー・動画
 07 ボタン・検索
 08 ページトップ・ページ内リンク
 09 グラフ・補足・関連情報の表示
 おすすめの人 ・動くWebデザインの参考書が欲しい人
 その他  

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

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

 タイトル
 (書籍名)
 2万回のA/Bテストからわかった
 支持されるWebデザイン事例集
 価格  ¥2,728 (税込)
 発売日  2018/7/25
 特徴 ・2万回という大量の事例から厳選された
 A/Bテストの実例を元に、どのような
 UIデザインが支持されているかを解説。
・クレディセゾン、SBI証券、ヤフー、
 大東建託、九州旅客鉄道等の厳選35事例掲載
・実は少しのデザインの違いがあるだけで、
 反応や影響が大きく変化することを学べる。
 内容  第1章 なぜA/Bテストが必要なのか
 第2章 A/Bテスト事例集
 おすすめの人 ・支持されるWebデザインを知りたい人
 その他  

Webデザインのロジック

デザインとその論理的なアプローチ方法を
テーマに掲げたWebデザイン本。

 タイトル
 (書籍名)
 Webデザインのロジック
 同業者に語りたくなるコンテンツイメージと
 ブランディングのひみつ
 価格  ¥2,640 (税込)
 発売日  2018/2/26
 特徴 ・Webサイトにおいてどのような仕掛けや
 見せ方で、PVやユーザー数を増やしているか
 デザインとコンテンツ構成の面から解説。
・実際のWebサイトの事例を見ながら、
 Webデザインの意図を学べる。
・企業のWebサイトのデザイン過程を
 知ることができる。
 内容  黒歴史トリオ (日清食品)、
 まるまるまるもりプロジェクト (宮城県丸森町)、
 佐賀県×刃牙 コラボサイト、
 寺西化学工業 (マジックインキ)、
 PUBIC HAIR GROOVING、
 SAPIX YOZEMI GROUPの英検対策講座、
 Type Square (モリサワ)、
 青汁サウンドノベル緑葉館の夜、
 MORE THAN PROJECT、
 MAISON DE FROUGE ICHIGO NO OMISE
 (メゾン・ド・フルージュ) 他
 おすすめの人 ・Webデザインのロジックを学びたい人
 その他  

⑤ Webデザインの実践スキルが学べる
書籍・本「中級者〜」

「Webデザインの実践本」

  • ほんの一手間で劇的に変わる
    HTML&CSSとWebデザイン実践講座
  • 動くWebデザインアイディア帳 実践編

ほんの一手間で劇的に変わる
HTML&CSSとWebデザイン実践講座

「Webクリエイターボックス」の
Manaさんが書かれたWebデザイン入門本の
続編にあたるWebデザイン実践本。

 タイトル
 (書籍名)
 ほんの一手間で劇的に変わる
 HTML&CSSとWebデザイン実践講座
 価格  ¥2,728 (税込)
 発売日  2021/2/20
 特徴 ・5つのサイトから学べる、今のWebサイトを
 作る最新の技術群。
・自由な表現ができるような手描き、斜め、
 グラデーションあらゆる装飾の作り方。
・今日から使える表とグラフ、
 アニメーション等、JavaScriptライブラリ。
・動画、カスタム変数、Emment、Sass、
 問題解決の知識まで学べる。
 内容  1 最初に知っておこう! Webサイトの基本と必携ツール
 2 ランディングページで学ぶ「レスポンシブ
 Webデザインとフォント
 3 ブログサイトで学ぶ「装飾トカラムレイアウト」
 4 コーポレートサイトで学ぶ「表組み、フォーム、
 JavaScript」
 5 イベントサイトで学ぶ「特定ページの作り方と
 アニメーション
 6 ギャラリーサイトで学ぶ「動画と画像の使い方」
 7 HTMLやCSSをより早く、より上手に管理できる方法
 8 サイトの投稿と問題解決
 おすすめの人 ・ 「1冊ですべて身につくHTML & CSSと
 Webデザイン入門講座」を
 読んで良かったと思う人
・HTML & CSSとWebデザインの基礎学習まで
 終えた人
 その他  

動くWebデザインアイディア帳 実践編

「サイトを印象付ける基本の動き」
+「世界観を作る動き」を集めた
現場で使える実践サンプル集。

 タイトル
 (書籍名)
 動くWebデザインアイディア帳 実践編
 価格  ¥2,860 (税込)
 発売日  2021/7/31
 特徴 ・好評の「動くWebデザインアイディア帳」の
 姉妹本。
・実際にWebサイトの印象を決定付けることが
 できる動きについて解説。
・専用サイトから簡単にコードをコピー&
 ペースとして利用できる。
 内容  01 サンプルサイトから見る印象に関わる動き
 02 「動くWebデザイン」の基礎知識
 03 Webサイトの動きを実現する仕組みと準備
 04 最低限覚えておきたい現れ方
 05 背景の動き
 06 エリアの動き
 07 画像リンクの動き
 08 テキストの動き
 09 イラスト・オブジェクトの動き
 おすすめの人 ・前書の「動くWebデザインアイディア帳」を
 読んだ人
 その他  

⑥ Webデザインと
UI/UXデザインが学べる書籍・本

「WebデザインとUI/UXデザインの本」

  • ノンデザイナーでもわかる
    UX+理論で作るWebデザイン
  • プロが教える
    レスポンシブWebデザイン現場のメソッド
    レイアウト・UIのマルチデバイス対応手法

なお、UI/UXデザインが学べる本は
次の記事にまとめています。

ノンデザイナーでもわかる
UX+理論で作るWebデザイン

WebデザインとUXデザインについて
体系立てて説明されている本。

 タイトル
 (書籍名)
 ノンデザイナーでもわかる
 UX+理論で作るWebデザイン
 価格  ¥2,739 (税込)
 発売日  2017/9/26
 特徴 ・Webサイト制作・デザインする際に必要な
 考え方や法則をUXと理論の2つの側面から
 まとめている。
・UXとは何かから始まり、UX設計の方法、
 具体的なデザイン手法まで解説。
 内容  第1章 デザイン思考とWebデザイン
 第2章 WebデザインとUX
 第3章 ビジネスモデルのデザイン
 第4章 サイト構成のデザイン
 第5章 情報のデザイン
 第6章 ユーザー導線のデザイン
 第7章 画面設計のデザイン
 第8章 ユーザー操作とモバイルのデザイン
 第9章 ユーザーの感性に訴えるデザイン
 おすすめの人 ・感覚的にUXデザインを行なっている人
 その他  

プロが教える
レスポンシブWebデザイン現場のメソッド
レイアウト・UIのマルチデバイス対応手法

レイアウトをはじめ、ナビゲーション・
フォーム・モーダルウィンドウ等の
パーツごとにレスポンシブに対応させる
実装方法を解説した本。

 タイトル
 (書籍名)
 プロが教える
 レスポンシブWebデザイン現場のメソッド
 レイアウト・UIのマルチデバイス対応手法
 価格  ¥2,530 (税込)
 発売日  2016/4/15
 特徴 ・シンプルな分かり易い作例をベースに
 ステップ・バイ・ステップ形式で
 解説しているので本質的な仕組みを理解可能
・掲載コードをダウンロードでき、
 コピー&ペースト等で利用できる。
・Googleマップ等の外部API、Webアイコン
 フォント、遅延読み込みといった周辺技術も
 取り上げている。
 内容  Chapter1 基本の確認
 Chapter2 レイアウト
 Chapter3 ナビゲーション
 Chapter4 ギミック
 Chapter5 フォーム
 Chapter6 細かなテクニック
 Chapter7 API・外部サービスの活用
 おすすめの人 ・レスポンシブWebデザインを学びたい人
 その他  

⑦ Webデザインの
マーケティング等に役立つ書籍・本

「Webデザインマーケティング関連本」

  • コンバージョンを上げるWebデザイン改善集
  • 売れるWEBデザインマーケティング

また、Webマーケティングが学べる本は
次の記事にまとめています。

コンバージョンを上げる
Webデザイン改善集

Webサイトのデザインを改善するために
役立つ実際の改善例やTips等、
絶えずWebサイトを改善し続けるための
ヒントを詰め込んだ本。

 タイトル
 (書籍名)
 コンバージョンを上げるWebデザイン改善集
 価格  ¥2,728 (税込)
 発売日  2020/6/29
 特徴 ・多くのWebサイトを改善してきた著者達が、
 実際のデザイン例Before&After、汎用的に
 使える改善Tipsやコンバージョンに
 貢献しやすい施策を解説している。
・大手、中小企業サイトから47事例紹介。
・サイトの種類が違っても再現できるように
 ポイントも押さえてある。
・最終章はプロの一手を打ち続けていくために
 必要な考え方についてまとめてある。
 内容  Chapter1 デザイン事例集
 Chapter2 改善Tips
 Chapter3 コンバージョンを上げるための
 改善を実行しよう
 Chapter4 コンバージョンを上げるための
 サイト改善のプロセス
 おすすめの人 ・コンバーションを上げる改善策を学びたい人
 その他  

売れるWEBデザインマーケティングの法則

爆売れさせるWebデザイン作りを
実現するためのノウハウが載っている本。

 タイトル
 (書籍名)
 売れるWEBデザインマーケティング
 価格  ¥2,420 (税込)
 発売日  2020/11/24
 特徴 ・著者が長年の経験から導き出した知恵や
 知識を体系化した法則を基に、Webサイトの
 問題を見つけ出し解決する方法を徹底解説。
・デザイン知識ゼロからでもOKな内容。
・「BASE」「Shopify」でも活用できるもの
 ばかりとなっている。
 内容  第1章 : なぜWEBサイトをつくった企業の60%が売上を
 上げれないのか?

 第2章 : 売り上げはデザインが9割 — すべての答えは
 ユーザー心理への逆算式プローチ

 第3章 : 売上10倍を当たり前にするWEBデザインの
 法則 — 顧客心理逆算式デザインの法則

 第4章 : 超実践! 自社サイトの課題と解決策の見つけ方
 第5章 : デザインに心理トリックを取り入れて、0円で
 ファンを殺到させる — 逆算式マーケティングデザイン

 第6章 : セオリー無視! 今の流入数で
 最大限コンバージョンさせる方法

 第7章 : WEB以外にも活用可能! 儲かり続ける
 発想力の鍛え方

 おすすめの人 ・Webデザインの力で売上を上げたい人
 その他  

⑧ Webデザインの
HTML・CSS関連の書籍・本

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

  • いちばんよくわかる
    HTML5&CSS3デザインきちんと入門 
  • HTML5&CSS3 標準デザイン講座
    30LESSONS

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

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

いちばんよくわかる
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つのサンプルは
 ネットで誰でもチェックすることが可能。
 ① スタンダードレイアウト
 ② グリッドレイアウト
 ③ シングルページ

⑨ Webデザインの
レイアウトの勉強に役立つ書籍・本

「デザインのレイアウト書籍・本」

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

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

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

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

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

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

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

 タイトル
 (書籍名)
 レイアウトデザイン見本帳
 レイアウトの意味と効果が学べるガイドブック
 価格  ¥2,750 (税込)
 発売日  2017/4/18
 特徴 ・秀逸な実例サンプルと図解が満載。
・レイアウトの基本を始め、イメージや
 言葉から創造されるレイアウトデザインの
 実践方法を丁寧に解説。
・見る人に与える心理的効果や意義、
 意味まで学べる。
 内容  01 レイアウトの意義
 02 レイアウトの基本
 03 レイアウトの実践
 おすすめの人 ・レイアウトを学ぶ人
 その他  

Webデザインの
タイポグラフィの勉強に役立つ書籍・本

「デザインのタイポグラフィ書籍・本」

  •  タイポグラフィの基本ルール
     プロに学ぶ、一生枯れない永久不滅テクニック
     
  • 知りたいタイポグラフィデザイン 

  • ブランディングのための
    カスタムフォントとタイポグラフィ 

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

タイポグラフィの基本ルール
プロに学ぶ、一生枯れない
永久不滅テクニック

タイポグラフィの基礎知識を、
多数の具体例と共に丁寧に解説した本。

 タイトル
 (書籍名)
 タイポグラフィの基本ルール
 プロに学ぶ、一生枯れない永久不滅テクニック
 価格  ¥2,178 (税込)
 発売日  2010/11/30
 特徴 ・Amazonベストセラーの常連でもある本
・第一線で活躍するプロが、あらゆる場面で
 愛用している文字を美しく見せるための
 テクニックを徹底紹介。
・基礎中の基礎から、奥深い文字組の世界まで
 ディープにハマっていくことができる。
 内容  第1章 タイポグラフィの素材を知る
 第2章 基本的なテクニック
 第3章 レイアウトスタンダード
 第4章 書体の選び方と演出スタイル
 第5章 文字を作る
 おすすめの人 ・タイポグラフィの基礎を学びたい人
 その他  

知りたいタイポグラフィデザイン

「入門」「見本帳」「テクニック紹介」
3つの要素がぎゅっと詰まったお得な
デザイン解説書。

 タイトル
 (書籍名)
 知りたいタイポグラフィデザイン
 価格  ¥2,288 (税込)
 発売日  2018/1/11
 特徴 ・「文字組」「文字レイアウト」「文字
 デザイン」の決まり事やスキル・デザインの
 アイデアをオリジナルサンプルを使い紹介。
 内容  1 読ませる文字
 2 魅せる文字
 3 見出しデザインのアイデア
 4 文字レイアウトのアイデア
 5 目を惹く文字デザイン集
 おすすめの人 ・タイポグラフィのルールだけでなく、
 テクニックやアイデアも学びたい人
 その他  

ブランディングのための
カスタムフォントとタイポグラフィ

ブランドごとのカスタムフォントの
事例を多数紹介した本。

 タイトル
 (書籍名)
 ブランディングのための
 カスタムフォントとタイポグラフィ
 価格  ¥5,489 (税込)
 発売日  2020/5/18
 特徴 ・ブランド独自にカスタムした書体を多数掲載
・フォント制作者のインタビューを巻頭に特集
 内容  フォントファウンドリー・ストーリーズ
 ケーススタディ
 プロフェッショナルダイアログ
 既成フォント使用例
 おすすめの人 ・ブランドごとのカスタムフォント
 事例を見たい人
 その他  

⑪ Webデザインの
フォント・書体見本になる書籍・本

「フォント・書体見本関連の書籍・本」

  • 実例付きフォント字典改訂版
  • 定番フォントガイドブック

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

実例付きフォント字典改訂版

まず、持っておきたいフォント字典。

 タイトル
 (書籍名)
 実例付きフォント字典改訂版
 価格  ¥4,290 (税込)
 発売日  2018/4/20
 特徴 モリサワフォントワークスと言った
 定番日本語書体メーカーの全書体見本と共に
 最新の使用事例などを一緒にまとめてある
 本当に便利な書籍。
・国内26社の和文書体約2496種を掲載。
・人気179書体と、そのフォントを使用した
 実例作品 (広告・装丁・商品パッケージ) を
 合わせて紹介。
 おすすめの人 ・フォントを学びたい人
・グラフィックデザイナーWebデザイナー等
 書体・フォントを扱う全デザイナー
 その他  

定番フォントガイドブック

タイトル通り、定番フォントが
豊富に掲載してある書籍の一冊。

 タイトル
 (書籍名)
 定番フォントガイドブック
 価格  ¥2,970 (税込)
 発売日  2017/8/8
 特徴 ・和文・欧文の定番フォント、和欧混植の
 フォントなど約700種類の見本を収録した
 ガイドブック。
・タイトル向けの大きいサイズ、
 本文用の小さいサイズ、五十音、記号、
 アルフォベットなどの組み見本が掲載。
・ぱらぱらとページをめくりながら、
 イメージに合った書体を直感的に探せる。
・定番の和文フォントと組み合わせれる
 欧文フォントも紹介されている。
 内容  1 定番和文書体
 2 定番欧文書体
 3 和欧混植
 4 組版
 5 付録
 おすすめの人 ・フォントを学びたい人
・グラフィックデザイナーWebデザイナー等
 書体・フォントを扱う全デザイナー
 その他  

⑫ Webデザインの
配色の勉強に役立つ書籍・本

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

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

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

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

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

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

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

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

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

 タイトル
 (書籍名)
 配色スタイルハンドブック
 価格  ¥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年一番売れた
 デザイン本シリーズ の一冊。
 内容 ・全13パートで構成されている。
 1. カジュアル・アクティブ・ポップ
 2. ロマンティク
 3. ナチュラル
 4. フレッシュ・クリア
 5. エレガント
 6. ゴージャス・ラグジュアリー
 7. ダイナミック・エスニック
 8. クラシック・シック
 9. ミステリアス
 10. シャープ・モダン
 11. カラフルワールド
 12. カラフルヒストリー
 13. レインボー・カラーパレット
 おすすめの人 ・配色のアイデア・見本を知りたい人
 その他  

⑬ Webデザイン制作で使う
Illustrator/Photoshopの書籍・本

「IllustratorやPhotoshopの
使い方が分かる書籍・本」

  • Illustrator関連の書籍
    ∟ Illustrator しっかり入門
    ∟ これからはじめるIllustratorの本
  • Photoshop関連の書籍
    ∟ Photoshop しっかり入門
    ∟ これからはじめるPhotoshopの本

  • Illustrator&Photoshop関連の書籍
    ∟ これからはじめるIllustrator & Photoshopの本
    ∟ Illustrator & Photoshop
       デザインの作り方 アイデア図鑑
    ∟ Photoshop & Illustrator デザインテクニック大全
    ∟ 世界一わかりやすい Illustrator &
       Photoshop & XD Webデザインの教科書
    ∟ Webデザインのための
       Photoshop+Illustratorテクニック
       [2020/2019対応]

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

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超初心者
 その他 ・超初心者の場合は、初めの一歩の解説が
 やや少ないかも?

これからはじめるIllustratorの本

分かり易さだけで言えば一番の
Illustrator初心者の入門書です。

 タイトル
 (書籍名)
 デザインの学校
 これからはじめるIllustratorの本
 価格  ¥2,068 (税込)
 発売日  2020/1/22
 対応バージョン  〜 Illustrator CC 2020
 特徴 一番分かり易いIllustrator入門書
・少しずつ操作を覚えていくタイプの書籍
・画面の見方や開き方、操作の取り消し等
 基本操作から丁寧に説明されている。
・図解も大きめで見やすく理解しやすい。
・1つの章で1の課題を終わらせる形式で、
 学習の定着度を確認しながら進められる。
・実践性はほとんどない。
・最新版はCCに対応している。
 おすすめの人 ・Illustrator初心者
 その他 ・超初心者向けの一冊なので、
 少しでも操作が分かっている人が読むと
 内容が当たり前すぎとなってしまう。
・ちなみに「デザインの学校」シリーズは、
 他の書籍も非常に分かり易い。

Photoshop しっかり入門

Photoshopの情報の量は多めですが、
初心者でも分かり易く嫌にならない位
丁寧にまとめてある超入門書の一冊です。

 タイトル
 (書籍名)
 Photoshop しっかり入門
 価格  ¥2,178 (税込)
 発売日  2018/5/22
 対応バージョン 〜 Photoshop CC 2018
 特徴 基本操作をこの一冊で大体マスター可能
・情報が綺麗にまとめてある。
・初心者がつまずき易い基礎知識まで
 かなり広くカバーしている。
・作業別にレッスンが細かく分かれていて、
 必要な部分だけを抑えながら読める。
 おすすめの人 ・Photoshop超初心者
 その他 ・超初心者の場合は、初めの一歩の解説が
 やや少ないかも?

これからはじめるPhotoshopの本

分かり易さだけで言えば一番の
Photoshop初心者の入門書です。

 タイトル
 (書籍名)
 デザインの学校
 これからはじめるPhotoshopの本
 価格
 ¥2,178 (税込)
 発売日
 2020/1/22
 対応バージョン
 〜 Photoshop CC 2020
 特徴 一番分かり易いPhotoshop入門書
・2020年発売の非常に新しい本
・画面の見方や開き方、操作の取り消し、
 写真 (画像) の明るさの変更の方法等の
 基本操作が丁寧に説明されている。
 おすすめの人 ・Photoshop初心者
 その他 ・超初心者向けの一冊なので、
 少しでも操作が分かっている人が読むと
 内容が当たり前すぎとなってしまう。
・ちなみに「デザインの学校」シリーズは、
 他の書籍も非常に分かり易い。

これからはじめる
Illustrator & Photoshopの本

デザインの学校シリーズの分かり易い
Photoshop・Illustrator学習の入門書。

 タイトル
 (書籍名)
 デザインの学校 これからはじめる
 Illustrator & Photoshopの本
 価格
 ¥2,508 (税込)
 発売日
 2021/5/10
 対応バージョン
 〜 Adobe CC 2021
 特徴 ・Adobe IllustratorとPhotoshopを
 同時に学べる入門書
・2021年発売の比較的新しい本
・IllustratorとPhotoshopの両方の情報が
 記載されるので、各情報量は少なくなる。
・作例をたどりつつ、実践できる内容。
・機能を比較しながら、学習も可能。
 内容  0 IllustratorとPhotoshopの初期設定と基本操作
 1 基本図形でかんたんな絵を描こう – Illustrator
 2 下絵をなぞって線画を描こう – Illustrator
 3 線画に色を塗ろう – Illustrator
 4 ロゴタイプを作ろう – Illustrator
 5 ロゴタイプに添えるマークを作ろう – Illustrator
 6 写真を編集しよう – Photoshop
 7 写真を加工しよう – Photoshop
 8 写真を切り抜いて合成しよう – Photoshop
 9 制作したパーツをレイアウトしよう
 – Illustrator&Photoshop
 おすすめの人 ・IllustratorとPhotoshopを比較しながら
 学習したい初心者
 その他 ・超初心者向けの一冊なので、
 少しでも操作が分かっている人が読むと
 内容が当たり前すぎとなってしまう。
・ちなみに「デザインの学校」シリーズは、
 他の書籍も非常に分かり易い。

Illustrator & Photoshop
デザインの作り方 アイデア図鑑

基本から実践テクニックまで
プロのワザが一気に学べる本。

 タイトル
 (書籍名)
 Illustrator & Photoshop
 デザインの作り方 アイデア図鑑
 価格  ¥2,640 (税込)
 発売日
 2021/6/22
 対応バージョン
 〜 Photoshop  CC 2021
 特徴 ・4人の著者による「手順」「素材」
「完成データ」が揃った全入りの
 デザイン学習書
・役立つテクニック92レシピ
 内容  Chapter 01 デザインの基本
 Chapter 02 レイアウト
 Chapter 03  写真
 Chapter 04  配色
 Chapter 05 タイポグラフィ
 Chapter 06  ロゴ、イラスト
 Chapter 07 デザインの実践
 おすすめの人 ・IllustratorとPhotoshopを使った
 デザインの作り方を最新の本で学びたい人
 その他  

Photoshop & Illustrator 
デザインテクニック大全

一冊でPhotoshopとIllustratorの
デザイン制作テクニックが分かる本

 タイトル
 (書籍名)
 Photoshop & Illustrator
 デザインテクニック大全
 価格  ¥2,640 (税込)
 発売日
 2018/4/20
 対応バージョン
  Photoshop CS6 〜 CC 2018
 特徴 ・作品を生み出す89のテクニック。
・定番の加工からトレンド技術まで
 どんな分野のデザインも作れる内容。
・Photoshopで使えるブラシや
 グラデーションの購入特典あり。
・学習用の画像は全てダウンロード可能。
 おすすめの人 ・PhotoshopとIllustratorを今まで以上に
 上手く使いこなしたい人
 その他  

Photoshop & Illustrator & XD
Webデザインの教科書

Webデザインの定番の入門書。

 タイトル
 (書籍名)
 世界一わかりやすい Illustrator &
 Photoshop & XD Webデザインの教科書
 価格  ¥2,728 (税込)
 発売日
 2018/10/15
 対応バージョン
 Photoshop CS6 〜 CC 2018
 特徴 ・Webデザインで必要なるIllustratorと
 Photoshop、そしてXDも学べる本。
解説がかなり省略されている。
 (Adobeソフト初心者には不向き)
・作業テクニックが参考になる。
 おすすめの人 ・Webデザインを学習したい人
 その他  

Webデザインのための
Photoshop+Illustratorテクニック
[2020/2019対応]

Webデザインの作業や業務で使える
 PhotoshopとIllustratorのテクニック本。

 タイトル
 (書籍名)
 Webデザインのための
 Photoshop+Illustratorテクニック
 [2020/2019対応]
 価格  ¥2,640 (税込)
 発売日
 2020/8/1
 対応バージョン
 Photoshop CC 2019 〜 CC 2020
 特徴 ・Webデザインの見た目を魅力的にしたり、
 Webデザインの制作を効率化するための
 テクニックを目的別に作例を通して解説。
・63の知識とテクニックが載っている。
 内容 ・CONTENTS
 CHAPTER1 Webデザイン+Photoshop+
 Illustratorの基礎知識
 CHAPTER2 ワイヤーフレーム制作で使えるテクニック
 CHAPTER3 画像処理に使えるテクニック
 CHAPTER4 パーツ制作で使えるテクニック
 CHAPTER5 カンプ制作で使えるテクニック
 CHAPTER6 コーディング向けに使えるテクニック
 おすすめの人 ・Webデザインを学ぶ人
 その他  

⑭ Webデザイン制作で使う
Adobe XDの書籍・本

「Adobe XDの使い方が分かる書籍・本」

  • Adobe XDではじめる
    Webデザイン & プロトタイピング
    一歩先行く現場のスキル 
  • 豊富な作例で学ぶ Adobe XD
     Webデザイン入門 
     

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

Adobe XDではじめる
Webデザイン & プロトタイピング
一歩先行く現場のスキル

コーディングに適した
プロトタイプが作れる
Adobe XD本。

  タイトル
 (書籍名)
 Adobe XDではじめる
 Webデザイン & プロトタイピング
 一歩先行く現場のスキル
 価格  ¥2,750 (税込)
 発売日  2020/5/29
 対応バージョン  
 特徴 ・WebデザインとUIのプロタイピングを
 高品質なサイトを作りながら、
 現場のワークフローに沿って学んでいく本
・現場レベルで求められるスキルを
 より実践的な学び方で習得できる。
・XD特有のクセの解決メモが役立つ。
・キャプションも多く丁寧で分かり易い内容
・細かい補足が多いのも特徴的。
・Mac向けなのでWindowsの場合は少し不便
 内容  1 Adobe XDの基本と製作準備
 2 ワイヤーフレームの制作
 3 スマートフォン版デザインカンプの制作1
 トップページ
 4 スマートフォン版デザインカンプの制作2
 下層ページ
 5 インタラクティブ・プロトタイプの制作
 6 プロトタイプとデザインスペックの共有
 7 デスクトップ版デザインカンプの制作
 8 コーディングの準備と画像の書き出し
 9 動きのあるUIの制作
 10 プラグインの活用
 おすすめの人 ・プロトタイピングを実践的に学びたい人
 その他  

豊富な作例で学ぶ Adobe XD
Webデザイン入門

初心者からプロまで、
すぐに使える知識が身につく一冊。

 タイトル
 (書籍名)
 豊富な作例で学ぶ Adobe XD
 Webデザイン入門
 価格  ¥2,838 (税込)
 発売日
 2021/3/22
 対応バージョン
  Adobe XD CC 2021
 特徴 ・初めてのXDでもこの一冊で使いこなせる
 内容で、優しく丁寧に解説している。
・豊富な作例で手軽にUIパーツ作成方法が
 学べる。
・業種別、業態別のWebサイト制作を、
 現場のプロが紹介。
・特典としてワイヤーフレームがあるので、
 それをすぐに実務に役立てられる。
 内容  第1章 Adobe XDの準備
 第2章 Adobeツール初心者のための
 基本操作
 第3章 XD初心者のための作例体験
 第4章 デザインとコミュニケーション
 第5章 業種別に作るWebサイト
 第6章 思考の整理シーンでの活用方法
 第7章 将来を見据えた機能
 おすすめの人 ・最新のAdobe XD学習本が欲しい人
 その他  

⑮ その他のWebデザイン関連の本

「その他の本」

  • Webデザインの現場で使えるVue.jsの教科書

Webデザインの現場で使える
Vue.jsの教科書

「Webの見た目」を作る人に向けた
Vue.jsの入門書です。

 タイトル
 (書籍名)
 Webデザインの現場で使えるVue.jsの教科書
 価格  ¥3,630 (税込)
 発売日  2020/5/1
 特徴 ・難しいことは極力省いて、図を用いながら
 できるだけ平易に解説。
・よく使われるUI – カルーセルパネルや
 ショッピングカートのレシピを通じて
 Vue.jpの基礎が学べる。
 内容  1 スタートアップ – なぜVue.jsが必要なのか?
 2 Vue.jsのためのJavaScriptの基礎
 3 Vue.jsのデザインのキホン
 4 簡単なUIを作ってみよう
 5 現場で使えるUIデザインレシピ集
 おすすめの人 ・Webデザインの現場でVue.jpを使いたい人
 その他  

最後に

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

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

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

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

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

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

なお、イラストやデザイン関連の書籍は、
下の記事に一通りまとめています。

スポンサーリンク

シェアする