初案件は「進め方」を知っているだけで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です。
送付例
「数日間は軽微な修正がありましたら無償で対応いたします。」
「今後、保守や追加ページのご相談も承ります。」
これだけで継続依頼につながる確率が一気に上がります。
初案件で“やってはいけないこと”
-
聞かれたことだけ答える（主体性がない印象）
→ 先回りして回答できると安心される -
修正依頼に遅く返す
→ 初案件ほどスピードが命 -
デザインを独断で変更する
→ 認識ズレの原因 -
スマホ表示を軽視する
→ 満足度が下がる
初心者は「丁寧さ」と「誠実なコミュニケーション」が武器になります。
まとめ
初案件をスムーズに進めるコツは、
進め方を知っているかどうか です。
流れの復習
-
契約内容の確認
-
ヒアリング
-
ワイヤーフレーム
-
デザイン提出
-
コーディング
-
スマホチェック
-
納品
-
請求
-
アフターフォロー
この手順を守れば、初案件でも安心して進められます。
