レスポンシブデザインとは？スマホ対応の重要性と確認方法

「自社のホームページ、スマホで見たときに文字が小さくて読みにくい」 「スマホだとボタンが押しにくくて、お問い合わせまで辿り着けない」

こうした問題を抱えているWebサイトは、今でも驚くほど多く存在します。

2025年時点で、日本のWebサイト閲覧の約75%がスマートフォンからです。 つまり、あなたのホームページを見る人の4人中3人はスマホユーザーなのです。

スマホで快適に閲覧できないサイトは、見込み客の75%を失っているのと同じです。 HPはお店や会社の「顔」ですが、その顔をスマホで見たときに崩れていたら、第一印象は最悪です。 特にMEO経由でGoogleマップからアクセスするユーザーはほぼ全員がスマホです。HP・SEO・MEOを連携させて集客する場合、スマホ対応は前提条件になります。

この記事では、スマホ対応の標準技術である「レスポンシブデザイン」の基本から、なぜスマホ対応が必須なのか、自社サイトの確認方法と対応手順までを解説します。

ホームページ制作の全体像はホームページ制作の基礎知識にまとめています。 SEOとの関連についてはSEO対策の基本もあわせてご覧ください。

レスポンシブデザインとは

レスポンシブデザインとは、1つのHTMLファイルで、PC・タブレット・スマートフォンなど画面サイズの異なるデバイスすべてに最適な表示を提供するWeb制作の手法です。

基本的な仕組み

従来のWebサイトは、PC用とスマホ用で別々のHTMLファイルを作っていました。 PC用のURLは「https://example.com/」、スマホ用は「https://m.example.com/」のように、2つのサイトを同時に運営していたのです。

この方法は管理が大変でした。 1つの情報を更新するのに、PC版とスマホ版の2つのページを修正する必要があり、どちらかの更新を忘れると情報の不整合が発生します。

レスポンシブデザインでは、1つのHTMLファイルに対して、CSS（スタイルシート）の「メディアクエリ」という機能を使って表示を切り替えます。

ブラウザの画面幅を検知し、「画面幅が768px以下ならこのレイアウト」「1024px以上ならこのレイアウト」のように、条件に応じてデザインを自動的に変更します。

つまり、同じページのURLにアクセスしても、PCでは横並び3カラムのレイアウト、タブレットでは2カラム、スマホでは1カラムの縦積みレイアウトで表示される、ということです。

これにより、以下のメリットが生まれます。

• URL管理が1つで済む
• コンテンツの更新が1回で全デバイスに反映される
• SEO評価が分散しない（1つのURLに集約される）
• 運用コストが低い

ブレイクポイントの設計

レスポンシブデザインでは「ブレイクポイント」と呼ばれる画面幅の区切りを設定します。 一般的なブレイクポイントは以下の通りです。

ブレイクポイントの数が多いほど、各デバイスに精密な対応ができますが、設計と実装の手間も増えます。 中小企業のコーポレートサイトであれば、768px（スマホとタブレットの境界）と1024px（タブレットとPCの境界）の2つのブレイクポイントで十分です。

他のスマホ対応方法との違い

スマホ対応の方法は、レスポンシブデザイン以外にもいくつかあります。

現在のWeb制作では、レスポンシブデザインが事実上の標準です。 Googleも公式にレスポンシブデザインを推奨しています。

特別な理由がない限り、レスポンシブデザインを採用するのが最善の選択です。

セパレート型は、かつてはモバイル専用サイトとして「m.example.com」形式で広く使われていましたが、現在は新規制作で採用されることはほぼありません。 既存のセパレート型サイトを運用している場合は、リニューアルのタイミングでレスポンシブデザインに移行することをおすすめします。 リニューアルの進め方はホームページリニューアルの進め方をご覧ください。

レスポンシブデザインの歴史

レスポンシブデザインという概念が登場したのは2010年です。 Webデザイナーのイーサン・マルコッテ氏が「Responsive Web Design」という記事を発表し、この手法が世界中に広まりました。

当時はまだスマートフォンの普及率が低く、多くのWebサイトはPC向けに作られていました。 しかし、iPhoneの登場（2007年）以降、スマホでのWeb閲覧は急速に増加しました。

2015年には、Googleが「モバイルフレンドリーアップデート」を実施。 スマホ対応していないサイトは、モバイル検索の順位が下がるようになりました。 この時期に「モビゲドン（Mobilegeddon）」という呼び名がつけられるほど、Web業界に大きな衝撃を与えました。

そして2019年、Googleは「モバイルファーストインデックス（MFI）」を全サイトに適用。 これにより、スマホ版のコンテンツがGoogleの検索インデックスの基準となりました。

