Web制作の副業で月20万稼ぐまでの独学ロードマップ【全10ステップ】

この記事で解説しているロードマップを全てやり切ることで、未経験からでも、Web制作の副業で月20万稼げるだけの知識・スキルが身につきます。

かく言う私も、元々はWeb制作に全く関係のない別業界で働いていましたが、本業をこなしながらこの記事の内容通りに学習することで、副業で月20万以上稼げるようになりました。現在は本業化して最高受注金額が100万を超える月も出てきています。

副業で稼いだことがない方にとって月20万は大きな金額に感じるかもしれませんが、Web制作の副業で月20万は努力さえすれば誰でも達成できる現実的なラインです。

この記事では、完全未経験からでも実現可能な「Web制作の副業で月20万稼ぐための独学方法・ロードマップ」を、全10のステップに沿って徹底的に解説していきます。

ステップ0：Web制作で稼ぐための心構え

具体的な学習に入る前に、Web制作で稼ぐ上での心構えをしっかりとさせておかなければなりません。
心構えが出来ていないと挫折してしまったり、迷いが生じて無駄なことに手を出し、時間を無駄にするリスクが圧倒的に高まります。

「ブレない心構え」＋「あとは行動するだけの状況」が、成功するための秘訣です。

具体的にどんな行動をしていくかはステップ１以降で徹底的に解説しているので、まずはこの章で「ブレない心構え」を確固たるものにしましょう。

Web制作で稼ぐための大前提３つ

Web制作で稼げるようになりたいなら、押さえておくべき大前提があります。
それが以下の３つ。

前提①「スキマ時間で稼ぐ」は不可能

記事から離脱してしまう人が増えそうなので本当は言いたくないのですが、Web制作はスキマ時間で出来るほど甘いものではありません。

世の中には、自分のペースで好きな時に働けるブログ・Youtube・せどり等で副業している方が多くいますが、Web制作はクライアントワークなので明確な納期があります。特に駆け出しの頃は、納期が非常に短い案件を受けたり、納品後に修正が入ってさらに時間を取られる機会は避けられないと思います。

もちろん、仕事を発注するクライアント側は、こちらが副業でやっていることなんて考慮してくれません。
本業でやっている方と同じくらいのパフォーマンスが求められるので、必然的に時間が必要になります。

平日なら最低でも2時間以上の時間を確保できないと、Web制作の副業は厳しいです。

これは、経験を積んで作業が効率化したり、他の作業者に仕事を依頼する側に回れれば、徐々に自分の時間も増えていきますが、駆け出しの頃は遊ぶ暇もないほど忙しくなることを覚悟しておきましょう。

前提②「全て無料で」は不可能

Web制作で稼ぎたいなら、最低限必要な出費が存在します。
学習のための教材や必要なデザインツールなどを合わせて、計5〜10万円程度は必要だと心得ておいてください。

「学習なら無料の情報でも出来るんじゃない？」と思う方もいるでしょう。もちろん、今は有益な情報がネット上で無料で見られる時代なので、完全に不可能とは言い切れません。

しかし、初学者の頃はそもそもどんな情報が必要なのかすら分からないはず。
そんな状態で必要な知識を抜け漏れなくネットから拾い集めるのは無理があり、効率が悪すぎます。
有料教材なら必要な情報は不足なく網羅的に得られるので、惜しまずに有料教材を使うべきです。

Web制作は他の副業に比べれば初期費用が大きくかかるでしょうが、その分得られる報酬単価は非常に高いです。かけたリスクの分だけ大きなリターンとなって返ってくるので、最低限の出費は惜しまないでください。

前提③ 初報酬まで3ヶ月〜1年はかかる

Web制作は0からスタートしたとして、初案件を獲得できるレベルになるまで3ヶ月〜1年程度かかります。
期間に幅があるのは、人によって学習に当てられる時間が異なるためです。

仕事を辞めている方なら最短で3ヶ月くらい、
平日に本業がある方なら最短で半年くらいが目安です。

いずれにせよ、プライベートの時間を全て学習に費やすことを前提で上記の期間くらいかかります。この期間で沢山の人が挫折してしまいますから、あらかじめ大量の学習時間が必要なことを覚悟しておいてください。

月20万なら誰でも達成可能

ここまででWeb制作で稼げるようになるまでのハードルが非常に高いイメージを植え付けてしまったかもしれません。
しかし、それを踏まえた上でもWeb制作の副業が優れているのは、やはり稼げる額が大きいからになります。

Web制作が大きく稼げるのは、他の副業と比較して以下のような特徴があるためです。

世の中たくさんの副業がありますが、「誰でも月20万以上稼げるようになる」再現性という面では、Web制作がダントツだと思っています。また、Web制作で月20万稼げるようになれば、絶対に月30万や50万以上など、もっともっと稼げるようになっていきます。

学習中は何度か挫折しそうな気持ちに襲われると思いますが、是非上記のことを心に留めて、諦めずに頑張って欲しいです。

