Webデザインを独学で学ぶのは難しい？効率的な勉強方法やおすすめの本を紹介

独学でもWebデザイナーは目指せる？

独学でも可能！まずは目標を定める必要がある！

Webデザイナーになることは独学でも可能です。
ただし、Webデザイナーは知識や技術の範囲が広く、手当たり次第に勉強を始めても途中で挫折してしまうかもしれません。
独学でWebデザイナーになろうと決めたら、まずは以下3つのプランを立ててみましょう。

(1)ゴールの設定（どんなWebデザイナーになりたいのかを決める）
(2)勉強の順序を決める（ゴールにたどり着くために必要な勉強をどの順序で行うのかを考える）
(3)勉強時間の確保（勉強に必要な時間を割り出して、どのように時間を確保するのかを考える）

まず「ゴールの設定」は「Webデザイナーになる」だけでは足りません。
Webデザイナーといっても、デザインをメインに行うWebデザイナーなのか、コーディングをメインに行うのか、もしくは両方ともメインで行うのか、などメイン業務の棲み分けがあります。
もちろん最終的には両方ともメインで行うWebデザイナーを目指したいという方が多いかもしれませんが、それを最初から目指すのか、デザイン・コーディングのいずれかをメインにするところから始めるのかを決めておくと良いでしょう。

次に「勉強の順序を決める」は、「ゴールの設定」で設定したゴールに必要な勉強をどの順序で行うのかを決めるということです。
Webデザイナーの勉強にはデザインの4原則（近接・整列・反復・コントラスト）などの知識面、Photoshop、Illustrator、さらに高度なUIデザイン・UXデザインを扱う技術面の勉強もあります。
自分が、ある程度の知識を得ていてからの方が技術面の理解がしやすいタイプなのか、技術面の勉強をしながら知識を増やしていく方が理解しやすいタイプなのか、など性質も考慮されると良いかもしれません。

また、技術面の中ではHTMLやCSSについての理解がされていないと、Javascriptは理解できないなど段階的な理解が求められる内容もあります。
自分の性質と段階的な理解を組み合わせて、勉強の順序を決めると良いでしょう。

最後に「勉強時間の確保」です。
働きながらWebデザイナーの勉強を独学でするのは簡単なことではありません。
毎日の生活リズムの中から勉強に充てられる時間を探し、足りなければ時間を作り出す工夫も必要でしょう。
反対に、学生など比較的時間が自由になりやすい人は、勉強時間を遊びや付き合いに取られないような意識・工夫も必要かもしれません。

独学でWebデザイナーを目指すための効率的なスキル別の勉強方法は？

（１）コーディング（HTML、CSS）スキルの勉強方法

先に「勉強の順序」について解説しましたが、その中で出てきた「コーディング」の勉強方法についていくつかご紹介します。

そもそも「コーディング」が何なのかわからない、という方もいらっしゃるかもしれません。
コーディングとは「Webサイトの形や見た目」を作る技術です。
このコーディングにはHTMLとCSSという2つの技術が要ります。

HTMLとは、サイトの骨組みを作る技術です。
文字や画像をサイトの中に書き込んだり、リンクを貼ったりするために必要なのがHTMLであるため、HTMLの技術がなければサイトに文字や画層が入れられません。
文字や画像がないサイトはサイトとしての役割を果たせないため、HTMLはサイト作成に絶対に必要な技術です。

CSSとは、HTMLで書き込んだ文字や画像以外の部分を作る技術です。
余白に装飾を入れたり、文字や画像の向きや形、色などを変える技術がCSSです。
CSSのスキルがないと、白地に文字と画像があるだけの、殺風景なサイトとなってしまいます。
このHTMLとCSSの技術については、デザインツールであるIllustratorやPhotoshopよりも先に勉強しておくと良いでしょう。
その理由はどんなデザインを思い描いても、それを形にする技術がなければ実現しないためです。

また、Webデザイナーの独学で多いのは「コーディングでの挫折」です。
コーディングは初心者には難しく感じるもので、自分には向いていないと感じる人も多いかもしれません。しかし、それはWebデザイナーとしての適性の有無を判断できる材料にもなります。
そのため、自分のWebデザイナーとしての適性を判断する目的でコーディングを先に勉強するという方法もあるかもしれません。

