Web制作

【初心者向け】Web制作の独学方法を解説【月20万稼ぐ学習ロードマップ】

Web制作で稼ぎたい方へ

こんにちは、あきはる(@akiharu_0309)です。

悩む人
Web制作の独学方法を教えてほしい。学習すべきことや、ロードマップも知りたい!

こんなお悩みを解決します。

Web制作を学ぶにも、いきなりスクールに通うのはハードルが高いですよね。

そこで今回は、完全初心者に向けてWeb制作の独学方法を分かりやすく解説します。

本記事の内容

  • Web制作の独学に必要な期間
  • Web制作に必要な準備するもの
  • Web制作の独学ロードマップ
  • Web制作の案件獲得方法

この記事を書いている私の実績は下記です。

本記事の信憑性

ココナラ あきはる

  • Web制作歴1年以上
  • 50件以上の案件対応実績
  • 未経験からフリーランス独立

今回の記事を読んでいただくことで、Web制作の独学方法がわかります。

ちなみに、Twitterでも発信しています。

Twitter→あきはる(5,000名超え)

それでは、始めていきます。

Web制作『独学』で月20万円稼ぐ準備

Web制作『独学』で月20万円稼ぐ準備

まず、Web制作を独学で月20万円稼ぐことは可能です。

なぜなら、Web制作は需要がある上に、学習教材や稼ぐための情報が充実しているので、独学でも月20万円を達成することは可能だと言えます。

例えば、以下のような案件をこなすイメージです。

【例1】1~3万円の案件を月10本

【例1】1~3万円の案件を月10本
出典:クラウドワークス

【例2】10~30万円の案件を月1,2本

【例2】10~30万円の案件を月1,2本
出典:クラウドワークス

これらの案件をこなせるスキルを身につければ、月20万円稼ぐことは可能です。

こういった案件は、『クラウドワークス』や『ココナラ』といったクラウドソーシングサイトで見つけることができます。

複数のサイトに登録しておくと、受注できる可能性はアップしますよ!
あきはる

他のサイトなどは、以下の記事にまとめてるので参考にしてください。

Web制作の独学に必要な期間【3ヶ月〜半年】

Web制作の最低限のスキルを独学で習得するのに必要な期間は、ざっくり3ヶ月から半年ほどです。

人によって、1日の学習時間が異なるので、時間にすると【500時間~1,000時間】ほど。

ぶっちゃけ、かなりハードなので、Web制作の学習を始めた方の9割以上は挫折していきます、、。

とはいえ、Web制作のスキルを身につけたら、【完全成果報酬】【完全在宅ワーク】【人間関係も自由】という最高のお仕事だと言えます。

なので、ぜひ頑張っていきましょう!
あきはる

Web制作に必要な準備物【パソコンのみでOK】

Web制作で準備しておくものは、まずは『パソコン(Mac,Windowsどちらでも可)』のみでOKです。

その他に必要な物は『必要なときに増やす』という考え方で良いかと。

学習に必要な教材などは後ほどご紹介しますね。
あきはる

それでは、次から独学の手順をご紹介していきます。

Web制作の独学ロードマップ

Web制作の独学ロードマップ

では、Web制作の独学ロードマップをご紹介します。

手順は以下の5ステップです。

Web制作の独学ロードマップ

  1. HTML/CSSを学習
  2. JavaScript(jQuery)を学習
  3. PHPの基礎を学習
  4. WordPressの独自テーマ制作を学習
  5. 営業用のサンプルサイトを作る

こちら、順番に解説していきます。

①HTML/CSSを学習

まずは、『HTML/CSS』を学習しましょう。

『HTML/CSS』とは、Webページにテキストや画像、デザインを表示するための言語です。

学習教材として「ドットインストール」と「Progate(プロゲート)」が有名ですが、個人的にはドットインストールをメインで使い、学習の補足としてプロゲートを適宜使う感じがおすすめです。

ドットインストールの『Webサイトを作れるようになろう(HTML/CSS)』の講座は全て受講しましょう。

「レスポンシブ」「フレックスボックス」など、一見難しい用語はドットインストールをやれば全て理解できます。
あきはる

「HTML/CSS」を習得すると、簡単なWebページが作れるようになります。

『HTML/CSS』を習得したら、模写コーディングをしてみよう!

インターネットで[ HTML/CSS 模写 練習 ] などと検索すれば、模写の練習サイトがたくさん出てくるので、HTML/CSSコーディングの練習をしてみましょう。

Bootstrap、SCSSをやってみる

『Bootstrap』とは、HTMLのフレームワークで、要はWebサイトを作るためのテンプレートです。『SCSS』はCSSを効率的に書くためのものという認識でOKです。

これらは比較的簡単なので、がっつり学ぶ必要はなく、『必要になったら学ぶ』という感じでも良いかと。

こちらもドットインストールに講座があるので、チェックしてみてください。

ここまで学習できれば、コーディング案件で月収5万円が狙えます。

②JavaScript(jQuery)を学習

次は、『JavaScript』を学習しましょう。

『JavaScript』とは、Webサイトに動きをつけるためのプログラミング言語です。

『JavaScript』もドットインストールで学習しつつ、ざっくりと理解できてきたらプロゲートで『jQuery』を学びましょう。

