Weデザインは、スクールに通えば身につくかも？と思っても。
高額な授業料を見ると、なかなか一歩を踏み出すことを考えてしまいます・・・
Webデザインの勉強は、流れや注意点・学習方法をしっかりと把握しておけば、独学でも十分勉強することが可能です。
ただ時間がかかることはご了承ください。

この記事では、挫折せずに独学でWebデザインを勉強する方法をお伝えします。
無料で学習できるサイトも紹介しているので、ご自身で勉強したいと考えている方は参考にしてください。

Webデザインの学習で必要になるもの

◎Webデザインの学習で必要になるツール
①Photoshop（https://www.adobe.com/jp/products/photoshop.html）
　※フォトプランの安いものでもOK
②Illustrator（https://www.adobe.com/jp/products/illustrator.html）
　※ちょっと高いので初めはいらないかも
③XD（https://www.adobe.com/jp/products/xd.html）
④エディター（VSC）（https://azure.microsoft.com/ja-jp/products/visual-studio-code/）

Illustratorは、そこまで使わないかもなので。
Photoshop⇒XDの順番でデザインしても大丈夫です。

最近では、figmaというデザインツールも使われていますが。
上記のツールと似ているので、まずは1つのツールを使えるようになったら派生がしやすいですね。

Webデザインを仕事にするには、何のスキルをどのくらい必要？

▼Webデザイナーの仕事範囲▼
①HTML/CSS
②Webデザイン（Photoshop・XDの習得）※イラレは最近そこまでWebデザインに使用しません
③レスポンシブ（スマホ対応）
④jQuery
===ここまでは必須===
⑤WordPress

PHPやJavaScriptなどは、はじめは必要ないです。
WordPressもPHPでできていますがPHP言語は、はじめは覚える必要はないです。
※余裕があれば軽めに勉強する程度で

まずやるべきことは、基本的な部分のクオリティとスピードを優先したほうが実務で役立ちます。
NGなのは、レベルが低いのにあれこれ手を出すことです。
ある程度、理解して問題ないレベルで仕事ができれば新しいことを取り入れてもいいですね。

他にも周辺知識として、
・Webマーケティング
・SCSS
・GitとGitHub
・FTPやサーバー周り

など、スキル以外にも専門知識が必要になります。

初心者のうちに困るのが、知らない情報が多すぎて会話についていけないことです。
そのため日頃から情報収集をしておかないと、思わぬところでつまずくことになります。

Webデザインを挫折しない効率のいいステップ

Webデザインの効率のいい学習の流れ

Webデザインを勉強するときは、流れに沿って勉強することが重要となります。
流れに沿わない形で勉強をしてしまうと、非効率な時間が生まれてしまいます。
そして時間がかかると挫折してしまうことが多くなるので、まずは全体の流れを知っておいてください。

まず前提として、勉強の順番はコーディング→デザインの順番で行うようにしましょう。

この順番がおすすめな理由ですが

・Webデザイナーとしての適性を見極められる
・デザイン以外の大事なポイントや仕組みを知ることができる

Webデザイナーを目指す人にとって、コーディングが壁になる人もいます。
この段階で拒否反応が出るほど、難しいと感じる場合もあるでしょう。
本当にWebデザインが自分にできるのか判断するためにも、コーディングから行ってみましょう。

Webデザインの学習の流れは5つのステップに分けられます。

Webデザイン学習の5つのステップ
①動画学習でざっと全体像を確認（インプット）
②実際に手を動かす（アウトプット）
③基本は、ほどほどにオリジナルで何かを作る
④基本をきちんと復習
⑤応用や実践的な勉強

それぞれのステップを簡単に解説します。

①動画学習でざっと全体像を確認（インプット）

後ほど詳しく紹介しますが、現在ではProgateやドットインストールを使用すると無料でコーディングの学習が可能です。
他にもYouTubeなど学習教材としても使えるようになりました。
もちろん無料なので、あまり網羅性は無いかもですがスタートにはちょうどいいです。

デザインも同じく、YouTube動画などで勉強していけます。
まずは、模写やバナーなどの小さめの制作物が取り掛かりやすいですよ。