次に、HTML・CSSの勉強方法についてです。
独学でHTMLやCSSを学ぼうとする場合、書籍やオンライン学習を選択する人が多いでしょう。
書店にはWebデザイナーの教本がたくさん置かれていますし、Web上には無料で勉強できるサイトやサービスもあるようです。
それらの中から、書籍やオンライン学習を選ぶときには「これなら自分にもできそう」と感じるものが良いでしょう。
Webデザイナーの勉強はひとつできるようになったら、また次のひとつができるようにならなければならないため、最初は「簡単だ」と感じられることが大切かもしれません。
書籍やオンライン動画などを見ているだけではスキルは身につきません。
コードを打ち込み、実際の表示画面を確認するということを繰り返し実践することでスキルが身についていくでしょう。

そして、その勉強に加えると良いのが「すでに存在しているWebサイトの模写」です。
Web上で比較的シンプルな造りのサイトを探し、そのサイトと同じように作成をします。
複数のサイトを模写することで、実践と同じ経験が積め、自分が理解できていないところや、苦手とする箇所がわかりやすくなります。

（２）デザインツール（Illustrator、Photoshop等）スキルの勉強方法

次に「デザインツール」の勉強方法です。
デザインツールにはIllustratorとPhotoshopがあると先に解説しました。
しかし、これから独学でWebデザイナーを目指す段階であれば、まずはPhotoshopを学び、使いこなせるようになりましょう。
なぜなら、Illustratorは主にプロのWebデザイナーが使うツールであり、ロゴやイラストなどパーツを作成するためのツールだからです。
ロゴやイラストを使わない、初歩的なWebデザインであればPhotoshopだけで足ります。

Photoshopは、Webデザインのレイアウト（ヘッダー、フッター、ボタン、アイコンなど）を作成しながら、写真など画像の加工をするなど、Webデザインをするソフトとして広く使われています。
このPhotoshopは書籍に加えて、動画での勉強がおすすめです。
Photoshopは動きのあるツールであるため、書籍だけではイメージが難しい場合があります。
その点を動画でカバーできれば、勉強の効率が良く、理解も深まりやすいようです。

また、Photoshopにはたくさんの機能がありますが、そのすべてをWebデザインで使うわけではありません。Webデザインで使う、Photoshopの機能は以下の5つです。

(1)選択範囲と画像の操作
(2)レイヤー・ブラシ・シェイプ・グラデーション
(3)テキストツール
(4)マスク
(5)色調補正とレタッチ

この5つをきちんと身につける、と考えて少しずつゴールを目指して行くと良いでしょう。

（３）デザインの知識の勉強方法

次に「デザイン知識の勉強方法」について解説します。

Webデザイナーを目指す人には、デザインに興味がある方も多いでしょう。
そのため、初めからオリジナルのデザインを作成したくなるかもしれません。
しかし、デザイン知識は以下の順序で勉強するのがおすすめです。

(1)基礎知識の勉強
(2)プロが作成したデザインをたくさん見る
(3)自分でデザインを作成する

まずは、基礎知識について勉強します。
なぜなら、デザイン力は磨いていくことができるものだからです。
デザインには「これが良い、これは悪い」という基準がありません。
そのすべてが「オリジナリティ」という言葉に当てはめられます。
しかし、デザインには基本があります。
どのような配色でどのように配置すれば、どのような効果が期待できるのか、という部分がわかっていることで、結果としてオリジナルのデザイン力を磨くことにつながると言われています。
また、Webデザインの基本的なルールを学ぶことによって、無駄のないWebデザインがしやすくもなるでしょう。

次に、プロが作成したデザインをたくさん見ることで、そのサイトの目的に沿ったデザインが学ぶことができます。
たとえば、通販サイトでは物を買ってもらうためにどのような工夫がされているのか、企業の採用募集では多くの応募がされるためにどのような工夫がされているか、などです。
Webデザイナーとして仕事をするようになると、クライアントが欲しいユーザーを集客するよう求められることが大半でしょう。
SEOの知識と併せて、そのクライアントが競合よりも優れている、魅力的に見えるよう、Webデザイナーは工夫が求められます。
サイトの見やすさや使いやすさはもちろんのこと、「かっこいいデザインの方が、クライアントの要望に添えるのか」「サイトのターゲットに合わせ、かわいらしいデザインにするのか」など、さまざまな視点から考えられる力を養いましょう。
Webサイトを見て、クライアントがWebデザイナーにどのような要望をしたのか、という点をサイトから読み取るよう意識すると、貴重なデザイン知識として自分の中に蓄積できるかもしれません。