『jQuery』とは、JavaScriptのライブラリで、JavaScriptよりも簡単にサイトに動きをつけることが可能になります。

Web制作の案件なら、JavaScriptよりjQueryのほうが使うかと!
あきはる

③PHPの基礎を学習

次は、『PHP』を学習しましょう。

『PHP』とは、動的なWebページを作れる言語です。現時点では、WordPress構築をするために必要な言語という認識でOKです。

PHPはゴリゴリに勉強するというよりは、基本を押さえる感じでOKです。

こちらも神教材のドットインストールを2週ほどすれば、かなり理解できます。

④WordPressの独自テーマ制作を学習

次は、『WordPressの独自テーマ制作』の学習をしていきましょう。

WordPressとは、CMS(コンテンツマネジメントシステム)と言って、Webサイトにブログなどの投稿機能を実装できるシステムです。

WordPressの独自テーマ作成の案件はかなり需要があるので、習得しておくと高単価な案件を狙えます。

学習方法は「Udemy」にて、『文系でも解る! WordPressの基礎の理解と、独自デザインをWordpress化にする』という講座を受講しましょう。

上記の講座を学習すれば、PHPのテンプレートをコピペするだけで、WordPress化する方法が分かります。

この時点で多くの人は既に挫折してます、、。
あきはる

これで一通りのWeb制作の学習は完了です。あとは、都度ググりながら突破していきましょう!

ここまでをマスターすれば月収20万円を目指せます。

⑤営業用のサンプルサイトを作る

次は、実際に営業用のサンプルサイトを作ってみましょう。

サンプルサイトとは、架空の企業や美容室など、自分が作ったサイトとして実績公開するためのサイトです。

コーディングからWordPress構築まで行い、FTPを使ってサーバーにアップロードして公開まで行いましょう。

このあたりのやり方はググると出てきます。
あきはる

サンプルサイトの公開までしておけば、そのまま実績として案件を受注するための提案に利用できます。

実績公開用のレンタルサーバーとして、エックスサーバー』のスタンダードプランを契約しておきましょう。

僕もエックスサーバーで契約してます!
あきはる

【補足】サンプルサイトのWebデザインは?

サンプルサイトのWebデザインは、ココナラクラウドワークスで発注しちゃいましょう。

ぶっちゃけ、デザインを勉強せずにデザインすると確実にヘンテコなサイトになってしまい、全く受注できない実績になります、、。

クラウドソーシングサイトで、5万円とかでデザイナーに発注するようにしましょう。

良いサンプルサイトが作れてバンバン受注できれば初期投資の5万円はすぐに回収できます。

お客さんの気持ちも経験できるので一石二鳥です!
あきはる

ここまでが独学ロードマップです。実績としてサンプルサイトの公開までできれば、あとは案件獲得のための営業ですね。営業に関しては後ほど解説します。

独学が難しいならスクールも検討しよう

独学が難しいならスクールも検討しよう

独学が難しいと感じたタイミングで、Web制作のスクールにいくのもありです。

Web制作に特化している人気のスクールは以下です。

Web制作の人気スクール

デイトラ』は圧倒的な「低価格&高品質」なスクールとして定評があるので、おすすめです。

ノーコードのWeb制作でも月収20万円は稼げる

ノーコードのWeb制作でも月収20万円は稼げる

最近だと、ノーコード(NoCode)と言われるツールを利用した、Webサイト制作で稼ぐことも可能です。

ノーコードであれば、需要がある上に学習コストが低いので、収益化はかなりしやすいです。

ノーコードツールの例は以下です。

【NoCode】ノーコードツールの例

  • ペライチ:最も簡単にサイトが作れるノーコード
  • Wix:自由度が高くおしゃれなサイトが作れる
  • Webflow:かなりの人気を誇るノーコード
  • STUDIO:操作がしやすくおしゃれなサイトが作れる
  • BASE:ネットショップが簡単に作れる

ノーコードはかなりおすすめです。
あきはる

ノーコードで最も簡単なぺライチの作成方法や稼ぎ方は、以下の記事でも解説してるので良ければ参考にしてください。

また、ノーコードを絡めたWeb制作で最短ロードマップは以下をご覧ください。

Web制作の案件獲得方法

Web制作の案件獲得方法

Web制作のスキルを身につけても、案件が獲得できなければ稼ぐことはできません。

案件獲得に苦労する人はかなり多い、、。
あきはる

Web制作の案件獲得に関しては、コツを知れば難しくはありません。

以下の記事で案件獲得については丁寧に解説してます。

まとめ:Web制作の独学方法

まとめ:Web制作の独学方法

今回は『Web制作の独学方法』を中心に解説しました。

Web制作の学習はかなりハードですが、ぜひ頑張ってください。

以下の記事も参考になると思います。

関連記事:こちらの記事も読まれています。

Twitterでも発信をしているので、ぜひチェックしてください。

Twitterはこちら→あきはる

最後のまで読んでいただき、ありがとうございました。

良ければ、シェアしてくれると嬉しいです!!

  • この記事を書いた人

あきはる

『完全未経験から月20万円稼げるフリーランスを増やす!』をテーマに発信しています。大学卒業→営業職→未経験からWebフリーランス→Twitterフォロワー7,000人以上|ブログ月間1.2万PV。『フリーランス教室』の編集長です。

-Web制作