レスポンシブデザインは、もはや「あった方がいい」ではなく「なければならない」技術です。

レスポンシブデザインの歴史を年表で整理します。

なぜスマホ対応が必須なのか

レスポンシブデザインの必要性を、3つの観点から解説します。

ユーザー行動の変化

日本のスマートフォン普及率は97%を超えています（2025年時点）。 年代別に見ると、20代〜40代ではほぼ100%、60代以上でも85%以上がスマホを所有しています。

Webサイトの閲覧デバイスは、業種によって多少の差はありますが、おおむね以下の傾向があります。

BtoBのサイトでもスマホ比率は50%を超えています。 これは、ビジネスパーソンが通勤中やミーティングの合間にスマホで情報収集する行動が一般化しているためです。

特に「飲食店 ホームページ」「美容室 予約」のようなローカル検索では、スマホ比率が90%を超えることも珍しくありません。 飲食店のHP制作については飲食店のホームページに必要な要素と集客のコツで詳しく解説しています。

スマホ対応していないサイトは、この大多数のユーザーにとって「使いにくいサイト」です。 文字が小さい、ボタンが押しにくい、横スクロールが必要、ページの読み込みが遅い。 こうしたストレスを感じたユーザーは、平均3秒以内にサイトを離脱すると言われています。

離脱したユーザーがどこに行くか。 答えは簡単で、競合サイトです。 スマホ対応していない自社サイトから離脱したユーザーの大半は、検索結果に戻って次のサイト（つまり競合）をクリックします。

GoogleのSEO評価への影響

Googleは2019年以降、すべてのWebサイトに対して「モバイルファーストインデックス（MFI）」を適用しています。

これは、Googleがサイトの内容を評価する際に、PC版ではなくスマホ版のコンテンツを基準にするということです。

つまり、PC版のサイトがどれだけ充実していても、スマホ版で表示されないコンテンツは検索順位の評価対象になりません。

レスポンシブデザインであれば、PC版とスマホ版のコンテンツは同一です。 しかし、セパレート型（PC用・スマホ用で別サイト）の場合、スマホ版にPC版と同等のコンテンツが含まれていないと、検索順位に悪影響を及ぼします。

また、Googleはページの表示速度もランキング要因の一つとしています。 2021年にはCore Web Vitals（LCP・FID・CLS）がランキング要因に追加され、表示速度の重要性はさらに高まりました。

スマホ対応していないサイトは、スマホでの表示速度が遅くなりがちで、これもSEOにマイナスです。

具体的なSEOへの影響をまとめます。

SEOの基本についてはホームページのSEO対策入門で詳しく解説しています。 表示速度の改善方法はホームページの表示速度改善もご覧ください。

コンバージョン率への影響

スマホ対応の有無は、コンバージョン率（問い合わせ率・購入率）に直結します。

Googleの調査によると、モバイルで表示に3秒以上かかるサイトは、訪問者の53%が離脱するという結果が出ています。

また、スマホでフォームの入力がしにくい場合、フォーム完了率は大幅に下がります。 PC向けに設計されたフォームをスマホで表示すると、入力欄が小さすぎたり、ボタンが押しにくかったりして、途中離脱の原因になります。

レスポンシブデザインで最適化されたフォームは、スマホでも快適に入力でき、コンバージョン率の向上につながります。

具体的な数値として、スマホ対応を行ったサイトでは、お問い合わせ数が1.5〜2倍に増加したという事例は珍しくありません。

ある工務店のケースでは、スマホ非対応のサイトをレスポンシブデザインにリニューアルした結果、以下の改善が見られました。

• 月間の問い合わせ数：5件→12件（2.4倍）
• 平均滞在時間：45秒→2分10秒（約3倍）
• 直帰率：78%→52%（26ポイント改善）

このケースでは、リニューアル費用は80万円でしたが、問い合わせ増加による売上向上で、約4ヶ月で投資回収できたそうです。

お問い合わせを増やす方法についてはお問い合わせを増やすホームページの作り方もあわせてご覧ください。

スマホ対応していないサイトの具体的な問題

スマホ非対応のサイトをスマホで表示すると、具体的にどのような問題が起きるのかを整理します。

文字が小さすぎて読めない

PC向けに12pxや13pxで設計されたテキストは、スマホの画面では虫眼鏡が必要なレベルの小ささです。 ユーザーは拡大操作をしなければ読めず、拡大すると今度は横スクロールが発生します。

レスポンシブデザインでは、スマホ表示時のフォントサイズを最低16pxに設定するのが基本です。

ボタンやリンクがタップしにくい