最後に、自分でデザインを作成するという勉強方法です。
基礎知識とプロが作成したサイトから読み解いた情報を基に、自分の中でクライアントを設定してWebデザインをしてみると良いでしょう。
初めは、すでに存在するWebサイトの模倣から始めて、徐々に自分なりの工夫を加えていくと良いかもしれません。
ただし、単に真似をして満足するだけでなく、なぜこのデザインが採用されているのか、など研究心を持ちながら向き合うようにしましょう。

Webデザイナーを独学で目指す人におすすめの本・サイトについて

おすすめの本・書籍など

次に、Webデザイナーを独学で目指す人におすすめの本をご紹介します。
本は「コーディングスキル」「デザインツール」「デザイン知識」の3つからそれぞれ1冊ずつ選んでいますので、ぜひ最初の1冊として候補に入れておいてください。

＜コーディングスキル＞
『スラスラわかるHTML&CSSのきほん 第2版』
出版社：SBクリエイティブ
編著者：狩野 祐東（著）
ISBN：978-4-7973-9315-6
価格：2,178円（税込）
ページ数：296ページ

初めてコーディングに挑戦する方におすすめの書籍です。
書籍の内容に沿っていくと、サイトが完成するように作られています。
HTML、CSSの基礎を学ぶ入門書として人気の書籍です。
この第2版ではパソコン以外のスマホやタブレットにも対応したサイト作成を学べるようになっています。サイト作成に必要な予備知識も含まれているため、まずはこの1冊だけでサイト作成ができそうです。

＜デザインツールのスキル＞
『世界一わかりやすい Illustrator & Photoshop 操作とデザインの教科書 CC/CS6/CS5対応（世界一わかりやすい教科書シリーズ）』
出版社：技術評論社
編著者：ピクセルハウス（著）
ISBN：978-4-7741-9551-3
価格：2,728円（税込）
ページ数：344ページ

Webデザイナーに必要な、Photoshopが基礎から学べる書籍です。
後にIllustratorの勉強をしたいと思ったときにも使えます。
まずは、PhotoshopとIllustratorの違いを理解し、それぞれの基本をマスターできるような構成です。
一つ一つの文章が短めに書かれていることもあり、まだデザインツールを使ったことがない方にも、比較的わかりやすいよう工夫がされています。
学習に必要なサンプルファイルは、Web上でダウンロードできることもおすすめな点です。

＜デザインの知識など＞
『ノンデザイナーズ・デザインブック 第4版』
出版社：マイナビ出版
編著者：Robin Williams（原著）、吉川典秀（訳）、小原司・米谷テツヤ（日本語版解説）
ISBN：978-4-8399-5555-7
価格：2,398円（税込）
ページ数：260ページ

Webデザイナーに必要な、デザインを学べる本です。発行から20年以上経った今でも、デザインの定番書として人気があります。PhotoshopとIllustratorという、連携して使える2つのソフトについて同時に学習できるため、知識を連携させることができます。分かりにくい箇所は図やイラストを使って解説しているので、初心者でも分かりやすいでしょう。

おすすめのサイト・オンライン学習サービスなど

最後に、Webデザイナーの独学勉強に使える「おすすめサイト・オンライン学習サービス」をご紹介します。

＜コーディング＞
■ドットインストール
■Progate
ドットインストールは、コーディングなどのプログラミング学習です。
特徴は、初心者でもわかりやすい動画学習と、無料でも学習ができるという点でしょう。
さらには、スマホでも動画の閲覧が可能なため、仕事との両立など時間に制限がある人にも嬉しいサービスです。
また、有料会員になればレッスン動画の速度変更が可能になったり、ソースコードの閲覧なども可能になります。
しかし、これは初心者にはさほど必要ないため、中級以上のスキルが身についてからでも遅くないでしょう。

ドットインストールでは、HTML・CSSはもちろん、JavaScriptやRuby、PHPやPython・Swift・Unityなど、その他多くのことが学ぶことができます。
将来はWebデザイナーだけでなく、可能性を広げていきたいと考えている人にもおすすめのサービスです。
ただし、ドットインストールはコードを書いて練習することができません。
そのため「Progate」という学習サイトと併用すると良いかもしれません。

Progateは学んだことを、すぐにコードで書いて実践できる学習サービスです。
インプットしたことをすぐにアウトプットできるため、理解が深まりやすく、理解できていないところもすぐに判断ができるでしょう。
HTML/CSSでは、初級編から上級編までコースが分かれているため、安心して学び始めることができるでしょう。

