スマホ対応（レスポンシブ）はなぜ必要？自社サイトの確認方法

結論から言うと、スマホ対応が必要な理由は大きく2つあります。ひとつは、サイトを見る人の多くがスマホを使っていること。もうひとつは、Google がスマホ向けの表示（モバイル版）をもとにページを評価していることです。自社サイトが対応できているかは、手元のスマホで実際に開いてみるのがいちばん確実で、パソコンのブラウザでも大まかに確認できます。

スマホ対応（レスポンシブ）とは

スマホ対応とは、スマホの小さな画面でも読みやすく、操作しやすい状態でサイトが表示されることです。その実現方法として広く使われているのが「レスポンシブ ウェブデザイン」です。

Google の開発者向けサイト web.dev では、レスポンシブ ウェブデザインを、サイトのレイアウトを利用者のデバイスに合わせて変更するデザインの考え方として説明しています（web.dev：レスポンシブ ウェブ デザインの基本）。

ポイントは、ひとつのページ（ひとつのURL）が、画面の幅に応じて並び方を変えることです。パソコン用とスマホ用に別々のページを作る方法もありますが、Google は3つの実装方法を挙げたうえで、実装と維持が最も簡単な方法としてレスポンシブ ウェブデザインをすすめています（Google 検索セントラル：モバイルファースト インデックス登録に関するおすすめの方法）。

スマホ対応が必要な2つの理由

1. スマホで見る人のほうが多い

総務省の「令和6年通信利用動向調査」（調査時点：令和6年8月末）によると、個人がインターネットを利用する機器は、スマートフォンが74.4％、パソコンが46.8％でした。20〜59歳の各年齢階層では、9割以上がスマートフォンでインターネットを利用しています（総務省：令和6年通信利用動向調査 ポイント（PDF））。

自社サイトの訪問者がどの機器で見ているかは、アクセス解析で確認できます。見方はGoogleアナリティクスの仕組み・見方と設定方法で紹介しています。

2. Google はモバイル版のページをもとに評価している

Google 検索は、スマートフォン用のクローラー（ページの情報を集めるプログラム）で取得したモバイル版のコンテンツを、インデックス登録（検索結果に載せるための登録）とランキングに使っています。これを「モバイルファースト インデックス」と呼びます（Google 検索セントラル）。

つまり、パソコンで見たときに情報が充実していても、スマホで見たときに内容が省かれていると、省かれた状態が評価の対象になります。同じドキュメントでは、モバイル版にパソコン版と同じコンテンツを含めることがすすめられています。

また Google は、ページの使いやすさを自己評価する質問のひとつに「コンテンツはモバイル デバイス上で適切に表示されていますか」を挙げています（Google 検索セントラル：ページ エクスペリエンス）。ただし、スマホ対応だけで検索順位が決まるわけではありません。順位の考え方はSEOで検索順位が決まる仕組みとは？をご覧ください。

自社サイトの確認方法

手元のスマホで開いてみる

いちばん確実なのは、実際のスマホで見ることです。トップページだけでなく、サービス紹介、アクセス、お問い合わせフォームなど、訪問者がよく使うページをひととおり開いてみましょう。見るポイントは次のとおりです。

見るポイント	確認すること
横スクロール	画面を左右に動かさないと読めない部分がないか
文字の大きさ	拡大しなくても本文が読めるか
ボタン・リンク	指で押しやすい大きさと間隔になっているか
メニュー	開閉でき、目的のページにたどり着けるか
表・画像	画面からはみ出したり、小さすぎて読めなかったりしないか
電話番号・フォーム	タップして電話をかけられるか、入力しやすいか
情報の量	パソコンで見える内容が、スマホで省かれていないか

パソコンのブラウザで確認する

手元に端末がないときは、パソコンでも大まかに確認できます。

• ブラウザの幅を狭める：ウィンドウの端をつかんで幅を細くしていくと、レスポンシブに作られたサイトは途中でレイアウトが切り替わります。幅を狭めても横にはみ出したままなら、対応できていない可能性があります。
• Chrome のデバイスモードを使う：Google Chrome の開発者向け機能（DevTools）には、スマホでの表示をパソコン上で再現する「デバイスモード」があります。DevTools を開き、「デバイス ツールバーの切り替え」ボタンを押すと使えます（Chrome for Developers：デバイスモード）。

ただし、同じドキュメントには、デバイスモードはあくまで近似であり、再現できない部分もあるため、迷ったときは実際のモバイル端末で確認するのがよい、と書かれています。最終的な判断は実機で行いましょう。

問題が見つかったときの進め方

確認して気になる点があったら、次の3つをメモして制作会社や担当者に共有すると、話が早く進みます。

1. 問題のあるページのURL
2. 使った端末とブラウザ（例：iPhone の Safari）
3. 画面のスクリーンショットと、困っている内容

対応の範囲は、原因によって変わります。表がはみ出す、ボタンが小さいといった一部の不具合であれば、部分的な修正で済むことがあります。一方、サイト全体がパソコン向けの固定幅で作られている場合は、作り直しを含めて検討することになります。

まとめ

• スマホ対応（レスポンシブ）は、ひとつのページが画面の幅に合わせて並び方を変える作り方
• 総務省の調査では、インターネット利用機器はスマートフォン74.4％、パソコン46.8％
• Google はモバイル版のページをもとにインデックス登録とランキングを行っている
• 確認は実機がいちばん確実。パソコンではブラウザの幅を狭めるか、Chrome のデバイスモードを使う
• 問題があれば、URL・端末・スクリーンショットをそろえて相談する

自社サイトがスマホでどう見えているか気になったら、無料相談でお気軽にご相談ください。制作の進め方はWeb制作のサービス紹介でもご覧いただけます。