月20万稼ぐイメージを明確にする

本格的に学習を始める前に、「月20万円稼ぐイメージ」を明確にしましょう。

まず、Web制作の仕事をどうやって受注するかについてですが、ほとんどは以下の２パターンのどちらかです。

基本的に制作会社営業の方が、相場に対して適正価格で受注しやすいので報酬は高くなりますが、その分技術力や実務経験が求められます。そのため、まずはクラウドソーシングで実績を積み、徐々に制作会社営業に切り替えていくのが王道です。

それぞれの営業方法で月20万稼ぐイメージは以下の通りです。

目標が明確になったら、あとはひたすら行動するのみ！
次のステップから、具体的な学習の手順を詳しく解説していきます。

ステップ1：HTML / CSSにざっくり触れる

HTMLはWebページの構造を、CSSはWebページのデザインを記述する言語であり、２つ合わせてWeb制作に必要な重要スキルになります。
このステップでは、HTMLとCSSの基本的な概念を”ざっくりと”学習します。

知識0からHTML / CSSを学習するなら、Progateを使うのが圧倒的におすすめです！

Progateとは？

Progateは、初心者向けのオンラインプログラミング学習サービスです。
Progateの魅力はなんといっても、実際に手を動かしながら学べる点です。

プログラミングは本来、自分のPCに必要なツールなどをインストールする「環境構築」が必要になるのですが、初心者にはこの時点でハードルが高かったりします。
Progateではそういった環境構築は全てサービス側が準備してくれており、登録した瞬間からすぐにコードを書いて学ぶことができます。

また、用語の説明がイラストや図解を用いた分かりやすいスライド形式になっている点や、自分の書いたコードが正しいか自動で判定してくれる機能がある点も魅力です。

はじめの一歩はProgateでまず間違いないでしょう。

Progateの有料プランには入るべき？

結論、有料プラン一択です。

Progate自体は無料でも利用できますが、無料で学習できるのは各レッスンのほんの初歩的な部分だけです。
無料部分だけでは到底実務に必要な基礎知識を得られないので、ここは迷わず有料プランを選びましょう。

現在、有料プランには以下の３つのプランが用意されていますが、「１ヶ月プラン」を選んで問題ないです。

Progateでの学習はあくまでHTML / CSSの概念を把握することが目的なので、６ヶ月や１２ヶ月も利用し続けることはありません。（どんなに長くかかるとしても３ヶ月あれば十分）

そのため、１ヶ月プランで登録し、Progateでの学習は早めに終わらせてサブスクを解約するのが良いでしょう。

Progateで学習するべきコース

Progateには言語別の学習コースが全部で15個ありますが、Web制作ではこれらを全てを使用する訳ではありません。このステップでは、「HTML & CSS」コースだけ学習すれば問題ないです。

「HTML & CSS」コースは全7つのレッスンと3つの関連記事で構成されています。
これらを2週間程度を目安に終わらせることを目指しましょう。

完璧な理解・暗記は必要ない

「HTML & CSS」コースだけ学べば良いと言いはしましたが、このコース自体、全くの初心者がやり切るのは結構難しいです。
特に、自分の腕だけで一からWebページを作る「道場レッスン」に関しては、何もできなくて頭が真っ白になってしまう初学者も少なくないでしょう。

ここで絶対に守って欲しいのは、「Progateでの学習は完璧に理解しようとしない」ことです。

冒頭でも述べた通り、このステップでの目的はHTML / CSSの概要を”ざっくり”と理解することなので、完璧に理解する必要はありません。本格的な基礎知識は次のステップ以降で身につけていくことになります。

また、プログラミングの学習に共通して言えるのが、「暗記する必要は全くない」ということです。
現役のエンジニアやコーダーであっても全てを完璧に覚えている訳ではなく、日々ググりながら作業しています。

完璧な理解・暗記をしようとするのは辞め、Progateはさっさと終わらせるくらいのスタンスでいた方が、気持ちの面で楽ですし、効率も良いです。

以下の点を意識してProgateでの学習を進めましょう。

ステップ2：HTML / CSSの基礎を学ぶ

ProgateでHTML / CSSの概要を何となく把握できたら、このステップで基礎知識をさらに深めていきます。
このステップが終わる頃には、自力でWebサイトを何とか形にできるだけのスキルが身についているはずです。

コーディング環境の準備

ステップ１のProgateでは、すでにサービス側でコーディング環境を用意してくれていましたが、実務では自分のPCにコーディング環境を用意しないといけません。

具体的には、HTMLやCSSファイル等を編集するためのコードエディタが必要になります。
コードエディタは様々な種類がありますが、一番のおすすめはVS Code（Visual Studio Code）です。

VS Codeは使用人口が非常に多く、使い方やカスタマイズ方法などの記事もネットですぐ見つかるので、特に強いこだわりがない限りは、VS Codeをインストールすればまず間違いありません。