PCではマウスカーソルで正確にクリックできますが、スマホでは指でタップします。 指先のタップ精度はマウスよりもはるかに低いため、ボタンやリンクが近接していると誤タップが頻発します。

Appleのヒューマンインターフェースガイドラインでは、タップ対象のサイズを最低44×44ポイント（約44px四方）確保することを推奨しています。 Googleのガイドラインでも、タップターゲットの間隔を最低8px空けることを推奨しています。

横スクロールが発生する

PC向けに幅1000px以上で設計されたサイトをスマホで表示すると、画面からコンテンツがはみ出して横スクロールが必要になります。

横スクロールは、Webサイトのユーザビリティにおいてもっとも避けるべき問題の一つです。 ユーザーは「右にもコンテンツがある」ことに気づかない場合があり、重要な情報を見落とす原因になります。

画像がはみ出す・表示が崩れる

固定幅で配置された画像は、スマホの画面幅を超えてはみ出します。 テーブル（表）も同様で、PC向けに横幅の広い表を作ると、スマホでは表示が崩れます。

レスポンシブデザインでは、画像に「max-width: 100%」を設定して画面幅に合わせて縮小させ、テーブルは横スクロール可能にするか、スマホではカード型のレイアウトに変換する手法が一般的です。

電話番号がタップで発信できない

飲食店や美容室など、電話予約が重要な業種では致命的な問題です。 スマホ対応していないサイトでは、電話番号が画像として表示されていたり、タップしても発信されない設計になっていることがあります。

レスポンシブデザインでは、電話番号に「tel:」リンクを設定し、タップ一つで発信できるようにします。

確認方法と対応手順

自社サイトがスマホ対応しているかを確認する方法と、対応が必要な場合の手順を解説します。

確認方法1：実機で確認する

最も確実な方法は、実際にスマートフォンで自社サイトにアクセスすることです。

以下のポイントをチェックしてください。

• 文字が小さすぎて読みにくくないか
• 横スクロールが発生していないか
• ボタンやリンクが指でタップしやすいサイズか
• 画像がはみ出していないか
• フォームの入力欄がスマホのキーボードに合っているか
• ページの読み込みに3秒以上かかっていないか
• メニューが使いやすいか
• 電話番号がタップで発信できるか

iPhone（Safari）とAndroid（Chrome）の両方で確認するのが理想です。 同じレスポンシブデザインでも、OSやブラウザによって微妙に表示が異なる場合があります。

チェックする際は、社内の複数の人に依頼するのが効果的です。 スマホの機種やOSバージョンが異なる環境でテストできますし、自分では気づかない問題を発見してもらえます。

確認方法2：Googleのモバイルフレンドリーテスト

Googleが提供する無料ツール「モバイルフレンドリーテスト」を使えば、URLを入力するだけでスマホ対応状況を診断できます。

テスト結果は「モバイルフレンドリーです」または「モバイルフレンドリーではありません」のいずれかで表示されます。 問題がある場合は、具体的な改善点（テキストが小さすぎる、タップターゲットが近すぎる等）も示されます。

ただし、このツールは2023年にサービス終了しました。 現在は、Google Search Console内の「モバイルユーザビリティ」レポートで同様の情報を確認できます。

確認方法3：Google Search Console

Google Search Consoleは、Googleが提供する無料のWebサイト管理ツールです。 「モバイルユーザビリティ」レポートで、スマホ対応に関する問題点を確認できます。

レポートに表示される主な問題は以下の通りです。

• テキストが小さすぎて読めない
• クリック可能な要素同士が近すぎる
• コンテンツの幅が画面の幅を超えている
• ビューポートが設定されていない

これらの問題が検出された場合、該当するページのURLも表示されるため、ピンポイントで修正できます。

Search Consoleはスマホ対応の確認だけでなく、SEO全般の管理に欠かせないツールです。 まだ登録していない場合は、早急に設定しましょう。

確認方法4：ブラウザの開発者ツール

Google Chromeの開発者ツール（DevTools）を使えば、PC上でさまざまなスマホ画面サイズをシミュレーションできます。

手順は以下の通りです。

1. Chromeで自社サイトを開く
2. F12キー（Macの場合はCommand + Option + I）で開発者ツールを開く
3. ツールバーのデバイスアイコン（スマホとタブレットの形）をクリック
4. 画面上部のプルダウンからデバイスを選択（iPhone 14、Galaxy S20など）

この方法は手軽ですが、実機とは表示が異なる場合があります。 最終確認は必ず実機で行いましょう。

確認方法5：PageSpeed Insightsで速度も確認する

