こういうと驚かれるのですが、実は独学でもプロレベルの「Webデザイン」が学べます。
最近では基礎から実践的内容まで、踏み込んだ（専門的な）書籍が多数出版されており、プロのデザイナーがどのようなテクニックでサイトを制作しているのか、広く公開されるようになりました。
さらに書籍の内容で分からない部分は、YouTubeなどの動画を使って理解を深めることができます。
幸いなことに、YouTube上にはWebデザインに関する動画が多数アップされており、書籍の内容を確認しながら、より専門的部分まで学べるようになっています。
この記事では【初心者向け】に、Webデザインの勉強で役立つおすすめの書籍を集めてみました。
Webデザインを勉強したい方、自らのブログやWebサイト制作に役立てたい方は、ぜひ参考にしてください。
- Webデザインの勉強に役立つ書籍
- Webデザイン運営の勉強方法
- Webデザイン運営で役立つサーバー、WordPressテーマなど
Webデザインの学習がおすすめの理由
Webデザインを学ぶと、運営するWebサイトや、ブログサイトの制作ができるようになります。
また基礎的な「デザインの知識」を身につければ、LP制作やSNSのプロフィールページ作成、バナー広告もカンタンに作成できます。
つまり…デザインのスキルが身につくということは、Web制作以外にも仕事の幅が大きく広がるということです。
副業を始めたい方ならスキルを販売するクラウドソーシング（例：ココナラ、ランサーズなど）でWebデザインの仕事や LP制作が受注できるようになります。
また Webサイトデザインなら、安くても50,000円（シングル1P）〜100,000円の価格で出品でき、3P以上のサイトになれば、100,000円〜300,000円の価格で売れるようになります。
2020年以降は、実店舗の経営からWeb上のビジネス（例：ECサイト運営）にシフトチェンジした方も多く、Webデザインの需要はますます高まっています。
このためWebデザインができるようになれば、副業スキルを高めることになり、スキルをさらに磨けば（Webデザインを）本業レベルにまで押し上げることもできます。
さらにブログを運営し、アフィリエイト報酬を得ている方にも、Webデザインのスキルは役立ちます。
ステイホームなどの「お家時間」があれば、後々役立つ「Webデザインのスキル」を身につけておきましょう。
Webデザインの勉強で役立つおすすめの書籍5選！
ここで「Webデザインの勉強で役立つおすすめの書籍」を5冊紹介します！
どの書籍も「Webサイト制作」が初めての方にに最適。各書とも、独学で理解できるよう内容も工夫されています。
① Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集は、フォントや配色、レイアウト、プログラムの作り方がマスターできるよう、国内の415ものWebサイトを厳選し紹介しているガイド本です。
- 優れたWebサイトのデザインと構造
- レイアウト、配色、フォント素材の選び方
- 売れるサイト、ユーザーが望むサイトの作り方
ここまで大量のサイトを集めて紹介した書籍は非常に珍しく、デザインセンスを磨くのにもおすすめの一冊です。
参考リンク：Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
書籍の概要
この書籍の概要をまとめてみました。
| 本書の概要 |
|---|
| タイトル |
| Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 |
| 著者 |
| 久保田涼子 |
| 電子書籍の有無 |
| 〇（Kindle） |
| 出版社 |
| SBクリエイティブ |
| 発売日 |
| 2017年6月16日 |
| 初心者へのオススメ度 |
| ★★★★★（初心者に大変オススメ） |
本書ではWebサイトの作り方を1から解説していません。
サイトデザインの参考にするための見本帳です。
このため「どのようにデザインを組み立てて作れば良いのか」分からない方も多いでしょう。
実技面については、本書以降の書籍を参考にデザイン制作を進めてください。
著者について
久保田涼子氏
Web制作ナレーター業務 Coco-Factory代表。クリエイター集団ROOT代表。
デジタルハリウッドSTUDIO渋谷、広島の講師として、オンライン講座やワークショップの開発に参加。
「ワクワクするモノ・時間・場所を生み出す」をテーマに、もの創りを行うフリーランスクリエイターとして活躍。
参考リンク：Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
② 2万回のA/Bテストからわかった 支持されるWebデザイン事例集
2万回のA/Bテストからわかった 支持されるWebデザイン事例集は、Webサイトの実例を上げてユーザーから支持されるデザインの作り方を紹介した良書です。
実例には、クレディセゾン、SBI証券、Yahoo!など大手サイト35種が選ばれており、実際に成果の出たWebサイトが「どのようなデザインを採用したのか」が理解できます。
- A/Bテストとはなにか
- ユーザーが求めているデザインの調査方法
- 購入、申し込みに直結するデザインの作り方
デザインはセンスだけでは、成立しません。
実際にユーザーがどのようなデザインを求めているのか徹底的にリサーチし、共感を集めるデザインや売れるデザインを学ぶ必要があります。
参考リンク：2万回のA/Bテストからわかった 支持されるWebデザイン事例集
書籍の概要
この書籍の概要をまとめてみました。
| 本書の概要 |
|---|
| タイトル |
| 2万回のA/Bテストからわかった 支持されるWebデザイン事例集 |
| 著者 |
| 鬼石 真裕 |
| 電子書籍の有無 |
| 〇（Kindle） |
| 出版社 |
| 技術評論社 |
| 発売日 |
| 2018年7月25日 |
| 初心者へのオススメ度 |
| ★★★★★（初心者に大変オススメ） |
本書を使うことで、2万回のA/Bテストを通じ「理論に基づいたデザインの作り方」がマスターできます。
【メモ】 A/Bテストとは？
インターネットマーケティングで行われる、どちらがより良い効果が得られるのか。施策判断に使われる試験の総称です。
デザイナーとしてステップアップしたい方、ECサイトの売り上げアップしたい方にもオススメの一冊です。
著者について
鬼石 真裕氏
Kaizen Platform フェロー。
リクルート、ビズリーチ、グリーでプロダクト、事業責任者などを歴任した後、Kaizen PPlatformでは、民間初の特区プロジェクトを成功させた。
300社のコンサルティングを含む営業・マーケティングの責任者に就任。
2018年7月からはKaizen Platform フェローとして全般の事業支援に携わっています。
参考リンク：2万回のA/Bテストからわかった 支持されるWebデザイン事例集
③ いちばんよくわかるWebデザインの基本きちんと入門
いちばんよくわかるWebデザインの基本きちんと入門は、Webデザインを一から学びたい方に向けて、レイアウトや配色、写真の選定・編集方法、タイポグラフィをはじめ、Webデザインの最新テクニックを集めた本です。
- Webデザインの効果的なレイアウト
- 配色やタイポグラフィなどの基礎知識
- Webデザインとマーケティングの基礎
本書は「デザイン」という大きな枠組みではなく、Webデザインの基礎に焦点を絞り、Webデザイン制作に必要な知識をギュッと凝縮して一冊にまとめています。
デザイン初心者の方は、まず本書でWebデザインの基礎知識を身につけましょう。
書籍の概要
この書籍の概要をまとめてみました。
| 本書の概要 |
|---|
| タイトル |
| いちばんよくわかるWebデザインの基本きちんと入門 |
| 著者 |
| 伊藤 庄平／益子 貴寛／久保 知己／宮田 優希 ／伊藤 由暁 |
| 電子書籍の有無 |
| 〇（Kindle） |
| 出版社 |
| SBクリエイティブ |
| 発売日 |
| 2017年2月25日 |
| 初心者へのオススメ度 |
| ★★★★★（初心者に大変オススメ） |
CSSやWordPressの基礎知識など、深い部分までカバーしていない分野もありますが、大きな枠組みが理解できれば、その他の情報はユニコブログ、その他YouTubeなどの動画コンテンツを使って補完できるので参考にしてください。
関連記事：WordPressの初期設定でやっておくと良いことを分かりやすく解説
著者について
伊藤 庄平氏
株式会社シロクロ代表取締役。
JAGDAの正会員。
Webサイトのディレクションやデザイン、WebサービスやアプリケーションのUIなどを手がける。
益子 貴寛氏
株式会社まぼろし 取締役CMO。
Webサイトの企画・設計・プロジェクト管理、ソーシャルメディアの運用、アクセス解析、ランディングページの設計、SEOまで、Webマーケティング全般を担当している。
久保 知己氏
2014年に株式会社まぼろしに入社。
主な著書に『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』がある。
宮田 優希氏
2014年よりWebデザイナーとして株式会社まぼろしに入社。
Webサイトのデザイン業務、フロントエンド実装などを担当。
伊藤 由暁氏
2015年5月に株式会社まぼろしに入社。
実務ではフィーチャーサイト、レスポンシブなコーポレートサイトなどを手がける。
参考リンク：いちばんよくわかるWebデザインの基本きちんと入門
④ 初心者からちゃんとしたプロになる Webデザイン基礎入門
初心者からちゃんとしたプロになる Webデザイン基礎入門は、1日30分ずつWebデザインの必要な知識（成り立ち、枠組、素材、HTML、CSS、レスポンシブデザイン、SNS連携）が学べるガイド本です。
- Webデザインの基礎知識
- HTML、CSSの書き方と使い方
- WebサイトとWebマーケティングの基礎
本書は大学や専門学校で教鞭を執る講師陣が、初心者にも分かりやすく丁寧に「Webデザインの基礎」を解説。
写真や資料なども多く、技術と理論の両方が効率よく学べるよう工夫されています。
参考リンク：初心者からちゃんとしたプロになる Webデザイン基礎入門
書籍の概要
この書籍の概要をまとめてみました。
| 本書の概要 |
|---|
| タイトル |
| 初心者からちゃんとしたプロになる Webデザイン基礎入門 |
| 著者 |
| 栗谷 幸助／おの れいこ／藤本 勝己／村上 圭／吉本 孝一 |
| 電子書籍の有無 |
| 〇（Kindle） |
| 出版社 |
| エムディエヌコーポレーション |
| 発売日 |
| 2019年9月25日 |
| 初心者へのオススメ度 |
| ★★★★★（初心者に大変オススメ） |
非常に厚みがある（336P）ので、時間をかけてじっくりWebデザインを学びたい方にオススメの一冊と言えます。
著者について
栗谷 幸助氏
Webデザインユニットを立ち上げ、Webサイトの企画・設計・運営に携わる一方、デジタルハリウッドに移籍しWeb関連の講師を務める。
ICT活用を実践するチーム「iTeachers」のメンバーとしても活躍しており、主な著書には『デジハリ・デザインスクール』シリーズ各種、『ドリル式 やさしくはじめる Webデザインの学校 』があります。
※ おの れいこ氏、藤本 勝己氏、村上 圭 氏、吉本 孝一氏の著者情報の詳細は出版元のデータを参照してください。
参考リンク：初心者からちゃんとしたプロになる Webデザイン基礎入門
⑤ Webデザイン必携。プロにまなぶ現場の制作ルール84
Webデザイン必携。プロにまなぶ現場の制作ルール84は、現役で活躍するWebデザインのプロが、Webデザインに携わる上で知っておきたいルールを84の項目にまとめて丁寧に解説したガイド本です。
Webデザインの基礎知識として、Photoshop、Illustratorの上手な使い方まで取り上げているので「実践」でも役に立ちます。
- Webデサインの基礎知識と、知っておきたいルール
- Photoshop、Illustratorの上手な使い方
- コーディング、デザインデータの扱い方
本書は基礎的な部分から専門的部分まで網羅していますが、基礎的部分よりも、デザイナーとしてのマナーやルールの部分に重きを置いています。
参考リンク：Webデザイン必携。プロにまなぶ現場の制作ルール84
書籍の概要
この書籍の概要をまとめてみました。
| 本書の概要 |
|---|
| タイトル |
| Webデザイン必携。プロにまなぶ現場の制作ルール84 |
| 著者 |
| 北村 崇／浅野 桜 |
| 電子書籍の有無 |
| 〇（Kindle） |
| 出版社 |
| エムディエヌコーポレーション |
| 発売日 |
| 2016年3月23日 |
| 初心者へのオススメ度 |
| ★★★★☆（初心者〜上級者まで対応） |
初心者の中には、「より深い知識を求める」方も多いでしょう。
しかし本書には、中級者〜上級者へのステップアップには「必要な知識」が詰まっています。
初心者から一歩進んで、Webデザインのプロを目指す方は手に取ってみてください。
著者について
北村 崇氏
TIMING DESIGN代表。
アドビコミュニティエバンジェリストとして、グラフィックデザイン、Webデザイン、CMS開発を得意としており、年数十回ものワークショップやセミナー、企業研修での講演を行うほか、書籍の執筆でも活躍している。
浅野 桜氏
自由学園高等学校卒業。
印刷会社、メーカー勤務を経て、有限会社タガスを設立。Adobeアプリケーションに関する書籍を複数執筆している。
参考リンク：Webデザイン必携。プロにまなぶ現場の制作ルール84
Webデザインの勉強方法、おすすめの手順は？
Webデザインの勉強方法について「おすすめの手順」をまとめてみました。
- Webデザインの基礎知識を学び始める
- Webサイトを運営するためにレンタルサーバーを申し込む
- WordPressとWordPressテーマをインストール
- Webサイトやブログコンテンツの作成スタート
- A/Bテストなどの検証を重ねてデザインを整える
STEP1〜5について説明します。
Webデザインの基礎知識を学び始める
Web技術に関する学びは、書籍でも様々なWebサイトでも学べます。
Webデザインの基礎知識を身につけましょう。
実技面だけでなく、実際にどのようなサイトが運用されているのか。
成功例などもたくさん見てデザインセンスを磨きましょう。
またセンスだけで無く、理論的にどのようなサイトがユーザーに求められているのか。
実例などを元に調査し、サイトの作り方や構造なども分析してみてください。
Webサイトを運営するためにレンタルサーバーを申し込む
Webサイトの基礎知識が身についたら、次に「最適化されたレンタルサーバー」を申し込みましょう。
最適化されたレンタルサーバーとは、ConoHa WINGのようにWordPressのワンクリック設定、独自ドメイン、WordPressテーマなどがオールインワンになったサービスのことです。
Webサイトやブログコンテンツの作成スタート
ここまでにデザインしたものを形にすべく、Webサイト・ブログを構築していきます。
STEP2で紹介した、最適化されたレンタルサーバーとWordPress、WordPressテーマがあれば、難しい知識やプログラミングのスキルなしでも、プロレベルのサイトが作れます。
A/Bテストなどの検証を重ねてデザインを整える
Webサイトのターゲットは誰か、何を目的としたサイトなのか明確にし、イメージした結果が出せるよう「A/Bテスト」などのマーケティング手法は数多くあります。
これらの色々な測定手法を覚えていきながら検証していくと、Webサイトの使いやすさも含めて改善していくことが可能になります。
必要に応じて、テキストコンテンツ、使用する写真やフォント、レイアウトなども変更していきながらデザインをカスタマイズしていきましょう。
Webデザインをビジネスで活かす方法
WEBサイトの基礎知識は、WEBサイトやブログの運営だけでなく、ライティングの仕事にも役立ちます。
実際に「WEBデザイン」関連のテーマは、クライアントからの需要が多く、ライターにとって稼げるネタの宝庫です。
またWEBデザイン知識のあるライターなら、メディアへの採用率も高くなるので一石二鳥。自らのブログやWEBサイト運営に役立つ知識も、お金をもらいながらラクに習得できます。
この記事では「ライティング」に限定し、役立つ書籍やツールを紹介しました。
稼げるスキルを磨くためにも、ライティングと合わせて SEOやアフィリエイト、ブログ運営のスキルなど。役立つ知識をどんどん広げていきましょう。
関連記事：起業アイデアを成功させるためのコンテンツビジネスモデルを解説！【保存版】
Webデザインは書籍でも十分に「独学」で学べる
Webデザインは書籍でも、きちんと勉強できます。実際に筆者も独学で「Webデザインの基礎」を身につけていきました。
また、最近ではKindleなどで手軽に、読みたい電子書籍が読めるようになっていますし、大規模言語モデル（LLM：Large language Models）で有名なOpanAIのChatGPTなどから、わからない単語について気軽に調べられます。
連休や長期休暇などの時間を利用し、Webサイト制作のスキルを磨きましょう。
