現役のプロが選ぶWebデザインを独学したい方におすすめの本20選【2023年最新版】

公式サイトで見る

こんにちは！現役のWebデザイナーのずぼらなオッター（@Otter_zubora）です。

Webデザイナーの仕事は、クライアントが思い描いているWebサイトやサービスを制作できるよう、まずは全体の構成とレイアウトを考え、AdobeのIllustratorやPhotoshop、XD、または最近ではFigmaやCanvaなどのデザインソフトを活用し、デザインを制作する業務になります。

この記事では、現役でプロのWebデザイナーがこれからWebデザイナーを目指す上で必ず頭に入れておくべき、「HTML/CSS/JavaScriptの基礎知識」「デザインツール（Photoshop・Illustrator・XD・Figma）の使い方」をテーマに、おすすめの本をジャンル別に20冊ご紹介します。

Webデザイナーへの道：やめとけと言われる理由と向き合う方法Webデザイナーへの道は魅力的ですが、時には「やめとけ」と言われることもあります。なぜでしょうか？この記事では、その理由と向き合う方法について探っていきます。競争の激化や技術の進化による変化、そして厳しい労働条件など、様々な要素が絡んでいます。しかし、それに立ち向かい、成功するためのヒントやモチベーションの維持方法もあります。Webデザイナーとしての可能性に向けて、一緒に探求していきましょう。...

Webデザインの概要を把握するための本10選

＼通学・オンラインで学べる卒業のないWebスクール／

この章では、Webデザインの全体についてわかりやすく解説している書籍をご紹介します。Webデザイン初学者の方やWebデザインをこれから学びたい方におすすめです。

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

おすすめ度：
（Kindle版：2,356円 / 単行本：1,070円）

本書は、レイアウト4つの原則とレスポンシブWebデザイン。

今日から使える配色の基本と、実例デザインの配色見本集、ユーザーの心を動かす! 写真と図版の使い方、タイポグラフィの選び方、フレックスボックス、CSSグリッド、インタラクション、マーケティングの知識まで幅広くと1冊で学ぶことができます。

この一冊でWebデザイナーに必須の基礎知識が網羅できるためまずはこの本からはじめることをおすすめします！

＼今すぐ購入したい方はこちら／

新人デザイナーのための Webデザインを基礎から学べる本

おすすめ度：
（単行本：2,200円）

本書はデザインの考え方の基礎から、「文字」「配色」「画像」といった各パーツごとの役割とその扱い方、そして使い勝手のよい「ナビゲーション」をいかに構築するか、それらを統合したさまざまな「レイアウト」を定番のパターンや豊富な作例を見ながら学んでいくことができます。

まとめとしてターゲット層別のWebサイトのデザイン例も紹介されているためターゲット層でデザインがどう違うのかを実例で学べます。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（単行本：2,200円）

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

初学者の方が、プロのWebデザイナーを目指す上で必要となる基本的な知識や技術を体系的に学ぶことができます。

また、本書は各記事ごとに学習時間の目安を記載しており、授業や独習で学習教材として活用しやすい作りを目指しているので学習プランを組み立てやすいことから独学でWebデザインを勉強する方にはおすすめです。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（Kindle版：2,420円 /単行本：2,750円）

本書はWeb制作入門書のロングセラーで、デザインの「背景」や「理由」を知ることで、一生役立つ応用力が身につく本です。

また、本書はWebデザイン・Webサイト制作の「本当に必要な正しい基礎」を伝える入門書の改訂版となっております。改定前は星3.3だったのが改訂版は2023年現在、星4.0となっております。

WWWやインターネットの仕組みを始まりに、サイト制作のワークフロー、HTML・CSSの技術的な解説、Webサイトを公開・運用するまでの基礎知識を、系統立てて解説しています。

印刷&WEBコンテンツ制作の基礎知識

おすすめ度：
（Kindle版：2,822円 /単行本：2,970円）

本書は印刷やWEB業界で仕事をしている人向けのコンテンツ制作の実践的ガイドッブックです。

プランニング、コンセプト、カンプ作りから始まり、実制作、品質チェック、最終のデータ入稿まで、制作現場で求められる基礎知識を学ぶことができます。

クリエイターはもちろんのこと、新入社員や営業マンも必携の1冊です。

Webデザインと印刷物のデザインは別物だと考えられますが、デザインという点では印刷のデザインもWebデザインにとって必要な知識なので今回1冊ピックアップしました。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（Kindle版：1,980円 /単行本：2,200円）

本書では「デザイン＝楽しい」を実感できる新しいデザインの1冊です。

