HTMLやCSSを学んでも、「どの段階で仕事へ応募してよいのか」「何をポートフォリオへ載せるのか」で止まってしまうことがあります。
Web制作の副業は、すべての技術を覚えてから始めるものではありません。まずは自分が責任を持って完成させられる範囲を決め、その範囲に合うサンプルと案件を選ぶことが大切です。
まだWeb制作に決める前の段階なら、スキルなしから個人で仕事を始めるロードマップから仕事選びの順番を確認できます。学習方法で迷っている場合は、Web制作オンラインスクール5校の比較も参考にしてください。すでに作品がある人は、フロントエンドエンジニアのポートフォリオの作り方で見せ方を先に整えられます。
ここでは、未経験から初案件を完了するまでの流れを8ステップで紹介します。
Web制作副業で最初に受けやすい仕事
Web制作といっても、仕事内容は幅広くあります。
| 仕事 | 主な内容 | 初案件としての難易度 |
|---|---|---|
| テキスト・画像差し替え | 既存ページの修正 | 低め |
| CSS調整 | 余白、色、レスポンシブ修正 | 低め〜中程度 |
| 下層ページ追加 | 既存デザインをもとに1ページ追加 | 中程度 |
| LPコーディング | デザインカンプから1ページ実装 | 中程度 |
| JavaScript実装 | メニュー、モーダル、タブなど | 中程度 |
| CMS組み込み | WordPress等への組み込み | 中〜高め |
| サイト一式制作 | 設計、デザイン、実装、公開 | 高め |
最初から「Webサイトを何でも作ります」と出すより、デザインカンプからLPを実装する、既存サイトのスマートフォン表示を直すなど、作業範囲を具体的にしたほうが依頼者も判断しやすくなります。
ステップ1. 受ける仕事の範囲を決める
最初に、できることと、まだ対応しないことを書き出します。
対応例
- HTML・CSSでの静的ページ実装
- レスポンシブ対応
- ハンバーガーメニュー
- スムーススクロール
- モーダル・アコーディオン
- 既存ページの文言・画像修正
対応外の例
- デザイン制作
- WordPressオリジナルテーマ
- 会員登録・決済機能
- サーバー移行
- 複雑なバックエンド開発
対応外を書くことは弱みではありません。見積もり後に想定外の作業が増えるのを防ぎ、できる範囲を確実に納品するために必要です。
ステップ2. 最低限の技術を1つの制作物で確認する
学習項目を別々に終わらせるだけでなく、1ページを最初から最後まで作ります。
最低限、次を確認します。
- 見出し・文章・画像を意味に合ったHTMLで組める
- CSSでレイアウトと余白を再現できる
- PCとスマートフォンで表示を調整できる
- 画像を適切なサイズで書き出せる
- 基本的なJavaScriptのUIを実装できる
- Gitで変更履歴を残せる
- 公開URLを作れる
GitHub Pagesは、リポジトリ内のHTML・CSS・JavaScriptを静的サイトとして公開できるため、シンプルな制作物の確認URLを作る選択肢になります。
ステップ3. ポートフォリオ用の作品を3つ作る
実案件を公開できない場合は、架空案件でも問題ありません。ただし、見た目だけでなく「何を考えて作ったか」を説明します。
おすすめの3作品は次の構成です。
- 中小企業のコーポレートサイト
- サービス紹介LP
- 問い合わせフォームや業務ツールなど、自分の強みが出る作品
各作品に書く内容
- 制作物の目的
- 想定したターゲット
- 担当範囲
- 使用技術
- 制作期間
- 工夫した点
- PC・スマートフォンの画像
- 公開URLとコード
実案件を載せる場合は、契約や守秘義務を確認し、企業名・ロゴ・人物画像などをそのまま掲載しない判断も必要です。作品詳細に書く項目や、架空案件・非公開案件の見せ方は、フロントエンドエンジニアのポートフォリオの作り方で詳しく整理しています。
ステップ4. サービス説明を作る
プロフィールで技術を並べるだけでなく、依頼者が得られる結果を説明します。
書き方の例
デザインカンプをもとに、PC・スマートフォンへ対応したWebページを実装します。HTML・CSS・JavaScriptで、ハンバーガーメニュー、モーダル、スムーススクロールなどの基本的な動きにも対応します。
さらに、次を明記します。
- 基本料金に含むページ数
- 対応する画面幅
- JavaScript実装の範囲
- 素材を誰が用意するか
- 修正回数
- 納品形式
- 公開作業を含むか
「相談してから決めます」だけではなく、基本の範囲を決めておくと、問い合わせ対応が早くなります。
ステップ5. 小さな案件を探す
初案件では、報酬だけでなく完了できる確率を重視します。
探しやすい案件
- 既存ページの文言・画像修正
- 1ページだけのコーディング
- 下層ページの追加
- スマートフォン表示の調整
- フォームの見た目修正
- 簡単なUI実装
案件文に書かれていない作業がありそうなら、応募前に質問します。特に、デザインデータ、画像素材、実装環境、納期、公開作業の有無は早めに確認します。
ステップ6. 見積もり前に確認する
見積もりの精度は、作業時間の計算より、前提条件の確認で決まります。
確認項目
- 対象ページ数
- デザインデータの形式
- PC・タブレット・スマートフォンのデザイン有無
- 画像・文章の支給状況
- JavaScriptの動き
- 対応ブラウザ
- CMSや既存環境への組み込み有無
- コーディング規約
- 希望納期
- 修正回数
- 公開作業の有無
分からない部分は「含めない」のではなく、現時点の見積もりに含まれる範囲を文章で示します。
ステップ7. 初案件を安全に進める
受注後は、作業に入る前に次を共有します。
- 作業範囲
- 初回確認日
- 納品予定日
- 確認してほしい内容
- 連絡方法
途中で1回確認を入れると、完成後に大きく戻るリスクを減らせます。
進行例
- 1日目：素材と仕様を確認
- 2〜3日目：PC表示を実装
- 4日目：スマートフォン表示を実装
- 5日目：動作確認・初回共有
- 6日目：修正
- 7日目：納品
実際の期間は案件によって変わりますが、初回共有のタイミングを決める考え方は共通です。
ステップ8. 納品後に次の案件へつなげる
案件が終わったら、次を記録します。
- 見積もりより時間がかかった作業
- 最初に確認すべきだったこと
- 再利用できるコード
- よく受けた修正
- クライアントから評価された点
許可を得られる場合は、実績掲載の範囲も確認します。
また、「別ページの追加」「定期的な更新」「表示崩れの確認」など、自然に継続できる作業があれば案内します。必要のない営業をするのではなく、今回の制作物を維持するために必要な支援を伝えます。
ポートフォリオの作品説明がまだ薄い場合は、フロントエンドエンジニアのポートフォリオの作り方で担当範囲と工夫した点を整理しましょう。企業案件での実務経験を積んだら、スキルシート・職務経歴書の書き方でReact・Vue・TypeScriptなどの経験を案件単位で説明できる形へまとめます。そのうえで、フロントエンド向けフリーランス案件サービス3社の比較から相談先を選ぶ流れが自然です。登録後に面談が決まったら、フリーランスエージェントの面談対策で代表案件と希望条件を説明できるように準備します。
初心者がやりがちな失敗
何でも対応すると書く
できない作業まで含まれると、納期遅れや品質低下につながります。対応範囲は狭くても、明確なほうが信頼されやすくなります。
安すぎる固定価格にする
修正回数やページ数が決まっていない状態で固定価格を出すと、作業量だけが増えることがあります。追加作業の料金ルールも決めます。
完成まで共有しない
デザインの解釈が違っていた場合、すべて作った後では修正量が大きくなります。途中確認を入れます。
本番環境だけで作業する
元に戻せるよう、バックアップとGitの履歴を残し、可能ならローカルや検証環境で確認します。
連絡を後回しにする
問題が起きたときほど、状況と次の対応を早めに共有します。「分からないまま作業を続ける」より、確認して止めるほうが安全です。
AIコーディングツールを使うときの考え方
CursorやGitHub Copilotなどは、コードの説明、修正案、繰り返し作業の補助に役立ちます。
ただし、生成されたコードを理解せずに納品すると、修正依頼へ対応できません。次を守ります。
- 変更差分を確認する
- ローカルで動作確認する
- レスポンシブ表示を確認する
- 既存コードへの影響を見る
- ライブラリやコードの利用条件を確認する
AIは作業速度を上げる道具であり、品質確認の責任まで移せるわけではありません。
まとめ
Web制作副業は、学習が終わった人だけが始めるものではありません。
受ける範囲を決める → サンプルを公開する → 小さな案件を完了する → 振り返って範囲を広げるという順番なら、実務を通して成長できます。
まずは、1ページの制作物を公開し、「どこまで対応できるか」を200文字程度で説明するところから始めましょう。