Webデザインの勉強は何から始めればいいの？挫折しない独学勉強法
Webデザイン
2022年6月18日→2023年1月7日
こんにちは、ゆうきです。
「Webデザインの勉強を始めたいけど、一体何から勉強すればいいの？」
「Webデザインを独学で学ぶつもりだから、効率的な勉強法も知りたい」
上記の疑問に答えます。
ぼく自身、元々Webデザインとは無縁の建築の仕事をしていました。
しかしWebデザインのスキルを独学で習得して今はWeb制作会社に勤務しつつ、個人でもお仕事をもらえるようになりました。
こういった背景があるぼくが、これからWebデザイナーを目指してるIT知識ゼロの完全初心者でも、 ノースキルからWebデザインのスキルを身につけて転職する方法を紹介します。
Webデザインの仕事を軸に、ゆるく生活していきたい方には必見です。
本記事の内容
- ・Webデザインの独学勉強法【6ステップで解説】
- ・Webデザインの勉強で必要なもの
- ・Webデザインの勉強はどこから、どこまで勉強をすればいいの？
目次
- Webデザインの勉強は何から始めればいいの？挫折しない独学勉強法
- Webデザインの勉強で必要なもの
- Webデザインの勉強はどこから、どこまで勉強をすればいいの？
- Webデザインを独学するメリット・デメリット
- Webデザインの独学で限界を感じたらスクールもあり【確実性】
- Webデザインを勉強つつ、転職活動をしよう
- 最後に
【結論】Webデザインは独学でも習得できる話
逆算勉強法が最短の道のりである話【3万円稼ぐ方法】
Webデザインの独学勉強法【6ステップで解説】
やってはいけない勉強法【知識は5割でOK】
さっそく、みていきましょう。
Webデザインの勉強は何から始めればいいの？挫折しない独学勉強法
Webデザインのスキルを独学で習得したいけど、何から始めればいいのわからず立ち止まっている方は多いはずです。
ぼくもそうでした。
ご紹介する独学勉強法は、過去の自分にも向けて書いているので完全初心者の方に超おすすめです。
【結論】Webデザインは独学でも習得できる話
Webデザインは独学でも習得可能です。
ハードルが高そうに見えますが、そんなことないです。
今は、無料でもかなり有益な教材があるので、金銭面的にもあまり心配しなくてOKです。
ちゃんと目標を明確にして勉強を進めれば独学でも習得できます。
逆算勉強法が最短の道のりである話【3万円稼ぐ方法】
結論、目標から逆算して勉強する、が最短で効率的な勉強法です。
ぼくはこのやり方が、最短でWebデザインのスキルを身につけることができると思っています。
理由は、目標をあらかじめ設定することで、ムダな学習をせず最短でスキルを取得することができるからです。
具体的には、下記の流れです。
- ① 目標：「月3万円稼ぐ！」
- ② 月3万円稼ぐにはどんなスキルが必要なのか調べる
- ③ 学習スタート
② 「月3万円稼ぐにはどんなスキルが必要なのか調べる」については、クラウドソーシングで実際の案件を確認すればわかります。
↓こんな感じです。↓
※ 今回は完全初心者向けの記事なのでSEO対策は省きます。
依頼案件には、基本的に参考サイトが添付されていることが多いです。
その参考サイトが、コーディングできればOKです。
また案件によっては、デザインからコーディングまでセットのお仕事もあります。
なので、多少デザインソフトが扱えるようになっておいた方がいいです。
Webデザインの独学勉強法【6ステップで解説】
- ステップ1：Webの仕組みを理解する【基礎理解】
- ステップ2：HTML/CSSの基礎学習
- ステップ3：簡単なサイトを作る（模写でOK）
- ステップ4：JavaScriptの基礎学習
- ステップ5：簡単な「動く」サイトを作る
- ステップ6：webデザイン・デザインソフトの学習
「意外とやること多いな〜」と自信をなくすかもですが、全部を完璧にしようとしてはダメです。
それでは一つ一つ具体的に、解説していきます。
ステップ1：Webの仕組みを理解する【基礎理解】
大前提としてWebサービスやアプリが動く仕組みは、理解しておくべきです。
全体像がざっくり理解できれば一旦、OKです。
本でも理解できますが、ここはYouTubeでサクッと理解しましょう。
わかりやすい動画がありましたので、載せておきます。
ステップ2：HTML/CSSの基礎学習
Webデザインを勉強するなら、HTML/CSSの知識は必須です。
ざっくり説明すると下記の通りです。
HTMLとは、文章や画像の構造を決めるもの>
CSSとは、HTMLで配置した文章や画像の見た目（文字、色の大きさなど）を指定するもの
HTML/CSSの勉強法
- （1）参考書や動画で基礎を理解
- （2）実際に手を動かしてコードを書きながら理解を深める
- （3）（2）を２、３周する ※人による
基礎理解は5割程度で理解すれば一旦、OKです。
※ 全部を完璧にしようとしてはダメです。
HTML/CSSのおすすめ本
とりあえず、この1冊あればいいと思います。
HTML/CSSの基本を体系的に学べることができるので、初心者の方はまずはこれっ！という感じです。
HTML/CSS学習サービスのおすすめサイト
プロゲート
スライド式で実際にコードを書きながら学べるので、とてもおすすめです。
基礎学習までは無料。
応用・実践編からは有料になります。（1,078円/月）
動画学習のおすすめサイト【Udemy】
自分がほしいスキルを学べるオンライン学習サイトです。
無料もありますが、有料をおすすめします。
頻繁に90%offセールが行われているので、そのタイミングで買うのがベストです。
買い切りなので、自分の好きな時に学ぶことができ、いつでも振り返って学習することができます。
気になる方は、こちらから
ステップ3：簡単なサイトを作る（模写でOK）
何を学ぶにせよ
HTML/CSSを学習したら、手を動かして簡単なサイトを作ってみることです。
ネットから自分でできそうなサイトを見つけ、それを自分でコーディングします。
下記に参考になるサイトを集めたギャラリー集のサイトリンクを貼っておきます。
I/O 3000 >
テキストや画像など著作権についてですが、自分のサイトとしてアップするわけではないので気にしなくていいです。
ここで恐らくわからない点に遭遇し、壁にぶち当たるタイミングです。
ステップ2では、問題に遭遇した時、答えがすぐにわかる環境でしたが、実際にサイトを作る際、答えは自分で探す必要があります。
どうしても心が折れそうならSNSで自分と同じタイミングで勉強を始めた人と繋がってモチベ維持しましょう。
相談相手がいるか、いないかで挫折率を下げることができますよ。
挫折にしない対策については、9割が挫折する理由！？プログラミング独学で挫折しない対策と学習法で解説していますので、良かったらどうぞ。
HTMLとCSSの独学勉強法も、HTMLとCSSを1ヶ月で習得する独学勉強法【無料学習ツールも紹介】参考にどうぞ。
ステップ4：JavaScriptの基礎学習
JavaScriptはざっくり言うと、
HTML/CSSをリアルタイムで書き換えブラウザを「動かす」ための言語
です。
スライドショーや開閉するナビゲーションメニューは、JavaScriptを使用されています。
学習方法はHTML/CSSと一緒です。
- （1）参考書や動画で基礎を理解
- （2）実際に手を動かしてコードを書きながら理解を深める
- （3）（2）を２、３周する ※人による
【JavaScriptのおすすめ本】
ステップ5：簡単な「動く」サイトを作る
JavaScriptがある程度理解できたら、JavaScriptを使って「動く」サイトを作ってみることです。
例）スライドを入れたり、スマホ時はドロワーを入れるなど、、、
この段階まで来ると余裕で仕事を受注するとこができるので、クラウドソーシングで応募しまくるのもアリです。
ステップ6：Webデザイン・デザインソフトの学習
デザインの基本的な仕組みから実際にデザインソフトを使って、自分でデザインできるところまでやってみます。
Webデザインの学習方法
- （1）書籍でWebデザインの基礎理解
- （2）トレース（参考サイトを再現する）
おすすめの書籍は、 本当に買って良かった！初心者向けwebデザインのおすすめ本5選 にて紹介しています。
（2）トレース学習法のポイント
なぜこのデザインはいいのか？を考える
※写真の配置の仕方、フォント、色、余白、各コンテンツの位置
｢なぜ｣を放置してはいけません。
単純にトレースをするだけだとトーレスをすることが「目的」になっているので、全く意味がありません。
｢なぜ｣を突き詰めるとそのさきに｢気付き｣が見えてきます。
このデザインが｢なぜ｣いいのかを説明できるようになればOKです。
【デザインソフトについて】
デザインソフトは、最初から動画や参考サイトを見つつ作業でOKです。
画像の切り抜き、合成などは「Adobe Photoshop」
デザインカンプの作成は「Adobe XD」
上記が使えればOKです。
というわけで以上です。
ステップ1〜6の学習期間
毎日コツコツ頑張れば、ステップ1〜6までを3ヶ月ほどで、達成できると思います。
やってはいけない勉強法【知識は5割でOK】
結論、知識を完璧にしてから作業
NGです。初心者がやりがちなので注意してください。
CSSだけで、膨大な量のプロパティがあります。
それを全て覚えようとするなど時間のムダです。
なのでググりつつ、作業しましょう。
わからなければググる、ググるクセをつける感じです。
コードを書いててググってもわからなければ、後回しでOKというスタンスで問題ないです。
あとで見返した時に、間違いに気づく時もあります。
なので知識は5割程度ついたかな、と思えば手を動かして知識をアウトプットすることをおすすめします。
Webデザインの勉強で必要なもの
「これからWebデザインの勉強をはじめたいから必要なもの教えて」
という方がいますが、結論、PC1台あればできます。
紹介したWebデザインの独学勉強法【6ステップ】は、Web上で完結できます。
とはいっても、勉強していくと物足りなさを感じるはずなので勉強の生産性を高めるアイテムを3つ紹介します。
- ・モニター
- ・ノートPCスタンド
- ・座面クッション
いずれ嫌でも欲しくなると思います、、
モニターは、金銭的に余裕がある人のみでOKです、シンプルに高いので！
その他は、 Webデザインを独学で始める前に必要なもの6つ【経験談】 で解説していますので、よかったらどうぞ。
Webデザインの勉強はどこから、どこまで勉強をすればいいの？
初心者の方はおそらく勉強してて、どこから、どこまで勉強をすればいいのか判断するのが難しいです。
各項目ごとに、まとめてみました。
HTML
- HTML5タグの理解（article / asaide / main / header / footer…）
- デザインカンプを見てdiv構造がわかる
- headタグ内の理解
- 頻出タグの理解（h1〜h6 / a / img / p / span / ul / li / table / form）
CSS
- リセットcss
- flexbox
- 擬似クラス
- 擬似要素
- インライン要素 / ブロック要素 / インラインブロック要素の理解
- レスポンシブ
- 余白（margin / padding）
- その他に、色やサイズの指定
JavaScriptやデザインソフトについては、必要に応じて調べるのがベストです。
理由は、作りたいサイトによって必要なスキルが違うからです。
Webデザインを独学するメリット・デメリット
Webデザインを独学する3つのメリット
- ・学習費用が安い
- ・問題解決能力が身に付く
- ・自分のペースで学習できる
Webデザインを独学する4つのデメリット
- ・挫折しやすい
- ・必ず転職できるわけではない
- ・時間がかかる
- ・自分のレベル感がわからない
独学のデメリットが大きく見えますが、最初言ったように明確な目標と計画があれば、「Webデザインは独学可能」です。
メリット・デメリットの詳細は、プログラミング独学のメリット・デメリットとは【成功の秘訣も紹介】で紹介しています。
Webデザインの独学で限界を感じたらスクールもあり【確実性】
どうしても独学がしんどい、もう無理かもと思ったらスクールを検討すべきです。
挫折は悪いことじゃないですよ、それが普通です。
無理に独学を続けようとしても、また挫折する可能性があります。
それなら手っ取り早くスクールに通ってスキルを習得する方が圧倒的に早いです。
詳しくは、こちら
副業で受講料を回収したい方向け
卒業生の中に、5ヶ月で受講料を回収した方もいるようです。
詳しくは、
はじめての副業コース
もはや受講料は、一時的なものですぐ回収できるのが分かりますね、、
Webデザインを勉強つつ、転職活動をしよう
転職活動するタイミングって？
結論、基礎レベルが終われば転職活動してOKです。
かと言って、何もない状態で面接に行っても落とされるので、最低限ポートフォリは用意しておきましょう。
ポートフォリの作り方は、未経験者Webデザインナー向けポートフォリオの作り方から公開までで解説していますので、良かったらどうぞ。
転職活動は、エージェントに相談しつつ進めると良きです。
いきなりフリーランスは、やめておきしょう
完全未経験でフリーランスを目指す方がいますが、ぼくは反対です。
理由は、実績を積みながら、ノウハウを盗めないからです。
発注者側になって考えよう
実務経験者に比べて実績ゼロ、業界初心者に仕事を依頼するのは、リスクありますよね。
会社はお金をもらいながら、勉強できる最高の場なので、まずは実務を経験しましょう。
最後に
というわけで、以上です。
ぼくがおすすめするIT知識ゼロの初心者でもノースキルからWebデザインのスキルを身につける具体的な方法を解説してきました。
学習を進めていて忘れてはいけないのは、目的意識を持って学習することです。
自分が今、なんの為にこの学習をしているのか理解して学習を進めていきましょう！