VS Codeのインストール手順については、「ドットインストール」というサービスのレッスン内に分かりやすい解説動画があるので、以下のページを参考にしてください。（無料で閲覧できます）

• Web制作の準備をしよう macOS編
• Web制作の準備をしよう Windows編

上記の解説動画を「#06 VS Codeエディタを日本語化しよう」まで進めてください。

便利な拡張機能のインストール

VSCodeには、コーディング作業の効率を格段に高めてくれる便利な拡張機能が数多くあります。

以下の記事で「Web制作コーダーに絶対使って欲しいおすすめ拡張機能」を紹介しているので、こちらで紹介している拡張機能を全部インストールしておくと良いです。

これらの拡張機能のおかげでコード記載ミスが圧倒的に減り、コーディングスピードも早くなるので、初めのうちからインストールしておくことをおすすめします。

ドットインストールで基礎学習

コーディング環境が用意できたら、HTML / CSSの基礎知識を更に深めていきましょう。
コーディング環境の準備編でも触れた「ドットインストール」での学習が、まずはおすすめです。

ドットインストールとは？

ドットインストールはオンラインのプログラミング学習サービスです。
1レッスンが3分程度の短い動画教材で構成されていることが特徴で、動画を見ながら自分で手を動かして実践的に学ぶことができます。

ホームページやWebサービスの制作だけでなく、ゲーム制作やデータ分析・機械学習/AIで使われる言語まで、幅広い分野をカバーしています。

更に、プレミアム会員であれば、レッスンのわからないところやプログラミング学習の不安を現役エンジニアに質問することができるのも特徴です。

ドットインストールで加入するべきプラン

ドットインストールには「無料会員」と「プレミアム会員」の２つの会員プランが用意されています。
プレミアム会員の料金は、月額1,080円（税込）です。

無料会員では重要なレッスンのほとんどが受講できないので、言わずもがなですが「プレミアム会員」になりましょう。

ドットインストールで学習するべきコース

レッスン一覧ページのトップにある「Webサイトを作れるようになろう」のレッスンを一通り受講しましょう。

ProgateではHTML / CSSの大まかな概要を学びましたが、ドットインストールでは各HTMLタグやCSSプロパティなどをより深掘って学ぶことになります。
また、自分のPCに用意したコーディング環境を使用するので、より実践に近いコーディングを経験できます。

学習内容は一部Progateと被る箇所もありますが、繰り返し学習することで記憶に定着するので、レッスンは一から全て受講する方が良いです。

学習は2〜3週間を目安に終わらせることを目指しましょう。
こちらも完璧に理解しようとはせず、一通りのレッスンが終わったら次のステップに進んでください。

書籍で体系的に学ぶ

HTML / CSSの基礎学習におすすめなもう一つの教材が、「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」です。

こちらは数あるHTML本の中でも、4年連続売り上げ1位、35万部を突破した超人気の入門書になります。
この本で１番おすすめしたいポイントは、Webサイト制作の流れを体系的に学ぶことができる点です。

この本は実際に手を動かしながら、Webサイト制作をゼロから体系的に学ぶことができ、制作現場の実際の流れを体験することが可能です。

ここまでのステップで積み上げてきた基礎知識の点と点が繋がり、線となるようなイメージです。
HTML＆CSS基礎の総まとめとして相応しい一冊になっています。

ステップ3：jQueryを学習する

ここまでHTML＆CSSでWebページの見た目をつくる方法を学んできました。
このステップでは、jQueryを使用してWebページに動きをつける方法を学んでいきます。

jQueryとは？

jQueryとは、JavaScriptの機能をより使いやすくしたライブラリです。

JavaScriptは、Webページの動作を制御するために使われるプログラミング言語の一つであり、Webサイト制作の分野においては、主に以下のような機能を作るために使用されます。

JavaScriptは、記述の仕方が少し複雑で初心者には扱いにくいデメリットがあります。
jQueryを使うことで、JavaScriptのコードをより簡潔に記述でき、JavaScriptをより簡単に扱えるようになります。

jQueryはオワコンって聞くけど？

近年はReactやVue.jsなど、モダンなJavaScriptライブラリが台頭してきた影響もあり、「jQueryはオワコン」なんて言葉を目にすることがあるかもしれません。

ただ、それはあくまでWebアプリケーション開発の領域での話です。
Webサイト制作ではまだまだ現役の必須技術であり、使えないと仕事になりません。

Webサイト制作で求められるJavaScriptの実装はシンプルなので、jQueryがあれば十分です。そこにReactやVue.js等の最新技術を取り入れるのはオーバースペックすぎる上、そういった技術を使える人材は少ないので当然費用も高くなります。

例えるなら、パワポだけ使えればいいと考える人に高額なゲーミングPCを売るようなものでしょう。単にWebサイトが欲しいクライアントにしてみれば、高いコストをかけてまで必要以上の高機能さは求めていません。

そういった点で、今後もjQueryは使い続けられますので、安心して学習に取り組んでください。

jQuery学習におすすめの教材

