「Web制作を副業にしたいけど、未経験でも案件は取れるのだろうか」「クラウドソーシングのWeb制作案件は、いったいどのくらい稼げるのか」――こうした疑問を持っている方は少なくありません。
結論として、Web制作は未経験からでも3〜6ヶ月の学習で案件を獲得でき、1案件5万〜30万円の高単価が狙える分野です。クラウドソーシングの副業ジャンルの中でも、最も収益性の高いジャンルの一つといえます。(副業の始め方完全ロードマップも参考にしてください)
この記事では、Web制作案件の種類や単価相場、未経験から案件を獲得するまでの具体的なロードマップを詳しく解説していきます。

🐸 ナビ助のおすすめ!
Web制作案件の種類と単価相場
Web制作案件といっても、求められるスキルや制作物によって大きく種類が異なります。以下の表で、それぞれの特徴を把握しておきましょう。
| 案件の種類 | 単価の目安 | 必要スキル | 制作期間 |
|---|---|---|---|
| HTML/CSSコーディング | 1ページ5,000〜20,000円 | HTML/CSS | 1〜3日 |
| LP(ランディングページ) | 50,000〜200,000円 | HTML/CSS/JS | 1〜2週間 |
| WordPress構築 | 50,000〜200,000円 | WordPress/PHP基礎 | 1〜3週間 |
| コーポレートサイト | 100,000〜500,000円 | HTML/CSS/JS/WordPress | 2〜4週間 |
| ECサイト構築 | 200,000〜1,000,000円 | Shopify/WooCommerce等 | 3〜8週間 |
| Webアプリ開発 | 300,000〜2,000,000円 | React/Vue/Node.js等 | 1〜3ヶ月 |
注目すべきは、HTML/CSSコーディングのような基礎的な案件でも1ページ5,000〜20,000円の報酬が得られる点です。スキルが上がるほど、受注できる案件の幅と単価が大きく広がっていきます。
未経験からWeb制作案件を取るまでのロードマップ
Web制作は独学でも十分にスキルを習得できる分野です。以下のステップに沿って学習を進めれば、3〜6ヶ月で案件獲得を目指せます。
STEP1:HTML/CSSを学ぶ(1〜2ヶ月)
Progateやドットインストールで基礎を学び、簡単なWebページを作れるようになりましょう。記事執筆時点では、無料で学べる教材が豊富に揃っています。まずはシンプルな自己紹介ページやカフェのWebサイトなど、実践的な制作物を作ることが上達への近道です。
STEP2:JavaScriptの基礎を学ぶ(2〜4週間)
動きのあるWebサイトを作るためにJavaScriptの基礎は欠かせません。ハンバーガーメニューやスライダーの実装、スクロール連動のアニメーションなど、実務でよく求められる機能を自力で実装できるレベルを目指しましょう。JavaScriptが使えるだけで、受注できる案件の幅が大きく広がります。
STEP3:WordPressを学ぶ(2〜4週間)
クラウドソーシングのWeb制作案件の多くがWordPress案件です。テーマのカスタマイズやプラグインの設定ができるようになりましょう。WordPress公式サイトからダウンロードし、ローカル環境(LocalやXAMPPなど)で実際に構築してみるのが効果的です。

STEP4:ポートフォリオサイトを作る
学んだスキルで3〜5個の架空サイト(コーポレートサイト、カフェサイト、美容院サイトなど)を制作しましょう。これがそのままポートフォリオになります。ポートフォリオは「実力の証明書」であり、案件獲得において最も重要な武器です。
ポートフォリオに含めるべき要素:
- レスポンシブデザイン対応であること
- 表示速度への配慮(画像の最適化など)
- SEOの基本を意識した内部構造
- ジャンルの異なるサイトを複数掲載
STEP5:クラウドソーシングで案件に応募する
ポートフォリオを武器に、クラウドワークスやランサーズで「初心者歓迎」「WordPress構築」の案件に応募しましょう。最初は低めの報酬でも実績を優先して受注するのが得策です。最初の3〜5件で高評価を獲得すれば、その後の受注率は格段に上がります。
未経験者が案件を取るためのコツ
1. ポートフォリオの質を上げる
採用されるかどうかはポートフォリオの質で決まるといっても過言ではありません。「見た目がきれい」だけでなく「レスポンシブ対応」「表示速度が速い」「SEOを意識した構造」など、技術面もしっかりアピールすることが重要です。クライアントが見るのはデザインだけではなく、コードの品質や実装の丁寧さも含まれます。
2. 提案文で付加価値を示す
「SEOに配慮した内部構造で制作します」「公開後1ヶ月間は無料で修正対応します」「アクセス解析の初期設定も対応可能です」など、他の提案者と差別化できるポイントを具体的に示しましょう。クライアントの課題に寄り添った提案ができると、採用率が大幅に上がります。
3. デザインも少しできると強い
コーディングだけでなくデザインもできると、「デザイン+コーディング」のワンストップ案件を受けられるようになります。この場合、単価が1.5〜2倍になることも珍しくありません。Figmaの基本操作を覚えるだけでも、対応できる案件の幅が広がります。
4. 継続案件を獲得する
単発の案件をこなすよりも、継続的に仕事を依頼してくれるクライアントを見つける方が収入は安定します。納品後のフォローを丁寧に行い、「次も頼みたい」と思ってもらえる関係を築くことが長期的な成功につながります。

