今回の記事では、初心者向けに『短期間でWeb制作スキルを習得するための学習ロードマップ』をご紹介していきます！
「Web制作でこれから稼いでいきたいけど、道のりが分からなすぎる…。」
「HTMLやCSSなどを学べばいいのは分かったけど、どうやって学んでいけばいいのか分からない…。」
「どの流れで進んだほうが短期間で無駄なくWeb制作の学習ができるの？」
こんな悩みを持って、この記事にたどり着いた方がいるのではないでしょうか？
実は過去の僕も同じような悩みを抱えていたので、あなたの気持ちは痛いほど分かります。
そこで、そんな過去の僕のような悩みを抱えておられる方のために、
『短期集中で月収50万目指すWeb制作学習ロードマップ』を制作しました！
こちらの内容を忠実に実践していただければ、
Web未経験の方でも、再現性高く4〜6ヶ月ほどでWeb制作の学習を完了させることができます。
また、学習時間が多めに確保できる方などは、3ヶ月ほどで終わらせることも可能なので、ぜひ最後まで実践してみてください！
Web制作をどこまで学べば仕事になるのか？
「”Web制作スキルをつける”って言っても、
どこまで勉強すれば仕事になるの？？」
こういった方もいるかもしれないので、
学習ロードマップの解説に入る前に、
まず始めに、
『Web制作で収益化するために必要なスキル』と
『Web制作で収益化するまでの道のり』を解説します。
結論：WordPressサイトが作れれば仕事になる
では、早速結論ですが、
WordPressサイトが制作できれば、
Web制作者として再現性高く安定した収入を得ることができます。
金額でいえば、毎月50万〜100万円ほどの収入を得ることが可能です。
まさた実際に僕の知り合いでも、Web未経験の会社員からWeb制作フリーランスとして活動している方が数多くいるのですが、
ほとんどの方はWordPressサイト制作のスキルを活かして案件をこなしていますね！
WordPressサイトとは簡単にいうと、
『WordPress』というシステムが使われているWebサイトのことで、
サイト内でブログ機能やお問い合わせ機能などがついています。
世界的に企業のサイトなどではWordPressが使われていることが多いです。
ちなみに僕が運営しているこのブログもWordPressサイトです。
そして、これからWeb制作を学習される方は、
最終的に以下のようなWordPressサイトが制作できると実案件も問題なくこなせるようになります！
え、素人の自分がこんなすごいWebサイトを制作できるのかな…？
まさた大丈夫です！Web未経験の方でも遅くとも6ヶ月以内にはこのようなサイトが制作できるようになりますよ！
先ほどのWordPressサイトを制作された方は
僕の『実践型Web制作講座』の受講生なのですが、
実際にWeb制作初心者の状態から学習期間3ヶ月ほどで先ほどのWordPressサイトを完成させるレベルまで到達しました。
なので、「これから学習についていけるかな…？」という方も
着実に学習を進めていけば問題なくWordPressサイトを制作できるようになるので、安心してください！
では、WordPressサイト制作スキルを使ってどのように収益化していくかを解説していきます。
WordPressのスキルで収益化するまでの流れ
Web制作の学習が完了するとそのあとに営業活動を行い、
サイト制作の仕事をいただくことができるのですが、その一連の流れは以下のような流れとなります。
【営業活動〜報酬をいただくまでの流れ】
- 営業活動
- Webサイトがほしいお客さんと繋がる
- WebサイトをWordPressを使って制作する
- 制作したWebサイトをお客さんに納品する
- お客さんから報酬をいただく
実際の案件では、サイト制作に入る前の打ち合わせなど、より細かいやり取りがありますが、
学習フェーズでは、上記のようなざっくりとした理解で大丈夫です。
改めてですが、Web制作の学習のゴールは『WordPressサイト制作スキルを身につけること』で、
これからやっていく学習はすべて『WordPressサイト制作ができるようになるための勉強』だと認識すると迷わず進みやすくなるので、このことを念頭に置いておきましょう。
では、ついに今回の本題である『学習ロードマップ』をご紹介していきます。
【全6ステップ】学習ロードマップの全体の流れ
学習ロードマップは以下のように全部で6ステップあります。
- HTML・CSS（Sass）の基礎文法を学習する
- 基礎的なデザインカンプからの静的コーディングスキルを身につける
- JavaScript・jQueryの基礎文法を学習する
- 実務レベルのデザインカンプからの静的コーディングスキルを身につける
- PHPの基礎文法を学習する
- 実務レベルのデザインカンプからのWordPressサイト制作スキルを身につける
「え、何でWordPressサイト制作の学習から始めないの？」と思うかもしれませんが、
初学者がいきなりWordPressサイト制作の学習から始めるとほぼ100%挫折するので、
段階的にWeb制作スキルのレベルを上げていくようにすると効率的かつスムーズに学習を進めることができます。
イメージでいうと以下のような感じです。
いきなりWordPressサイト制作の学習から始めるのはハードルが高すぎるな…。
じゃあ、先にHTML・CSS・JavaScriptだけの簡単なサイトから制作できるようになろう！
でも、そもそもでHTML・CSS・JavaScriptの文法が分からないや…。
じゃあ、1からHTML・CSS・JavaScriptの文法から学ぼう！
このような流れで『WordPressサイト制作のスキルをつける』という目的から逆算して学習ロードマップを組んでいます。
まさた一見すると遠回りをしているように感じるかもしれませんが、
段階的に学習を進めるやり方が1番の近道なので安心してください！
では続いて、『学習ロードマップの各ステップの学習期間の目安』と『1日に確保すべき学習時間』について解説していきます。
学習ロードマップの各ステップの学習期間の目安
学習ロードマップの各工程は以下のようなペースで進めていきましょう。
あくまで目安なので、早く終わらせられた人はそのまま先に進んでも問題ないです。
| 学習ロードマップ（目安の所要時間） | 通常の学習期間 | より短期間で終わらせたい人向けの学習期間 |
|---|---|---|
| 1. HTML・CSS（Sass）の基礎文法を学習する（34時間） | 1週間 | 5日 |
| 2. 基礎的なデザインカンプからの静的コーディングスキルを身につける（46時間） | 2週間 | 10日 |
| 3. JavaScript・jQueryの基礎文法を学習する（15時間） | 3日 | 2日 |
| 4. 実務レベルのデザインカンプからの静的コーディングスキルを身につける（290時間） | 2ヶ月 | 1か月半 |
| 5. PHPの基礎文法を学習する（15時間） | 3日 | 2日 |
| 6. 実務レベルのデザインカンプからのWordPressサイト制作スキルを身につける（150時間） | 1ヶ月 | 3週間 |
| 合計の学習期間 | およそ4ヶ月（117日） | およそ3ヶ月（85日） |
では、次はこの学習期間どおりに進めるにために必要な1日の学習時間について解説していきます。
学習時間の目安
Web制作の学習をするなら、本業がある人でも平日4時間、休日7時間は学習時間を確保するようにしましょう。
『より短期間で終わらせたい人』や『本業などがなくて1日の時間を多めに投下できる方』であれば、
平日5時間以上、休日10時間以上を学習時間の目安にするといいです。
まさた僕がWeb制作を勉強し始めたころは、自分に日々の学習習慣がなかったので、
・朝早く起きて朝活
・昼休みの時間
・日々の隙間時間
・退勤後の夜の時間
などをすべて投下して、何が何でも学習を終わらせる勢いでとにかく必死にやっていました！
僕が兼業時代のころの1日のスケジュールは下のグラフのような感じでした。
学習時間の目安は分かったけど、自分はマイペースにやっていこう！
まさたそうしたくなる気持ちは分かりますが、
学習中から締め切りを意識して取り組まないと、その後の実案件がこなしていけなくなります。
実案件では、求められたサイトをただ納品すればいいのではなく、
品質を落とさずにお客さんと約束した納期（サイトを納品する締め切り）までに確実に納品しなければいけません。
学習していると、思ったより進みが遅くなってしまうことがあるかもしれませんが、
遅くとも6ヶ月以内には終わらせられるようにしないと、実案件がこなせない可能性が高いので注意です。
そのため、学習だからといってマイペースにゆっくり進めずに、学習期間の目安をできる限り超えないように進めていきましょう。
そうすれば、基礎の制作スピードが身につくので、問題なく実案件をこなせるようになります。
では、次からは学習ロードマップの各工程を具体的にどのように学んでいくかを解説していきます。
1.HTML・CSS（Sass）の基礎文法を学習する
では、まずはWebサイトを制作するための基盤づくりとしてHTMLとCSS（Sass）の文法から学習していきます。
初心者のうちは、基本的にどの言語も完全理解はできません。
あくまで、この学習はWebサイトを制作するための事前知識を軽く頭に入れておくような感覚です。
まさたここの学習の理解度が高くないからと言って、
次に進めないというわけではないので安心してください！
HTML・CSSの文法を学ぶ
Webサイトは、主に『HTML』と『CSS』という言語を書いて制作を進めていきます。
具体的には以下の内容がさらっと理解できていればOKです。
- HTMLがどんな役割を持つものなのか
- HTMLの書き方
- CSSがどんな役割を持つものなのか
- CSSの書き方
ProgateのHTML & CSSコース 初級〜上級、Flexbox編（道場コースはしなくてOK）
※このコースを1周だけ学ぶ（完全理解はできなくてOK）
Sassの文法を学ぶ
Sassとは、CSSをより便利かつ効率的に書けるようにする言語です。
- Sassがどんな役割を持つものなのか
- Sassの書き方
ProgateのSassコース
※このコースを1周だけ学ぶ（完全理解はできなくてOK）
2.基礎的なデザインカンプからの静的コーディングスキルを身につける
では、HTMLとCSS（Sass）の文法を学習が完了したので、いよいよ1からWebサイトを制作していきます。
静的コーディングとは、簡単にいうとHTML・ CSS・JavaScriptの言語を使ったコーディングのことです。
また、HTML・CSS・JavaScriptの言語で作られたサイトのことを『静的サイト』と呼びます。
一方で、最終的なゴールのWordPressサイトは、HTML・CSS・JavaScriptに加えて、WordPressが使われているので『動的サイト』と呼びます。
そして、今回はHTML・CSS（Sass）のみでWebサイトを制作していきます。
具体的に学ぶ内容は以下のとおりです。
- エディタ（コードを書くためのツール）の使い方
- デザインソフト（Figma）の使い方
- HTMLとCSS（Sass）を使ってWebサイトを制作していく一連の流れ
初めての静的コーディングは、何から手をつけて進めていけばいいか分からないと思うので、
実際に解説付きの動画を見ながら学習するほうが、より短期間でレベルアップすることができます。
まさたこちらのコンテンツは、
ライブコーディング形式かつ解説付きの動画になるため、
初心者に非常におすすめの内容です！
Webサイトを制作していると、
「何でこのCSSにするんだろう？」など様々な疑問が出てくるかもしれませんが、HTMLとCSS（Sass）の文法学習に戻るのはNGです。
コーディングスキルはスポーツと一緒で、実践しながら少しづつ上達していくものなので、
「とりあえず画面に正しく表示できていればOK」という気持ちで進んでいきましょう。
3.JavaScript・jQueryの基礎文法を学習する
- JavaScriptの書き方
- jQueryの書き方
- jQueryの使ったアニメーションパーツの基礎的な作り方
4.実務レベルのデザインカンプからの静的コーディングスキルを身につける
- HTMLとCSS（Sass）の統一性のあるきれいなコードの書き方
- JavaScript（jQuery）を使った実務で頻出のアニメーションパーツの作り方
- Webサイトの品質チェックのやり方
まさたこちらの講座は有料ではありますが、
数多くの受講生が実案件で、お客さんから
「きれいにコードが書けていて、実務経験1年未満とは思えないほど良い出来です。」という評価をいただくことができています！
5.PHPの基礎文法を学習する
WordPressサイト制作のためのPHPの文法
6.実務レベルのデザインカンプからのWordPressサイト制作スキルを身につける
実務を想定したデザインカンプからのWordPressサイト制作のやり方
【最後に】これからWeb制作者として活動していく人に向けて
今回の学習ロードマップは過去の僕がどこでつまづいていたか、
僕のもとに相談にくる方からはどんなことよく聞かれていたかなどを
振り返りながら真剣に執筆しました。
ここまでの学習も大変だったと思いますが、
本当の山場はこれからの営業活動やWeb制作の実案件です。
ただ、「Web制作は学習が難しい。」という一般的には言われる中で、
Web制作の学習を無事に終えることができたあなたは間違いなく、これからの苦難も乗り越えることができます。
これからも本気でWeb制作に向き合えば、
遅くとも今後1年以内には、あなたが今思い描いている理想の生活を実現することができるので安心してください。
そして、僕の今回の学習ロードマップや実践型Web制作講座などのコンテンツが
あなたの人生を変えるきっかけになれば嬉しいです。
僕は今後も『Web制作をもっと学びやすいものにして、短期間で即戦力級の制作者になる人を増やしたい』という想いで挑戦していきますので、ともに人生をより良い方向に進めていきましょう！
まさたのX（旧Twitter）アカウント：https://x.com/Masa_nmFL