jQueryについては、Progateとドットインストールのレッスンを受ければ問題ないです。
どちらも、前提知識としてまずJavaScriptのレッスンを受けることが推奨されているので、合わせて受講するようにしましょう。（JavaScriptのコースは全て受講する必要はありません）

Progateとドットインストールで受講すべきレッスンは、それぞれ以下になります。

jQueryについても、完璧に理解する必要はありません。
Web制作で使うjQueryのパターンは大体決まっており、ネットを探せば作りたい機能の実装方法はすぐに見つかるので、今は概念的な理解ができていればOKです。

ステップ4：Sass (SCSS)とCSS設計を学ぶ

このステップでの目標は、「品質の高いCSSを書けるようになる」ことです。

品質の高いCSSとは、大まかに以下のようなものを指します。

なぜ品質の高いCSSを書く必要があるかというと、Webサイトは一度作って終わりではないからです。

Webサイトは更新していくものなので、その際はCSSの再編集が必要になり、時には自分の作ったCSSを他の作業者が編集することにもなります。そんな時、コードがぐちゃぐちゃでどこに何が書いてあるか分からない状態では困るわけです。

SassとCSS設計を用いることで、可読性・メンテナンス性の高いCSSを書くことが出来るようになります。
高品質なCSSを書けるかどうかが重宝されるコーダーになれるかの一つの分かれ目になりますので、このステップでしっかりとマスターしていきましょう。

Sassとは？

Web制作の現場では、素のCSSを使用するケースはあまりなく、ほとんどの会社はSassを取り入れています。

Sass（サス）とは、CSSをより使いやすく拡張したスタイルシート言語です。
Sassを使うことで、通常のCSSにはない以下のようなメリットが得られます。

通常のCSSだけで実装しようとすると、どうしても１ファイルの記述量が膨大になりやすく、見づらいコードになりがちです。
Sassを使用することで、複数のファイルに分割したり、繰り返し使うコードを関数等にまとめることが出来るので、コードの可読性やメンテナンス性がグッと高まります。

Sassで書かれたファイルはそのままだとブラウザが読み込めないため、ブラウザが読み込めるファイル形式（この場合はCSS）に変換する「コンパイル」という過程が必要になります。とはいえ、VS Codeの拡張機能などで簡単にコンパイル出来るので、難易度はそれほど高くありません。

Sass・SASS・SCSSの違い

Sass・SASS・SCSSはよく混同されがちなので、ここで簡単に用語の説明をします。

SassはCSSの機能を拡張した言語のことで、Sassを記述する方法として、SASS記法とSCSS記法があります。
それぞれの記法で記述したファイルの拡張子は、SASS記法なら「.sass」、SCSS記法なら「.scss」となります。

具体的な記述方法の解説はここでは省きますが、SCSS記法の方が、より通常のCSSと同じような使い勝手で記述することが可能です。

一般的に広く使用されているのはSCSS記法の方であり、Sassと言えばSCSSのことを指していることが多いです。そのため、このステップでもSCSS記法での書き方を学んでいきます。（SASS記法は実務で使う必要が出た場合にだけ調べれば十分です）

Sass (SCSS)の学習におすすめの教材

ProgateとドットインストールにそれぞれSassのレッスンがあるので、それらを受講すればOKです。

ドットインストールの方がより実践に近い形で学べるのでおすすめですが、Sassの環境構築にRubyを使用しているので、少し難易度が高いです。
Sassの環境構築なら、VS Codeの拡張機能である「Live Sass Compiler」でも簡単に出来るので、こちらを使用する方がいいかもしれません。（私も実務で重宝しています）

CSS設計とは？

CSS設計とは、端的に言えば「CSSの書き方にルールを設ける」ことです。
クラス名の付け方や、各クラスに持たせる役割などにルールを設けることで、誰が見ても理解しやすく、変更作業による破綻が起きにくいCSSを作ることが可能です。

CSS自体には記述方法の規則がほとんどないため、自由に書きやすいメリットがある反面、書いた本人にしか理解できない通称「オレオレCSS」になりやすいデメリットもあります。そのため、チームで制作を行う場では、コードの属人性を極力少なくするためにCSS設計を用いている場合が多いです。

また、チーム制作をしない場合であっても、膨大になりやすいCSSのコードを何の規則も設けずに作っていくのは、いずれ破綻してしまうリスクが高く、後で見返した際に本人ですら理解できない事態になりかねません。

CSS記述ルールが定められている案件の場合はもちろんのこと、特にルールがない案件の場合でも、CSS設計を取り入れてコードを管理しやすくすることはとても重要です。（コードが綺麗に整理されていると、作業効率も飛躍的に高まります）

CSS設計の学習におすすめの教材

CSS設計を学ぶなら、以下の「CSS設計完全ガイド ~詳細解説+実践的モジュール集」を１冊購入して学習することをおすすめします。

単なるCSS設計手法の解説だけでなく、「可読性・保守性の高いコードとは何か」について根本の部分から学べるので、様々な場面で応用が効くようになります。

