挫折せずに独学でWebデザインを勉強する方法【無料学習サイト】
たにまちくん
トリペン先生
Webデザインは独学でも身につけることができるよ。今回はその方法を教えるからね。
でも確実に早く身につけたいなら、スクールとか考えてもいいかもね！
Weデザインは、スクールに通えば身につきやすいと思っていても、高額な授業料を見るとなかなか一歩を踏み出すことも考えてしまいますよね。
Webデザインの勉強は、流れや注意点・学習方法をしっかりと把握しておけば、独学でも十分勉強することが可能です。
この記事では、挫折せずに独学でWebデザインを勉強する方法をお伝えします。
無料で学習できるサイトも紹介しているので、一度自身で勉強したいと考えている方は参考にしてください。
目次
Webデザインを仕事にするには、どのくらいのスキルを身につければいいのか？
たにまちくん
いいかわからないよ〜。
人によって言うことも違うし実際どうなの。。
トリペン先生
でも、1年目まではやることも勉強範囲もきまっているよ！
②Webデザイン（Photoshop・XDの習得）※イラレは最近そこまでWebデザインに使用しません
③レスポンシブ（スマホ対応）
④jQuery
===ここまでは必須===
⑤WordPress
PHPやJavaScriptなどは、はじめは必要ないです。
WordPressもPHPでできていますがPHP言語は、はじめは覚える必要はないです。
まずは、基本的な部分のクオリティとスピードを優先したほうが実務で役立ちます。
NGなのは、レベルが低いのにあれこれ手を出すことです。
ある程度、理解して問題ないレベルで仕事ができれば新しいことを取り入れてもいいですね。
・マーケティング
・SCSS
・GitとGitHub
・FTPやサーバー周り
など、スキル以外にも専門知識が必要になります。
初心者のうちに困るのが、知らない情報が多すぎて会話についていけないことです。
そのため日頃から情報収集をしておかないと、思わぬところでつまずくことになります。
Webデザインの学習の流れとスキルセット
たにまちくん
トリペン先生
でも基本的には、1年目の勉強内容はみんな同じなので流れを知っておくといいよ。
Webデザインの効率のいい学習の流れ
Webデザインを勉強するときは、流れに沿って勉強することが重要となります。
流れに沿わない形で勉強をしてしまうと、非効率な時間が生まれてしまいます。
まず前提として、勉強の順番はコーディング→デザインの順番で行うようにしましょう。
この順番がおすすめな理由は、
・デザイン以外の大事なポイントや仕組みをしることができる
Webデザイナーを目指す人にとって、コーディングが壁になる人も少なくありません。
この段階で拒否反応が出るほど、難しいと感じる場合もあるでしょう。
本当にWebデザインが自分にできるのか判断するためにも、コーディングから行ってみましょう。
Webデザインの学習の流れは5つのステップに分けられます。
②実際に手を動かす
③基本は、ほどほどに何かを作る
④基本をきちんと復習
⑤応用の勉強
①動画でざっと全体像を確認
後ほど詳しく紹介しますが、現在ではProgateやドットインストールを使用すると無料でコーディングの学習が可能です。
ドットインストールは動画での学習が可能で、Webサイトが出来上がっていく過程を目で見ることができます。
講師の方がコードを打ち、その結果どういった変化が起こるのかを中心に解説しているので、はじめに全体像を確認できるのが大きいポイントになります。
②実際に手を動かす
コーディングの学習は実際に手を動かすことが大事です。
動画を見るだけでマスターできるものではありません。
自分でコードを打つことができる環境を用意して、自分でも打ちながら勉強しましょう。
コードを打つ際にはテキストエディターが必要になります。
代表的なテキストエディターには、『Brackets』や『VSC』などがあります。
③基本は、ほどほどに何かを作る
コーディングの勉強は、何かを作りながら勉強することでレベルアップしやすくなります。
簡単なWebサイトを作る中でメニューの部分を作ったり、写真を挿入したりすることで、Webサイトを作っている実感を味わうことができます。
いきなり難しいものを作ると混乱してしまうため、簡単なものから作りましょう。
④基本をきちんと復習
Webデザインでは、基本を徹底的に定着させることが求められます。
基本の部分が難しいと感じる方もたくさんいますが、応用の勉強ではさらに難しく感じる場面が多くなります。
この時に、理解度チェックとしてオリジナルでサイトを1つ作成してみるといいですね。
実際に制作してみると、『わかったつもり』の箇所に気づけます。
基本から応用へ焦らず着実にステップアップしましょう！
⑤応用や実践的な勉強
基本の習得ができた後に応用の勉強を始めてください。
HTMLやCSSにはたくさんのタグやプロパティが存在しており、レベルの高いサイトを作るにはなるべく多くのタグやプロパティを知っておく必要があります。
ただし、実務ではあまり使わないものも多数存在するため、本当に必要なものか確認しておきましょう。
スマホ対応やアニメーションなども実装してみるといいです。
デザインも1からサイトまるごと作成してみましょう。
独学で勉強するときの注意点
たにまちくん
うまく行っている人はどんな事をしているんだろう？？
Webデザインの勉強を独学でする場合、いくつかの注意点があります。
効率の良い勉強をするためにも、注意点を把握することは非常に重要です。
独学で勉強するときの注意点を3つ紹介します。
まとまった学習時間を取ること（仕事中なら最低月60時間）
Webデザインの勉強は、まとまった学習時間の確保が必要です。
とくにコーディングは期間を空けると忘れてしまいます。
せっかく勉強した内容を忘れてしまうのは非効率ですので、なるべく毎日学習時間を確保しましょう。
仕事をしながら勉強する場合は、1ヶ月に最低60時間の学習時間を確保することが理想です。
家での勉強や電車内での勉強のように、スキマ時間を活用することも重要な要素となります。
・寝る前の30分とか
・入浴中とか
・ぼ〜としている時間とか
こういった、日常の隙間にいかに意識を取るかがポイントです。
質問できる環境を用意しておく
独学で勉強する場合は、質問できる環境を用意していつでも質問・相談できる環境を整えましょう。
誰かに質問できる環境がないと、間違った情報や知識をそのまま受け入れてしまうリスクがあるからです。
現在ではインターネット上でスキルを売買するようなサイトも存在しており、代表例としては”ココナラ”が挙げられます。
ココナラでは家庭教師のようなサービスを提供している人も多く、「Webデザインの勉強で生じた疑問に回答します」というサービスを提供している人もいます。
現役のデザイナーが対応するケースもあるので、いつでも質問できる環境を用意して勉強を進めましょう。
理由として、オンラインだけの学習は初心者には実はハードルが高いです。
そもそも、何を質問していいかわからない、どういった質問をすればいいか分からないと挫折する人が多くいます。
学習したら必ず何かを作ること
学習をした後は何か形に残るものを作りましょう。
実際にコードを打って簡単なサイトを製作すると、学習した知識がスキルとなって定着します。
また、自分の弱点や記憶に残りにくい部分はどこなのか理解することも可能です。
インプットに偏らず学習をした後はアウトプットも欠かさずに行いましょう。
・ポートフォリオをつくる
・個人で仕事を請けるためのサイトを作る
・知人や家族や親戚のサイトを作る
・オンラインでコンペに応募してみる
など、できることは沢山あるので、はじめは数打ちのため、しんどいかもしれなですが頑張りましょう！
1人でもできる、独学での学習方法
トリペン先生
動画⇒テキストの流れが、初心者でもわかりやすいですよ！
Webデザインを独学で勉強する場合には、主に3つの学習方法があります。
それぞれの学習方法におけるポイントを理解しておくと、スムーズかつ効率的な勉強が可能です。
それぞれの学習方法で効果的な書籍やサイトを紹介します。
動画で勉強する場合は？
動画で勉強する場合は、Youtubeやドットインストールを利用して勉強することがおすすめです。
Youtubeでは非常に多くのHTML・CSSの解説動画がアップロードされているので、動画を見るだけでも勉強に繋がります。
また、ドットインストールでは講師がコードを打ちながら解説する動画を見れます。
月額1,080円(税込)を支払うことで全ての動画が閲覧可能となり、文字起こしや講師のボイス(男性・女性)の選択も可能です。
注意点として、動画で勉強する場合は必ずテキストエディターを使用し、自分も手を動かすようにしましょう。
Webデザインの書籍で勉強する
Webデザインの勉強は書籍でもすることができますが、購入するときは、発売されてから1〜2年の書籍を選んでください。
Webデザイン業界は、非常に進歩が速く、次々と新しい技術が開発されています。
発売されてから3年以上経過している書籍を購入すると、内容が古く参考にならない場合があるからです。
書籍を購入する場合はいつ発売されたのか、可能であれば内容を簡単に確認してから購入しましょう。
おすすめの書籍には、『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』があります。
昨年の3月に発売された書籍なので内容も新しく、サイトを一通り作るまでの流れも解説されています。基本的な内容を勉強したい方にとっては必須の一冊です。
ゲームみたいに学習サイトで勉強する
学習サイトで勉強する場合は、プログラミングが勉強できるサイトや、HTMLやCSSを図解で説明しているサイトがわかりやすいです。
プログラミングが勉強できるサイトで学習をしながら、疑問点を他のサイトを賢妻して解消することが効果的です。
プログラミングを勉強するときには、『Progate』の利用がおすすめとなります。
HTMLやCSSはもちろん、jQueryやJavascriptも勉強することができます。
月額980円(税別)が必要となりますが、体系的に勉強できるので人気も高くおすすめのサイトです。
また、『サルワカ』というサイトはつまずきやすい部分を図解で説明しており、独学で勉強する人にとって強い味方となるサイトです。
HTMLやCSSに加えてPhotoshopの使い方も解説しているので、デザインを勉強する人には頼りになるサイトとなります。
まとめ
独学でWebデザインの勉強をするときの流れや注意点・学習方法などを紹介しました。
世の中にはさまざまなサービスがあり、それらのサービスを活用することで独学でも学習が継続できます。
実際に勉強するときは、ただ継続するだけではなく実際に制作を行うことが非常に重要です。
今回紹介した内容を参考にして、独学での勉強をより効果的なものにしましょう。