Web制作副業の収入モデル
実際にWeb制作を副業として取り組んだ場合、どの程度の収入が見込めるのかモデルケースを紹介します。
| 段階 | 月の案件数 | 月収の目安 | 時給換算 |
|---|---|---|---|
| 学習期(1〜3ヶ月目) | 0件 | 0円 | − |
| 初期(4〜6ヶ月目) | 1〜2件 | 3万〜10万円 | 1,500〜2,500円 |
| 中期(7〜12ヶ月目) | 2〜3件 | 10万〜25万円 | 2,500〜4,000円 |
| 安定期(1年以降) | 2〜4件 | 20万〜50万円 | 3,000〜5,000円 |
副業として月1〜2案件なら、週10〜15時間程度の稼働が必要です。平日の夜2時間と週末を活用すれば、十分に確保できる時間です。
🐸 ナビ助のおすすめ!
Web制作を学ぶためのおすすめリソース
無料で学べるサービス
- Progate:ゲーム感覚でHTML/CSS/JavaScriptを学べる。基礎固めに最適
- ドットインストール:3分動画で手軽に学習できる。幅広い言語に対応
- YouTube:「Web制作 初心者」で検索すると無数のチュートリアルが見つかる
有料だが投資価値のあるサービス
- Udemy:セール時に1,200〜2,400円で購入可能。体系的に学べるコースが豊富
- テックアカデミー:メンター付きのオンラインスクール。実務レベルのスキルが身につく
よくある質問(FAQ)
Q1. プログラミングスクールに通う必要はある?
必須ではありません。Progate、YouTube、Udemyなど、独学でも十分なスキルは身につきます。ただし、効率的に学びたい場合や挫折しやすい方にはスクールも有力な選択肢になります。独学でもスクールでも、最終的にはポートフォリオの質が案件獲得を左右する点は変わりません。
Q2. 未経験でWordPress案件は受けられる?
独学で3〜6ヶ月学習すれば、簡単なWordPress構築案件は十分に受けられます。テーマのカスタマイズやプラグイン設定ができれば、初心者歓迎の案件から始められるでしょう。(初心者が最初の仕事を取る方法も参考にしてください)
Q3. Web制作の副業は週何時間必要?
1案件あたり20〜40時間程度が目安です。副業として月1〜2案件を受ける場合、週10〜15時間の稼働が必要になります。納期に余裕を持たせたスケジューリングが、品質の担保にもつながります。
Q4. ノーコードツール(STUDIOなど)でも案件は取れる?
取れます。STUDIO、Wix、Squarespaceなどのノーコードツールを使ったWeb制作案件も増加傾向にあります。ただし、HTML/CSSも書ける方が選択肢は広がるため、両方のスキルを持っておくのが理想的です。
Q5. Web制作のAIへの影響は?
AI生成のWebサイトは増えていますが、クライアントの要望に合わせたカスタム制作は引き続き人間の領域です。むしろAIを活用してコーディングを効率化しつつ、デザイン性や使いやすさで差別化できる人材の価値は高まっています。経済産業省のIT人材白書でも、IT人材の需要は今後さらに拡大すると見込まれています。
案件を受注する際は、クライアントとの契約内容(納品物の範囲、修正回数、著作権の帰属など)を必ず事前に確認しましょう。曖昧なまま進めるとトラブルの原因になります。

まとめ
- Web制作は1案件5万〜30万円の高単価ジャンル
- 未経験でも3〜6ヶ月の学習で案件獲得が可能
- HTML/CSS→JavaScript→WordPressの順に学ぶのが王道
- ポートフォリオの質が受注率を左右する
- デザイン+コーディングのスキルがあると単価が大幅アップ
- AIを活用した効率化スキルも今後の差別化要素になる
Web制作は副業の中でも最も高単価を狙えるジャンルの一つです。まずはProgateでHTML/CSSの学習を始めるところから、一歩を踏み出してみてはいかがでしょうか。
🐸 ナビ助のおすすめ!