本書では複数のCSS設計手法が紹介されていますが、特にBEMとPRECSSの章は重点的に学ぶことをおすすめします。

Web制作の現場で最も広く使用されているのはFLOCSSと呼ばれる設計手法だと思いますが、本書にはFLOCSSの詳しい解説は載っていません。とは言え、PRECSSはFLOCSSよりも新しいCSS設計手法なので、FLOCSSで対応が難しい箇所もカバーできる内容になっています。また、PRECSSがわかればFLOCSSもすんなり理解できるので、現時点ではPRECSSの学習を重視して良いでしょう。

ステップ5：デザインカンプからのコーディング実践

ここまでのステップで、Webサイト制作に必要な基礎知識はおおよそ出揃いました。
ここからはいよいよ、実案件に沿った形式での実践演習に入り、あなたのコーディングスキルを実案件で通用するレベルまで引き上げます。

このステップでの目標は、
デザイナーさんが作成したデザインを、コーディングで正確に再現できるようになることです。

一切の狂いも無く正確にコーディングする力が求められるので、今までよりかなり難易度が上がりますが、このロードマップの中でも最重要と言えるステップですので、特に力を入れて取り組みましょう。

デザインツールの準備

Web制作コーダーの仕事のメインは、デザインカンプの内容をコーディングで再現することです。
そのためには、コーディングに必要なデータを読み取るためのデザインツールの使い方を知っておく必要があります。

Web制作の業界では現在、以下の４つのデザインツールが主流となっています。

Figmaは唯一無料で使用できるソフトですが、それ以外の３つはAdobe CC（Adobe Creative Cloud）の有料ソフトであり、使用するには月額料金がかかります。

Adobe XDは以前まで無料で使用できましたが、2023年から有料化しました。
現在Adobe XDを使用するためには、Adobe CCコンプリートプランへの加入が必須となっています。
（XDの共有リンク機能は無料で使用できますが、画像書き出しができない等の制限があります）

XDはコーディングに必要なデータを読み取りやすいデザインツールでもあり、初学者向けのコーディング教材もほとんどはXDを使用しています。

XDを使用するためにも、この時点でAdobe CCコンプリートプランへ加入することを強く推奨します。（Adobe CCコンプリートプランに加入すれば、PhotoshopとIllustratorも一緒についてきます）

以下の記事で、Adobe CC コンプリートプランを通常価格より4万円以上安く購入する方法を解説しているので、こちらを参考にお得な料金でデザインツールを揃えてしまいましょう。

実案件レベルのコーディング演習をこなす

デザインツールの準備ができたら、あとはひたすら実践をこなしましょう。
①無料の教材で練習した後、②添削サービス付きの有料教材を使う流れが最適です。

① 無料の教材で練習

デザインカンプとコーディング教材を無料で提供しているサイトは複数ありますが、
その中でも、PENGIN BLOGのコーディング課題が最もおすすめです！

PENGIN BLOGでは無料のコーディング教材を提供しているだけでなく、それぞれの課題の実装方法の解説記事まで用意されているので、「いきなりの実践で何も手がつかない・・・」となってしまう初学者にも安心の内容です。
また、課題を通して完成したサイトはポートフォリオとして掲載することも許可されています。（※その場合、課題の中でも説明されている通り、必ずBasic認証をかけるようにしてください）

PENGIN BLOGのコーディング課題を、初級編から上級編まで、一通り取り組んでみましょう。

XDからコーディングに必要なデータを読み取る方法については、以下の記事で詳しく解説しています。

課題に取り組む際は、ステップ４で学習したSassとCSS設計を取り入れてコーディングをしましょう。はじめは難しくて時間がかかるでしょうが、数をこなす度に慣れていくので大丈夫です。

上記の課題以外に、無料の課題をもっとこなしたいという方は、Codejumpというサイトでも多くのコーディング課題が無料で提供されているので、チェックしてみてください。

② 添削サービス付きの有料教材を使う

無料教材でコーディングスキルが身に付いたら、添削サービス付きの有料教材に取り組みましょう。

先に述べた通り、Web制作では一切の狂い無くデザインを再現できている必要がありますが、全て正確に再現できているか判断するのは初学者の方には不可能に近いので、必ず一度プロの方に添削してもらうべきです。

結論、現役Web制作者のしょーごさんが監修している、レビュー付きの課題
「デザインカンプからのコーディング練習課題【中級以上】」を購入して取り組みましょう。

こちらの教材には以下の計５つのコーディング課題が含まれています。

また、上記のコーディング課題に加えて、以下の嬉しい特典までついています。

ここまでのサービスが付いてお値段15,320円というのは、破格の安さとしか言えません。
案件を１つでも受注できれば即回収できてしまいます。

完全独学のコーダーと、プロに見てもらったコーダーとでは、正直とんでもないレベル差が生じています。
プロに見てもらった技術力の高いコーダーは、重宝されて仕事も増えるので、ここでの初期投資が生涯に渡って大きな利益を生み出し続けることは間違いありません。