■Schoo
Schooはプログラミングやデザインが学べる学習サイトです。
大きな特徴は、生放送授業があることでしょう。
有名な講師の授業を受けながら、さまざまな知識を得ることができます。
授業中はチャットを使って質問ができるので、不明点をその場で解消できるもの魅力です。
もちろん生放送以外の動画も豊富に取りそろえられています。
動画時間は1本平均1時間あるので、ドットインストールなど1本の動画時間が物足りないという方にもおすすめです。
SchooにはWebデザイン以外の授業動画も豊富で、ビジネス英語やスタートアップ、ビジネスや教養など将来Webデザイナーとして実際に働く場面でも使える知識も学べます。

また、基本的には無料で受講できますが、有料のプレミアムプランに登録するとすべての授業が受講可能になります。
さらに料金が上乗せされたプレミアムプラスプランに登録すると資料のダウンロードも可能です。
ただし、有料会員は会費の日割り計算ができないため、有料登録をするのであれば月初がおすすめのようです。

■CodePrep
CodePrepは、無料でプログラミングが学べるオンライン学習サービスです。
初心者の方に特化した内容も多く、HTMLやCSSはもちろん、タグの基礎やJavaScriptの基本も学べます。
将来的に必要なJavaScriptやRuby、Python、PHPなど高度なプログラミング演習が容易されていることも魅力です。

どの内容も「ブック」と呼ばれるWeb上のテキストを基に実践で学びます。
そのため、自分のペースで学びたい人にもおすすめです。
各ブックはコードの穴埋め形式で構成されており、実際にプログラミングをしながらスキルを身につけていきます。

演習の中で分からないところがあれば、正しくプログラミングするためのヒントを得ることができますし、それでも分からない場合は「ディスカッション」という機能で講師に質問をすることも可能です。
また、受講生同士で不明点や解決法の共有をすることもできます。
さらには、各演習でアプリやシステムを作りながら学ぶため、達成感を得ながら学んでいけそうです。
そのため、コーディングやプログラミングに自身がなく、挫折の不安がある人にもおすすめかもしれません。

■Udemy
Udemyは世界最大級のオンライン学習サービスです。
サンフランシスコが発祥で、日本では日本版を受講することができます。
Udemyは有料受講ですが、受講料のコスパは良いかもしれません。
たとえば、「未経験からプロのWebデザイナーになる！400レッスン以上の完全マスターコース」は24,000円と、通信スクールなどに比べて安く設定されています。
さらに、期間限定セールには90％以上オフなど格安になることもあり魅力的です。
また、有料講座を申し込んでも、実際に受講して自分に合わないと感じた場合は30日間の返金保証がされています。

ただし、サンフランシスコ発祥ということもあり、外国人講師が多いようです。
動画によっては日本人向けの動画も多数用意されているようですが、その点も考慮しておいた方が良いでしょう。
レッスンはプレビューで確認できるので、まずはプレビューを使って内容や雰囲気を知るところから始めることをおすすめします。

購入したレッスンは何度でも見返すことができます。
一度では理解できなかった内容を、何度も見返して理解していったり、自宅でのながら学習にも向いていそうです。

この他にも、実際に自分でコーディングしながら学習をすすめていくスタイルの『CodeAcademy』という海外サイトもあります。

＜デザインなど＞
■SkillHub
SkillHubとは無料からプロを目指せる、オンラインスクールの学習サイトです。
14もの講座が無料で受講できるため、初心者にはうれしい内容でしょう。
illustratorだけでなく、HTMLやWordpressについても無料の受講が可能です。
各講義には「ビギナー」「やさしい」「ふつう」「むずかしい」など、内容の難易度が示されているので、初心者の人でも安心して選択できます。

さらには、講座は「1日1時間で7日」など、受講完了の目安も記載されています。
動画も小分けにされているので、「今日はここまで、明日はここから」と区切りもつけやすく、独学には適しているかもしれません。
どの講座も数回の動画に1回は「○○を作ってみよう」など、アウトプットをする回が含まれています。
なかなか自分では実践できない人でも、流れに乗って自然な実践ができるよう工夫されているようです。

