こんにちは、りょうすけです。
今回はこれからWeb制作の学習をされる方に向けて「独学で Web制作を習得するための最短ロードマップ」を解説します！
あなたはこんな風に思ったことないですか？
・Web制作で稼いでいきたいけど、独学で本当に大丈夫なの？
・独学で学習するとして、どのように学習を進めていったらいいの？
僕も最初は同じような悩みを抱えていました。
結論から言うと、独学でも問題ありません。また、学習手順についてはこれから詳しく解説しますのでご安心ください。
完全未経験からWeb制作フリーランスになった経験を元に解説しますので、割と信用できる内容かなと思います。
それでは早速始めていきましょう。
Web制作の学習で必要なもの
学習手順を説明する前に、まずは学習に必要なものをお伝えしますね。
Web制作の学習で必要なものは以下のとおりです。
- パソコン（Windows、MacどちらでもOK）
- テキストエディタ
- インターネット環境
テキストエディタは「Visual Studio Code」がおすすめです！
パソコンに関してはMacBookが多いイメージかもですが、ぶっちゃけどんなパソコンでもOKです。
僕も使い古したWindowsパソコンで学習をスタートしました！
Web制作学習のマインドセット
次にWeb制作学習のマインドセットをお伝えします。
すべて大事な要素ですので、しっかりと押さえておきましょう。
- 完璧な理解を求めない
- 暗記をしない
- インプットよりもアウトプットを重視しよう
- 出来るだけ短期間で終わらせる
完璧な理解を求めない
まず、完璧な理解は必要ありません。
６割〜７割くらいの理解で十分なのでサクサク進めるのがポイントです。
なぜ、完璧な理解が必要ないかというと効率が悪いからです。100％の理解を都度求めると進捗スピードが格段に落ちてしまいます。スピードが落ちれば学習期間が長くなり挫折率も高くなります。
多くのエンジニアは実案件の中で理解度を深めていきます。6割の理解度だと不安になるかもしれませんが、我々にはGoogle先生が味方になってくれるので、割となんとでもなります。
現役フリーランスの僕も完璧には理解していません。分からないことはいつもググって調べてる感じです。
大事なのはWebサイトを作れることです。理解度はそこそこで十分なのでサクサク進めていきましょう。
暗記をしない
学校の勉強の癖で暗記をしがちですが、Web制作に暗記は必要ありません。
なぜなら、実務ではググり放題だからです。
覚えていなくてもカンニングし放題なので暗記はマジで必要ないです。
暗記よりも理解度を重視して進めるようにしましょう。
インプットよりもアウトプットを重視しよう
これはWeb制作に限らずですが、理解するにはアウトプット重視の方が効率がいいです。
読んだり聞いたりする受け身の学習では実はほとんど内容を理解できていません。
そのため、アウトプットを意識して学習を進めるようにしましょう。
出来るだけ短期間で終わらせる
効率よく学ぶためには短期学習をおすすめします。
短期的に学習することで、前学習していたことを忘れにくく、効率よく学習を進めることができます。
逆に学習期間が長くなればなるだけ効率が悪くなりますし、挫折率も高くなります。
ちなみに僕の学習期間は約５ヶ月でした。平日３時間、休日10時間を学習に当てていた感じです。
人によって状況は様々だと思いますが、可能な範囲で１日の作業時間を確保し、できるだけ短期間で学習を完走できるように頑張りましょう。
僕は朝早く起きて仕事行くまでの時間をすべて学習に当てていました。
仕事終わりだと残業で遅くなった時に学習できなかったり、疲れた脳みそで学習することになるので効率が悪いです。
なので、サラリーマンの方は朝活を強くおすすめします。
Web制作のおすすめ独学ロードマップ
前置きが長くなりましたが、いよいよ本題「Web制作のおすすめ独学ロードマップ」を解説します！
独学でWeb制作スキルを身につける学習手順は以下の通りです。
- HTML/CSSを使ったサイト制作を学習する
- 手を動かして実際にWebサイトを作る
- JavascriptとJQueryを学習する
- WordPressを学習する
１ HTML/CSSを使ったサイト制作を学習する
HTML、CSSを学習するおすすめの方法は大きく２つあります。
- オンライン教材を使う方法
- 書籍を使う方法
オンライン教材を使う方法
僕がおすすめするオンライン教材は以下の２つです！
どちらも無料で始めることができます。
無料で使ってみて自分に向いてそうだと思ったら有料会員に登録しましょう。
初心者はドットインストールとProgateどっちを使うべき？
ドットインストールとProgateのどちらを使うべきか、よく質問を受けます。
結論、最初は「Progate」から始めるのがおすすめです。
理由としては、Progateの方がやや難易度低めで、サイト上でプログラミングを行うため、自身のパソコンで環境構築を行う必要がないからです。
一方で、ドットインストールは学ぶためにまず環境構築を行う必要があります。
この環境構築というのが初心者にとって大きな壁で挫折する原因になります。
なのでProgateから始めて、次のステップとしてドットインストールの学習するのが一番おすすめです！
書籍を使う方法
書籍を使うメリットは体系的に学習できる点です。
僕の場合は「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」を使って学習しました。
この本は手を動かしながらWeb制作の基本が一通り学べるように構成されているのでおすすめです。
まずはオンライン教材（ドットインストールやProgate）を無料で使ってみて、HTML、CSSの感覚を掴んでみよう。
その後、有料会員でオンライン教材を進めるか、本で体系的に学ぶかを選択するばいいかなと思います。
２ 手を動かして実際にWebサイトを作る
HTMLとCSSの基礎を学んだ後は手を動かして実際にサイトを作ってみましょう。
おすすめの手順は以下のとおりです。
- 模写コーディング（サイトを見ながら同じサイトを作る）
- デザインカンプからのコーディング（デザインデータをもとにサイトを作る）
模写コーディング
模写コーディングとは、「既存サイトを真似てコーディングすること」です。 実際に手を動かしながら勉強することができ、アウトプットには最適な学習方法です。
模写コーディングのやり方は人それぞれですが、僕のおすすめの手順としては以下のとおりです。
まずは模写コーディングをするサイトを探します。
僕のおすすめは「Codestep」ですが、どのサイトを選んでもらっても大丈夫です。
ただし、はじめから「大規模サイトや難しいサイト」は避けましょう。
なぜならいきなり難しいサイトを選ぶとしんどすぎてほぼ間違いなく心が折れます（笑）
なので、最初は簡単なサイトを選ぶようにしましょう！
サイト選びが終わったら、コーディングするためのファイルを作成します。
オンライン学習や本の学習でファイルの作成手順等は学んでいると思うので、復習しながら進めてください。
ここまで来たら後はひたすらコーディングしていくのみです。
ただし、模写コーディングをしていく中での注意点がいくつかあります。
- ソースコードを見ないようにする
- 完璧を目指さないこと（７割くらいでOK）
- 分からない事は逐一ググって解決していく
この３つはめちゃくちゃ大事なことなので、必ず意識しながら進めるようにしてください。
特に大事なのは「完璧を目指さないこと」です。完璧を目指しすぎるとほぼ間違いなく挫折します。
最初は完璧に模写できないのは当たり前です。練習を積み重ねるうちに徐々に綺麗なサイトが作れるようになります。「だいたいできたかな？」これくらいの意識で進めていくようにしてください。
コーディングが完成したら、最後に制作したものを確認します。
まずは、制作したものが対象のサイトと同じようなデザインで仕上がっているかを確認します。
また、レスポンシブ時の変化など動きの部分も確認するようにしましょう。
続いて、ソースコードの確認を行います。
ソースコードについては、色々なコーディングの方法があるので全く同じ必要はないです。しかし、 自分のやり方とは違うやり方を学ぶことで、コーディングの幅を広げることができます。
デザインカンプからのコーディング
デザインカンプコーディングとはデザインデータからコーディングすることです。
Web制作会社さんから仕事を受けてコーディングを行う場合は必須の能力になります。
デザインカンプコーディングの流れは以下のとおりです。
模写同様、ファイルを作成します。
デザインデータから余白、フォント、サイズなどを確認しつつコーディングを進めていきましょう。
模写同様、デザインの再現性とソースコードをチェックしましょう。
上記の手順を見てもらっても分かる通り、模写とデザインカンプコーディングの違いはほとんど対象の違いだけです。しかし、実務ではほぼほぼデザインカンプからのコーディングになりますので、必ず何度も練習してマスターするようにしてください！
書籍等でのインプット学習が終わったら、実際に手を動かしてアウトプット学習に切り替えましょう！
ただ、実際にやってみると結構苦戦するはずです。。僕もそうでした。
ゆっくりで大丈夫なので、少しずつ積み上げていきましょう！
ちなみに「Codestep」なら練習で作成したサイトは自由にポートフォリオへ掲載していただいてOKみたいなので、実績として出せるのもありがたいです！
３ JavascriptとjQueryを学習する
「JavaScript」とは、動的なWebページを作成するプログラミング言語です。
対して「jQuery」は、JavaScriptを使いやすいように拡張してくれているものです。
実際の制作ではjQueryを使うことが多いと思います。
ぶっちゃけこの２つはなんとなくの理解で十分です。
実際僕もそこまで深く理解はしてないです笑
重要なのは「なんとなく大枠を理解し、ググって実装できる」ということ。
上記のレベルまで到達すれば実務でも十分通用します。
学習教材としては以下がおすすめです。
繰り返しになりますが、完璧に理解しなくて大丈夫です。
「あーなんとなくわかった」くらいで十分です。
jQueryでよく出るパーツ（ハンバーガーメニュー、スライダー、ポップアップ、ローディング画面等）の実装方法さえ理解できればそれで十分です。後は、実務の中でググりながら理解を深めていけば大丈夫！
基礎が理解できたら、HTML・CSSの時と同様、「アウトプット学習」をしましょう。
素材としてはCodestepの「上級編：メディアサイト／グリッドレイアウト」がおすすめです。
※デザインカンプからのコーディングのみで大丈夫です。
４ WordPressを学習する
ここまで来ると、スキル的にはWebサイト制作で仕事をすることができるレベルに到達しています。
ただ、最後にWordPressを学んでおく必要があります。なぜかというと、今のWeb制作のほとんどがWordPress化を行うからです。WordPressを学習することで案件受注の幅が広がるだけでなく、単価を大幅に上げることができるので、もうひと踏ん張りしましょう。
それではWordPressの学習手順について解説します。
- PHPの基本を理解する
- WordPressのテーマ化を学習する
- WordPressサイトを自力で作成する
PHPの基礎を学習する
WordPressは、PHPという言語で書かれています。
なのでまずはPHPの基礎を理解しましょう。
とはいえ、PHPもJavascriptやjQuery同様、そこまで深い理解は必要はありません。
WordPressを触るとわかりますが、実際にはWordPressの独自機能を使うケースが圧倒的に多いからです。
学習教材は以下のとおりです。
Progateでざっと学んだ後、アキユキさんの動画を見ながら手を動かしてみてください。
Javascript同様、「あーなんとなくわかった」くらいで大丈夫です！
僕もそこまで深くは理解してないです！
WordPressのテーマ化を学習する
WordPress学習の目標は独自のテーマ作成が最適です。
テーマ作成を自力で行うことでWordpressの仕組みがよくわかるようになります。
独自テーマ作成の学習はテーマをゼロから作り上げる方法が解説された書籍を1冊読み込むのが最も効率が良いです。
おすすめのWordPress学習教材は以下のとおりです。
上記の学習教材を利用して以下の通り学習を進めていきましょう。
まずは書籍でWordPressを体系的に学んでください。書籍の後半にはWordPressの独自テーマの制作の実践があり、手を動かしながら独自テーマについて習得することができます。
繰り返しになりますが「完璧な理解」は必要ないのでざっくり理解できたら前に進めてOKです。
「全く理解できん…」って人は次のアキユキさんのYoutube動画を先に見てから書籍学習に戻ってくるやり方でも大丈夫です！
書籍での学習が終わったら、アキユキさんのYoutubeで知識を補強していきましょう。
わかりやすく動画で解説してくれているので、書籍で理解できなかった部分も「そういうことか」って納得できると思います。
WordPressサイトを自力で作成する
アウトプットの素材は以下がおすすめです。
このNoteをおすすめする理由は３つあります。
- 実務レベルのデザインを用いてコーディングができるから
- ポートフォリオとして利用できるから
- プロによる添削がついているから
この３つの理由から【上級】XDデザインからコーディング実践演習【WordPress実案件レベル】をおすすめします！
上記の要素を満たせるのであれば、他のものでも大丈夫です。
実績がない状態ではポートフォリオサイトが唯一、コーディングスキルの証明になります！
ポートフォリオは営業段階で必ずチェックされるので、できるだけ質の高いものを用意しておきましょう！
まとめ
ここまで本当にお疲れ様でした。
ここまでくれば月数十万円以上は稼げるスキルは身についていると思います。
後は実務を通してアウトプットを重ねてスキルアップしていきましょう。
やっぱり独学だと厳しい、、という方へ
独学は厳しいという人はスクールに入るのがおすすめです。
僕のおすすめは「TechAcademy [テックアカデミー]」です。
スクールだとサポートが充実してますし、一緒に頑張る仲間ができる点も嬉しいポイントです。
無料相談で一度お話を聞いてみるといいと思います。
