レスポンシブデザインとは？発注者が知るべき必要性と確認ポイント
Web制作会社やシステム開発会社に依頼した際、見積もり書に「レスポンシブデザイン対応」という項目が含まれていることがあります。担当者から「スマホ対応のための作業です」と説明を受けても、なぜ費用が発生するのか、対応しない場合にどんな問題が起きるのか、費用は妥当なのかが分からないままでは、承認の判断が難しいですよね。
技術的な知識がなければ、Web制作の見積もり項目はどれも難解に感じるものです。特にレスポンシブデザインは「何となくスマホ対応のことらしい」とは分かっても、なぜそれが独立した費用項目として計上されるのかがイメージしにくい部分があります。
本記事では、レスポンシブデザインを非エンジニアの発注者視点でわかりやすく解説します。「何のための作業か」「対応しない場合のリスク」「発注時に確認すべきポイント」の3点を中心にお伝えします。この記事を読み終えた後には、見積もりの妥当性を判断し、次の打ち合わせで必要な確認ができる状態になっていただけます。
失敗しないためのWeb開発の考え方と開発パートナー選定チェックリスト
この資料でわかること
こんな方におすすめです
レスポンシブデザインとは？1分でわかる基本の仕組み
レスポンシブデザインとは、1つのWebサイトをスマートフォン・タブレット・PCなど、異なる画面サイズのデバイスで最適な状態で表示させる設計手法のことです。
具体的には、サイトが「今どんな画面サイズのデバイスで見られているか」を自動的に感知し、それに合わせてレイアウトや文字サイズ、画像の配置などを切り替えます。スマホで見ているときはスマホ向けの1列レイアウトで表示され、PCで見ているときはPC向けの横広レイアウトで表示されます。
対応していない場合、スマホで何が起きるか
レスポンシブデザインに対応していないWebサイトをスマートフォンで見ると、PC用の大きな横幅のレイアウトがそのまま小さな画面に収まろうとするため、以下のような問題が起きます。
- テキストが極端に小さく表示され、読むには画面を拡大しなければならない
- ボタンが小さすぎてタップできない
- 横スクロールが発生し、ページ全体を把握するのが困難
- 画像が見切れたり、レイアウトが崩れたりする
このような状態になることを防ぐ作業が「レスポンシブデザイン対応」です。見積もりに計上されているとすれば、スマートフォンやタブレットでも快適に見られるようにCSSを設計・実装する作業費用として理解するのが正確です。
なぜ「モバイルファースト」が前提になったのか
レスポンシブデザインの必要性を理解するには、「モバイルファースト」という考え方を知ることが助けになります。
モバイルファーストとは、最初にスマートフォン向けのデザインを設計し、そこからPC向けに拡張していくという設計の考え方です。かつてはPCを基準にWebサイトを設計するのが標準でしたが、現在ではスマートフォンからのアクセスが過半数を超えているため、スマホを起点に設計するのが業界の標準になっています。
スマートフォンからのアクセスが過半数を超えた現実
日本国内の状況を見ると、総務省の調査では10代から40代ではそれぞれ80%以上がスマートフォンをインターネット接続の主な端末として利用しています。多くのWebサイトでは、アクセスの60〜70%以上がスマートフォンからというケースが珍しくありません。
つまり、Webサイトを訪問するユーザーの大半はスマートフォンからアクセスしているのが現状です。このユーザーに対してスマホに最適化されていないサイトを見せることは、商機を失うリスクに直結します。
GoogleはモバイルサイトでWebを評価する（モバイルファーストインデックス）
Googleは2018年から段階的に「モバイルファーストインデックス（MFI）」を適用し、2024年にはすべてのWebサイトへの適用が完了しました（Google Search Central Blog）。
モバイルファーストインデックスとは、GoogleがWebサイトの評価・順位付けを行う際に、スマートフォン版のサイトを基準として使用する仕組みのことです。以前はPC版のサイトを基準にしていましたが、現在はスマホ版の内容とパフォーマンスが検索順位の決定に使われています。
これは実務上、「PCで見たときの出来映えではなく、スマホで見たときの出来映えで検索順位が決まる」ということを意味します。スマホ対応が不十分なサイトは検索順位で不利になる時代が、すでに始まっています。
レスポンシブ対応をしない場合に起きること
「今はそこまでスマホからのアクセスが多くないので後回しでもいいか」と感じる方もいるかもしれません。しかし、レスポンシブ対応を後回しにした場合、以下3つの影響が生じます。
Googleの検索順位が下がる（SEOへの影響）
前述のモバイルファーストインデックスにより、スマートフォンで正常に表示されないサイトはGoogleの評価が下がります。その結果、検索結果での表示順位が低下し、潜在的な顧客がサイトにたどり着けないという事態が発生します。
Webサイトを作る目的の多くは「新規顧客の獲得」や「問い合わせの増加」であるはずです。検索順位が下がることはその目的に直接ダメージを与えます。
ユーザーが離脱する（UX・コンバージョンへの影響）
レスポンシブ対応していないサイトにスマートフォンでアクセスした場合、ユーザーは文字を読むために何度も画面を拡大・縮小しなければならず、快適な閲覧ができません。この「使いにくさ」が直帰（サイトをすぐに離れること）につながります。
Googleが公表したデータによれば、モバイルのページ読み込み時間が1秒から10秒に延びると、直帰（離脱）の確率が123%増加するとされています（Think With Google）。モバイル非対応のサイトでは表示が重くなりやすく、この点でも不利になります。また、業界統計ではモバイルユーザーの直帰率はデスクトップユーザーと比較して一貫して高く、モバイル体験の質がコンバージョン率に直接影響することが示されています。
問い合わせや購入など、Webサイトで達成したいアクション（コンバージョン）の転換率も当然下がります。せっかく広告費をかけてサイトに誘導しても、スマホでの操作が困難なために成果につながらないというケースは少なくありません。
将来的なリライト・改修コストが高くなる
「今のWebサイトは急ぎで作りたいので、スマホ対応は後から追加しよう」という判断をするケースがあります。しかし、これは費用対効果の観点からリスクがあります。
PC専用の設計で構築したWebサイトに後からレスポンシブデザインを追加する場合、当初からレスポンシブ対応を考慮して設計・構築する場合と比べて、大幅にコストが上がります。既存のCSSやHTMLの構造を大きく書き換える必要があるためです。
新規サイトに最初からレスポンシブ対応を組み込む場合の費用相場はサイト全体のコーディング費用に追加で15〜25万円程度が一般的ですが（サイト規模により異なります）、既存サイトへの後から追加の場合は、1ページあたり1〜3万円の追加費用が発生するケースが多く、ページ数が多いサイトでは大きな費用差になります（PRONIアイミツ調べ）。
今からWebサイトを新規作成するなら、最初からレスポンシブ対応を含めて設計することが費用対効果の面でも合理的です。
発注時に必ず確認すべきポイント
見積もりに「レスポンシブデザイン対応」が含まれていた場合、以下3つのポイントについて担当者に確認しておくことをおすすめします。
対応範囲（どのデバイス・画面幅に対応するか）
レスポンシブデザインは「スマホ・タブレット・PCすべて対応」のように一括りに言われますが、実際には何種類かの「ブレークポイント（画面幅の切り替えポイント）」を設定して実装します。設定するブレークポイントの数が多いほど作業量は増え、費用も上がります。
以下の点を確認してください。
確認事項のチェックリスト
- スマートフォン（縦向き・横向き）、タブレット、PCの各画面幅に対応するか
- 具体的にどのブレークポイントを設定するか（例：768px・1024px・1280pxなど）
- ブレークポイントの追加・変更が後から発生した場合の費用はどう扱うか
対応ブラウザ・OS（テスト範囲）
レスポンシブデザインの実装が完了しても、使用するブラウザやOSによって表示が異なることがあります。発注時に「どの環境でテストを実施するか」を明確にしておかないと、「Chromeでは正常に表示されるが、Safariでレイアウトが崩れる」という事態が発生することがあります。
確認事項のチェックリスト
- テスト対象のブラウザ（Chrome・Safari・Firefox・Microsoft Edgeなど）を具体的に確認する
- テスト対象のOS（iOS・Android・Windows・macOS）を確認する
- 動作確認済み環境の一覧（テスト仕様書）を納品物として提供してもらえるか確認する
「動作確認済み環境一覧を納品物に含めてほしい」と事前に依頼しておくと、後のトラブルを防ぎやすくなります。
費用の内訳と妥当性の確認
「レスポンシブデザイン対応費：○○万円」という項目があった場合、その費用が何を含むのかを確認しましょう。
一般的にレスポンシブ対応費用には以下が含まれます。
- デザインカンプ（スマホ・タブレット版のデザイン画）の作成費用
- CSSコーディング・実装費用
- 各デバイス・ブラウザでの動作テスト費用
これらが全て含まれているのか、一部のみなのかを確認することが重要です。たとえばデザインカンプの作成は別費用として計上されているケースもあります。
費用相場としては、新規サイトのレスポンシブ対応（スマートフォン・タブレット・PC全対応）で15〜30万円程度が一般的です（サイトのページ数・デザイン複雑度によって大きく異なります）。提示されている見積もりがこの範囲から大きく外れている場合は、含まれている作業範囲を詳しく確認することをおすすめします。
まとめ
本記事では、レスポンシブデザインについて発注者の視点からお伝えしました。
本記事のポイント
- レスポンシブデザインとは: 1つのWebサイトをスマートフォン・タブレット・PCなど複数のデバイスで最適な状態で表示させる設計手法。見積もりに計上される費用は、この対応を実装するための設計・コーディング・テスト費用
- なぜ必要か: Webアクセスの過半数がスマートフォンからであり、GoogleがスマホサイトでSEO評価を行うモバイルファーストインデックスが2024年に完全適用済み。今からWebサイトを作るなら事実上の必須対応
- 対応しない場合のリスク: 検索順位の低下（SEO）・ユーザー離脱率の上昇（UX）・将来的な改修コストの増大という3つのリスクが生じる
- 確認すべきポイント: 対応デバイス・画面幅の範囲、テスト対象ブラウザ・OS、費用に含まれる作業範囲の3点を事前に確認する
見積もりにレスポンシブデザイン対応が含まれている場合、基本的には現在のWebサイト制作において必要な費用項目として承認できます。含まれていない場合は、追加対応の可否と費用を確認することをおすすめします。
Webサイトを制作する目的は、訪問したユーザーに快適な体験を提供し、問い合わせや購入などのアクションへとつなげることです。レスポンシブデザインはその土台となる対応として、今後のWebサイト運用に欠かせない要素と考えてください。
失敗しないためのWeb開発の考え方と開発パートナー選定チェックリスト