しょーごさん監修のコーディング課題はこちらからどうぞ。
デザインカンプからのコーディング練習課題【中級以上】

ちなみにしょーごさん監修のコーディング課題には、初級編から全ての課題がセットになった「全部盛り」も存在します。この記事のステップ通り学習してきた方なら「中級以上」からで問題ないと思いますが、不安な方は「全部盛り」を購入して初級編の課題から取り組むのも良いと思います（お値段は16,980円で「中級以上」と大差ありません）

ステップ6：ポートフォリオサイトを作る

ステップ５まで完了したあなたは、Web制作の実案件を受注しても問題ないスキルが身に付いています。
このステップでは、案件獲得のための営業活動に必要となる、ポートフォリオサイトを作成していきます。

ポートフォリオサイトとは、自身の制作実績やスキルをまとめたWebサイトのことです。
ポートフォリオサイトがあることで、クライアントはあなたのスキル感を一目で確認する事ができ、仕事を依頼するかどうかの判断材料になります。

① 制作実績をWeb上に公開する

ステップ５のコーディング課題を通して、ポートフォリオサイトに掲載できる制作実績が最低でも３つ程度は出来上がっているかと思います。
まずは、それらのサイトをWeb上に公開し、インターネットを通して閲覧できる状態にします。

コーディング課題によって、完成したサイトを公開する場合のルールが設けられていますので、必ず確認してルールを厳守するようにしてください。

Webサイトを公開するにはサーバーの契約が必要です。
サーバーの選択は、シェア数No.1のエックスサーバーを選べばまず間違いないでしょう。

初期費用無料、月額990円から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

静的サイト（HTML・CSS・JavaScriptだけで構成されたページ）であれば、GitHub Pagesなどを利用して無料で公開も可能ですが、今後のステップで学習するWordPressが動作しないため推奨しません。実務でもサーバーを利用してサイトを公開することがほとんどなので、練習の意味でもサーバーを契約してサイト公開しましょう。

② ポートフォリオサイトを制作する

制作実績がWeb上で見られるようになったら、それぞれの実績をまとめたポートフォリオサイトを制作します。ポートフォリオサイトを制作する方法は大まかに以下の３パターンです。

この中で、「デザイン・コーディングを全て自分で行う」のはやめておいた方がいいです。
大幅に時間がかかる上、Webデザインについて学んでいない場合、余程センスのある人でない限り素人っぽい見た目になってしまいます。

例えどんなに高品質なコードを書けるとしても、デザインがダサいだけでレベルの低いコーダーだと思われてしまいますから、サイトの見た目にはこだわりましょう。

ポートフォリオ作成サービスを利用する場合

以下のようなポートフォリオ作成サービスを利用することで、高品質なデザインのポートフォリオサイトが、コーディングの手間なく簡単に作成できてしまいます。（どちらも無料で利用可能です）

ポートフォリオサイト制作に時間をかける方は多いのですが、正直、コーダーのスキルを判定する上で重要視されるのは制作実績の方で、制作実績をまとめたポートフォリオサイトはそこまで重要ではありません。
そのため、こういったサービスを活用してポートフォリオサイトはサクッと作ってしまうのが、お金と時間の節約にもなる賢い選択と言えます。

デザインは発注し、コーディングは自分で行う場合

デザイナーの方にWebデザイン制作をお願いし、自分でコーディングを行う方法です。
お金と時間に余裕のある方や、見た目のオリジナルさにこだわりたい方に向いています。

デザインの発注には、以下のようなクラウドソーシングサイトを利用すると良いでしょう。

この先のステップで、仕事を受ける側としてクラウドソーシングを利用することになりますが、発注者側も一度体験してみると、非常に良い経験になります。「クライアントはどんな作業者ならお願いしたくなるのか」という観点を持って仕事を発注してみてください。

デザインが出来上がったらコーディングを行い、サーバーにアップロードしてWeb上に公開しましょう。

ステップ7：副業・個人事業の準備を整える

本格的に案件を受注する前に、いくつか準備しておくべきことがあります。

合わせて以下の記事で詳しく解説していますので、参考にしてください。

案件受注後に慌てることのないよう、今のうちに必要な準備を済ませてしまいましょう。

ステップ8：クラウドソーシングで案件受注

いよいよWeb制作の仕事を実際に獲得するフェーズに入ります。

よく「Web制作はWordPressまで出来ないと仕事がない」という声を耳にするのですが、全くもってそんなことないです。コーディングだけの案件も需要は十分にあります。（現に私も、受注している案件の3〜5割程度はコーディングのみの案件です）

WordPressまで習得してから案件獲得に臨もうとすると、時間がかかる上に難易度が高いため、挫折してしまう確率が高くなります。そのため、このタイミングでクラウドソーシングに登録し、コーディング案件獲得のための行動（営業）を始めるのが良いです。

