[永久保存版]Webデザインを独学で勉強するためにオススメの本15選



[永久保存版]Webデザインを独学で勉強するためにオススメの本15選

新しいことを独学で学ぶとしたら皆さんどうしますか、と尋ねると大半の人は、本かインターネットと答えると思います。インターネットは無料で様々なことを学ぶことができますが、痒い所に手が届かなかったり、情報が偏っていたりすることがあります。

また、インターネットを使用するという場合、ついつい違うものを調べたり、息抜きに動画見てしまったりと誘惑も多いものです。

そこで今回は、Webデザインを独学で勉強するためにオススメの本15冊厳選しましたので、自分の学びたいことに合わせてみていただけたらと思います。

目次
  1. 2019年独学にオススメの本15選
  2. 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
  3. ノンデザイナーズ・デザインブック
  4. なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
  5. Illustrator逆引きデザイン事典
  6. Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
  7. Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで
  8. 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書
  9. 世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書
  10. クリエイターをめざす人のための、人の心を動かす三ツ星ポートフォリオの企画「虎の巻」―グラフィック・広告・WEB・空間・プロダクトデザイン、アニメ、ゲーム、CG
  11. 配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]
  12. デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~
  13. いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック
  14. 世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書
  15. 初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉
  16. 6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~
  17. まとめ

2019年独学にオススメの本15選

それでは独学でWebデザインを学習するのにオススメな学習本を、初心者向けのものから、デザイン、プログラミングなど幅広い範囲でご紹介していきます。

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

image

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
学べる内容 Webサイト構築、デザインなど
価格 2,260円(税別)
発売日 2019/3/16
出版 SBクリエイティブ
購入 Amazon

この本はWeb関連の情報やデザインについて学べるブログ『Webクリエイターボックス』のManaさんがHTML、CSSなどのWebサイト構築の方法を分かりやすく教えてくれるという内容になっています。

内容はブラウザーやテキストエディタの種類といった一般的なIT知識から丁寧に解説されています。Webサイト制作の基本からスマーフォン対応などのWebサイト作成のための技術を実際のWebサイトの画面などを織り交ぜながら解説してくれますので初心者の方でもすんなり入っていけます。

幅広い内容と丁寧な解説なので、パソコンはそこまで詳しくはないけれど、Webデザインを勉強してみたいと思っている方にはピッタリの1冊ではないでしょうか。

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

image

ノンデザイナーズ・デザインブック
分類 一般デザイン
価格 2,180円(税別)
発売日 2016/6/30(4版)
出版 マイナビ出版
購入 Amazon

ノンデザイナーズ・デザインブックは20年以上前から様々なデザイナーに愛されている、デザインの定番書です。Webデザインの本ではありませんが、Webデザインには様々なコンテンツを見やすく配置するといったデザインセンスも必要となってきます。

この本の特徴は、近接、整列、反復、コントラストという4つの基本原則を良い例、悪い例をそれぞれ挙げて、具体的に解説します。また元々は洋書なのですが日本語版での追加項目として、日本語を使ったデザインでの名刺、フライヤー、ウェブなどの作例が掲載されています。

Webデザインはある程度知っているが、デザインについてもう少しセンスを上げたい方やなどに良さそうです。

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

image

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
学べる内容 一般デザイン
価格 2000円(税別)
発売日 2015/7/31
出版 エムディエヌコーポレーション
購入 Amazon

なるほどデザインはデザインに関するものごとを、なるべく「目で見て楽しめる」形にまとめた本です。この本もノンデザイナーズ・デザインブックと同様にデザインに特化した本ですが、こちらは挿絵やレイアウトがポップで見やすい印象です。

デザインセンスの向上のための具体的なアイデアや、デザインの基礎や概念を豊富なビジュアルで解説してくれているため、楽しみながら「なるほど!」と思わずうなってしまう内容となっています。

この本には紹介ページもありますので、もっと詳しく知りたい方はこちらもご覧ください。

Illustrator逆引きデザイン事典

image

Illustrator逆引きデザイン事典
学べる内容 Illustratorの知識
価格 2,400円(税別)
発売日 2017/2/9
出版 翔泳社
購入 Amazon

Illustrator逆引きデザイン事典はIllustrator CC/CS6/CS5/CS4/CS3と全5バージョンに対応した、逆引き辞典です。逆引きデザイン事典シリーズは知りたいことからすぐ引けるスタイルが人気で、累計40万部を突破している人気シリーズです。

学べる内容は作業環境と操作、オブジェクトの操作から、フィルター効果、グラフの作成、印刷と入稿、CCの最新機能など基本から応用まで幅広く網羅されています。