②実際に手を動かす（アウトプット）

インプット学習のあとは、実際に手を動かすことが大事です。動画を見るだけでマスターできません。
コーディングもデザインも、ツールを使用して進めていきましょう。
まずは動画や教材と同じ様に真似して、慣れていくことに全集中しましょう。

③基本は、ほどほどにオリジナルで何かを作る

スキルは、何かを作りながら勉強することでレベルアップしやすくなります。

簡単なWebサイトを作る中でメニューの部分を作ったり、写真を挿入したりすることで、Webサイトを作っている実感を味わうことができます。
いきなり難しいものを作ると混乱してしまうため、簡単なものから作りましょう。

④基本をきちんと復習

Webデザインでは、基本を徹底的に定着させることが一番の近道になります。
もちろん数ヶ月で身に着けれるわけではありませんので、コツコツ体に定着させます。

基本〜初級の部分でも難しく感じたり、分からないことも多くあります。
まずは、できる限り検索して解決策を見つけるようにしましょう！
実務でも結局、先輩にと寄れない場面も多くありますので。

理解度チェックとして、オリジナルでサイトを1つ作成してみるといいですね。
実際に制作してみると、『わかったつもり』の箇所に気づけます。

基本から応用へ焦らず着実にステップアップしましょう！

⑤応用や実践的な勉強

基本の習得ができた後に、応用の勉強を始めてください。

コーディングだと、アニメーションや複雑なレイアウト、WordPressなど。
デザインなら、Webデザインや複数ページのデザインなど。

筋トレと同じ様に、負荷を上げていく事が大事です。
コチラに関しては、焦らずに基礎が理解できたタイミングで進めていきましょう。

Webデザインを独学で勉強するときの注意点

Webデザインの勉強を独学でする場合、いくつかの注意点があります。
効率の良い勉強をするためにも、注意点を把握することは非常に重要です。

独学で勉強するときの注意点を3つ紹介します。

①まとまった学習時間を取ること（仕事中なら最低月40時間）
②質問できる環境を用意しておく
③どんどん進めて制作実績を増やす

①まとまった学習時間を取ること（仕事中なら最低月40時間）

Webデザインの勉強は、まとまった学習時間の確保が必要です。
とくに、ツール操作やコーディングは期間を空けると忘れてしまいます。。

せっかく勉強した内容を忘れるのは非効率なので、なるべく毎週コンスタントに学習時間を確保しましょう。
仕事をしながら勉強する場合は、1ヶ月に最低40時間の学習時間を確保することが理想です。
※もっと多く取れる人は、できるだけ多く学習時間を確保しましょう

仕事をしながら学習するのは、かなり大変なので。スキマ時間を活用することをオススメします。

考えられるスキマ時間
・電車の移動時間とか
・寝る前の30分とか
・入浴中とか
・ぼ〜としている時間とか

こういった、日常の隙間にいかに意識を取るかがポイントです。
ただあくまでもスキマ時間なので、アウトプットには向いていません。

②質問できる環境を用意しておく

独学で勉強する場合は、質問できる環境を用意して質問・相談できる環境を整えましょう。
誰かに質問できる環境がないと、間違った情報や知識をそのままにしてしまうリスクがあるからです。
あとは単純に進みが悪いので、挫折はしやすくなります。

現在ではインターネット上でスキルを売買するようなサイトも存在しており、代表例としては”ココナラ”が挙げられます。
ココナラでは家庭教師のようなサービスを提供している人も多く、「Webデザインの勉強で生じた疑問に回答します」というサービスを提供している人もいます。

現役のデザイナーが対応するケースもあるので、いつでも質問できる環境を用意して勉強を進めましょう。

③どんどん進めて制作実績を増やす

学習をした後は何か形に残るものを作りましょう！

ひとまずでも簡単なサイトを製作すると、学習した知識がスキルとなって定着します。
また、自分の弱点や記憶に残りにくい部分はどこなのか理解することもできます。
インプットに偏らず学習をした後は、制作物のアウトプットも欠かさずに行いましょう。

