Web制作副業のロードマップどおりに進めれば、未経験の会社員でも始められます。流れは5ステップです。「目標と作るものを決める→HTML/CSSとWordPressの基礎→AIを使って自分のサイトを1つ作る→作品を3つそろえる→案件に応募する」の順に進みます。平日夜と週末で、初案件までの目安は4〜6か月ほど（個人差があります）。費用は手持ちのパソコンと無料ツールなら0円から試せます。
| STEP | やること | 期間の目安 | 費用の目安 | 詳しい節 |
|---|---|---|---|---|
| 1 | 目標と作るもの（WordPress・ノーコード・コーディング）を決める | 1週間 | 0円 | STEP1 |
| 2 | HTML/CSSとWordPressの基礎 | 1〜2か月 | 0円〜（無料の教材・ローカル環境） | STEP2 |
| 3 | AIを使って自分のサイトを1つ作る | 1か月 | 0円〜（AIの無料枠） | STEP3 |
| 4 | 作品（ポートフォリオ）を3つそろえる | 1か月 | 公開するならサーバー・ドメイン代 | STEP4 |
| 5 | 最初の案件に応募する | 1か月〜 | 0円（手数料は報酬から） | STEP5 |
※期間は平日夜1時間＋週末3〜4時間を想定した目安です。サーバー・ドメイン・有料AIツール・スクールの料金は、各公式ページでご確認ください。
僕は本業でWeb制作をしていますが、最初に自分でWordPressを触った日のことはよく覚えています。テーマのファイルを1行だけ書き換えたつもりが、サイトが真っ白になり、元に戻すまでに3時間40分かかりました。順番と「戻せる環境」を知らずに始めると、こういう遠回りをします。
この記事で分かることは次の3つです。
- Web制作副業のロードマップの全体像と、5ステップの順番
- WordPress・ノーコード・コーディングのどれから始めるかの判断
- AIに任せる作業と、人が確認すべき作業の分け方
Web制作副業とは？仕事内容とAIでできること
Web制作副業は、お店や会社、個人事業主から依頼を受けて、Webサイトやページを作ったり直したりする受託の仕事です。自分のブログを育てて広告収入を得るのとは別物で、納期と依頼主がいる仕事になります。
Web制作副業の主な仕事と納品物
- LP（ランディングページ）：商品やイベントを1ページで紹介するページ
- コーポレートサイト・店舗サイト：5〜10ページ前後の小規模なサイト
- WordPressの修正・更新代行：文章や画像の差し替え、プラグインの更新、表示崩れの修正
- 既存サイトの部分改修：お問い合わせフォームの設置、スマホ表示の調整
- バナー・画像の簡単な作成：サイトとセットで頼まれることが多い作業
単価は案件の規模と、デザインまで含むかで大きく変わります。この記事では金額を断定しません。クラウドソーシングの募集ページで、実際の条件を見比べるのがいちばん確かです。
Web制作副業でAIが速くする作業・人がやる作業
| AIで速くなる作業 | 人がやる作業 |
|---|---|
| HTML/CSSのたたき台を書く | 依頼主の目的を聞き、ページの構成を決める |
| エラーの原因の候補を挙げる | スマホ・PCでの表示を実機で確かめる |
| 文章・見出し案の下書き | 文章の事実確認と、依頼主らしい言葉への調整 |
| 修正箇所の洗い出し・作業手順の整理 | 公開前の最終確認（リンク切れ・フォームの動作・表示速度） |
正直なところ、Claude Codeのようなコーディング用のAIが出てきてから、たたき台を書く時間は体感で半分以下になりました。ただ、AIが書いたコードは「動くけれど、スマホで見ると横にはみ出す」ことがよくあります。表示の確認と責任は人に残る、と考えておいてください。
Web制作副業が向いている人・向いていない人
向いている人
- 細かい表示のずれに気づける人（本業で資料のレイアウトにこだわる人は強い）
- 分からないことを調べて、自分で試すのが苦にならない人
- 依頼主の話を聞いて、要点をまとめるのが得意な人（営業・事務の経験が活きます）
向いていない人
- 公開後の不具合の連絡に、数日は返事ができない働き方の人
- 調べものより、決まった手順を繰り返すほうが好きな人
- 短期間でまとまった収入がほしい人
「調べるのが苦手かも」と感じた方もいるかもしれませんね。Web制作は調べる時間がかなりの割合を占めるので、そこが合わないなら、ほかのジャンルと比べられる「AI副業の種類」から見るのも手です。
Web制作副業は稼げる？収入の目安と「稼げない」と言われる理由
結論から言うと、Web制作副業は、作品と実績を積めば単価を上げやすい副業です。ただ、最初の数か月は学習と作品づくりが中心で、ほぼ収入がないと考えておくほうが安全です。
Web制作副業の単価と月収の目安
単価は「新規制作か修正か」「デザインから任されるか」「WordPressか」で大きく変わります。具体的な金額は時期や媒体で外れてしまうため、クラウドソーシングで「WordPress 修正」「LP制作」と検索し、10件ほど条件を並べてみてください。相場の感覚が一番早くつかめます。
僕が最初に受けた小さな修正案件の報酬は、手数料が引かれて手元に7,128円でした。作業より、やり取りと確認に時間がかかったのを覚えています（個人の結果で、収入を保証するものではありません）。
Web制作副業が「稼げない」と言われる理由
- 実績ゼロの壁：作品がないと、応募しても選ばれにくい
- 価格競争：初心者向けの小さな案件に応募が集中しやすい
- ノーコード・AIの広がり：簡単なページは依頼主が自分で作れるようになり、単純な作業の単価は下がりやすい
AI副業全体で「稼げない」原因を自分で切り分けたい方は、「AI副業は稼げない？原因のセルフ診断」も参考になります。
AI時代にWeb制作副業の仕事は減る？
「作るだけ」の仕事は減っていく、と僕は感じています。一方で、依頼主の多くは「何を作ればいいか分からない」「公開後に困ったとき相談したい」という悩みを抱えています。聞く・決める・確かめる・面倒を見る、の部分は人に頼みたい仕事として残りやすいので、ロードマップの中でもそこを意識して練習しましょう。
Web制作副業のロードマップはWordPress・ノーコード・コーディングどれから？
Web制作副業のロードマップで最初に迷うのが、何で作るかです。「結局どれがいいの？」と迷う方が多いので、ここで3つを並べて比べます。
Web制作副業の3つの始め方の比較
| 始め方 | 学ぶ量 | 案件の見つけやすさ | AIとの相性 | 向いている人 |
|---|---|---|---|---|
| WordPress | 中（管理画面＋少しのHTML/CSS） | 修正・更新代行を含めると多め | 高い（エラーの相談・コードの部分修正） | まず小さな修正案件から実績を作りたい人 |
| ノーコード（STUDIO・Wixなど） | 少なめ（画面操作が中心） | ツールを指定した案件に限られる | 中（文章・構成の下書き） | デザインを見ながら作りたい人 |
| コーディング（HTML/CSS/JavaScript） | 多い | LP・部分改修など幅広い | とても高い（たたき台・修正） | 時間をかけても応用の利く力をつけたい人 |
※「案件の見つけやすさ」は募集の傾向からの目安です。応募前に、各サービスで実際の募集を確認してください。
会社員のWeb制作副業はどれから始めるか
平日夜と週末で進める会社員には、WordPressから始めて、必要に応じてHTML/CSSを足す順をおすすめします。WordPressの修正・更新の仕事は、少しの知識で受けられるものが多く、実績1件目に届きやすいからです。ノーコードは、応募したい案件に「STUDIO指定」などがあるときに選べば十分です。
AIコーディング（Claude Codeなど）でできること・できないこと
- できること：ページのたたき台を書く、エラーの原因の候補を挙げる、修正の手順を整理する
- できないこと：依頼主の目的を決める、表示を実機で確かめる、公開後の責任を持つ
AIは「優秀な下書き係」と考えるのがちょうどいいです。HTML/CSSを少しでも読めると、AIの出したコードのどこがおかしいかに気づけるので、STEP2の基礎は飛ばさないでください。
Web制作副業のロードマップに必要なスキル・パソコン・初期費用
結論は、手持ちのパソコンと無料のツールで1つ作ってみて、足りなくなってから買う、です。
Web制作副業に必要な最低限のスキル
- HTML/CSSを読んで、簡単な部分を直せる
- WordPressの管理画面で、固定ページ・投稿・メニュー・プラグインを扱える
- スマホとPCの両方で表示を確かめる習慣
- 作業前にバックアップを取り、戻せる状態で作業する
- 依頼内容を短い文章で確認し返すこと
この5つがそろえば、初心者向けの修正案件には応募できます。
Web制作副業に使うパソコンの目安
Web制作は動画編集ほど重くありませんが、ブラウザ・エディタ・画像ソフトを同時に開くので、メモリには余裕があると快適です。WordPressや各ツールの動作環境は公式ページで確認してください。今のパソコンで足りるかの考え方は「AI副業のパソコンのスペックはどれくらい必要？」にまとめています。
Web制作副業のサーバー・ドメイン・AIツールの費用
| パターン | 中身 | 費用の考え方 |
|---|---|---|
| まず試す | 自分のパソコンの中でWordPressを動かす（ローカル環境）＋AIの無料枠 | 0円 |
| 作品を公開する | レンタルサーバー・独自ドメイン | 各社の公式の料金ページで確認 |
| 作業を速くする | 有料のAIツール（ChatGPT・Claudeなどの有料プラン） | 公式の料金ページで確認。無料枠で足りなくなってから |
最初からサーバーを契約する必要はありません。ローカル環境なら、壊しても何度でも作り直せます。冒頭で書いた「真っ白になった」失敗も、ローカルで練習していれば笑い話で済んだはずです。
Web制作副業のロードマップ5ステップ
ここからが記事の中心です。Web制作副業のロードマップを、平日夜と週末で進める前提の5ステップにしました。各ステップの「ここまでできたら次へ」を目安にしてください。
STEP1｜Web制作副業の目標と作るものを決める（1週間）
決めるのは2つだけです。「月に何時間・半年後にどうなっていたいか」と「WordPress・ノーコード・コーディングのどれで始めるか」。迷ったら、前の節のとおりWordPressで構いません。
ここまでできたら次へ：目標を1行で書けた、始め方を1つに決めた。
STEP2｜HTML/CSSとWordPressの基礎を身につける（1〜2か月）
無料の学習サイトや書籍で、HTML/CSSの基本（見出し・段落・画像・リンク・色と余白）を一通り触ります。並行して、ローカル環境にWordPressを入れ、テーマの設定・固定ページ・メニュー・プラグインの追加を試しましょう。
つまずきやすいのは、JavaScriptやPHPまで一気に覚えようとすることです。最初の案件に要るのはごく一部なので、まずは「読んで、少し直せる」を目標にしてください。どこまで覚えれば足りるのか、不安になりますよね。目安は次の「次へ」の条件です。
ここまでできたら次へ：WordPressで5ページほどのサイトを作り、文字や色を自分で直せる。
STEP3｜AIを使って自分のサイトを1つ作る（1か月）
次に、AIを組み込んだ流れで、自分用のサイトを1つ作ります。題材は「架空のカフェ」「自分のプロフィール」など何でも構いません。
- ChatGPTやClaudeに、サイトの目的・ページ構成・見出し案を出してもらう
- コーディング用のAI（Claude Codeなど）に、HTML/CSSのたたき台を書いてもらう
- スマホとPCで表示を確かめ、崩れた所をAIに伝えて直す
- 文章の事実と表現を人の目で直し、完成させる
僕が初めてClaude Codeにページを任せたとき、PCでは完璧なのに、スマホで見るとメニューが画面の外に飛び出していました。「AIが書いたから大丈夫」は通用しません。実機での確認を手順に入れておくと安心です。
ここまでできたら次へ：AIを使って1つのサイトを最後まで完成させ、どこを自分で直したか説明できる。
STEP4｜Web制作副業のポートフォリオを3つそろえる（1か月）
応募のときに見せる作品を3つ用意します。おすすめは「WordPressのサイト1つ・LP1つ・既存サイトの改善案1つ」のように、受けたい仕事が伝わる組み合わせです。それぞれに「目的・工夫した点・かかった時間・AIをどこで使ったか」を短く添えると、依頼主に伝わりやすくなります。
作品を公開するなら、このタイミングでサーバーとドメインを用意します。他人の写真や文章を勝手に使わないことは、作品でも同じです。
ここまでできたら次へ：3つの作品をURLで見せられ、説明文を付けられた。
STEP5｜Web制作副業の最初の案件に応募する（1か月〜）
クラウドソーシングなどで、「WordPress 修正」「更新代行」のような小さな案件から応募します。最初の目的は「お金」より「実績1件」。評価が1件つくだけで、次の応募が通りやすくなります。探し方は、このあとの「最初の案件を取る方法」の節で説明します。
ここまでできたら次へ：1件納品し、評価をもらえた。
Web制作副業のロードマップは独学とスクールどちらがいい？
結論は「まず独学でSTEP3まで進めてから決める」です。1つ作り切れば、自分に何が足りないかが見えます。
Web制作副業を独学で進められる人
- エラーが出ても、検索やAIへの質問で自分で解決しようとできる人
- 期限がなくても、決めた時間に手を動かせる人
- 費用を最小にしたい人
Web制作スクールが向いている人・無料相談で確かめること
- 締め切りやコードの添削がないと続かない人
- 質問できる相手がほしい人、案件獲得のサポートまでほしい人
無料相談では「受講料の総額」「質問・添削の回数と期間」「途中解約と返金の条件」「案件の紹介があるなら、その中身」をしっかり確認しましょう。高額な講座を急いで契約させる勧誘には注意が必要です。見分け方は「AI副業の詐欺の見分け方」にまとめています。
本音を言えば、Web制作はAIに質問できるようになって、独学のハードルがかなり下がりました。それでも「エラー画面を見ると手が止まる」タイプの方は、質問できる環境にお金を払う価値があります。
Web制作副業のロードマップに合う学び方を比べたい方は、「AI副業スクールは必要？受講前に確認すべき選び方」で、向く人・向かない人と確認ポイントを整理しています。
Web制作副業で最初の案件を取る方法と注意点
初心者がWeb制作の案件を探せる場所
- クラウドソーシング：WordPressの修正・更新代行など、小さな募集が見つけやすい
- 知人・本業のつながり：知り合いのお店や団体の「ここだけ直したい」から始めるのも手
- 地元のお店・個人事業主：更新が止まったサイトは意外と多いものです
- スキルシェアサービス：「WordPressの表示崩れを直します」のようにメニューを出品する
探し方の全体像は「AI副業の案件はどこで探す？」、具体的な手順は「AI副業をクラウドワークスで始める手順」で解説しています。
発注する側はここを見ている
僕は本業で、ほかの制作者に作業をお願いする立場になることもあります。そのとき見ているのは、技術の高さより次の3つです。
- 依頼文を読んだ証拠があるか：応募文の1行目が、こちらの依頼内容に触れているか
- 似た作品があるか：WordPressの修正なら、WordPressの作品が1つでもあるか
- 返事の早さと確認の丁寧さ：作業前に「この理解で合っていますか」と聞いてくれるか
会社員であることは隠さず、「平日は夜、週末は日中に対応できます」と最初に伝えるほうが、あとでもめません。
Web制作副業の最初の案件で確認する条件
- AIツールを使ってよいか
- サーバーやWordPressの管理画面に入る権限と、作業前のバックアップをどちらが取るか
- 修正は何回までか、公開後の不具合はいつまで対応するか（保守の範囲）
- 写真・文章・フォントの権利はどちらが用意するか
- 納期と報酬、支払いの時期
会社員がWeb制作副業の前に確認すること
副業の前に、勤め先の就業規則を確認してください。副業が禁止・許可制の会社もあるため、人事や就業規則で事前に確かめておきましょう。
給与を1か所から受けている会社員の場合で考えます。副業などの所得が年20万円を超えると、原則として確定申告が必要です。出典は国税庁「No.1900 給与所得者で確定申告が必要な人」です（確認日：2026-10-24）。
注意したいのは住民税です。所得税の確定申告が不要でも、住民税の申告が必要になることがあります。お住まいの市区町村で確認してください。手順やお金まわりの注意は「副業の確定申告のやり方」にまとめています。
Web制作副業で失敗しやすいポイントと対策
Web制作副業の失敗には、よくある型があります。ロードマップを進める前に知っておけば、避けやすくなります。
Web制作の案件が取れない
原因：作品がない、応募文が使い回し、規模の大きい案件ばかりに応募している。
対策：STEP4の作品3つを先にそろえ、最初は修正・更新代行の小さな案件に絞ります。応募数を週5件など決めて、反応を記録すると改善点が見えます。
見積もりが安すぎて時給が下がる
原因：作業時間だけで考え、やり取り・確認・修正の時間を入れていない。
対策：見積もりは「作業時間×1.5」くらいで考え、修正回数を事前に決めます。正直に言うと、僕も最初の頃は確認の時間を数えておらず、時給に直してがっかりしたことが何度もあります。
本番のサイトを壊してしまう
原因：バックアップを取らずに、公開中のサイトを直接触る。
対策：作業前のバックアップを毎回取り、できれば検証用の環境で試してから本番に反映します。冒頭の「3時間40分」は、これを怠った結果でした。
AIの生成コードをそのまま納品する
原因：動いたことに安心して、スマホ表示・フォームの動作・ほかのページへの影響を確かめない。
対策：納品前のチェックリスト（スマホ・PCの表示、リンク切れ、フォームの送信、表示速度）を作り、毎回通します。AIで作った文章や画像の扱いは、文化庁「AIと著作権について」（確認日：2026-10-24）で考え方を確認しておくと安心です。AIツールを仕事に使えるかは、各ツールの利用規約でも確かめてください。
保守の範囲を決めずに受けてしまう
原因：「公開後もちょっと見てほしい」をそのまま受け、無償の対応が続く。
対策：納品後に何日間・どこまで対応するかを、受注の前に文章で決めます。本業の繁忙期と重なると、ここが一番つらくなります。
Web制作副業のロードマップでよくある質問
- Web制作副業は未経験・初心者でもできますか？
-
できます。最初は WordPress の修正・更新代行のような小さな案件から始め、作品と評価を積むのが現実的です。この記事の5ステップを順に進めてみてください。
- 40代・50代からWeb制作副業を始めても間に合いますか？
-
作品を用意し、やり取りを丁寧に続けられれば、40代・50代からでも始める余地は十分あります。Web制作は年齢より「作品」と「やり取りの丁寧さ」で選ばれる仕事です。本業で身につけた報告・連絡・確認の習慣は、そのまま強みになります。
- 平日夜と土日だけで、どれくらいで最初の案件に届きますか？
-
平日夜1時間と週末3〜4時間で進めた場合、4〜6か月が一つの目安です。もともとのパソコンの得意さや、使える時間で大きく変わります。
- プログラミングができなくても、ノーコードやAIだけで受けられますか？
-
受けられる案件もあります。ただ、HTML/CSSを少しでも読めると、AIの出したコードの誤りや表示崩れに気づけるので、STEP2の基礎は飛ばさないことをおすすめします。
- Web制作副業はきついですか？本業と両立できますか？
-
公開後の不具合の連絡や修正依頼が平日に来ることがあり、そこがきつく感じやすい点です。納期に余裕のある案件を選び、保守の範囲を最初に決めておけば、両立はしやすくなります。
- AIで作ったコードやデザインを納品しても問題ありませんか？
-
AIを使ってよいかは、案件ごとに条件が違います。受注の前に依頼主へAIの利用を伝えて確認し、各AIツールの利用規約もあわせて確かめましょう。どちらにしても、表示と動作の確認は自分の責任で行います。
まとめ：Web制作副業のロードマップは今日のローカル環境から
Web制作副業のロードマップを5ステップでおさらいします。
- 目標と作るものを決める
- HTML/CSSとWordPressの基礎を身につける
- AIを使って自分のサイトを1つ作る
- 作品を3つそろえる
- 最初の案件に応募する
今日やることは1つだけ。自分のパソコンにWordPressのローカル環境を入れて、トップページの文字を1行書き換えてみてください。それが最初の一歩です。
学び方で遠回りしたくない方は、独学とスクールの向き・不向きを先に確かめておくと、STEP2以降で迷いにくくなります。