レスポンシブ対応の費用はどう決まる？既存サイトの改修範囲と見積もりの確認点

既存サイトのレスポンシブ対応にかかる費用は、ページ数だけでは決まりません。現在のサイトをどこまで活用できるか、何種類のレイアウトを直すか、フォームなどの機能を含めるか、どこまで動作確認を行うかによって、必要な作業が変わります。

予算を判断するには、まず「スマートフォンで何が使いにくいのか」と「今回どこまで直すのか」を整理することが大切です。この記事では、既存サイトのスマホ対応を検討している企業の担当者に向けて、費用を左右する改修範囲と、見積もりを依頼・比較するときの確認点を解説します。

費用を左右するのは、既存サイトをどこまで改修するか

レスポンシブデザインは、画面の大きさに応じてページの表示を調整する設計方法です。単にパソコン向けの画面を小さく表示することではありません。MDNの解説でも、レイアウト、画像などのメディア、文字、画面幅に応じた設定が扱われています。

既存サイトの改修では、主に次の範囲を確認すると、見積もりの前提をそろえやすくなります。

現在のHTML・CSSやCMSを活用できるか

たとえば、スマートフォンで画像がはみ出す問題と、サイト全体が固定幅で作られている問題では、調べる箇所も直す範囲も異なります。部分的な調整で対応できる場合もあれば、ヘッダーやナビゲーションを含めた共通部分の変更が必要な場合もあります。

既存のHTML・CSSやテンプレートを残せるかどうかは、実装の確認が必要です。「CSSを追加すれば済む」と決めつけず、見積もりでは何を残し、何を作り直すのかを説明してもらいましょう。

レスポンシブ対応と同時にデザインやCMSも変更するなら、その費用は分けて把握しておくと判断しやすくなります。スマホ対応のために必ずCMSを交換する必要があるわけではなく、全面リニューアルのほうが必ず安くなるわけでもありません。

総ページ数に加えて、レイアウトの種類を伝える

同じページ数でも、共通テンプレートを使う記事ページが中心のサイトと、ページごとに構成が異なるサイトでは、改修内容が変わります。

見積もり依頼では、対象ページの一覧に加えて、トップページ、サービス紹介、記事詳細、お問い合わせフォームなど、レイアウトの種類も伝えましょう。特殊な表や埋め込みコンテンツがあるページも分かるようにしておくと、対象漏れを防ぎやすくなります。

共通テンプレートを修正すれば複数ページに反映できる場合でも、個々のページに入っている長い見出しや画像、表まで問題なく表示されるとは限りません。テンプレートの改修と、各ページの確認は分けて考える必要があります。

画像・表・フォームは「表示調整」の内訳まで確認する

見積書に「スマホ対応」とだけ書かれていると、どこまで含まれるかが分かりません。特に次の項目は、見た目の調整と素材・機能の変更を区別して確認しましょう。

• 画像：画面幅に合わせた表示調整に加え、トリミングや素材の作り直しも必要か。
• 表：文字を読める状態に保ちながら、狭い画面でどのように閲覧できるようにするか。
• ナビゲーション：スマートフォン用メニューの表示だけでなく、開閉やリンクの操作も確認するか。
• フォーム：入力欄の配置に加え、エラー表示、確認画面、送信完了まで対象にするか。
• 外部埋め込み：地図や予約機能などについて、表示確認と変更可能な範囲をどう扱うか。

画像は、画面上で小さく表示しただけでは、ダウンロードするデータ量まで小さくなるとは限りません。表示速度の改善も希望する場合は、レスポンシブ対応とは別に、画像データの調整などが含まれるかを確認してください。

また、狭い画面に収めるために主要な説明を削ることにも注意が必要です。Google Search Centralは、インデックスにモバイル版のコンテンツを使用し、パソコン版とモバイル版で主要な内容を同等にするよう案内しています。折りたたみ表示などで見せ方を変えながら、必要な情報を残す方針を共有しましょう。