デザインする上で必要な基礎、概念、ルール、プロセスを図解やイラスト、写真などのビジュアルで解説しています。

現場で活躍しているデザイナーが身近にあるわかりやすいものに例えたり、図解、イラスト、別のものに置き換えて見方を変えてみたり…豊富なビジュアルとともにわかりやすくひも解いた、楽しみながらデザインのあれこれがわかる「なるほど！」と思える内容が盛りだくさん。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（Kindle版：1,832円 /単行本：2,035円）

本書はWebデザインという枠だけじゃなくグラフィックワークから企画書、プレゼン資料まで網羅できます。

デザイン基礎力は、一生役立つ武器になります。

これからデザインをはじめる人に読んでほしい、とことん丁寧な本格入門書、遂に発刊されました。現場のプロが教える本書はこれからWebデザイナーを目指す方にもぴったりです。

＼今すぐ購入したい方はこちら／

すべての仕事はデザインから始まる。

おすすめ度：
（Kindle版：1,485円 /単行本：1,738円）

本書では、デザイン発注を切り口に「デザインプロセスのコミュニケーション」「創造性への理解と、センスの育て方」を学べる実践書として、デザイナーでない人がデザインの工程に参加するための具体的な方法をまとめています。

著者はデザイナーとして活動しながら、アートディレクター、東京造形大学の教授の側面を持ち、制作者でもありながらもデザインを発注する立場への造詣も深い方です。

＼今すぐ購入したい方はこちら／

一生懸命デザインしたのにプロっぽくなりません。

おすすめ度：
（Kindle版：1,663円 /単行本：1,848円）

本書は駆け出しデザイナーに必要な「デザイン知識」と「デザイナーマインド」がまるごとわかります。

悩めるデザイン初心者のために情報発信をし続けて人気を集めるプロデザイナーがアドバイス。もっと早く知っておきたかったデザインテクニックと知識、考え方について本音でお教えします。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（Kindle版：2,158円 /単行本：2,398円）

本書はデザインの「4つの基本原則」をしっかり学ぶことができます。これを知るだけで、あなたのデザインはずっとぐっと、良くなります。

プロではなくても、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい。そんなあなたのための、デザインの基本書です。

＼今すぐ購入したい方はこちら／

HTML/CSS（＋JavaScript）の概要を把握するための本5選

HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉

おすすめ度：
（Kindle版：1,960円 /単行本：2,178円）

本書では、Webコンテンツ作りに必要なHTML/CSSの考え方や概念を、見開き単位で一つ一つゆっくり学習できます。

「他のHTML/CSS解説書を読んでみたけれど難しくて……」といった方にもオススメです。

最新のHTML Living Standardに対応した本書を読めば、「イマドキ必要な基礎知識」を身につけられるはずです。

HTMLやCSSってもう見ただけでもなんか難しそう…そういうのを感覚的に学べるイラストがたっぷりで学びやすい形になっています。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（Kindle版：2,237円 /単行本：2,486円）

本書では今のWebサイトの作り方が一気に学べます。

・知識ゼロから体系的に学べる！HTMLとCSSの基本
・最新の技術に対応！レスポンシブ、Flexbox、CSSグリッド
・手を動かしながら学べる！プロの現場で役立つテクニック
・コードの知識からデザインのことまで1冊ですべて学べる！

WebクリエイターボックスのManaさんが教えるWebサイト制作の定番＆旬のスキル。この1冊で必要なことがすべて学べます。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（Kindle版：2,237円 /単行本：2,486円）

本書は手を動かしてWebサイトを作りながらHTML/CSSとWebデザインの基本を楽しく学べる入門書です。

初学者が1冊目に読む本としてふさわしい内容を盛り込んでいるため、これを読めば必要な基礎知識がひととおり身につきます。

実際に作りながら、触りながら学べるので実践的に学びたい方にはおすすめです。

＼今すぐ購入したい方はこちら／

HTML&CSS コーディング・プラクティスブック 1 実践シリーズ

おすすめ度：
（Kindle版：800円 ）

本書はデザインカンプと指示書に従い、Webページをコーディングしてみる実践シリーズです。

第1弾ではAdobe XDで作成されたコーポレート系サイトのデザインカンプを元に、カンプの解析、パーツの抽出を行い、「どうしてこのように設定するのか？」を踏まえながらコーディングしていきます。

実際にXDを使った実践練習の本です。

＼今すぐ購入したい方はこちら／

これ1冊でゼロから学べる Webプログラミング超入門　ーHTML,CSS,JavaScript,PHPをまるごとマスター

