紙媒体やグラフィック制作で使っている見積の考え方は、Web案件でも土台になります。ただしWebは、同じページでも画面幅によって表示が変わり、入力や更新といった操作があり、テスト環境から本番環境へ移す工程があります。ページ数だけで金額を決めるのではなく、実装する機能、確認する状態、公開時の作業まで分けると、発注側・実装側・エンドクライアントの認識を合わせやすくなります。
3行で分かる要点
- スマートフォン対応は、縮小表示ではなく、画面幅に応じた並び替えと実機・ブラウザ確認まで見積範囲を決めます。
- CMSとフォームは、見た目の制作だけでなく、更新項目、入力チェック、通知、権限、テストを別工程として数えます。
- 本番公開は、ファイル転送だけでなく、バックアップ、切り替え、問題時の戻し方、公開後確認まで役割を決めます。
「1ページ」に含まれる作業を先に分ける
Web制作では、デザイン上は1ページでも、パソコンとスマートフォンのレイアウト、メニューの開閉、CMSから入力した内容、フォームの送信結果など複数の状態があります。たとえばW3CのReflow解説は、画面を狭くしたときに情報や機能を失わず、原則として二方向のスクロールを必要としない表示を求めています。スマートフォン対応を見積もる際は、単に「レスポンシブ対応」と書くだけでなく、どの状態を作り、どこまで確認するかを示します。
| 項目 | 見積前に決めること | 見落としやすい作業 |
|---|---|---|
| スマートフォン対応 | 支給デザインの有無、並び替え、メニュー、表や画像の扱い | 中間幅、長い文字、実機・主要ブラウザ、横はみ出しの確認 |
| CMS | 更新するページ、入力項目、一覧・詳細の表示、利用者権限 | 入力例、画像比率、既存データ移行、操作説明、空欄時の表示 |
| フォーム | 項目、必須条件、確認方法、送信先、自動返信、個人情報の扱い | 入力エラー、送信完了、迷惑メール対策、メール到達、端末別テスト |
| 本番公開 | サーバー、ドメイン、公開日時、作業者、承認者、停止可能時間 | バックアップ、リダイレクト、DNS・SSL、キャッシュ、公開後確認、復旧 |
スマートフォン対応は支給物と検証範囲を分ける
パソコン版だけのデザイン支給でスマートフォン版を実装する場合、実装者が余白、文字サイズ、画像の切り替え、要素の順番を判断する場面が増えます。その判断をコーディング費に含めるのか、制作会社側で指示を用意するのかを明記します。すべての端末を保証するという書き方ではなく、対象ブラウザ、基準となる画面幅、実機確認の台数、修正回数を具体化すると見積条件になります。
CMSは「更新できる」の中身を数える
WordPressを導入するだけでは、どの情報を誰が更新できるかは決まりません。お知らせ、実績、商品、スタッフなど、更新対象ごとに入力欄、一覧、詳細、画像、並び順、公開権限が必要です。WordPress公式も、固定的な情報に使うページと時系列で扱う投稿を分けて説明しています。見積では「CMS一式」とまとめず、更新対象とテンプレート数、既存データ移行、操作説明を分けます。
フォームは送信できた後まで確認する
フォームは入力画面を作って終わりではありません。W3Cのフォーム解説では、入力欄のラベル、入力方法の説明、エラーの伝達、送信完了の通知などが整理されています。項目数だけでなく、入力チェック、確認画面の有無、管理者通知、自動返信、送信完了画面、テスト送信を作業として見積もります。メールが実際に届くかはサーバーや受信側の条件にも左右されるため、確認方法と対応範囲も記載します。
本番公開は切り替えと復旧を一つの工程にする
テスト環境で完成したサイトを本番へ移すときは、ファイルやデータベースの反映だけでなく、ドメイン、SSL、メール、キャッシュ、アクセス解析、検索エンジン向け設定も確認します。WordPress公式のサーバー設定案内も、サーバー変更前の確認、バックアップ、元の設定を記録して戻せるようにすることを勧めています。公開作業は、事前バックアップ、切り替え、公開ページ確認、問題時の復旧までを一組として扱います。
見積を作る4ステップ
- 前提資料をそろえる
サイトマップ、画面デザイン、機能一覧、支給素材、既存サイト、公開希望日を確認します。未確定項目は空欄にせず「未確定」と記録します。 - 役割を分ける
仕様を決める人、原稿・画像を用意する人、実装する人、テストする人、本番公開を承認する人を工程ごとに置きます。 - 基本・追加・対象外を分ける
基本見積に含む作業、条件によって追加になる作業、別途見積にする作業を分けます。未確定項目には再見積の条件を添えます。 - 完了条件を文章にする
対象ページ、ブラウザ、フォーム送信、CMS入力、公開URLなど、何を確認したら完了かを示します。納品物と公開作業が別の場合も明記します。
見積書へ書きやすい表現例
| 曖昧になりやすい表現 | 範囲が伝わる表現例 |
|---|---|
| スマホ対応一式 | 支給PCデザインを基にしたレスポンシブ実装、基準幅3種、主要ブラウザ確認を含む |
| WordPress組み込み | お知らせ一覧・詳細・入力項目6件、画像1点、公開権限2種の実装を含む |
| フォーム設置 | 入力8項目、必須確認、管理者通知、自動返信、完了画面、テスト送信を含む |
| 公開作業 | 事前バックアップ、本番反映、主要ページ・フォーム・SSL確認、問題時の復旧を含む |
よくある質問
デザインや仕様が未確定でも見積できますか？
確認できている前提で概算を出し、未確定項目を幅または別途見積として分けます。金額だけでなく、何が決まれば確定見積へ進めるかを書いておくことが重要です。
修正回数はすべての工程で共通にできますか？
デザイン調整、実装不具合、仕様変更は性質が異なります。実装ミスの修正と、承認後の仕様追加を分け、どの段階の修正を何回まで含むかを決めます。
公開作業だけ外部へ任せられますか？
可能ですが、サーバー権限、反映元データ、公開手順、メールやDNSへの影響、戻し方を事前に確認する必要があります。担当範囲を引き継げる資料があると進めやすくなります。
GreenCodingが支援できる範囲
GreenCodingでは、既存の制作フローや見積書式に合わせて、Web固有の確認項目を整理できます。デザイン支給後のコーディングだけでなく、スマートフォン仕様、WordPressの更新範囲、フォーム、本番公開の役割分担を確認し、必要な工程の実装・検証・公開を支援します。詳しくは制作会社・広告会社向けWeb制作支援をご覧ください。
公式情報
- W3C WAI: Understanding Success Criterion 1.4.10 Reflow
- W3C WAI: Forms Tutorial
- WordPress.org: Server configuration
最終確認日: 2026年9月4日。対象ブラウザ、WordPress構成、メール配信、サーバー、本番公開の条件は案件ごとに異なるため、実際の仕様と利用環境に合わせて見積範囲を確定してください。