こういうと驚かれるのですが、実は独学でもプロレベルの「WEBデザイン」が学べます。
最近では基礎から実践的内容まで、踏み込んだ（専門的な）書籍が多数出版されており、プロのデザイナーがどのようなテクニックでサイトを制作しているのか、広く公開されるようになりました。
さらに書籍の内容で分からない部分は、YouTubeなどの動画を使って理解を深めることができます。
幸いなことに、YouTube上にはWEBデザインに関する動画が多数アップされており、書籍の内容を確認しながら、より専門的部分まで学べるようになっています。
この記事では【初心者向け】に、WEBデザインの勉強で役立つおすすめの書籍を集めてみました。
WEBデザインを勉強したい方、自らのブログやWEBサイト制作に役立てたい方は、ぜひ参考にしてください。
- WEBデザインの勉強に役立つ書籍
- WEBデザイン運営の勉強方法
- WEBデザイン運営で役立つサーバー、WordPressテーマなど
目次
1. 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デザインのスキル」を身につけておきましょう。
2. WEBデザインの勉強で役立つおすすめの書籍5選！
ここで「WEBデザインの勉強で役立つおすすめの書籍」を5冊紹介します！
どの書籍も「WEBサイト制作」が初めての方にに最適。各書とも、独学で理解できるよう内容も工夫されています。
① WEBデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集は、フォントや配色、レイアウト、プログラムの作り方がマスターできるよう、国内の415もの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デザイン事例集 |
| 著者 |
| 鬼石 真裕 |
| 電子書籍の有無 |
| 〇（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デザイン基礎入門は、1日30分ずつWEBデザインの必要な知識（成り立ち、枠組、素材、HTML、CSS、レスポンシブデザイン、SNS連携）が学べるガイド本です。
- WEBデザインの基礎知識
- HTML、CSSの書き方と使い方
- WEBサイトとWEBマーケティングの基礎
本書は大学や専門学校で教鞭を執る講師陣が、初心者にも分かりやすく丁寧に「WEBデザインの基礎」を解説。
写真や資料なども多く、技術と理論の両方が効率よく学べるよう工夫されています。
書籍の概要
この書籍の概要をまとめてみました。
| 本書の概要 |
|---|
| タイトル |
| 初心者からちゃんとしたプロになる WEBデザイン基礎入門 |
| 著者 |
| 栗谷 幸助／おの れいこ／藤本 勝己／村上 圭／吉本 孝一 |
| 電子書籍の有無 |
| 〇（Kindle） |
| 出版社 |
| エムディエヌコーポレーション |
| 発売日 |
| 2019年9月25日 |
| 初心者へのオススメ度 |
| ★★★★★（初心者に大変オススメ） |
非常に厚みがある（336P）ので、時間をかけてじっくりWEBデザインを学びたい方にオススメの一冊と言えます。
著者について
栗谷 幸助氏
WEBデザインユニットを立ち上げ、WEBサイトの企画・設計・運営に携わる一方、デジタルハリウッドに移籍しWEB関連の講師を務める。
ICT活用を実践するチーム「iTeachers」のメンバーとしても活躍しており、主な著書には『デジハリ・デザインスクール』シリーズ各種、『ドリル式 やさしくはじめる WEBデザインの学校 』があります。
※ おの れいこ氏、藤本 勝己氏、村上 圭 氏、吉本 孝一氏の著者情報の詳細は出版元のデータを参照してください。
⑤ WEBデザイン必携。プロにまなぶ現場の制作ルール84
Webデザイン必携。プロにまなぶ現場の制作ルール84は、現役で活躍するWEBデザインのプロが、WEBデザインに携わる上で知っておきたいルールを84の項目にまとめて丁寧に解説したガイド本です。
WEBデザインの基礎知識として、Photoshop、Illustratorの上手な使い方まで取り上げているので「実践」でも役に立ちます。
- WEBデサインの基礎知識と、知っておきたいルール
- Photoshop、Illustratorの上手な使い方
- コーディング、デザインデータの扱い方
本書は基礎的な部分から専門的部分まで網羅していますが、基礎的部分よりも、デザイナーとしてのマナーやルールの部分に重きを置いています。
書籍の概要
この書籍の概要をまとめてみました。
| 本書の概要 |
|---|
| タイトル |
| WEBデザイン必携。プロにまなぶ現場の制作ルール84 |
| 著者 |
| 北村 崇／浅野 桜 |
| 電子書籍の有無 |
| 〇（Kindle） |
| 出版社 |
| エムディエヌコーポレーション |
| 発売日 |
| 2016年3月23日 |
| 初心者へのオススメ度 |
| ★★★★☆（初心者〜上級者まで対応） |
初心者の中には、「より深い知識を求める」方も多いでしょう。
しかし本書には、中級者〜上級者へのステップアップには「必要な知識」が詰まっています。
初心者から一歩進んで、WEBデザインのプロを目指す方は手に取ってみてください。
著者について
北村 崇氏
TIMING DESIGN代表。
アドビコミュニティエバンジェリストとして、グラフィックデザイン、WEBデザイン、CMS開発を得意としており、年数十回ものワークショップやセミナー、企業研修での講演を行うほか、書籍の執筆でも活躍している。
浅野 桜氏
自由学園高等学校卒業。
印刷会社、メーカー勤務を経て、有限会社タガスを設立。Adobeアプリケーションに関する書籍を複数執筆している。
3. WEBデザインの勉強方法、おすすめの手順は？
WEBデザインの勉強方法について「おすすめの手順」をまとめてみました。
- STEP1 WEBデザインの基礎知識を身につける
- STEP2 最適化されたレンタルサーバーを申し込む
- STEP3 WordPress、WordPressテーマをインストール
- STEP4 WEBサイト・ブログの作成スタート
- STEP5 A/Bテストなどでデザインを整える
STEP1〜5について説明します。
STEP1 書籍でWEBデザインの基礎知識を身につける
まず書籍でWEBデザインの基礎知識を身につけましょう。
実技面だけでなく、実際にどのようなサイトが運用されているのか。
成功例などもたくさん見てデザインセンスを磨きましょう。
またセンスだけで無く、理論的にどのようなサイトがユーザーに求められているのか。
実例などを元に調査し、サイトの作り方や構造なども分析してみてください。
STEP2 最適化されたレンタルサーバーを申し込む
WEBサイトの基礎知識が身についたら、次に「最適化されたレンタルサーバー」を申し込みましょう。
最適化されたレンタルサーバーとは、ConoHa WINGのようにWordPressのワンクリック設定、独自ドメイン、WordPressテーマなどがオールインワンになったサービスのことです。
最適化されたレンタルサーバーを使えば（本記事の後半で紹介しています）、レンタルサーバーの申し込みと同時に、WordPressと独自ドメイン、WordPressテーマが設定できるので便利です。
STEP3 WordPress、WordPressテーマをインストール
レンタルサーバー経由でWordPress、WordPressテーマをインストールしたら、WordPressテーマでどのようなデザインを作るのかイメージしておきましょう。
ここで紙やiPadなどに、WEBサイトのラフスケッチ、レイアウトなどのデザインイメージを描いておくと後で役に立ちます。
またWEBサイトやブログで使用する、写真やイラスト、文章、動画コンテンツ等あれば材料を集めておいてください（STEP4に進む）。
STEP4 WEBサイト・ブログの作成スタート
ここまでにデザインしたものを形にすべく、WEBサイト・ブログを構築していきます。
STEP2で紹介した、最適化されたレンタルサーバーとWordPress、WordPressテーマがあれば、難しい知識やプログラミングのスキルなしでも、プロレベルのサイトが作れます。
STEP5 A/Bテストなどでデザインを整える
WEBサイトのターゲットは誰か、何を目的としたサイトなのか明確にし、イメージした結果が出せるよう「A/Bテスト」などでデザインを整えてください。
また必要に応じて、使用する写真やフォント、レイアウトなども変更しデザインをカスタマイズしておきましょう。
4. WEBデザインでおすすめのレンタルサーバー
ここからは、WEBデザインで「おすすめのレンタルサーバー」を5つ紹介します。
※ 1〜5はすべて、前項で紹介した最適化されたレンタルサーバーに該当しています。
1. ConoHa WING
ConoHa WING は、【サーバー料金の安さ、表示スピードの速さ、WordPressがカンタン設定できる】という条件をすべて叶えたレンタルサーバーです。
国内で活躍するトップブロガーやアフィリエイター、インフルエンサーの多くもConoHa WINGを使用。
ConoHa WING公式サイトでも、多くの人気ブログに「ConoHa WINGが導入されている」ことが紹介されています。
当ブログ（ユニコブログ®）も紹介されています。
気になる料金体系ですが、ConoHa WINGの長期割引プラン「WINGパック」を利用すれば、通常料金よりかなり安い利用料でConoHa WINGが使用できます。
また「WINGパック」には独自ドメインが2つまで無料。
ドメインは無制限で設定でき、データベースも無制限、初期費用無料で超高速サーバーが使えます。
国内には複数の高速サーバーが存在しますが、他社と比較してもConoHa WINGの処理速度は2倍以上早く、国内レンタルサーバーサービスの中では最も速いスピードを誇ります（ConoHa調べ）。
また初心者に嬉しいのが、ConoHa WINGの「WordPressかんたんセットアップ」機能です。
同機能を使えば、ワンクリックでWordPressが設定でき、WEB初心者でも迷わず、WEBサイトやブログが設定できます。
さらにConoHa WINGの長期割引プラン「WINGパック」を契約すると、人気のWordPressテーマがお得な価格（優待価格）で使えます。
● レンタルサーバーとWordPressのテーマ選びに困ったらConoHa WINGとTHE SONIC
2. エックスサーバー
エックスサーバーは17年の歴史を持つ、国内シェアNo.1のレンタルサーバーです。
運用サイトはすでに190万件を超え、WordPress運用には欠かせないサービスとして個人はもちろん企業サイトにも広く導入されています。
エックスサーバーの売りは、17年間積み重ねられた安心と実績。
そして高速安定のハイスペックサーバーをリーズナブルな価格（月額990円〜）で提供していることです。
エックスサーバーは高速性と障害耐性を兼備したオールNVMe、最新高性能サーバー48コアCPU&512GBメモリ、アクセス数拡張＆サイト高速化するXアクセラレータ Ver.2を搭載。
エックスサーバー稼働率は「99.99％以上」と快適なネットワーク環境を実証しました。
さらにエックスサーバーにも「CMS簡単インストール」機能が搭載されており、申込みと同時にWordPressが設定可能。
初期費用無料、独自ドメインは無料で提供、10日間無料で使えるキャンペーン等も実施しており、ブログやWEBサイト制作が初めての方も安心して利用できます。
3. mixhost
mixhostは、「情報処理速度のスピード」部門で満足度No.1のレンタルサーバーです（日本マーケティングリサーチ機構調べ）。
アフィリエイト＆ブロガーの満足度1位にも選ばれており、多くの個人ブログやアフィリエイトサイト、法人のコーポレートサイトにも利用されています。
またmixhostはHTTP/3、ピュアSSDとLiteSpeedを搭載「99.99%」のアップタイムを誇る高速サーバーを提供しています。
料金プランも「月額880円」からと非常にリーズナブルで、WEBサイトの容量や規模に応じて、より充実したプランを選ぶこともできます。
さらに「WordPressクイックスタート」機能を使えば、レンタルブログ感覚でカンタンにWordPressが始められます。
4. お名前.com
お名前.comレンタルサーバーは、個人＆法人サイトで広く導入されているサービスです。
サイト制作に最適なレンタルサーバーの料金は月額1,000円未満で借りることも可能です。
年間に換算すると約12,000円と（他社と比較して）低コストで運用できます。
※ お名前.com調べ
お名前.comの売りは、サーバーの初期費用と月額最大2ヶ月分が0円になること。
また独自ドメインの登録費用が実質0円、さらに対象ドメインは永久0円で提供されるので、メインサイトやサテライトサイト、ブログサイトなどの複数のコンテンツを運用するのに向いています。
肝心の処理速度も非常に速く、Apache Benchによって計測されたデータでは、レンタルサーバー主要各社の中でも最速レベルのスピードを記録。稼働率も99.99％と安定した高品質サーバーを提供しています。
またサポート体制も充実しており、WordPressのかんたんインストール機能、WordPressかんたんお引っ越し機能、自動バックアップ、その他オプション機能も充実しています。
5. カラフルボックス
カラフルボックスは、最大40コア&512GBメモリ&SSDを採用、「LiteSpeed」搭載するオールインワンの超快速レンタルサーバーです。
SSL対応サイトがすぐにできる「WordPress快速セットアップ」機能をはじめ、地域別自動バックアップも便利。
料金も150GB 1vCPU / 2GBメモリのプランで「月額528円 」と低コストで運用できます。
さらに容量やメモリの大きなプランも選択でき、個人のブログから大型サイト、法人のコーポレートサイトにも対応可能。
自由にプラン移動できる「柔軟性」がカラフルボックスの魅力です。
5. WEBデザインでおすすめのWordPressテーマ
WEBデザインでおすすめのWordPressテーマを集めてみました。
1. ConoHa WING+SONIC
ConoHa WING + THE SONICは、数あるWordPress＋WordPressテーマのなかで、最も簡単にブログやWEBサイトが作れる組み合わせです。
実際にConoHa WING+THE SONICを使うことで、小学生や中学生、WEBサイトを初めて作る方も直感的＆カンタンに本格的サイトが作成できます。
さらにSONICは、【Rinker+COPIA】が使えるので、Amazonや楽天などの広告管理も思いのまま。ブログの収益化やアフィリエイトの運営にも大活躍してくれます。
● レンタルサーバーとWordPressのテーマ選びに困ったらConoHa WINGとTHE SONIC
2. Stork19
STORK19は、過去20,000人以上のユーザーに使われたWordPressテーマ”STORK”の最新バージョンです。
ユニコブログもこの「STORK19」を使用しています。
STORK19は【モバイルファースト、美しいデザイン、表示速度の速さ】が特徴で、SEOにも強いWordPressテーマとして人気です。
さらにブロックエディタにも対応しており、実際の表示に近いデザインでブログが書けるのも嬉しいポイント。
機能も大変シンプルなので、はじめての方でも簡単に操作できます。
3. THE THOR
THE THORは、シンプルな操作性とデザイン性の高さが特徴のWordPressテーマです。
革新的な高速表示技術と検索エンジンから評価される内部構造により、SEOに強いWEBサイトやブログの制作が可能になりました。
またスタイリッシュで洗練されたデザイナーズサイトが、ワンクリックで作成＆カスタマイズできるのもTHE THORの魅力です。
さらにTHE THORには、集客やウェブサイトの収益を最大化するための「集客・収益化サポートシステム」が付属。
WEBサイト運営だけでなく、アフィリエイト、ECサイトの運用にも適しています。
4. ACTION(AFFINGER6)
ACTION(AFFINGER6)は、2012年に発売した「STINGER」の最新版としてリリースされたWordPressテーマです。
シンプルなデザイン、SEO対策、広告収入UP機能を標準搭載しており、WordPress5.0から新たに実装された新エディター「Gutenberg」も使用できます。
またSTINGERは、検索エンジンに評価される内部構造と機能を搭載（SEOの最適化済）しているため、余計なSEOプラグインは導入不要。
多彩なカスタマイズ機能により、作りたいレイアウトやデザインのサイトがワンクリックで設定可能。
タイプの異なる複数のサイトを1つのWordPressテーマで作れるので、有料WordPressテーマとはいえコストパフォーマンスは非常に高いです。
● ブログが簡単に作れる！サーバー＆WordPressテーマ組み合わせ3選！
6. WEBデザインをビジネスで活かす方法
WEBサイトの基礎知識は、WEBサイトやブログの運営だけでなく、ライティングの仕事にも役立ちます。
実際に「WEBデザイン」関連のテーマは、クライアントからの需要が多く、ライターにとって稼げるネタの宝庫です。
またWEBデザイン知識のあるライターなら、メディアへの採用率も高くなるので一石二鳥。自らのブログやWEBサイト運営に役立つ知識も、お金をもらいながらラクに習得できます。
この記事では「ライティング」に限定し、役立つ書籍やツールを紹介しました。
稼げるスキルを磨くためにも、ライティングと合わせて SEOやアフィリエイト、ブログ運営のスキルなど。役立つ知識をどんどん広げていきましょう。
● 起業アイデアを成功させるためのコンテンツビジネスモデルを解説！【保存版】
7. まとめ｜WEBデザインは書籍で「独学」できる！
WEBデザインは書籍でも、きちんと勉強できます。実際に筆者も独学で「WEBデザインの基礎」を身につけました。
最近ではKindleなどで手軽に、読みたい書籍が読めるようになりました。
連休や長期休暇などの時間を利用し、WEBサイト制作のスキルを磨きましょう。
＼レンタルサーバーを移転しました!!／
ConoHa WINGかなり快適です^ ^