WordPressまで習得して万全な状態で営業に入りたいという方の場合でも、一度クラウドソーシングに登録して、どんな案件があるか眺めてみることをおすすめします。自分にできそうな案件が実際に募集されているのを見つけると、学習のモチベーションも上がります。

利用するクラウドソーシング

利用するクラウドソーシングは、有名な以下の３つに登録しておけば十分でしょう。

実務経験のない駆け出し期は、とにかく数多くの案件に応募することが重要なので、全てのクラウドソーシングに登録しておくことを推奨します。

クラウドソーシングは競合だらけ？

クラウドソーシングは競合だらけというイメージを持っている方は多いと思います。
実際、コーディングのみの案件には、１案件に100名近くの応募者が殺到するケースもあります。

しかし、応募者が全員自分より格上だと思って萎縮する必要はありません。
仕事の発注者側を経験してみるとわかるのですが、テンプレ文章をそのまま使い回していたり、依頼内容を細部まで見てなかったり等、スキル以前に問題のある応募者が大半です。
また、ここまでのステップを全てやり切ったあなたであれば、技術面でも負けていません。（CSS設計なんてほとんどの方は学んでいないと思います）

本当の意味での競合は応募者の中の1〜2割程度しかいません。
諦めずに活動を続けていれば、必ず初案件を受注できますので安心してください。

案件受注のコツ

案件を探す時は、必ず新着順で検索をしましょう。
早く応募するほどライバルも少なく、返信をもらえる確率が上がります。

駆け出し期はとにかくクラウドソーシングサイトに張り付くつもりで、隙間時間があれば新着の案件がないか確認することをおすすめします。

自分のスキル感で応募できそうな案件が見つかったら、提案文を書いて応募しましょう。
提案文には以下の順番で記述するのがベストです。

よく提案文の冒頭で長々と制作実績や自己PRを載せている方がいますが、やめておいた方が良いです。クライアントは依頼内容を、いくらで・いつまでに・どれくらいしっかり対応してくれるかを一番に知りたがっているので、結論ファーストを心がけて文章を書きましょう。

少しでも案件獲得の確率を上げるため、以下の点を徹底するようにしてください。

どうしても案件獲得できない場合

案件受注できないまま時間だけが過ぎて行くのは非常にもったいないです。
どうしても案件受注できそうにない場合、クラウドソーシング営業に特化した教材に頼るのも手でしょう。

・ココナラに特化した教材
【150部突破🎉】ココナラで営業ゼロを目指す！案件獲得方法を大公開！

・ランサーズ：スキルパッケージに特化した教材
【新スキル出品領域！”脱”営業ノウハウを公開】ランサーズ スキルパッケージ大全

ステップ9：WordPressを学習する

Web制作で大きく稼いでいきたいなら、WordPressの習得は欠かせません。
月20万くらいならコーディング案件だけでも不可能ではないですが、WordPressを使えた方が倍以上は達成しやすくなります。

ここでの目標は、WordPressでオリジナルテーマを制作できるようになることです。

既存テーマをカスタマイズ（ノーコード or ローコード）してサイト制作する案件もありますが、制作会社から受注する案件のほとんどはオリジナルテーマ制作であり、こちらの方が報酬単価も高くなっています。

PHPの基礎をざっと学ぶ

WordPressのテーマはPHPという言語を使用して作られているため、PHPの基礎的な理解があった方が、WordPressテーマ制作の理解もしやすくなります。

WordPressで使用するPHPはある程度型が決まっているため、PHPを完全マスターする必要はありません。if文やfor文など、初歩的な基礎がわかっていれば何とかなります。

PHPの学習はざっくりと概要だけ理解し、早めに次に進んでしまいましょう。
受講するレッスンはProgateの「PHP Ⅰ」だけでOKです。

Progate：PHP Ⅰ

オリジナルテーマ制作を一から学ぶ

WordPressの学習は、これまでしてきた学習とは比べ物にならないほど難易度が上がります。
また、WordPressはサーバーと密接に関わるものなので、実装者の知識に欠落があるとクライアントに被害を与えてしまう恐れもあります。

そのため、ネットに落ちている断片的な解説記事だけでWordPressを学ぶのは大変危険です。
必ず有料の教材を使用して、必要な知識を網羅的に学習するようにしてください。

WordPressオリジナルテーマ制作で強くおすすめしたい教材が以下の２つです。（片方だけやれば大丈夫です）

Udemy：ちゃんと学ぶ、WordPress テーマ開発講座

「ちゃんと学ぶ、WordPress テーマ開発講座」はUdemyで販売されている有料講座です。
数あるWordPress講座の中でも、圧倒的な受講者数と高評価を誇るベストセラーになっています。

この講座だけで、WordPressオリジナルテーマ制作のスキルは全て身につきます。

Udemyは月に１〜２回ほど頻繁にセールを行なっており、セール時なら通常価格の80〜90%OFFといった非常にお得なお値段で購入できてしまいます。セールを狙いたい方は、次のセール開催時期の通知を受けるためにも、あらかじめUdemyに登録しておくをおすすめします。