■chot.design
chot.designは無料でデザインを学べる学習サイトです。
初心者に向けて「Webデザイナーを目指す人向け勉強法」や「デザインの基本4原則」などから用意されています。
レッスンは、無料の会員登録をするだけで受講できますし、どんなレッスンがあるかだけであれば会員登録をしなくても見ることができます。
また、会員登録をすると受講に応じて学習進捗の管理をしてくれるもの特徴です。
独学は一人で勉強をするため、自分が全体のどの程度勉強が進んでいるかを管理しにくいでしょう。
しかし、サイトが進捗管理をし、イラストで理解度を表してくれるのでモチベーションも上がりやすいかもしれません。
さらには、chot.designは基礎編・応用編・実践編の3部構成になっています。
自分の理解に応じて、自然とステップアップできるのも初心者には嬉しい仕組みでしょう。

■Adobe TV
Adobe TVはAdobeの製品である、Photoshopやillustratorなどの使い方が学べます。
そのため「デザインを学びたくて実践をしているけれど、ツールの使い方に手間取っている」という方におすすめです。
そして何と言っても、製品メーカーが提供している動画であるため信頼性が高いという安心感もありそうです。
動画はどれも10分ほどで、スキマ時間を使って視聴できます。
また、すべての動画にチュートリアルが用意されているので、基本的な操作を学びたい方でも安心して使えるでしょう。

Adobeは海外企業であるため、サイトは英語で作成されています。
しかし、検索窓に日本語で「Webデザイナー」などの文言を入れると関連する動画が出て来ますし、動画には日本語字幕が用意されていることも多いようです。
もしも日本語字幕が用意されていなくても、動画で学ぶためさほど困難ではないかもしれません。

Adobe TVの動画はすべて無料で視聴できますし、マイライブラリへの保存機能もあります。
自分が苦手とするツールの使い方をマイライブラリへ保存しておけば、何度でも見返しながら練習できる点も便利です。

■コリス
コリスは、講座ではなく読み物です。
Webデザイナーに向けた新着情報が記事として日々アップされています。
Webデザイナーが使うツールやライブラリを始め、技術の解説や応用方法なども知ることができます。
内容によっては、初心者には少し難しく感じる記事もあるかもしれませんが、プロにも通じる情報に普段から触れておくことも勉強のひとつかもしれません。
スマホやタブレットですぐに読めるブログ形式なので、毎日の通勤時間や休憩時間などスキマ時間の学習としてもおすすめです。

この他にも、国内・海外問わず優秀なWebサイトを確認できるギャラリーサイトの「I/O3000」などもありますので、参考になるのではないでしょうか。

今回ご紹介した以外にも、さまざまなサービスがあります。
実際に調べてみて、自身に合った方法で学習の手助けになればと思います。

Webデザイナーを目指せるおすすめスクール

ヒューマンアカデミー / 通信講座 * 『たのまな』（通信）

初心者でも安心して学習ができる！副業に人気の知識を習得！

スクールホームページ：
ヒューマンアカデミー / 通信講座 * 『たのまな』

デジハリ・オンラインスクール（通信）

スキルが身につく本格的オンラインスクール

スクールホームページ：
デジハリ・オンラインスクール

パソコンスクール アビバ（通学／全国）

全国に広がる開講拠点！就業サポートも充実！

スクールホームページ：
パソコンスクール アビバ

ヒューマンアカデミー（通学／全国）

スキルで選べる全38講座！初心者から現場で通じる実践力を身につける！

スクールホームページ：
ヒューマンアカデミー／通学

【バンフー】入学金ゼロ・印刷会社運営・最短2日でWEB/グラフィックを習得（通学／関東）

昼夜間・土曜の開講だから忙しい方でも安心

スクールホームページ：
【バンフー】入学金ゼロ・印刷会社運営・最短2日でWEB/グラフィックを習得

まとめ

独学でWebデザイナーを目指すための独学のプラン、コーディングやデザインツールのスキル別の勉強方法、おすすめの書籍やサイト、オンライン学習サービスなどについてご紹介をしてきました。

独学で勉強を進めていく場合、ゴールを設定し、どのように勉強時間を確保して、どのような順で学習を進めていくのか決めることが大切です。
独学で書籍やサイト、オンライン学習サービスで勉強を行うこともできますが、不明な箇所が出てきた時は
自分で解決をしていかなければなりません。
不明点が解消できないことで時間がかかってしまったり、モチベーションが下がってしまうこともあります。
スクールの通学・通信講座を受講すれば、不明点もすぐに解消することもできるのでおすすめです。
ぜひご検討されてみてはいかがでしょうか。