おすすめ度：
（Kindle版：2,653円 /単行本：2,799円）

本書はこれ1冊でWebプログラミングが一通り学べる1冊です。まったくのプログラミング初心者に向けた、Webプログラミングの入門書です。

Webプログラミングに必要なテーマの本は、それぞれ1冊になるくらいのボリュームですので、それを何冊も読むのは大変ですよね。本書では必要なものを全部つまみ食いして、一度にすべて使えるようになれます!

＼今すぐ購入したい方はこちら／

デザインソフト・ツールの使い方を初心者から学ぶための本5選

デザイン初心者のためのPhotoshop Illustrator 先輩に聞かずに9割解決できるグラフィックデザイン超基礎(DLデータ付)

おすすめ度：
（Kindle版：2,404円 /単行本：2,530円）

本書はQA形式で疑問点を先輩に教わっている感覚で解説しているのが特徴で、ポスター、Webバナーなど実際の業務での制作物を前提に、ソフトの画面の見方からデータの作り方、データの書き出し、印刷入稿方法、デザイン知識まで、現場のリアルな仕事を解説しています。

WebやSNSの画像作り、印刷物のデータ入稿といった業務におすすめ。

＼今すぐ購入したい方はこちら／

Illustratorデザインベーシック　制作に役立つ基本とテクニック

おすすめ度：
（Kindle版：2,404円 /単行本：2,530円）

本書はAdobe Illustratorの膨大な機能の中から、誰もが使う基本的な機能をまとめ、複数のアプローチを整理することで、効率よく学べるように集約した機能リファレンスガイドです。

何から手を付けたらいいのか、どのツールを使ったら後の作業が楽なのか。

正しい知識をきちんと身に付けることで、制作現場で目的に合わせてツールを選べるようになり、より便利に、より効率よく作業を進められるようになります。

＼今すぐ購入したい方はこちら／

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

おすすめ度：
（Kindle版：2,475円 /単行本：2,750円）

本書はAdobe XDを使ったWebデザインとUIのプロトタイピングを、高品質なサイトを作りながら、現場のワークフローに沿って学んでいく本です。

ワイヤーフレームの作り方から、デザインカンプ制作、コンポ―ネントの管理、画面遷移の設計、インタラクティブなプロトタイプ制作と共有、コーディングに必要なデザインスペックの共有、さらに動きのあるUI設計やプラグイン活用まで、現場レベルで求められるスキルを、より実践的な学び方で習得できます。

＼今すぐ購入したい方はこちら／

世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書 (世界一わかりやすい教科書)

おすすめ度：
（Kindle版：2,592円 /単行本：2,728円）

本書はクリエイターやデザイナーとなるために必須といえる、「Illustrator」「Photoshop」といったふたつのアプリケーションの操作を1冊でマスターできる『世界一わかりやすい Illustrator&Photoshop 操作とデザインの教科書』。

なお、本書の解説はIllustratorとPhotoshopそれぞれ2021の画面で行っています。

＼今すぐ購入したい方はこちら／

はじめてでも迷わないFigmaのきほん やさしく学べるWebサイト・バナーデザイン入門

おすすめ度：
（Kindle版：2,475円 /単行本：2,750円）

本書はブラウザベースのデザインツール「Figma」の操作方法と、Figmaで実際にデザインを作成して成果物を完成させる方法を解説した書籍です。

基本的な機能を解説した「基礎編」と、実際にFigmaでのデザイン制作の手順が分かる「実践編」の2編で構成しています。

基礎編でFigmaの使い方をしっかり学んでから、実践編で具体的な成果物の作成まで学べます。

＼今すぐ購入したい方はこちら／

最後に

もうLPデザインで迷わない！LPの基礎から成果をあげる実践方法までわかる本を見つけました！こんにちは！現役のWebデザイナーのずぼらなオッター（@Otter_zubora）です。みなさんはLP（ランディングページ）のデザインで成果がでなくて悩んだ経験はありませんか？僕は正直何度も悩んだことがあります！そのため「LPデザインで成果がでない！」と悩むたびに、色々なセミナーやツール、本でLP（ランディングページ）の勉強をしてきました。その結果、LPで成果をあげれるようになってクライアントさんにも喜んでもらえるようになりました。デザインと同じようにLPO（ランディングページの最適化）も、知識や引き出しを増やしていくことで色々な改善ができると痛感しました。そんな僕が最近「もっと早く読めばよかった！」という素敵な本に出会ったので今回はその本についてご紹介します。...