勉強してみてるけど独学で大丈夫なのか不安…
あなたは今、このように悩んでいませんか？
僕も学習を始めたての頃は、全く同じ悩みを抱えていました…！
ですが、今ではWeb制作を仕事にすることができましたし、アルバイトをしなくても月10〜20万円ほど安定して稼げるようになりました。
本記事では、その経験を活かし、Web制作を最短で効率よく身に付け、稼げるようになるための独学のロードマップをまとめました。
すぐに取り組める内容になっているので、ぜひ最後までご覧ください！
「具体的なロードマップの前にまず全体像が知りたい！」という方にはこちらの記事もおすすめです！
目次
【初心者向け】Web制作を完全独学で習得する為のロードマップ
それでは早速、ロードマップを見ていきましょう！
ロードマップは大きくまとめると以下のようになっています。
一つずつ詳しくお話していきます。
ロードマップ①：HTML/CSSの基礎を学ぶ
まずは、Web制作の一番基礎となるHTMLとCSSについて学習しましょう。
Webサイト内のどこに文章や画像を配置するのかを決める、Webサイトの骨組みを作る言語です。
HTMLで書かれたWebサイトの見た目を装飾するために使われます。レイアウトや余白の調整、文字サイズや色の指定など様々なことができます。
それでは、詳しい手順をご紹介します！
Progateとドットインストールで基礎学習
新しいことを学ぶときには、それがどんなものなのかなんとなく知る、ということがまずは大切です。
そのために以下の2サイトを使ってHTMLとCSSがどういうものかを知り、慣れていきましょう。
まずはそれぞれ一周やってみて、わからない部分があればその部分だけもう一周やってみる、という流れが良いです。
HTMLとCSSってこうやって使うんだ、とイメージができたら、次の段階へ進みましょう。
ここで紹介した2サイトは、どちらもHTMLとCSSの基礎を理解するのに最適ですが、Progateは知識、ドットインストールは実践的、という特徴があります。
Progateで基礎的な知識を身に付けて、ドットインストールで実際に使ってみる、という流れを意識して学習してみましょう！
Progateとドットインストールですべてのレッスンを受けるためには、有料会員登録をする必要があります。
それぞれ月額1,000円（合計2,000円）くらいです。
学習が終わればすぐに解約できるので、ここは勇気を出して投資しましょう！
書籍でWeb制作の流れを学習する
基礎学習が終わったら、書籍を参考にして、実際にコードを書いてサイトを作っていきます。
インプットの後はアウトプットをして、学んだ知識を定着させていきましょう！
オススメの書籍は「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」です。
こちらの書籍をお勧めする理由は、以下の3つです。
実際にサイトを作りながら学べることで、コードを書くことに慣れると同時に、Web制作の流れも体験することができます。
また、解説が初心者向けに優しく分かりやすく書かれているので、分からなくなって途中で挫折する、ということになりにくいです。
さらに情報量が圧倒的なので、実際に案件をこなすようになってからも、辞書的な使い方をすることができます！
VSCodeにおすすめの拡張機能を導入する
ドットインストールで学習する時に、VSCodeを使うように案内があったかと思います。
VSCodeはWeb制作には必須で、この先ずっと使い続けることになります。
ここからコードを書く量がさらに増えるので、ケアレスミスなどを防ぎ効率よくコーディングを進めていくために、便利な拡張機能を導入しましょう。
拡張機能を導入することで、無料でVSCodeを使いやすくすることができます。
僕も実際に使っているオススメの拡張機能をご紹介します！
現時点ではよくわからないものもあるかもしれませんが、あるかないかで全く変わるので、ぜひインストールしてください！
慣れてきたら、自分が必要だと思う拡張機能を追加しても良いですね。
VSCodeがかなり使いやすくなったところで、次のステップに進みましょう！
ロードマップ②：HTML/CSSを使って実践的なWeb制作を学ぶ
ここまで学習したあなたには、既に1人でサイトを作るのに必要な知識が身についています。
ここからは、自分の力でサイトを作りながら経験を積んでいきましょう。
実際に手を動かすのが一番実力がつきますし、自信にも繋がります。
ここで実践して欲しいのは、以下の2つです。
一つずつ詳しくお話していきます。
デザインカンプからのコーディングに挑戦する
ここから、実務に近いデザインカンプからのコーディングを学んでいきましょう。
デザイナーさんが作る、デザインの完成見本のことです。
模写コーディングをおすすめしている方もいますが、実務で使うのはデザインカンプなので、こちらをおすすめします！
ここでは、Adobe XDというデザインツールを用いて作られたデザインカンプを使用します。
まずは、Adobe XDで作られたデザインカンプからコーディングをする方法を学ぶために、以下の記事を読んでおきましょう。
「Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法」
練習で使うデザインカンプはCodestepというサイトからダウンロードして使わせていただきます。
こちらのサイトには、10種類以上の無料のデザインカンプが用意されています。
レベル別にデザインカンプが分かれており、必要な素材と解答例のコードもあるので、簡単そうなものから好きな順番でやってみましょう。
全てをこなす必要はありません。いけそうだなと感じたら次のレベルに進んでみましょう。行き詰まったらまた前のレベルに戻ればOKです！
どれも分かりやすい解説がついているので、安心して学習を進めることができます。
この学習で大切なのは、「デザインカンプ通りのサイトを作ること」です。
「ピクセルパーフェクト」とも呼ばれますが、これができるかできないかで評価が全く異なることになります。
デザインカンプからのコーディングはとても大変だと思います。
もし行き詰まってしまっても、できるだけ答えは見ずに、ググって自力で答えを見つけ出してみてください。
実務でも行き詰まったらググる、が基本になるので、今のうちに慣れておきましょう！
Webサイトの公開方法を学ぶ
デザインカンプからのコーディングができたら、そのサイトを実際に公開してみましょう。
実務では、コーディングをした後にWeb上に公開するというところまでお願いされることが多いです。
実際に自分でサーバー・ドメインを契約して、Webサイトの公開方法を今のうちに理解しておきましょう。
大まかな手順としては以下の通りです。
より詳しいアップロードの手順については、記事を執筆中ですので、しばらくお待ちください！
サーバーの契約、ドメインの取得方法についてはこちらの記事でもご紹介しています。
ロードマップ③：jQueryを学ぶ
ここまでで、Web制作の知識だけあった状態から、実際にサイトを制作できるようになることができたと思います。
ここからは、より実務に近いサイトを制作するために、もう一つ必要になるスキルであるjQueryを学習していきます。
jQueryはWebサイトに動きを付けるために使われています。
普段、色々なWebサイトを見ていると、文章や画像がふわっと表示されたり、画像がスライダー式になっているWebサイトなどがあるかと思います。
これらはjQueryを使って実装されています。
そのため、jQueryを学ぶことで、より本格的なレベルの高いサイトを作れるようになります！
jQueryの学習に必要なのは、以下の2ステップです。
それぞれ詳しくお話していきます。
Progateで基礎学習
まずは、Progateを使って、jQueryはどういうものなのかを知りましょう。
jQueryは、自分で一から書くというよりは、既にあるテンプレートを使うことが多いため、あまり気合を入れすぎなくても大丈夫です。
スラスラとコードが書けるようになるよりも、jQueryのコードを見て何が書いてあるのか理解できるようになることが大切です。
Progateの「jQuery」コースを一周やるだけで十分です。
jQueryはどうやって使うのか、その雰囲気を感じ取れたら次に進みましょう。
Web制作でよく登場するパーツの実装方法を学習する
jQueryの基礎を学んだあとは、実際によく登場するパーツを実装できるようになりましょう。
よく登場するパーツは、一度実装してしまえば何度も使いまわすことができるので便利です。
実装できるようになるといっても、以下のサイトから必要なものを選び、コピペするだけでOKです！
こちらのサイトは、コードのコピペができるだけでなく、それぞれに解説がついているので、「なぜこのような動きをするのか」について理解することができます。
その辺りを理解することができれば、自分なりにカスタマイズすることも可能になるので、実際に使いながら少しずつ理解を深めていきましょう！
ロードマップ④：WordPressを学ぶ
ここまで来たら、あと一息です！
jQueryまでの学習が終わったら、コーディングの案件をこなせるほどの実力は十分身についているのですが、
以上の2つの理由から、WordPressを学習してから案件獲得に向かう事をオススメしています！
WordPressの学習に必要なのは、次の4ステップです。
それぞれ詳しくお話していきます！
ProgateでPHPの基礎を学んでおく
「これからWordPressの学習をするのに、なぜPHP？」
と思ったかもしれませんが、PHPはWordPressで使われている重要な言語なので、どんなものなのか知っておきましょう。
とはいえPHPをがっつり理解する必要はないので、Progateの「PHP Ⅰ」を一周して基礎を押さえておきましょう。
YouTubeでWordPressの基礎を学ぶ
ProgateでPHPの基礎を学んだあとは、いよいよWordPressの学習に入ります。
まずはYouTubeを見ながら、WordPressの操作方法など基本的な学習をしましょう。
WordPressでサイトを作るには何をすればいいのか、WordPressではどんなことができるのか、といったイメージを軽く掴んでおきます。
動画学習であれば、説明してくれる人と一緒にコードを書きながら学べるので、実際に手を動かしながら理解を深めていきましょう！
オススメはこちらの3人の方のYouTubeです。
ここでも、必ず3人全員の動画を見る必要はありません。
自分でなんとなくWordPressのイメージを掴むことができたら、次のより実践的な学習に進みましょう。
書籍で実践的な内容を学ぶ
YouTubeの動画で、WordPressのイメージを掴むことができたら、書籍を参考にしながら、より実践的な学習をしましょう。
オススメの書籍は「ビジネスサイトを作って学ぶWordPressの教科書」です。
よく使われるテンプレートタグの使い方が学べるだけでなく、ビジネスサイトという実践的な題材で、ほぼ実務と同じレベルのコーディングをすることができます。
実践的な分、今までに比べて少し難易度が上がるので、ゆっくり時間をかけて理解していきましょう。
演習教材で実務の流れを学習する
いよいよ大詰めです…！
書籍を参考に、WordPressを使って実務レベルのサイトを作ることができたら、最後は1から自分でWordPressサイトを作ってみましょう。
オススメの教材は、しょーごさんという方が販売しているこちらの教材です。
「【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】」
こちらの教材は、
という流れになっているので、今までの学習の集大成として、全力で取り組んでみましょう！
こちらの教材で作ったサイトは、自分のポートフォリオとして公開することもできます。
また、サイトが完成したらメンタ―経験豊富なしょーごさんに表示確認をしてもらえるので、その点も安心ですね。
まとめ
本当にお疲れ様でした！
ここまで学習を進めるのは本当に大変だったと思います。
ですが、もうあなたには案件をこなせるほどのスキルが身についています！
以下の記事では、スキルを身に付けた後の「案件に応募する」段階まで解説しているので、参考にしてみてください。
これからも一緒に頑張りましょう！
最後まで読んでいただき、ありがとうございました！
Web制作を何から学習すればいいかわからない…