逆引き辞典は、「あれどうするんだっけなぁ・・・」というやりたいことから引けるため、Illustratorをよく使う人にはあると安心な1冊です。

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

image

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
学べる内容 Webデザイン
価格 2,300円(税別)
発売日 2017/6/16
出版 SBクリエイティブ
購入 Amazon

Webデザイン良質見本帳は415点の厳選した良質なWebサイトを集めた見本集です。デザインセンスは生まれ持ったものではなく、日々の学習によって育まれる部分が多く、良いデザインのものをたくさん見て学ぶということで磨くこともできます。

この本はただデザイン性の高いサイトを乗せているわけでなく、Webサイトを見るだけではわからなかった「デザインの魅力の理由」がきちんと分かるようになっておりますので、自分でサイトをデザインする際の良いアイデアとなることは間違いありません。

デザインに興味がなくても、素敵なWebデザインのサイトは見ているだけで楽しめますので、気軽に楽しめる本でもあります。

Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで

image

Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで
学べる内容 UXデザインについて
価格 2,200円(税別)
発売日 2016/11/14
出版 翔泳社
購入 Amazon

Web制作者のためのUXデザインをはじめる本はUXをはじめて学ぶ人のための本です。UXとはユーザーエクスペリエンス(ユーザー体験)のことで、ユーザーがコンテンツ(Webサイトなど)を利用する際に感じる印象などのことを指します。

本書ではデジタルマーケティング会社でUXデザインを実践してきた執筆陣が、基本から導入までを解説してくれます。実際に導入するためのテクニックや大小2つのプロジェクトのモデルケースを収録していますので、非常に実践的な技術を学ぶことができます。

UXデザインに興味がある方や、ユーザーにとって印象的なサイトを作りたいと思っている方にオススメの書籍です。

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

image

世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書
学べる内容 Illustrator、Photoshop、XDの技術
価格 2,480円(税別)
発売日 2018/10/5
出版 技術評論社
購入 Amazon

この本はWebデザインの現場では良く使われているツール、IllustratorとPhotoshop、プロトタイピングツール(AdobeXD)などの連携や活用法について書かれた書籍です。

仕事を始めたばかりのデザイナーさんの役に立てるように,現役デザイナーとプロのインストラクター4人が集まり,現場で使われているテクニックを幅広く学べるように構成されていますので、Webデザイン初心者でも安心して技術を身に付けることができそうです。

1冊でIllustratorとPhotoshop、AdobeXDが学べる本はあまり多くないので、それぞれのツールを使っている方、これからはじめる方には最適ではないでしょうか。

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

image

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書
学べる内容 HTMLとCSSの技術
価格 2,680円(税別)
発売日 2019/3/1
出版 技術評論社
購入 Amazon

この本はWebサイトを自分で作成したいなら避けて通れない「HTMLとCSS」この2つの技術を「使えます!」といえる力が身につく、クリエイターとしてプロをめざしたい人が最初に読みたい本です。

言語やツールの使い方の基本中の基本からはじまり、読み終わるころにはしっかりと基礎力がついているように、本当に必要な知識だけを選んで15のレッスンを構成されています。練習問題もついていますので学んだ知識が定着しているか試すこともできます。

とりあえずHTML、CSSはWebサイト構築のためには必須の技術ですので、まずはこの本から入るのも悪くないかもしれません。

クリエイターをめざす人のための、人の心を動かす三ツ星ポートフォリオの企画「虎の巻」―グラフィック・広告・WEB・空間・プロダクトデザイン、アニメ、ゲーム、CG

image

クリエイターをめざす人のための、人の心を動かす三ツ星ポートフォリオの企画「虎の巻」―グラフィック・広告・WEB・空間・プロダクトデザイン、アニメ、ゲーム、CG
学べる内容 ポートフォリオの企画
価格 1900円(税別)
発売日 2011/11/1
出版 六耀社
購入 Amazon

本書はクリエイターのためのポートフォリオ企画について書かれています。ポートフォリオの作成方法などを基礎、実践、文章、知識という4つの分野から解説してくれます。

ポートフォリオは言わば「自分が何ができるかを示した名刺」のようなものです。Webデザイナーも転職などで自分のポートフォリオを持参するのは良くあることなので、ポートフォリオをうまく作れるかが就職できるかの大きなポイントになる可能性は十分にありますので、是非身に付けておきたい内容です。

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

image

配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]
学べる内容 配色について
価格 1,780円(税別)
発売日 2017/12/16
出版 SB Creative
購入 Amazon