テストと公開作業も、見積もりの対象にする

レスポンシブ対応の完了条件は、「スマートフォンでページが表示された」だけでは不十分です。文章を読めるか、メニューを操作できるか、フォームを送信できるかまで確認する必要があります。

見積もり時には、対象とする端末・ブラウザー・画面幅と、確認する操作を決めておきましょう。パソコン表示への影響や、共通スタイルを使う他のページも確認対象になります。

狭い画面での読みやすさを考える参考として、W3Cのリフローに関する解説では、情報や機能を失わず、縦横両方にスクロールしなくても内容を利用できることが示されています。データ表や地図など、意味や利用のために二次元の配置が必要な部分には例外がありますが、表があるページ全体の使いやすさを確認しなくてよいという意味ではありません。

あわせて、公開作業を誰が行うか、不具合があった場合にどう元に戻すか、公開後の修正をどこまで含めるかも確認します。これらが別費用なのか、見積もりに含まれるのかで、発注時に見込む予算が変わります。

見積もりを依頼する前に整理しておきたい情報

最初から詳細な仕様書を作る必要はありません。まずは、現状と希望を次の項目でまとめておくと、制作会社と具体的に話を進めやすくなります。

CMSやソースコードの状況が分からない場合は、不明であることを伝え、現在の管理会社に何を確認すべきか相談しましょう。実装状況が未確認の段階なら、提示された金額がどの前提に基づいているかも確認しておくと安心です。

予算が限られる場合は、必要な対応と同時に行う更新を分ける

スマートフォンで読めない・操作できない問題への対応と、ブランドに合わせたデザイン変更、原稿の書き直し、CMSの入れ替えは、分けて検討できます。

たとえば「サービス紹介とお問い合わせを優先し、その他は後から対応したい」という希望があれば、その条件で段階的に進められるかを確認します。ただし、共通のヘッダーやスタイルを変更すると、未改修のページにも影響する場合があります。対象ページだけを切り離して直せるか、段階ごとにどこまで確認するかが判断のポイントです。

部分改修と全面リニューアルで迷う場合は、それぞれについて「今回解消できる問題」「残る課題」「今後追加で必要になる作業」を示してもらいましょう。初回の金額だけでなく、自社が必要とする状態までどこまで対応できるかを比べられます。

見積もりは合計額より先に、含まれる作業をそろえて比べる

複数の見積もりを比較するときは、次の点を確認してください。

• 現状調査、デザイン、実装、テスト、公開作業がそれぞれ含まれているか。
• 対象ページ、テンプレート、フォームなどの範囲が明記されているか。
• 画像制作や原稿修正、表示速度の改善などが別作業になっているか。
• 修正回数と、追加ページ・仕様変更が発生したときの費用の扱いが明確か。
• 税金、継続保守、公開後の不具合修正の扱いが分かるか。

金額に差がある場合は、まず作業範囲と完了条件の違いを確認しましょう。安い見積もりに必要な確認作業が含まれていなかったり、高い見積もりに今回不要な更新が含まれていたりすれば、そのままでは比較できません。

既存サイトの改修を、必要な範囲から相談する

レスポンシブ対応の予算を決める第一歩は、「スマホ対応を一式で依頼する」ことより、現在の問題と必要な改修範囲を共有することです。制作・改修の相談では、画面の見た目に加えて、ページ構成や既存機能との関係を確認することで、発注する作業を具体化できます。

Kizashiは、Webサイト制作・リニューアルに関わるWeb/Growthサービスを提供しています。既存サイトのスマホ対応を検討している方は、Kizashiのホームページ制作サービスをご覧ください。

相談時には、サイトURLと困っている画面、優先したいページを共有し、「現状を活かした改修を希望している」「デザインの見直しも含めて検討したい」といった意向をお伝えください。必要なスマホ対応と、あわせて行いたい更新を整理するところから、予算判断につながる相談を始められます。