また、あらかじめ講座をお気に入り登録しておけば、セール時にも慌てずスムーズに購入可能です。
=> Udemy：ちゃんと学ぶ、WordPress テーマ開発講座

Brain：実践型WordPress講座

こちらの「実践型WordPress講座」は、Brainで販売されている有料講座です。

先ほど紹介したUdemyの講座と同じく、これ一本でWordPressオリジナルテーマ制作のスキルが身につきますが、こちらの方がよりWeb制作の実案件を想定した実践的な内容になっています。

11ページのデザインカンプ付きで実践的に学べるだけでなく、完成したサイトはポートフォリオとしての掲載も可能ですので、お金に余裕のある方はこちらを購入するのがおすすめです。

また、単なる教材にとどまらず、これから実案件に挑む初学者の方に嬉しい10大特典までついています。

詳細はこちらからどうぞ ↓
【”わずか1ヶ月以内”で実務レベルのWordPressサイト制作スキルが身につく】実践型WordPress講座

WordPress化の実績をポートフォリオに反映

WordPressの学習を終えたら、制作実績に反映することを忘れずに。

Brainの実践型WordPress講座を購入した方であれば、講座内で制作した課題のポートフォリオへの掲載が許可されているので、WordPressの制作実績として追加しましょう。
ステップ５で制作したコーディング課題も、できる範囲でWordPress化しておくと、制作実績がより充実します。

クラウドソーシングに登録しているプロフィールにも、WordPressが使えることを明記しておくと良いです。

ステップ10：制作会社営業で報酬単価UP

いよいよ最後のステップです。
ここまでやり切ったあなたであれば、Web制作会社から直接お仕事をいただくことも可能なだけのスキルを身につけています。

案件獲得方法をクラウドソーシングから制作会社営業メインに切り替え、さらなる報酬UPを目指しましょう。
制作会社から受注できるようになれば、月20万達成がグッと近づきます。

世の中には人手が足りなくて困っている制作会社が本当にたくさん存在しています。「制作会社営業なんて自分に出来るだろうか」と不安に感じる方もいると思いますが、想像以上にあなたのスキルを必要としている方は沢山いますので、是非チャレンジしてみてほしいです。

かくいう私も、制作会社営業が怖くてクラウドソーシング主体で１年ほど副業していた時期がありました。しかし、本腰を入れて制作会社営業に切り替えたところ、低単価＆短納期で疲弊することもなくなり、継続案件を頂けるようになって大変な営業活動もほとんどしなくて良くなり、本当に世界が変わりました。

制作会社営業のための準備

制作会社営業を始める前に、最低限以下の５つは事前に準備しておきましょう。

制作会社営業の流れ

制作会社営業の大まかな流れは以下の通りです。

第一の難関は、制作会社から返信をもらうことです。
実務経験の無い方であれば、おそらく返信率1〜2%くらいが妥当だと思います。

返信率2%と考えると、制作会社100社に営業してようやく2件返信がもらえる計算です。
そこから面談につながり、案件受注まで至る割合はさらに少なくなるので、とにかく数多くの制作会社に営業メールを送ることが重要になってきます。

そして、第二の難関はやはり面談での対応でしょう。
ここは実践を積んで慣れるしかない部分もありますが、少しでも成約率を上げるために、以下の点を意識してみてください。

制作会社営業のサポートサービス

上述した通り、制作会社営業では返信を貰うことが第一の難関です。
この返信を貰うということが出来ずに諦めてしまう方が多いのも事実です。

そんな方向けに、営業方法の解説と営業文の添削がセットになったサービスがありますので、営業の成果が出なくて困っている方は受けてみると良いでしょう。

サービスに含まれるコンテンツも、以下の通り盛りだくさんの内容になっています。

詳細はこちらからどうぞ ↓
【添削します】Web制作会社に特化した最強の営業法の解説と実践課題【あなたの営業文と作品を鬼レビュー】

まとめ：諦めなければ副業で月20万は達成できる！

「Web制作の副業で月20万稼ぐまでの独学ロードマップ」を全10ステップに分けて解説してきました。

膨大な文章量で読むのも大変だったと思いますが、Web制作で稼ぐために身につけるべき知識を全て盛り込んだつもりです。全てをやり切ることが出来れば、月20万くらいなら間違いなく稼げるようになるでしょう。

もちろん、学習も営業も実務も楽ではないので、途中で挫折することもあると思います。
挫折するのは当然のことなので落ち込む必要はありません。時間がかかっても大丈夫なので、諦めないことを一番大事にしてほしいです。

Web制作で大変なのは序盤だけで、そこを乗り越えればどんどん楽になっていきます。

私自身、学習を始めてから月20万稼げるようになるまでは1年半〜2年程度かかっていますが、そこから月100万稼ぐのは本当にあっという間でした。

皆さんも行動さえ続けていれば必ず結果はついてきますので、是非諦めずに取り組んでみてください！