Googleが提供するPageSpeed Insightsは、ページの表示速度とユーザー体験をスコアで評価してくれるツールです。

URLを入力するだけで、モバイルとデスクトップそれぞれのスコア（0〜100点）が表示されます。 スコアの目安は以下の通りです。

モバイルのスコアが50未満の場合は、表示速度の改善が急務です。 画像の最適化、不要なJavaScriptの削除、サーバーの応答速度改善などの対策が必要です。

対応手順：スマホ非対応のサイトを改修する

自社サイトがスマホ対応していない場合の対応手順を説明します。

対応方法は、大きく3つです。

方法A：既存サイトにレスポンシブ対応を追加する

CSSにメディアクエリを追加し、スマホ向けのスタイルを記述する方法です。 既存のHTMLはそのまま使えるため、サイトの構造を大きく変える必要がありません。

メリットは、比較的低コスト（10万〜30万円程度）で対応できることです。 デメリットは、もともとPC向けに設計されたHTMLのため、スマホでの表示に限界がある場合があることです。

この方法が適しているのは、以下のようなケースです。

• サイトを作ってから3年以内
• HTML構造が比較的整っている
• デザイン自体は気に入っている
• 予算が限られている

方法B：WordPressテーマをレスポンシブ対応のものに変更する

WordPressを使っている場合、テーマを変更するだけでレスポンシブ対応が可能です。 現在主流のWordPressテーマ（SWELL、SANGO、Lightning等）は、すべてレスポンシブ対応済みです。

メリットは、テーマの購入費用（1万〜2万円程度）だけで済むケースがあることです。 デメリットは、テーマ変更に伴いデザインが変わるため、カスタマイズが必要になることです。

テーマ変更の際は、既存のコンテンツが正しく表示されるか必ず確認してください。 ショートコードやカスタムフィールドを多用している場合、テーマを変えるとレイアウトが崩れることがあります。

WordPressの選び方についてはWordPress vs ノーコードで詳しく比較しています。

方法C：サイトをフルリニューアルする

サイトの構造自体が古い場合は、フルリニューアルが最善の選択です。 スマホファーストで設計し直すことで、ユーザー体験を根本的に改善できます。

メリットは、デザイン・機能・コンテンツを一から見直せることです。 デメリットは、費用と時間がかかること（30万〜200万円、1〜3ヶ月）です。

どの方法を選ぶかは、現在のサイトの状態と予算によって判断します。

サイトが比較的新しく、HTML構造が整っている場合は方法Aで十分です。 5年以上前に作られたサイトや、デザイン自体が古くなっている場合は方法Cが推奨されます。

費用の詳細はホームページ制作の費用相場を参考にしてください。 リニューアルの進め方はホームページリニューアルの進め方をご覧ください。

スマホファースト設計のポイント

新規でサイトを制作する場合、またはリニューアルする場合は、「スマホファースト」で設計することが重要です。

スマホファーストとは、まずスマホ画面のデザインを先に作り、そこからPC画面に展開する設計手法です。 従来のPC→スマホの順序とは逆のアプローチです。

なぜスマホファーストが有効かというと、スマホの画面は制約が多い分、情報の優先順位を厳密に決める必要があるからです。 スマホで見やすい設計は、PC画面でも当然見やすくなります。 逆にPC向けの設計をスマホに押し込むと、情報が溢れて読みにくくなりがちです。

スマホファーストのポイントは以下の通りです。

• 1カラムレイアウトを基本にする
• タップ領域は最低44px四方を確保する（Appleのガイドライン）
• フォントサイズは最低16px（14px以下はスマホでは読みにくい）
• 電話番号はタップで発信できるようにする
• フォームの入力欄は十分な高さを確保する
• 画像は画面幅に合わせて可変にする（max-width: 100%）
• ナビゲーションはハンバーガーメニューを基本にする
• CTAボタン（お問い合わせ・電話）は固定表示にする
• 1段落は1〜2文に抑え、スマホで読みやすい文章にする
• テーブル（表）は横スクロールまたはカード型に変換する

業種別のスマホ対応ポイント

業種によって、スマホ対応で特に気をつけるべきポイントが異なります。

飲食店

• メニュー写真が大きく表示されること
• 電話番号がタップ一つで発信できること
• Googleマップへの導線がわかりやすいこと
• 予約ボタンが常に表示されていること

飲食店はスマホ比率が85〜90%と非常に高いため、スマホファーストの設計が特に重要です。 詳しくは飲食店のホームページに必要な要素と集客のコツをご覧ください。

美容室・サロン

• 施術メニューと料金が見やすいこと
• スタッフ紹介ページが充実していること
• 予約導線がスムーズなこと
• ビフォーアフターの写真が比較しやすいこと