制作物の例
・自分でデザインしてコーディングまで行う
・ポートフォリオをつくる
・個人で仕事を請けるためのサイトを作る
・知人や家族や親戚のサイトを作る
・オンラインでコンペに応募してみる

できることは沢山あるので、はじめは数打ちのため、しんどいかもしれないですが頑張りましょう！

自宅で1人でもできる、独学の学習方法

Webデザインを独学で勉強する場合には、主に3つの学習方法があります。
それぞれの学習方法におけるポイントを理解しておくと、スムーズかつ効率的な勉強が可能です。

学習方法で効果的な書籍やサイトを紹介します。

Webデザインを動画で勉強する場合は？

動画で勉強する場合は、Youtubeやドットインストールを利用して勉強することがおすすめです。
Youtubeでは非常に多くのHTML・CSSの解説動画がアップロードされているので、動画を見るだけでも勉強に繋がります。

また、ドットインストールでは講師がコードを打ちながら解説する動画を見れます。

https://dotinstall.com/

月額1,080円(税込)を支払うことで全ての動画が閲覧可能となり、文字起こしや講師のボイス(男性・女性)の選択も可能です。
注意点として、動画で勉強する場合は必ずテキストエディターを使用し、自分も手を動かすようにしましょう。

Webデザインの書籍で勉強する

Webデザインの勉強は書籍でもすることができますが、購入するときは、発売されてから1〜2年の書籍を選んでください。

Webデザイン業界は、非常に進歩が速く、次々と新しい技術が開発されています。
発売されてから3年以上経過している書籍を購入すると、内容が古く参考にならない場合があるからです。

書籍を購入する場合はいつ発売されたのか、可能であれば内容を簡単に確認してから購入しましょう。

おすすめの書籍には、『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』があります。

https://books.rakuten.co.jp/rb/15822265/

内容も新しく、サイトを一通り作るまでの流れも解説されています。基本的な内容を勉強したい方にとっては必須の一冊です。

ゲームみたいに学習サイトで勉強する

学習サイトで勉強する場合は、プログラミングが勉強できるサイトや、HTMLやCSSを図解で説明しているサイトがわかりやすいです。
プログラミングが勉強できるサイトで学習をしながら、疑問点を他のサイトを賢妻して解消することが効果的です。

プログラミングを勉強するときには、『Progate』の利用がおすすめとなります。

https://prog-8.com/

HTMLやCSSはもちろん、jQueryやJavascriptも勉強することができます。
月額980円(税別)が必要となりますが、体系的に勉強できるので人気も高くおすすめのサイトです。

また、『サルワカ』というサイトはつまずきやすい部分を図解で説明しており、独学で勉強する人にとって強い味方となるサイトです。

https://saruwakakun.com/

HTMLやCSSに加えてPhotoshopの使い方も解説しているので、デザインを勉強する人には頼りになるサイトとなります。

Webデザイン独学だと、転職までどのくらいの期間が必要？

多くのスクールが、4〜6ヶ月くらいになります。長いと1年のスクールもあります。
そういった背景を考えると、スキルを習得して転職のための制作物を作るのに6〜8ヶ月くらい。
転職活動期間も考えると、もう少しかかるかもしれません。（平均2ヶ月間くらい）

お仕事をしながらだと、時間がかかることはありますが。
すでに会社を退職して時間のある方は、もしかするともっと早くできるかもせいれません。

Webデザイン独学でもフリーランスになれるのか？

フリーランスになるには、仕事が必要です。
仕事があれば、スキルが未熟でもスタートすることはできます。
ただ品質が悪いとお店が潰れるように、仕事が来なくなり廃業してしまうことも結構みたことがありますね。。

できるだけ焦らず、スキルアップや準備をしてなることをオススメします。
転職して1年だけでも制作経験を会社で積むのも全然ありですよ。

まとめ

独学でWebデザインの勉強をするときの流れや注意点・学習方法などを紹介しました。

世の中にはさまざまなサービスがあり、そのサービスを活用することで独学でも学習ができます。
実際に勉強するときは、ただ継続するだけではなく実際に制作を行うことが非常に重要です。

また別の記事で、制作内容についても触れていこうと思います。
まずは基礎をしっかり身につけてください！