「レスポンシブは別料金だと思っていなかった」。制作会社のディレクターから、こういう相談をいただくことがあります。デザインを渡してコーディングを外注したら、納品間際になってスマホ対応は範囲外その中間幅の崩れは追加対応と後出しされ、スケジュールも予算も握り直しになる。エンドクライアントには説明できません。板挟みになる——。

結論から言えば、この手のトラブルはほぼ金額の問題ではありません——どこまで作るかを着手前に言語化して合意していないことが原因です。逆に言えば、発注前に握るべき項目を先に押さえておけば、後出しはほぼ起きません。この記事では、Tsudzuriが自サイトや実案件で着手前にすり合わせている項目を、制作会社側が発注時に使える形で整理します。

別料金の後出しは、悪意ではなく前提のズレから起きる

追加費用を巡るトラブルの多くは、悪意ではなく前提のズレから生まれます。発注側は「レスポンシブ対応は当然込み」と考え、受注側は「見積り時点でスマホの指定がなかったから対象外」と考える。同じデザインを見ています。それでも、頭の中の完成物が違うわけです。

特に揉めやすいのが、デザインカンプに描かれていない領域だと感じています。

  • カンプはPCとスマホの2枚だけ。そのあいだのタブレット〜PC間(中間幅)の見え方は未定義
  • hoverやフォーカス、押下中といった状態の指定がない
  • フォーム送信後のサンクス表示やエラー時の挙動が描かれていない

これらはデザインに描かれていない=作らなくてよいとも当然きれいに動くべきとも解釈できてしまう。だからこそ、着手前に一度言葉にして揃えておく必要があります。

中間幅が未定義のまま進むと、PC版を縮めて見せるのか、スマホ版を広げて見せるのかで組み方そのものが変わるため、納品間際に「追加対応」と言われやすいのはここです。

着手前に握る6項目(対応ブラウザ/対応端末/ブレークポイント/中間幅の詰め方/状態指定/フォーム挙動)

着手前に握っておきたい6項目

Tsudzuriでは、デザインを受け取った段階で次の項目を先に確認します。裏を返せば、制作会社側はこれを発注時に添えるだけで、受注先が込みで実装する相手かを見極められます。

  • 対応ブラウザ:Chrome・Safari・Edge・iOS/Android標準など、どこまでを保証範囲にするか
  • 対応端末:PC・タブレット・スマホの実機幅。スマホと一言で言わず、想定する下限幅まで
  • ブレークポイント:どの幅で切り替えるか。デザインの2枚をどの幅に割り当てるか
  • 中間幅の詰め方:カンプのないタブレット〜PC間を、伸縮させるか・特定幅で組み替えるか
  • 状態指定:hover・フォーカス・アクティブ・無効など、インタラクションの見た目
  • フォーム挙動:必須チェック、エラー表示、送信後の遷移やサンクス表示、二重送信の防止

この6項目は見積りの前提です。私はテキストで残すようにしています。最初から込みで実装すると口で言うだけでは足りません。範囲を先に文章で固定してしまう。そうすると、あとからこれは別という会話自体が起きにくくなると感じています。デザインの受け渡しで詰めておくべき点は、Figma・XDからのコーディング依頼で気をつけたいことにもまとめています。

口約束は、納品間際に消えます。

作らないも含めて先に決める

握るというのは、すべてを盛り込むことではありません。やらないことを明示する。同じくらい大切です。

たとえばアニメーションの有無。スクロール連動の演出やホバー時の細かな動きは、あれば魅力的ですが、指定がないままあって当然と思われると揉めます。だから私は「今回は動きは付けず、静的に実装する」といった線引きも、あえて言葉にして確認します。IEのような保証外ブラウザも、対象にしないと明記しておく。

線引きを文章にしておけば、公開後にボタンへ動きを付けてほしいと言われても、それは追加の相談として切り出せるので、こちらも発注側も気持ちよく見積り直せます。

曖昧なまま進めた場合と事前に言語化した場合の比較(対応端末/中間幅/状態/フォーム送信後)

こうして範囲の上限と下限を先に決めておくと、発注側にも利点があります。

  • エンドクライアントへどこまで対応済みかを自信を持って説明できる
  • 追加要望が出ても「これは当初範囲外」と冷静に切り分けられる
  • スケジュールの見通しが立ち、納品直前の握り直しが減る

範囲を先に握る相手は、途中で条件が動いても慌てません。案件全体の進め方はWeb制作の依頼から公開までの流れで、実装方針の選び方はAstro・ヘッドレス実装を外注する視点で触れています。

まとめ:範囲を先に握れる相手を選ぶ

「レスポンシブは別料金」という後出しは、金額交渉ではなく合意形成の失敗です。着手前に対応ブラウザ・端末・ブレークポイント・中間幅・状態・フォーム挙動を言語化しておけば、揉める余地はほとんど残りません。Tsudzuriは、この6項目を最初に握ります。込みで実装することを前提に見積る進め方を取っています。

握るのは、金額より範囲。

外注先のコーディングで追加費用のトラブルを避けたい、範囲を先に握れる相手を探している——そんなときは、お問い合わせからデザインや案件の概要をお送りください。着手前に何を詰めておくべきかから、一緒に整理します。

本記事は2026年7月時点の情報です。対応ブラウザやツールの状況は変わる場合がありますので、ご依頼の際は最新の前提をすり合わせたうえで進めます。