ホームページ制作の見積りに「レスポンシブ対応」と書かれていても、どのページを、どの端末で、どこまで確認するかはその一語から分かりません。比較前に対象画面、利用する環境、完了まで試す操作を一枚に並べ、各提案で含む範囲を確認します。見た目が小さな画面に収まるだけで、問い合わせや購入の操作まで確かめたことにはなりません。
対象ページと部品を先に揃える
全ページを同じ作りで対応するのか、トップ・下層・商品一覧・フォームなどページの種類ごとに作り分けるのかを確認します。既存サイトの一部を残す改修なら、今回の見積りに含むページも明記します。メニュー、表、画像、外部の予約画面や地図など、幅が狭くなると扱いが変わる部品も洗い出します。
MDNのレスポンシブデザインの説明は、画面幅に応じて柔軟な配置や画像を使う考え方を示しています。PCの画面を単に縮小した状態では、小さな文字や押しにくい操作が残り得ます。ただし、具体的なページや部品をどこまで作るかは、見積りごとの約束で決める必要があります。
端末名だけでなく、確認する幅とブラウザーを聞く
「スマホ対応」だけで端末を一機種に限定すると、幅の違う画面やブラウザーで崩れる可能性を見落とします。提案書には対象となるPC・スマートフォン・必要ならタブレットと、確認するブラウザーや幅の目安を書いてもらいます。特定の機種名だけでなく、狭い幅から広い幅へ変わる途中も確かめるかを聞くと、レイアウトの切り替えに対する考え方が分かります。
W3Cのリフローに関する解説は、横書きの内容を狭い表示へ収める際、情報や機能を失わず、原則として二方向のスクロールを求めないことを示しています。320 CSSピクセルという幅は確認の参考になりますが、この数値を書くだけでアクセシビリティ全般への適合や全端末の動作保証が決まるわけではありません。見積りでは自社サイトの対象と確認方法を具体的に合意します。
主要操作を終点まで通して確認する
読者が商品を探して問い合わせるサイトなら、メニューを開く、商品を見つける、フォームを入力する、送信結果を読むまでを一続きで試します。採用サイトなら求人を探して応募する、資料請求サイトなら資料を選んで請求する、といった実際の目的を選びます。幅ごとのスクリーンショットだけでは、タップ後にメニューが閉じられない、入力欄がキーボードに隠れる、といった問題に気づきにくいためです。
確認の担当も揃えます。制作側がどの環境で試し、依頼側が何を受け入れ確認するか。指摘の修正が見積りに含まれる期間と回数、外部サービスの画面で確認だけ行うのか、その画面の変更も対象かを明記します。自社の提案書と対応環境一覧がない段階では、どちらの会社が広く対応しているかを推測せず、同じ質問を返して回答を待ちます。
同じ条件で見積りを読み直す
回答が揃ったら、対象ページ、端末とブラウザー、試す操作、修正範囲を横に並べます。片方の見積りだけ外部フォーム改修やタブレット用の調整を含むなら、金額の差をそのまま制作費の高低と見ない方がよいでしょう。必要なものだけを自社の依頼条件として残し、含まない作業と追加になる場合の条件を双方へ確かめます。
農産物通販の記事は実サイトで商品を探し注文する改善、見積り対象外の問い合わせの記事はサービスの説明が中心です。本稿は制作を依頼する前の納品条件を揃える判断です。Bämの相見積りの相談でも、提案ごとの範囲を具体的な画面と操作へ直して比較できます。
参考資料
資料確認日：2026年9月26日。個別の提案書と対応環境一覧は未提示のため、各社の対応範囲や優劣は判断していません。
