「自社のホームページ、スマホで見たときに文字が小さくて読みにくい」 「スマホだとボタンが押しにくくて、お問い合わせまで辿り着けない」
こうした問題を抱えている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つのHTMLファイルに対して、CSS（スタイルシート）の「メディアクエリ」という機能を使って表示を切り替えます。
ブラウザの画面幅を検知し、「画面幅が768px以下ならこのレイアウト」「1024px以上ならこのレイアウト」のように、条件に応じてデザインを自動的に変更します。
つまり、同じページのURLにアクセスしても、PCでは横並び3カラムのレイアウト、タブレットでは2カラム、スマホでは1カラムの縦積みレイアウトで表示される、ということです。
他のスマホ対応方法との違い
スマホ対応の方法は、レスポンシブデザイン以外にもいくつかあります。
| 方法 | 特徴 | メリット | デメリット |
|---|---|---|---|
| レスポンシブデザイン | 1つのHTMLでCSSを切り替え | URLが1つ。管理しやすい | 設計の難易度がやや高い |
| セパレート型（別URL） | PC用・スマホ用で別サイト | デバイス別に最適化しやすい | 2サイト分の管理コスト |
| ダイナミックサービング | 同じURLでデバイス別のHTMLを出し分け | URLが1つ。細かい最適化が可能 | サーバー側の設定が複雑 |
| アダプティブデザイン | 特定の画面幅に合わせた複数のレイアウト | 各デバイスに精密な対応 | レイアウトパターンが増えると管理が大変 |
現在のWeb制作では、レスポンシブデザインが事実上の標準です。 Googleも公式にレスポンシブデザインを推奨しています。
特別な理由がない限り、レスポンシブデザインを採用するのが最善の選択です。
レスポンシブデザインの歴史
レスポンシブデザインという概念が登場したのは2010年です。 Webデザイナーのイーサン・マルコッテ氏が「Responsive Web Design」という記事を発表し、この手法が世界中に広まりました。
当時はまだスマートフォンの普及率が低く、多くのWebサイトはPC向けに作られていました。 しかし、iPhoneの登場（2007年）以降、スマホでのWeb閲覧は急速に増加しました。
2015年には、Googleが「モバイルフレンドリーアップデート」を実施。 スマホ対応していないサイトは、モバイル検索の順位が下がるようになりました。
そして2019年、Googleは「モバイルファーストインデックス（MFI）」を全サイトに適用。 これにより、スマホ版のコンテンツがGoogleの検索インデックスの基準となりました。
レスポンシブデザインは、もはや「あった方がいい」ではなく「なければならない」技術です。
なぜスマホ対応が必須なのか
レスポンシブデザインの必要性を、3つの観点から解説します。
ユーザー行動の変化
日本のスマートフォン普及率は97%を超えています（2025年時点）。 年代別に見ると、20代〜40代ではほぼ100%、60代以上でも85%以上がスマホを所有しています。
Webサイトの閲覧デバイスは、業種によって多少の差はありますが、おおむね以下の傾向があります。
| 業種 | スマホ比率 |
|---|---|
| 飲食店・美容室 | 85〜90% |
| 不動産 | 70〜80% |
| BtoC一般 | 70〜80% |
| BtoB | 50〜65% |
| EC（物販） | 75〜85% |
BtoBのサイトでもスマホ比率は50%を超えています。 これは、ビジネスパーソンが通勤中やミーティングの合間にスマホで情報収集する行動が一般化しているためです。
スマホ対応していないサイトは、この大多数のユーザーにとって「使いにくいサイト」です。 文字が小さい、ボタンが押しにくい、横スクロールが必要、ページの読み込みが遅い。 こうしたストレスを感じたユーザーは、平均3秒以内にサイトを離脱すると言われています。
GoogleのSEO評価への影響
Googleは2019年以降、すべてのWebサイトに対して「モバイルファーストインデックス（MFI）」を適用しています。
これは、Googleがサイトの内容を評価する際に、PC版ではなくスマホ版のコンテンツを基準にするということです。
つまり、PC版のサイトがどれだけ充実していても、スマホ版で表示されないコンテンツは検索順位の評価対象になりません。
レスポンシブデザインであれば、PC版とスマホ版のコンテンツは同一です。 しかし、セパレート型（PC用・スマホ用で別サイト）の場合、スマホ版にPC版と同等のコンテンツが含まれていないと、検索順位に悪影響を及ぼします。
また、Googleはページの表示速度もランキング要因の一つとしています。 スマホ対応していないサイトは、スマホでの表示速度が遅くなりがちで、これもSEOにマイナスです。
コンバージョン率への影響
スマホ対応の有無は、コンバージョン率（問い合わせ率・購入率）に直結します。
Googleの調査によると、モバイルで表示に3秒以上かかるサイトは、訪問者の53%が離脱するという結果が出ています。
また、スマホでフォームの入力がしにくい場合、フォーム完了率は大幅に下がります。 PC向けに設計されたフォームをスマホで表示すると、入力欄が小さすぎたり、ボタンが押しにくかったりして、途中離脱の原因になります。
レスポンシブデザインで最適化されたフォームは、スマホでも快適に入力でき、コンバージョン率の向上につながります。
具体的な数値として、スマホ対応を行ったサイトでは、お問い合わせ数が1.5〜2倍に増加したという事例は珍しくありません。
確認方法と対応手順
自社サイトがスマホ対応しているかを確認する方法と、対応が必要な場合の手順を解説します。
確認方法1：実機で確認する
最も確実な方法は、実際にスマートフォンで自社サイトにアクセスすることです。
以下のポイントをチェックしてください。
- 文字が小さすぎて読みにくくないか
- 横スクロールが発生していないか
- ボタンやリンクが指でタップしやすいサイズか
- 画像がはみ出していないか
- フォームの入力欄がスマホのキーボードに合っているか
- ページの読み込みに3秒以上かかっていないか
- メニューが使いやすいか
iPhone（Safari）とAndroid（Chrome）の両方で確認するのが理想です。 同じレスポンシブデザインでも、OSやブラウザによって微妙に表示が異なる場合があります。
確認方法2：Googleのモバイルフレンドリーテスト
Googleが提供する無料ツール「モバイルフレンドリーテスト」を使えば、URLを入力するだけでスマホ対応状況を診断できます。
テスト結果は「モバイルフレンドリーです」または「モバイルフレンドリーではありません」のいずれかで表示されます。 問題がある場合は、具体的な改善点（テキストが小さすぎる、タップターゲットが近すぎる等）も示されます。
ただし、このツールは2023年にサービス終了しました。 現在は、Google Search Console内の「モバイルユーザビリティ」レポートで同様の情報を確認できます。
確認方法3：Google Search Console
Google Search Consoleは、Googleが提供する無料のWebサイト管理ツールです。 「モバイルユーザビリティ」レポートで、スマホ対応に関する問題点を確認できます。
レポートに表示される主な問題は以下の通りです。
- テキストが小さすぎて読めない
- クリック可能な要素同士が近すぎる
- コンテンツの幅が画面の幅を超えている
- ビューポートが設定されていない
これらの問題が検出された場合、該当するページのURLも表示されるため、ピンポイントで修正できます。
確認方法4：ブラウザの開発者ツール
Google Chromeの開発者ツール（DevTools）を使えば、PC上でさまざまなスマホ画面サイズをシミュレーションできます。
手順は以下の通りです。
- Chromeで自社サイトを開く
- F12キー（Macの場合はCommand + Option + I）で開発者ツールを開く
- ツールバーのデバイスアイコン（スマホとタブレットの形）をクリック
- 画面上部のプルダウンからデバイスを選択（iPhone 14、Galaxy S20など）
この方法は手軽ですが、実機とは表示が異なる場合があります。 最終確認は必ず実機で行いましょう。
対応手順：スマホ非対応のサイトを改修する
自社サイトがスマホ対応していない場合の対応手順を説明します。
対応方法は、大きく3つです。
方法A：既存サイトにレスポンシブ対応を追加する
CSSにメディアクエリを追加し、スマホ向けのスタイルを記述する方法です。 既存のHTMLはそのまま使えるため、サイトの構造を大きく変える必要がありません。
メリットは、比較的低コスト（10万〜30万円程度）で対応できることです。 デメリットは、もともとPC向けに設計されたHTMLのため、スマホでの表示に限界がある場合があることです。
方法B：WordPressテーマをレスポンシブ対応のものに変更する
WordPressを使っている場合、テーマを変更するだけでレスポンシブ対応が可能です。 現在主流のWordPressテーマ（SWELL、SANGO、Lightning等）は、すべてレスポンシブ対応済みです。
メリットは、テーマの購入費用（1万〜2万円程度）だけで済むケースがあることです。 デメリットは、テーマ変更に伴いデザインが変わるため、カスタマイズが必要になることです。
方法C：サイトをフルリニューアルする
サイトの構造自体が古い場合は、フルリニューアルが最善の選択です。 スマホファーストで設計し直すことで、ユーザー体験を根本的に改善できます。
メリットは、デザイン・機能・コンテンツを一から見直せることです。 デメリットは、費用と時間がかかること（30万〜200万円、1〜3ヶ月）です。
どの方法を選ぶかは、現在のサイトの状態と予算によって判断します。 サイトが比較的新しく、HTML構造が整っている場合は方法Aで十分です。 5年以上前に作られたサイトや、デザイン自体が古くなっている場合は方法Cが推奨されます。
スマホファースト設計のポイント
新規でサイトを制作する場合、またはリニューアルする場合は、「スマホファースト」で設計することが重要です。
スマホファーストとは、まずスマホ画面のデザインを先に作り、そこからPC画面に展開する設計手法です。 従来のPC→スマホの順序とは逆のアプローチです。
スマホファーストのポイントは以下の通りです。
- 1カラムレイアウトを基本にする
- タップ領域は最低44px四方を確保する（Appleのガイドライン）
- フォントサイズは最低16px（14px以下はスマホでは読みにくい）
- 電話番号はタップで発信できるようにする
- フォームの入力欄は十分な高さを確保する
- 画像は画面幅に合わせて可変にする（max-width: 100%）
- ナビゲーションはハンバーガーメニューを基本にする
- CTAボタン（お問い合わせ・電話）は固定表示にする
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対策の基本もご覧ください。
まとめ
レスポンシブデザインは、1つのHTMLでPC・タブレット・スマホすべてに最適な表示を提供するWeb制作の手法です。
スマホ対応が必須である理由を改めて整理します。
- Webサイト閲覧の約75%がスマートフォンから
- Googleのモバイルファーストインデックスにより、スマホ版がSEO評価の基準
- スマホ非対応のサイトは離脱率が高く、コンバージョン率が低い
自社サイトの確認方法は4つです。
- 実機（スマートフォン）で実際にアクセスして確認
- Google Search Consoleの「モバイルユーザビリティ」レポート
- ブラウザの開発者ツールでシミュレーション
- ブラウザの幅を狭めて表示の変化を確認
対応が必要な場合は、サイトの状態に応じてCSS追加・テーマ変更・フルリニューアルのいずれかを選択しましょう。
スマホ対応は「やらなくてもいいこと」ではなく、「やらないと損をすること」です。 まだ対応していない場合は、早急に取り組むことをおすすめします。
ホームページ制作の全体像についてはホームページ制作の基礎知識で解説しています。