道のりが分からなすぎる...。「HTMLやCSSなどを学べばいいのは分かったけど、どうやって学んでいけばいいのか分からない...。「Web制作でこれから稼いでいきたいけど、道のりが分からなすぎる...。「HTMLやCSSなどを学べばいいのは分かったけど、どうやって学んでいけばいいのか分からない...。「どの流れで進んだほうが短期間で無駄なくWeb制作の学習ができるの?」こんな悩みを持って、この記事にたどり着いた方がいるのではないでしょうか?実は過去の僕も同じような悩みを抱えていたので、あなたの気持ちは痛いほど分かります。再現性高く4〜6ヶ月ほどでWeb制作の学習を完了させることができます。『Web制作で収益化するために必要なスキル』と『Web制作で収益化するまでの道のり』を解説します。結論:WordPressサイトが作れれば仕事になるでは、早速結論ですが、WordPressサイトが制作できれば、Web制作者として再現性高く安定した収入を得ることができます。毎月50万〜100万円ほどの収入を得ることが可能です。『WordPress』というシステムが使われているWebサイトのことで、サイト内でブログ機能やお問い合わせ機能などがついています。世界的に企業のサイトなどではWordPressが使われていることが多いです。ちなみに僕が運営しているこのブログもWordPressサイトです。実際にWeb制作初心者の状態から学習期間3ヶ月ほどで先ほどのWordPressサイトを完成させるレベルまで到達しました。着実に学習を進めていけば問題なくWordPressサイトを制作できるようになるので安心してください!では、WordPressサイト制作スキルを使ってどのように収益化していくかを解説していきます。WordPressのスキルで収益化するまでの流れWeb制作の学習が完了するとそのあとに営業活動を行い、サイト制作の仕事をいただくことができるのですが、その一連の流れは以下のような流れとなります。Web制作の学習が完了するとそのあとに営業活動を行い、サイト制作の仕事をいただくことができるのですが、その一連の流れは以下のような流れとなります。学習フェーズでは、上記のようなざっくりとした理解で大丈夫です。Web制作の学習のゴールは“WordPressサイト制作スキルを身につけること”で、これからやっていく学習はすべて『WordPressサイト制作ができるようになるための勉強』だと認識すると迷わず進みやすくなるので、このことを念頭に置いておきましょう。今回の本題である『学習ロードマップ』をご紹介していきます。【全6ステップ】学習ロードマップの全体の流れ学習ロードマップは以下のように全部で6ステップあります。段階的にWeb制作スキルのレベルを上げていくようにすると効率的かつスムーズに学習を進めることができます。イメージでいうと以下のような感じです。WordPressの学習から始めるのはハードルが高すぎるな...。先にHTML・CSS・JavaScriptだけの簡単なサイトから制作できるようになろう!でも、そもそもでHTML・CSS・JavaScriptの文法が分からないや...。1からHTML・CSS・JavaScriptの文法から学ぼう!このような流れで『WordPressサイト制作のスキルをつける』という目的から逆算して学習ロードマップを組んでいます。『学習ロードマップの各ステップの学習期間の目安』と『1日に確保すべき学習時間』について解説していきます。続いて、『学習ロードマップの各ステップの学習期間の目安』と『1日に確保すべき学習時間』について解説していきます。学習ロードマップの各工程は以下のようなペースで進めていきましょう。早く終わらせられた人はそのまま先に進んでも問題ないです。3ヶ月(85日)では、次はこの学習期間どおりに進めるために必要な1日の学習時間について解説していきます。本業がある人でも平日4時間、休日7時間は学習時間を確保するようにしましょう。平日5時間以上、休日10時間以上を学習時間の目安にするといいです。何が何でも学習を終わらせる勢いでとにかく必死にやっていました!僕が兼業時代の頃の1日のスケジュールは下のグラフのような感じです。実案件がこなしていけなくなります。品質を落とさずにお客さんと約束した納期(サイトを納品する締め切り)までに確実に納品しなければいけません。実案件がこなせない可能性が高いので注意です。学習期間の目安をできる限り超えないように進めていきましょう。問題なく実案件をこなせるようになります。次からは学習ロードマップの各工程を具体的にどのように学んでいくかを解説していきます。するうえで知っておいてほしいこと初心者のうちは、基本的にどの言語も完全理解はできません。この学習はWebサイトを制作するための事前知識を軽く頭に入れておくような感覚です。『HTML』と『CSS』という言語を書いて制作を進めていきます。具体的には以下の内容がさらっと理解できていればOKです。初級〜上級、Flexbox編(道場コースはしなくてOK)※このコースを1周だけ学ぶ(完全理解はできなくてOK)Sassの文法を学ぶSassとは、CSSをより便利かつ効率的に書けるようにする言語です。実務の現場では、CSSではなく、Sassを使って実装していくことになるので必ず押さえておきましょう!学ぶべき内容Sassがどんな役割を持つものなのかSassの書き方おすすめの学習コンテンツProgateのSassコース※このコースを1周だけ学ぶ(完全理解はできなくてOK)2.基礎的なデザインカンプからの静的コーディングスキルを身につけるでは、HTMLとCSS(Sass)の文法学習が完了したので、いよいよ1からWebサイトを制作していきます。CSS・JavaScriptの言語を使ったコーディングのことです。HTML・CSS・JavaScriptの言語で作られたサイトのことを『静的サイト』と呼びます。一方で、最終的なゴールのWordPressサイトは、HTML・CSS・JavaScriptに加えて、WordPressが使われており、サイト内のコンテンツ(記事など)を変化させることができるので『動的サイト』と呼びます。今回はHTML・CSS(Sass)のみでWebサイトを制作していきます。具体的に学ぶ内容は以下のとおりです。実際に解説付きの動画を見ながら学習するほうが、より短期間でレベルアップすることができます。「何でこのCSSにするんだろう?」など様々な疑問が出てくるかもしれませんが、HTMLとCSS(Sass)の文法学習に戻るのはNGです。「とりあえず画面に正しく表示できていればOK」という気持ちで進んでいきましょう。Webサイトを制作していると、「何でこのCSSにするんだろう?」など様々な疑問が出てくるかもしれませんが、HTMLとCSS(Sass)の文法学習に戻るのはNGです。「とりあえず画面に正しく表示できていればOK」という気持ちで進んでいきましょう。3.JavaScript・jQueryの基礎文法を学習する続いて、JavaScript・jQueryの学習に取り組んでいきます。JavaScriptとjQueryの知識を学ぶことで、Webサイトに以下のような動き(アニメーション)をつけることができます。実務では必須のスキルとなります。現場でもよく使われている技術になります。初級〜上級(道場含む)※どちらのコースも1周だけ学ぶ(完全理解はできなくてOK)まさた僕が学習期の頃は、文法の完全理解はできていませんでしたが「初めてアコーディオンが作れた!!」と超感動したのを覚えています。そんなレベル感であっても、そのあとの学習はこなせるので不安にならず進めていきましょう!4.実務レベルのデザインカンプからの静的コーディングスキルを身につけるここまででHTML・CSS(Sass)・JavaScript(jQuery)の基礎を身につけてきました。ここでは実務レベルのデザインカンプからの静的コーディングスキルを身につけていきます。2の『基礎的なデザインカンプからの静的コーディングスキルを身につける』に比べて、デザインカンプのクオリティも上がり、アニメーションの実装も加わっているので実務に対応できる静的コーディングスキルを身につけることができます。実務経験1年未満とは思えないほど良い出来です。実務経験1年未満とは思えないほど良い出来です。」という評価をいただくことができています!5.PHPの基礎文法を学習する静的コーディングの学習が一通り終わったので、ここからはWordPressサイト制作の学習に入っていきます。PHPというプログラミング言語の学習を行います。いうのも、WordPressはPHPのコードで作られているので、サイトを制作していくにはPHPの文法の基礎理解が必須です。いえ、PHPの文法を全て勉強しなくても良くて、WordPressサイトを制作する上での最低限の文法を押さえておけば問題ありません。最後のWordPressサイト制作に入っていきます。この学習を終えることができれば、Web制作者として実案件をこなせるスキルは習得できるのでこれまで学んできたことをフル活用して乗り越えましょう!WordPressサイトは制作実績として営業活動で使用するので『10ページ以上のコーポレートサイト(企業サイト)』を制作することを推奨します。案件の受注に繋がりやすいです。途中で何度もつまづくことがあると思います。ここまでの学習でWordPressサイトを制作できる基盤のスキルは身についているので安心してください。制作マニュアルのように上から順にこなすだけでWordPressサイトが完成するように作成しておりますので、WordPress初心者の方でも2週間〜1ヶ月ほどで学習が完了しています!【番外編】AIコーディングスキルをつけて作業を自動化するこれからのWeb制作の業務では、AIの活用が当たり前になっていきます。今後はAIスキルがある制作者とない制作者で納品速度などに明確な差が生まれるので必須スキルになります。AIを活用することでHTMLのコーディングが自動化できたり、JavaScript・WordPressのエラーをAIが解決してくれたりするので非常に便利です。変わるのでAIを学ばないのは本当にもったいないです。僕のもとに相談にくる方からはどんなことをよく聞かれていたかなどを振り返りながら真剣に執筆しました。本当の山場はこれからの営業活動やWeb制作の実案件です。「Web制作は学習が難しい。」と一般的には言われる中で、Web制作の学習を無事に終えることができたあなたは間違いなく、これからの苦難も乗り越えることができます。遅くとも今後1年以内には、あなたが今思い描いている理想の生活を実現することができるので安心してください。僕の今回の学習ロードマップや実践型Web制作講座などのコンテンツがあなたの人生を変えるきっかけになれば嬉しいです。