スマートフォンで表が読みにくい、メニューを開くとボタンが隠れる。制作会社へ修正を頼もうとして「全部で何ページですか」と聞かれても、その数だけでフォームや共通メニューまで直してもらえるのか判断しづらいことがあります。見積書に「スマホ対応一式」と書かれている場合も、何をもって完成とするかは別に確認が必要です。
見積を比べる前に、対象をページ数、共通の画面構造、部品、操作中の状態、検証環境に分けて整理しましょう。同じ十二ページでも、同じ形を使い回すサイトと、一ページずつ異なる作りのサイトでは調べる範囲が変わります。ページ数は必要な情報ですが、単独では修正の量を表せません。
この記事では、大阪の企業がホームページのスマホ対応を依頼する際にも使える、費用の前提をそろえる方法を説明します。扱う課題は地域共通です。現状を調べていないサイトに一律の相場を当てはめず、依頼先へ渡す対象一覧と、見積に含める確認条件を作ります。
ページ数と、共通の構造を使う範囲を分ける
まず、直したいページのURLと、困っている表示を並べます。そのうえで、同じ構造を使うページをまとめます。ここでいう構造とは、タイトル、本文、写真、一覧などをどの順番で置くかという共通の型です。制作会社が「テンプレート」と呼ぶものが、どのページに使われているかを確認する作業に当たります。
例えば、架空企業Mのサイトに、トップページ一つ、同じ型を使うサービス紹介十ページ、問い合わせ一ページがあるとします。URLは十二件ですが、大きな構造は三種類という整理ができます。ただし、これは説明用の仮定です。実際に同じプログラムやデザイン設定を共有しているかは、制作側の調査で確かめます。
サービス紹介の型を一つ直せば、関連ページへ変更が及ぶことがあります。その場合も、十ページ分の確認が不要になるわけではありません。長いサービス名、写真の枚数、表の列数など、入っている内容の違いによって表示が崩れる可能性があるからです。共通部分の修正と、各ページの内容確認は分けて見積に残します。
反対に、外見が似ていても、過去に個別の調整が入ったページは同じ修正を適用できない場合があります。社内で作った追加ページや、別の制作会社が作った特設ページがあれば、その経緯を添えます。発注担当が技術的な同一性を断定する必要はなく、分かる履歴を渡せれば十分です。
一覧には、今回直すページ、共通変更の影響を確認するページ、今回は対象外にするページを分けて記入します。「対象外」は問題がないという意味ではありません。予算や公開予定を踏まえて今回の作業に含めない範囲として、社内でも共有しておきます。
メニューやフォームは、部品と操作状態で数える
共通のメニュー、問い合わせボタン、比較表などは、複数のページに現れる部品です。ページごとに同じ修正費を足しているのか、共通部品の調整として計上しているのかが分かると、見積の内容を読み取りやすくなります。共通部品の数と、配置先のURLを対応させてください。
ただし、「メニュー一つ」と書くだけでは、確認する範囲が曖昧です。閉じた状態で形が収まることと、開いたあとに項目を選んで移動できることは別です。開閉、長い項目名、下層項目の表示、移動後の状態など、利用者の操作に沿って確認対象を決めます。
フォームなら、最初の入力画面だけでなく、入力中、エラーが出たとき、確認画面、送信完了の状態があります。すべてのフォームが同じ画面構成とは限らないため、実際に存在する段階を確認します。見積では、表示を直す作業と、送信や通知の機能を確かめる作業を分けて書いてもらいます。
特に、画面に送信完了と出ることと、通知メールが担当者へ届くことは同じ確認ではありません。通知到達まで依頼するなら、その対象と試験方法、社内で受信を確認する人を決めます。見た目の修正だけの依頼に、メール側の設定変更まで含まれると思い込まないことが大切です。
外部サービスの予約画面や申込フォームを埋め込んでいる場合は、自社の制作会社が変更できる範囲も確かめます。周囲の余白は変えられても、内部のボタンや入力欄はサービス側の仕様に依存することがあります。調査してから対応可否を決める項目として、通常の自社ページと分けておきましょう。
表の修正も、文字を小さくして収める案と、横に動かして読む案、項目を縦に並べ直す案では作業が異なります。どの方法を採るかを制作側へ任せる場合でも、比較したい項目や省略できない内容を伝えます。見積には、表示方法の提案まで含むのか、指定した方法の実装だけかを残します。
見積一覧に、作業対象と確認方法を一組で残す
次の表は、架空企業Mの改修範囲を整理する例です。価格表や実際の見積ではありません。数量を記入する前に、何を一つとして数え、どの状態まで確認するかをそろえるための欄を示しています。
| 対象の単位 | 一覧へ記入する内容 | 見積で分ける作業 | 確認する条件 |
|---|---|---|---|
| 共通の画面構造 | 型の名称と使用するURL | 共通型の修正、反映先の確認 | 長い見出しや画像の多いページ |
| 個別の例外ページ | 特設ページと固有の調整 | 個別修正、共通部分との整合 | 対象ページの実際の内容 |
| 共通部品 | メニュー・表・固定ボタン | 部品修正、配置先への影響確認 | 開閉・横移動・重なり |
| フォームの状態 | 入力・エラー・完了の画面 | 表示修正、機能確認 | 入力中とエラー後の操作 |
| 検証環境 | 画面幅・実機・ブラウザ | 模擬表示、実機確認、再確認 | 合意した環境と操作の組合せ |
依頼先から別の数え方を提案された場合も、項目名を無理に統一する必要はありません。自社の一覧のどの対象が、相手の見積のどの行に含まれるかを照合します。「共通型の調整に十ページの確認も含む」と分かれば、別の会社が確認費を独立させていても比較できます。
同じ部品に関係する項目が複数あっても、すぐに二重計上とは判断できません。設計を決める作業、表示を変更する作業、複数ページを確認する作業は別だからです。重複して見えるときは、各行の成果物と担当工程を確認します。逆に、安く見えても操作確認が抜けていれば、依頼したい範囲との差を埋める必要があります。
まだ分からない箇所は「一式」に隠さず、調査後に決める項目として残します。既存の作りが不明な場合は、現状調査の費用と、その結果を受けた修正見積を分ける方法もあります。調査を頼む前に、対象URL、調べる内容、受け取る報告、次の判断に必要な情報を確認してください。
予算の上限を伝える場合は、その金額で何を優先するかも添えます。例えば、問い合わせの入力を妨げる箇所と、写真の余白の調整では、先に直す理由が違います。作業を減らすときは、今回扱わない対象と残る症状を記録し、確認工程だけを曖昧なまま削らないようにします。
PC・スマホ・中間幅の検証範囲を合わせる
「スマホで確認」とだけ書かれている場合は、画面幅、ブラウザ、実機を使うかどうかまで具体化します。小さい画面と大きい画面で問題がなくても、その途中だけ見出しや部品が重なることがあります。どの幅で並び方を切り替えるかも含めて、確認範囲を相談しましょう。
MDNのメディアクエリー解説では、特定の端末寸法に一律に合わせるより、内容が崩れ始める幅に合わせて構成を切り替える考え方が示されています。見積でも、決めた数点の画面だけを見るのか、切り替わる前後の幅まで確認するのかを分けると、検証内容が明確になります。MDNの切替幅の考え方
パソコン上で幅を変える確認と、スマートフォンの実機確認も別です。Chromeの公式説明では、デバイスモードは実機での見え方や動作を近似するもので、再現できない側面があるとされています。端末名を選んだ模擬画面を見ただけで、その実機で検証したとは扱わないようにします。Chromeのデバイスモードの制約
発注時には、確認する端末やブラウザの名称、必要に応じてバージョン、縦横の向き、主な操作を記録します。社内で問題が出た環境があるなら、優先して含めるよう相談してください。全機種を同一に表示させる約束ではなく、合意した環境で読み進められ、操作できることを確認する範囲を決めます。
操作については、表を横に動かして右端を読めるか、メニューを閉じられるか、入力エラーの説明へ戻れるかなど、結果が分かる言葉にします。「デザインがきれい」「スマホでも大丈夫」だけでは、依頼者と制作側の判断がそろいません。文字の拡大やキーボード操作を確認する場合も、その条件を見積段階で共有します。
入力や送信を試す際は、テスト用の内容と実施する場所を決めます。本番の営業受付へ試験通知が届く場合は、社内の受信担当へ事前に共有します。実顧客の情報を試験材料にせず、どの状態まで確認したかを記録できる方法を制作会社と合わせてください。
金額差は、調査・修正・確認・公開の内訳で読む
見積を受け取ったら、対象一覧が含まれているかを見たうえで、現状調査、設計、実装、検証、公開の工程を照合します。既存の構造を保って部品を直す案と、構造から作り直す案では、同じ目的でも成果物が違います。総額だけでどちらが割安かを決めず、今回の困りごとと今後の更新方法に合うかを比べます。
修正後の確認で不具合が見つかった場合の再調整と、依頼者が後から内容を追加する変更も区別して確認します。新しいフォームや、当初の一覧になかったページを加えると、対象数が変わります。追加が生じたときに、作業を始める前に範囲・金額・納期を確認する流れを決めておくと、社内の承認も進めやすくなります。
検証環境で直しただけで終わるのか、本番サイトへの反映まで含むのかも確認してください。公開作業、反映後の表示確認、問題が起きた場合の戻し方について、誰が担当するかをそろえます。通常の保守契約に含まれる作業があれば、今回の見積との境目を担当会社に確かめます。
社内確認の期間も工程に入れます。担当者が原稿を更新している途中で表示を確認すると、検証した内容と公開する内容が変わることがあります。確認に使うページの内容をそろえる時期と、追加更新を受け付ける方法を決めると、再確認が必要な範囲を見積へ反映しやすくなります。
大阪で打合せや訪問を希望する場合は、実施方法と費用の扱いを個別に確認します。所在地が近いことだけで訪問が標準に含まれるとは限りません。オンラインでの画面共有、社内端末での確認、現地での確認のうち、どこまで必要かを依頼内容に合わせて決めます。
依頼前は、一つの不具合を具体的に説明するところから
すべてのページを社内で調査し終えるまで、相談を待つ必要はありません。まずは代表するURL、問題が見える画面、使った端末やブラウザ、直前の操作を一組にします。「表が見にくい」なら、どの列が読めないのか、横に動かせるのかまで分かると、調査する対象を共有できます。
次に、その症状が出るほかのページと、同じ部品を使う場所を分かる範囲で挙げます。制作会社へは、共通修正で対応できる範囲と個別対応が必要な範囲を調べてもらいます。最初から正確な部品数を決め切るより、仮の一覧を調査結果で更新する進め方が現実的です。
スマホ対応の費用を判断する土台は、ページ数に単価を掛けた数字だけではありません。どの構造と部品を直し、どの操作を、どの環境で確かめるかが見積に結び付いていることです。その対応が読める一覧を用意すれば、今回任せる範囲と、次回へ残す範囲を社内で説明しやすくなります。
スマートフォン対応だけでなく作り直しも含めて考える場合は、近くで作られたサイトの例も参考になります。当社では、大阪市で制作したホームページの実績と制作費の目安を、地域のページにまとめています。
参照資料：MDNのメディアクエリー解説、Chrome for Developersのデバイスモード解説。2026年9月21日確認。切替幅の考え方と模擬表示の制約を参照し、金額や全端末への適合を根拠付けるものではありません。
