Web制作の副業、初案件までの5手順
画像出典: パブリックドメイン（Wikimedia Commons）
Web制作の副業は、HTML/CSS→JavaScript→WordPressの順に土台を作り、途中で作った制作物をポートフォリオとして残すのが定石です。仕事の入り口は「制作会社の下請け」と「クライアントの直請け」の2種類があり、直請けは単価が高くなりやすい一方で営業力と実績が必要になります。最初の1案件は報酬額より実績を優先して選ぶと、次の案件が取りやすくなります。
Web制作を副業にするときにつまずきやすいのは、技術そのものより順番です。学ぶことが多く見えるので、どこまでやれば仕事を受けられるのかが分からないまま、教材を買っては止まる、という形になりやすい。
正直なところ、Web制作の学習ルートはかなり整理されています。土台になる技術は決まっていて、その先に「どこから仕事をもらうか」という分かれ道があるだけです。ここでは、学習の順序と、仕事の入り口の違い、そして最初の1案件にたどり着くまでを順に見ていきます。
Web制作の副業とは、具体的に何をする仕事？
Web制作の副業でよく発生するのは、企業や個人のWebサイトを作る、あるいは既存サイトの一部を直す仕事です。デザインが用意された状態でそれをブラウザで見られる形に組み上げる作業（コーディング）、問い合わせフォームの設置、既存ページの文言や画像の差し替え、といった単位で依頼が動きます。
ここで押さえておきたいのは、Web制作は一人で全部を担当しなくても成立する仕事だということです。デザイン、コーディング、サーバー設定、運用更新と工程が分かれているため、副業の入り口は「そのうち1工程を引き受ける」形になることが多くあります。だから未経験からでも参入余地があります。
学習は何をどの順で進めればいい？
Web制作の学習ロードマップとして一般的に紹介されている順序は、HTML/CSS を土台に据え、次に JavaScript/jQuery で動きを付け、その後 WordPress を扱えるようにする、という段階です。WordPress は世界のWebサイトの約3割で使われているとされ、制作案件でも登場頻度が高い土台です。
- HTML/CSSページの骨組み（HTML）と見た目（CSS）を作る言語です。ここが全ての土台で、ここだけで作れるページも実際にあります。まずは自分のプロフィールページを1枚、何も見ずに作れる状態を目標にすると進み具合が測れます。
- JavaScript / jQueryクリックで開閉するメニュー、スクロールで現れる要素など「動き」を担当します。jQuery は JavaScript を短く書けるようにした道具で、既存サイトの改修案件では今も頻繁に出てきます。
- WordPressサイトの中身を管理画面から更新できるようにする仕組みです。「納品後、クライアント自身がお知らせを追加できる」状態を作れるようになると、受けられる案件の幅が大きく変わります。
学習の完了と応募の開始を、きれいに分ける必要はありません。HTML/CSS の段階でも受けられる作業（既存ページの文言修正、簡単なレイアウト調整）は存在します。むしろ途中で作ったものを残しておくことのほうが後で効きます。独学の場合も、オンライン学習サービスで基礎と HTML/CSS/JavaScript を学びつつ、課題や実践を通してポートフォリオを作ることが推奨されています。
ポートフォリオは何を入れればいい？
ポートフォリオは、これまでの制作物をまとめて見せるものです。実案件の実績がない段階では、学習中に作った架空サイトで構いません。大事なのは、依頼する側が「この人に頼んだら何が出てくるか」を想像できることです。
- 完成したページそのもの（実際にブラウザで見られる状態で公開する）
- 何を想定して作ったか（誰向けの、何のサイトか）
- 使った技術（HTML/CSS のみ、WordPress 化済み、など）
- 制作にかかったおおよその日数
- スマートフォン表示でも崩れないこと
制作日数を書いておくのは地味ですが効果があります。発注側が最も知りたいことのひとつが「いつ上がるか」だからです。
仕事の入り口は「下請け」と「直請け」でどう違う？
Web制作の仕事の入り口は、大きく2つに分かれます。ひとつは制作会社の下請け、つまり制作会社が受注した案件の一部を外注先として引き受ける形。もうひとつは直請け、依頼したい企業や個人と直接契約する形です。
| 制作会社の下請け | クライアント直請け | |
|---|---|---|
| 契約相手 | Web制作会社 | サイトを持ちたい企業・個人 |
| 単価 | 間に会社が入るぶん抑えめ | 高くなりやすい |
| 必要になる力 | 指示どおりに正確に作る力 | 営業力・実績・信頼の積み上げ |
| 受け取る指示 | デザインや仕様が固まっていることが多い | 要望が固まっていないところから相談になることも |
| 向いている時期 | 技術に自信が付き始めた段階 | 実績と説明力が揃ってから |
直請けは単価が高くなりやすい一方、営業力や実績・信頼構築がより必要になる、という整理が一般にされています。同じ1ページの制作でも、下請けだと制作会社の取り分が引かれた額が自分に渡るのに対し、直請けなら発注側が払った金額がそのまま自分の報酬になります。同じ作業量でも、間に入る会社がいない分だけ手元に残る額は上振れします。逆に下請けは、デザインや仕様が決まった状態で渡されることが多く、作る作業に集中しやすい。ただし制作会社からの下請けや高度な実装を伴う案件には追加の学習が必要とされます。
「下請けは安いから直請けを目指すべき」と語られがちですが、下請けには営業をしなくていいという明確な利点があります。副業として本業のあとに作業する場合、営業と制作の両方を回す時間が取れないことは珍しくありません。単価だけで選ばず、自分が今どちらに時間を割けるかで決めたほうが続きます。
クラウドソーシングはどちらに当たる？
クラウドワークスやランサーズのようなクラウドソーシングサービスは、その中間に位置します。発注しているのが制作会社のこともあれば、サイトを持ちたい事業者本人のこともあるためです。クラウドソーシング経由の案件獲得は、比較的早期に直請けに近い形で収益化しやすいという整理がなされています。
ランサーズには登録ユーザー数200万人超という記載があり、コーディング・サイト制作の案件が豊富とされています（この人数は紹介記事の記載で、一次情報での確認は取れていないため参考値です）。また、決まった価格でサービスを出品する「スキルパッケージ」機能を使い、自分から売り出す形も取れます。
最初の1案件まで、具体的にどう動く？
学習と並行して進められる手順を並べます。順番に埋めていけば、応募できる状態にたどり着きます。
- 制作物を1〜3点、公開状態にするブラウザで見られるURLがあることが重要です。ファイルを送るより、リンクを送れるほうが確認してもらえます。
- クラウドソーシングに登録するクラウドワークスは登録・仕事の検索・契約条件の相談まで無料、ランサーズも登録・依頼・見積もりは無料です。人脈や実績がなくても仕事を探せるのが、この入り口の利点です。
- 本人確認を先に済ませるクラウドワークスの本人確認審査には最大5営業日かかるため、登録直後に申請しておくことが推奨されています。ランサーズは運転免許証かマイナンバーカードならスマートフォンでのオンライン本人確認が使え1〜2営業日、その他の書類による事務局確認は1〜5営業日です。応募したい案件を見つけてから慌てないよう、ここは先に片付けます。
- プロフィールを具体的に書く職歴、対応できる作業、仕事への姿勢を具体的に書き込むことが、応募の通過率を上げる重要なステップとされています。「HTML/CSS ができます」より「HTML/CSS でのコーディング、スマートフォン対応、既存ページの修正に対応できます。平日夜と土日に作業し、着手から3日以内に初稿を出します」のほうが判断されやすくなります。
- 対応できる範囲の案件に応募する学習初期は報酬額を気にせず、まず自分が対応できる案件を受けて実績を作ることが優先されるとされています。1件納品できれば、その実績を次の応募文に書けます。
この「1件納品した」という事実は、想像以上に効きます。実績ゼロの応募文と、公開URL付きの納品実績を1件添えた応募文とでは、発注側が読む前提がまったく変わるからです。最初の1件を通した人から、応募の通りやすさが跳ね上がるのはそのためで、続けて同じクライアントから追加依頼が来ることも珍しくありません。ランサーズには継続発注などの条件達成で手数料が16.5%（税込）から3.3%（税込）へ下がる制度もあり、同じ相手と続くほど手元に残る額も増えていきます。
手数料と振込のことも先に知っておく
受け取る金額は契約金額そのままではありません。プラットフォームのシステム手数料が引かれます。
| ワーカー側システム手数料 | |
|---|---|
| クラウドワークス | 報酬額のうち10万円以下の部分20%／10万円超20万円以下の部分10%／20万円超の部分5%（タスク形式は一律20%） |
| ランサーズ | 一律16.5%（税込）。継続発注などの条件達成で3.3%（税込）に割引される制度あり |
表にある「タスク形式」とは、アンケート回答や短文作成のように、応募や個別契約をせず画面上で作業してそのまま納品する単発の仕事のことです。クラウドワークスの受け取り額は「（契約金額＋消費税）－（システム利用料＋消費税）」で計算されます。さらに報酬確定後の個人口座への振込手数料が、楽天銀行宛て税込100円、他行宛て税込500円かかります。楽天銀行の口座を用意しておくと、振込のたびの差が積み上がります。
ランサーズの一律16.5%は2022年10月1日の改定によるもので、それ以前の段階制（10万円以下20%など）から変わっています。同時にクライアント側にも契約金額の5.5%（税込）の手数料が新設されました。古い解説記事には旧料率が残っていることがあるので、金額を計算するときは適用時期を確認してください。
どのくらいの時間で仕事を受けられるようになる？
ここは正直に書きます。学習期間の目安として広く語られている数字はありますが、公的な統計で裏付けられたものではなく、確保できる学習時間によって大きく変わります。平日に30分しか取れない人と、土日に8時間取れる人では、同じ「3ヶ月」でも中身がまったく違います。
だから期間ではなく成果物の数で進み具合を測るほうが現実的です。「HTML/CSS だけのページを1枚公開した」「スマートフォン表示に対応させた」「WordPress で更新できる形にした」という到達点は、誰が見ても分かる形で残ります。
ページを1枚公開まで通すと、それだけで実務の一巡を経験できます。ドメイン・サーバー・ファイル転送といった、案件で必ず触る部分が公開作業の中に全部入っているからです。教材の中だけで完結させていると、この工程が最後まで空白のまま残ります。
向いていないケースもあります
納期のある仕事なので、本業の繁忙期が読めない時期に始めるのは危険です。Web制作の案件は「今週中に修正を」といった連絡が平日日中に入ることもあり、返信が数日止まると信用に直結します。まずは学習と制作物づくりだけ進めて、応募は落ち着いてからにするほうが結果的に早く進みます。
また、指示された仕様どおりに作る精度が求められる仕事です。自分の好きなデザインで自由に作りたい、という動機だけだと、下請け案件はしんどく感じるかもしれません。その場合は最初から直請けや、自分で企画するサービス制作を視野に入れたほうが合っています。
会社員が始めるときに確認しておくこと
始める前に、勤務先の就業規則で副業がどう扱われているかを確認してください。許可制なのか、届出だけでよいのか、禁止なのかで動き方が変わります。
もうひとつが確定申告です。副業の所得（売上から経費を引いた額）が年間20万円を超えると、給与所得者でも確定申告が必要になります。Web制作の場合、サーバー代・ドメイン代・書籍代・学習サービスの利用料などが経費になり得るので、始めた月から領収書と支払い記録を残しておくと後が楽です。
- 就業規則で副業がどう扱われているか
- 報酬の入金先口座（本業と分けておくと集計が楽）
- 経費になりそうな支払いの記録を残す習慣
いきなり全部を整える必要はありません。ただ、記録だけは最初の1円を受け取る前から始めておくと、あとで遡って思い出す手間がなくなります。
よくある質問
Web制作の副業はHTML/CSSだけでも始められますか？
既存ページの文言修正やレイアウト調整など、HTML/CSSの範囲で対応できる作業は存在するため、その範囲の案件から始めることは可能です。ただし受けられる案件の幅を広げるには、JavaScript/jQueryで動きを付ける技術と、サイトの中身を管理画面から更新できるようにするWordPressの習得が定石とされています。
制作会社の下請けとクライアント直請けはどちらから始めるべきですか？
直請けは単価が高くなりやすい一方、営業力や実績・信頼構築がより必要になります。下請けはデザインや仕様が固まった状態で渡されることが多く、営業をせずに制作作業へ集中できます。副業として本業のあとに作業する場合、営業と制作の両方に時間を割けるかどうかで選ぶのが現実的です。
クラウドソーシングの手数料はいくらかかりますか？
クラウドワークスのワーカー側システム手数料は段階制で、報酬額のうち10万円以下の部分が20%、10万円超20万円以下の部分が10%、20万円超の部分が5%です（アンケート回答などを画面上で作業してそのまま納品するタスク形式は一律20%）。ランサーズは2022年10月1日の改定により受注者側が一律16.5%（税込）で、継続発注などの条件達成で3.3%（税込）に割引される制度があります。
クラウドソーシングの本人確認にはどのくらいかかりますか？
クラウドワークスの本人確認審査には最大5営業日を要するため、登録直後に申請しておくことが推奨されています。ランサーズは運転免許証またはマイナンバーカードを使うスマートフォンでのオンライン本人確認が1〜2営業日、健康保険証やパスポートなど事務局による書類確認は1〜5営業日です。
※記事で使用した内容・数値は変更される場合があります。最新情報は公式サイトをご確認ください。