初案件の進め方｜未経験が失敗せずに納品まで進めるための実務ガイド
初案件は「進め方」を知っているだけで8割うまくいく
初案件が怖いのは
- 何をすればいいか分からない
- 進め方の正解が分からない
- クライアントにどう連絡すればいいか不安
といった“経験不足”が原因です。
しかし、Web制作の案件は
流れが決まっています。
この記事では、未経験でも迷わないように
「最初のメッセージ → 納品 → 請求」までの流れをすべて解説します。
ステップ1：契約前の確認でトラブルを防ぐ
最初のやり取りが最重要です。
案件を受ける前に必ず確認すること
- 作業範囲（どこまでやる？）
- 修正回数（何回まで？）
- 納期（いつまで？）
- 納品形式（zip？GitHub？）
- 料金（追加費用は？）
- 連絡手段（ChatWork／Slackなど）
最初にこれらを曖昧にすると、
後で“修正地獄”になるので要注意です。
ステップ2：ヒアリングでゴールを明確にする
ヒアリングでは以下を確認します。
- 目的（売上UP・問い合わせ増など）
- 想定ユーザー
- 好きなデザインの例
- NGデザイン／NGカラー
- スマホ優先かPC優先か
- 競合サイト
ヒアリングは
「確認した内容を文章でまとめる」
ことで、あとからズレを防げます。
ステップ3：ワイヤーフレーム or 構成案を作る
ワイヤーとは、ページの“設計図”です。
ワイヤーがあると
- クライアントとの認識が揃う
- デザインの修正が減る
- コーディングが速くなる
FigmaやCanvaで簡単に作れます。
ステップ4：デザイン案を提出する
次はデザイン案提出です。
初心者は 1案でOK です。
提出時のポイント
- PCとスマホの2パターン用意すると丁寧
- 色は3色以内
- 文字サイズは大きめ
- 余白を広めに
- CTA（ボタン）は大きく目立つように
提出時の文例
「全体のコンセプトと世界観を意識してデザインしました。修正のご希望があれば遠慮なくお知らせください。」
ステップ5：コーディングへ進む（修正反映後）
デザインが固まったらHTML/CSSで実装します。
流れ
- HTMLで骨組み
- CSSでデザイン反映
- レスポンシブ対応
- スマホ表示の最終調整
- インタラクション（必要なら）
初心者は
まずPC版 → 次にスマホ版
の順で作るとやりやすいです。
ステップ6：提出前のチェックは「スマホ優先」
Web制作の初案件での失敗1位は
スマホで崩れていること。
チェックポイント
- 文字が小さすぎないか
- ボタンが押しにくくないか
- 画像が荒れていないか
- 余白が詰まっていないか
- 読みやすいか
- カルーセルやアニメが止まっていないか
できれば家族・友人にもスマホで見てもらうと安心です。
ステップ7：納品データをまとめる
納品形式は最初に確認済みですが、
一般的には以下の形式が多いです。
- zipファイル
- GitHubリポジトリ
- サーバーへアップ（WordPress）
納品時に添える文例
「動作確認したうえで、PC・スマホともに問題なく表示されております。もし調整点がありましたらお知らせください。」
ステップ8：請求書を作成・送付する
請求書は次のツールで簡単に作成できます。
- misoca
- freee
- Canva（テンプレあり）
記載項目
- 作業内容
- 納品日
- 金額
- 振込先
提出方法はPDFが一般的です。
ステップ9：アフターフォローで信頼を獲得する
納品後に一言フォローを送るだけでOKです。
送付例
「数日間は軽微な修正がありましたら無償で対応いたします。」
「今後、保守や追加ページのご相談も承ります。」
これだけで継続依頼につながる確率が一気に上がります。
初案件で“やってはいけないこと”
- 聞かれたことだけ答える（主体性がない印象）
→ 先回りして回答できると安心される - 修正依頼に遅く返す
→ 初案件ほどスピードが命 - デザインを独断で変更する
→ 認識ズレの原因 - スマホ表示を軽視する
→ 満足度が下がる
初心者は「丁寧さ」と「誠実なコミュニケーション」が武器になります。
まとめ
初案件をスムーズに進めるコツは、
進め方を知っているかどうか です。
流れの復習
- 契約内容の確認
- ヒアリング
- ワイヤーフレーム
- デザイン提出
- コーディング
- スマホチェック
- 納品
- 請求
- アフターフォロー
この手順を守れば、初案件でも安心して進められます。