BtoB企業

• 資料ダウンロードが簡単にできること
• お問い合わせフォームの入力がしやすいこと
• 事例ページが読みやすいこと
• PDF資料がスマホでも閲覧できること

医療機関

• 診療時間が一目でわかること
• Web予約への導線がスムーズなこと
• 電話番号がタップで発信できること
• 院内の写真で安心感を与えること

医療機関のHP制作については医療機関のホームページ制作で詳しく解説しています。

FAQ

レスポンシブデザインの制作費用はどのくらいですか？

新規制作の場合、レスポンシブデザインは標準機能として含まれるのが一般的です。 既存サイトへのレスポンシブ対応追加は10万〜30万円、フルリニューアルは30万〜200万円が目安です。 費用の詳細はホームページ制作の基礎知識を参考にしてください。

レスポンシブデザインにデメリットはありますか？

PC版とスマホ版で同じHTMLを使うため、デバイスごとに完全に異なるコンテンツを表示したい場合は不向きです。 また、PC用の大きな画像をスマホにも読み込ませてしまう（表示サイズを変えているだけ）と、表示速度が遅くなる可能性があります。 この問題は、画像の遅延読み込みやsrcset属性の活用で解決できます。

自社サイトがレスポンシブ対応しているか簡単に確認する方法は？

PCのブラウザでサイトを表示し、ブラウザの幅をマウスで狭めてみてください。 レスポンシブ対応しているサイトは、幅の変化に合わせてレイアウトが自動的に変わります。 幅を狭めても表示が変わらない（横スクロールバーが出る）場合は、レスポンシブ未対応です。

AMPとレスポンシブデザインは何が違いますか？

AMP（Accelerated Mobile Pages）は、Googleが推進していたモバイルページ高速表示の技術です。 レスポンシブデザインとは別の概念で、専用のAMP HTMLを使って超軽量なページを作る手法です。 ただし、2021年以降AMPの優遇は縮小されており、現在はレスポンシブデザイン+表示速度の最適化が推奨されます。

WordPressで作ったサイトは自動的にレスポンシブになりますか？

現在配布されている主要なWordPressテーマは、ほぼすべてレスポンシブ対応しています。 ただし、古いテーマ（2015年以前のもの）はレスポンシブ未対応のものもあります。 テーマの更新日やレスポンシブ対応の記載を確認し、未対応であればテーマの変更を検討してください。 SEOへの影響が気になる方はSEO対策の基本もご覧ください。

スマホ対応はどのページを優先すべきですか？

最も閲覧されるページから優先的にスマホ対応しましょう。 一般的には、トップページ→サービス紹介→お問い合わせ→会社概要の順です。 Google Analyticsでアクセスの多いページを確認し、優先順位をつけるのが効率的です。

レスポンシブデザインにした後、SEOの効果が出るまでどれくらいかかりますか？

Googleがサイトの変更を認識するまでに通常1〜4週間、SEOの評価が反映されるまでにさらに1〜3ヶ月かかります。 ただし、ユーザー体験の改善による間接的なSEO効果（滞在時間の増加、直帰率の改善など）はすぐに現れます。 Search Consoleの「モバイルユーザビリティ」レポートで、問題が解消されていることを確認しましょう。

まとめ

レスポンシブデザインは、1つのHTMLでPC・タブレット・スマホすべてに最適な表示を提供するWeb制作の手法です。

スマホ対応が必須である理由を改めて整理します。

• Webサイト閲覧の約75%がスマートフォンから
• Googleのモバイルファーストインデックスにより、スマホ版がSEO評価の基準
• スマホ非対応のサイトは離脱率が高く、コンバージョン率が低い
• スマホ対応後に問い合わせが1.5〜2倍に増加した事例が多数

自社サイトの確認方法は5つです。

1. 実機（スマートフォン）で実際にアクセスして確認
2. Google Search Consoleの「モバイルユーザビリティ」レポート
3. ブラウザの開発者ツールでシミュレーション
4. ブラウザの幅を狭めて表示の変化を確認
5. PageSpeed Insightsで表示速度を確認

対応が必要な場合は、サイトの状態に応じてCSS追加・テーマ変更・フルリニューアルのいずれかを選択しましょう。

スマホ対応は「やらなくてもいいこと」ではなく、「やらないと損をすること」です。 まだ対応していない場合は、早急に取り組むことをおすすめします。

ホームページ制作の全体像についてはホームページ制作の基礎知識で解説しています。 集客を強化したい方はホームページで集客する方法を、制作会社の選び方は失敗しないホームページ制作会社の選び方もあわせてご覧ください。