配色アイデア手帖は欲しい配色がすぐに見つかるイメージを形にできる新しい配色の教科書です。3175の色見本がありますので、きっと自分のイメージした色が見つかるはずです。本のサイズも通常とは少し違いコンパクトで見やすいのも特徴です。

色を扱うための具体例も記載されているので、よりアイデアがひらめきやすいようになっています。また、カラフルでポップな色も多いので見ているだけで楽しめそうです。

Webサイトも色によって与える印象がグッと違ってきますし、顧客への要望にも応じやすくなりますので、知っておいて損はない知識だと思います。

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~

image

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~
学べる内容 デザイン技術
価格 1,850円(税別)
発売日 2015/7/1
出版 SB Creative
購入 Amazon

本書はグラフィックワークから企画書、プレゼン資料まで、様々な場面で役立つデザイン基礎力を見つけるための本です。

デザインはセンスではなく技術を学ぶことで上達することができるという前提のもとに作られていますので、デザインをうまく見せるための技術が詰まった1冊です。学べる内容はデザインをはじめる前に知っておくことから始まり、画像の使い方、配色、文書など多岐にわたります。

Webサイト構築の際にも使える技術がたくさん掲載されていますので、デザインをはじめたばかりの方でもしっかり技術が身に付く内容となっています。

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

image

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック
学べる内容 Web全般、デザイン、配色など
価格 2,380円(税別)
発売日 2017/2/月25
出版 SB Creative
購入 Amazon

本書はWebデザイナーやクリエイターが身に付けておくべき知識が非常に多く収録されています。

学べる内容はレイアウト・配色・写真図版・書体などWebのデザインに関する事柄からHTML5とCSS3・インタラクション・運用とマーケティングまで幅広く、これからのWebクリエイターが必要とする知識を一気に学べる内容となっています。

1つ1つ技術についてはそれぞれの専門書に比べれば内容が薄い部分もありますが、これだけの内容を1冊で学べるというのはとても価値のあることなので、幅広い技術を1冊で習得したい人にピッタリです。

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

image

世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書
学べる内容 Adobe XDの知識
価格 2,480円(税別)
発売日 2018/6/13
出版 技術評論社
購入 Amazon

この本は先ほどご紹介した「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」のAdobeXDに特化したバージョンです。いまやプロトタイピングツールはWebサイト作成の現場でも重要視されている技術です。

プロトタイピングツールとは、実際のWebサイト制作を行う前にプロトタイプを作成するためのツールで、これを行うことによって画面の遷移やアニメーションの動きの確認などができ、開発チーム内での生産性の向上につながります。

プロトタイピングはWebデザイナーだけではなくWebディレクターにも役立ちますので興味のある方は是非、手に取ってみてください。

初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉

image

初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉
学べる内容 Webデザイン全般
価格 2500円(税別)
発売日 2019/9/25
出版 エムディエヌコーポレーション
購入 Amazon

本書は「1日30分からはじめる」をテーマにじっくりWebデザインが学べる内容となっています。Web作成のワークフローなども記載されているため、Webデザイナーになりたいがどうしていいか分からないといった悩みを持っている人に向けた本です。

HTML、CSSの基礎から配色などのデザインなども学べますし、きちんと学習時間が決められているので、自己管理がうまくいかない人にもオススメできます。

ちゃんとしたプロになるための1冊なので、すでにプロの方にはあまりオススメできませんが、これから業界に入りたいと思っている方にピッタリの書籍となっています。

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~

image

6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~
学べる内容 HTML、CSS、デザイン
価格 3,168円(税込)
発売日 2016/8/24
出版 マイナビブックス
購入 Amazon

この本は、マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、HTML5+CSS3をマスターすることを目的とされています。内容はデザインよりではなくHTML、CSSのコーディング寄りの内容となります。

特に、PCでもスマートフォンでも同様のデザインで表示されるレスポンシブデザインについて書かれています。レスポンシブデザインは現在では必須のデザイン手法ですので、是非身に付けておきたい技術です。

基礎的なことは少なめですので、Webデザイン初心者はHTMLとCSSなどを他の入門書で学んでからの方がよさそうです。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

一言にWebデザインを学ぶと言ってもデザイン、コーディング、マーケティングなど幅広い内容があります。自分の得意分野を伸ばしたいのか、自分の苦手なところを治したいのか、など様々な目的に合った書籍を選ぶことがより良いWebデザイナーになるために必要なことではないでしょうか。

関連記事

ふろっく
この記事を書いた人
ふろっく
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp