レスポンシブ対応とは？3つの構成の違いと、テスト廃止後の確認方法

モバイル対応の3つの構成

Googleは、スマホに対応したサイトの作り方として3つの構成を挙げています。レスポンシブデザイン、動的な配信、別のURLです。

違いは、URLとHTMLを端末ごとに分けるかどうかにあります。分けるものが増えるほど、守る決まりも増えます。新しく作るなら、迷わずレスポンシブを選んで構いません。既存のサイトがどれに当たるかは、制作会社に聞けばすぐに分かります。

① レスポンシブデザイン

URLもHTMLも1つで、画面の幅に合わせて見え方だけを変える作り方です。パソコンでもスマホでも、届く中身は同じです。

管理するページが1つで済むため、更新の手間が増えません。パソコンとスマホで内容が食い違う心配もなく、今の主流になっています。レスポンシブ対応という言葉は、多くの場合この作り方を指します。

② 動的な配信

URLは1つのまま、アクセスしてきた端末を見分けて、返すHTMLを変える作り方です。見分ける処理を受け持つのは、サーバーの側です。

見分けを誤ると、スマホにパソコン用のページが届きます。新しい端末が出るたびに、見分ける仕組みを直し続ける手間もかかります。スマホで大きく違う画面を見せたい場合に限って使われる方法です。

③ 別のURL

パソコン用とスマホ用で、別のURLを用意する作り方です。「m.」から始まるアドレスのサイトが、この例です。

2つのURLが同じ内容だと伝える指定が必要で、誤ると評価が分かれます。記事を1本足すたびに、両方を更新する作業も発生します。今から新しく選ぶ理由はほとんどない構成です。すでにこの構成のサイトも、内容がそろっていれば急いで変える必要はありません。

• 参考：モバイルサイトとモバイル ファースト インデックスに関するおすすめの方法

Googleがレスポンシブを勧める理由

3つのうち、Googleが名前を挙げて勧めているのはレスポンシブです。表示が速いからではありません。表示の速さは、どの構成でも作り方しだいで変わります。

Googleは、実装と維持が最も簡単だからと説明しています。公式の解説の後半は、動的な配信と別のURLにだけ当てはまる注意点です。レスポンシブなら、その部分はまるごと関係ありません。

別のURLで増える作業

別のURLの構成では、パソコン用とスマホ用でそろえる項目が多くあります。主なものは次のとおりです。

• 本文、見出し、画像
• タイトルとメタディスクリプション
• 構造化データ
• 画像の代替テキスト

どれか1つがずれると、スマホ版にない情報は評価に使われません。ページが増えるほど、そろっているかを見て回る手間も増えていきます。

WordPressなら、テーマで決まる

今配られているWordPressのテーマは、多くがレスポンシブで作られています。テーマを選んだ時点で構成が決まるため、専用のプラグインは要りません。

古いテーマを使い続けている場合は、対応していないことがあります。パソコンのブラウザで、画面の幅を狭めてみてください。文字や画像が縮まずに横スクロールが出たら、対応していない状態です。当サイトも自作のテーマを、レスポンシブで作っています。

• 関連記事：WordPressで作るメリット｜プラグインを入れないという選択肢

スマホ対応は要件ではないが、強く勧められている

ここは誤解が多い部分です。Googleは、スマホ版のページを用意することは検索結果に出るための要件ではないと明記しています。

そのうえで、非常に強く勧めるとも書いています。対応していなくても検索には出ますが、勧められない状態です。理由は、評価の仕組みそのものにあります。スマホから検索する人が多い今、対応しない理由はほとんどありません。

評価に使われるのはスマホ版

Googleは、ページの登録と順位付けに、スマホで読み込んだ内容を使います。これをモバイルファーストインデックスと呼びます。

パソコン版にしか載っていない情報は、評価に届きません。スマホで表示を省いた部分があれば、その内容は検索エンジンから見えていないのと同じです。スマホの実機で開き、パソコン版と見比べてみてください。

削らずに畳む

画面が狭いからといって内容を削ると、評価に使われる情報も減ります。Googleは、スマホではアコーディオンやタブに移す形を例に挙げています。

質問を押すと答えが開く形や、見出しを押すと本文が開く形です。閉じていても、HTMLの中にあれば内容は読み取られます。見やすく畳むことと、情報を減らすことは分けて考えてください。

テスト終了後のスマホ表示の確認方法

以前はモバイルフレンドリーテストという専用の道具がありました。Search Consoleのモバイルユーザビリティのレポートも一緒です。どちらも、2023年12月に提供が終わっています。

今も紹介している解説が残っていますが、もう使えません。代わりの手段は、次の3つです。

方法	分かること	分からないこと
実機で開く	読みやすさ、押しやすさ	ほかの画面幅での崩れ
ブラウザの検証機能	画面幅ごとの崩れる場所	実機の速さや押した感触
Lighthouse	表示速度などの問題点	見た目が崩れているか

① 実機で開く

手元のスマホでページを開き、スクロールしてボタンを押してみます。この方法より、確かな確認方法はありません。

当サイトでも、問い合わせフォームがスマホで右にはみ出していた時期がありました。パソコンでは正しく見えていたため、実機で開くまで気づけなかった失敗です。公開前と大きな変更のあとは、必ず実機で一通り触ってください。

② ブラウザの検証機能

Chromeでページを右クリックし、「検証」を選んでください。スマホの形をしたボタンを押すと、画面の幅を変えながら表示を確かめられます。

いくつもの幅をまとめて見られるため、実機の前の下見に向いています。ただし、変わるのは幅だけです。実機での表示の速さや、指で押したときの感触までは分かりません。下見で見つけた崩れは、実機でも出るかを確かめます。

③ Lighthouse

Chromeの検証機能に入っている、ページの診断機能です。表示速度や使いやすさの問題を、項目ごとに指摘してくれます。

スマホに対応しているかの合否を出すものではありません。点数を目標にせず、指摘された箇所だけを見て直してください。見た目の崩れは点数に出ないこともあるため、実機での確認と組み合わせます。

スマホで表示が崩れる4つの原因

レスポンシブのテーマを使っていても、表示が崩れることはあります。原因の多くは、あとから足した部品です。テーマ本体より、記事に貼った画像や埋め込みのほうが崩れの元になります。

どれも見た目だけの問題に見えますが、読めない、押せない状態は問い合わせの前に読者を帰してしまいます。崩れに気づいたら、次の4つから順に確かめてください。

① 幅を数値で固定している

最も多い原因です。画像や埋め込みに固定の幅を書くと、画面が狭いときにはみ出します。

当サイトの問い合わせフォームも、埋め込みのタグに幅の指定が残っていました。本文の幅はパソコンで約740px、スマホでは約340pxです（当サイトの実測）。2倍以上の差があるため、ページ全体に横スクロールが出ていました。

② 画像に寸法を書いていない

画像に幅と高さが書かれていないと、読み込みが終わるまで場所が確保されません。読み込んだ瞬間に、その下の文字やボタンが押し下げられます。

スマホは画面が狭いため、画像1枚で起きるずれが目立ちます。読もうとした行が動いたり、押そうとしたボタンが逃げたりする状態です。すべての画像に、幅と高さを書いてください。

③ 文字が小さい

本文の文字は、ブラウザの標準である16pxを目安にします。これより小さいと、指で拡大しないと読めなくなります。

図の中の文字も見落としやすい部分です。当サイトの図は横1200pxで作るため、本文幅340pxのスマホでは約0.28倍まで縮みます。そのため、図の文字は図の高さの5%以上の大きさを保つように作っています。スマホで自分の記事を開き、拡大せずに読めるかを確かめてください。

④ 押す場所が近すぎる

リンクやボタンが小さく近いと、指で押したときに隣を押してしまうのがよくある失敗です。web.devでは、押す部分を48px四方以上にするよう勧めています。

あわせて、隣との間を8pxほどあけることも勧められています。文中に並んだリンクや、フッターの小さな文字リンクで起きやすい問題です。実機で、自分の指で押して確かめてください。

• 参考：Accessible tap targets
• 関連記事：ホームページがスマホで崩れる｜伝え方で修正の速さが変わる
• 関連記事：CLSとは？改善はずれた場所の特定から｜スマホ・レスポンシブで悪化する理由

レスポンシブ対応に関するよくある質問

レスポンシブにしないと、検索順位は下がりますか

すぐに順位が下がるとは限りません。スマホ版を用意していなくても、検索結果には出ます。

ただし、評価に使われるのはスマホで読み込んだ内容です。スマホで読みにくいページは、読者がすぐに帰ってしまい、問い合わせにもつながりません。順位の前に、読者を逃している状態だと考えて対応してください。スマホで読めるかどうかは、順位より先に売上に響く部分です。

モバイルフレンドリーテストは、もう使えませんか

2023年12月に提供が終わりました。Search Consoleのモバイルユーザビリティのレポートも、同じ時期に終わりました。

今は、手元のスマホで開く方法と、ブラウザの検証機能を組み合わせて確かめます。問題点を項目ごとに見たいときは、Lighthouseも使えます。テストの合否を探すより、実際に読めて押せるかを見るほうが確実です。

今の別URLのサイトを、レスポンシブに変えるべきですか

問題が起きていないなら、急いで作り替える必要はありません。両方の内容がそろっていれば、評価の面で困ることは少ないためです。

ただし、そろえる項目が多く、更新のたびに手間がかかります。リニューアルの機会があれば、レスポンシブに寄せると運用が楽になります。作り替えるときは、古いURLから新しいURLへ301で転送してください。

スマホ版だけ、内容を減らしてもいいですか

勧められません。評価に使われるのはスマホで読み込んだ内容なので、減らした分は評価に届かなくなります。削った部分に大事な説明があると、検索で見つけてもらう機会も減ります。

見づらい部分は、削るのではなく、押すと開く形に畳んでください。表や長い説明は、横にスクロールできる枠に入れる方法もあります。読者がスマホでも同じ情報にたどり着けるかを基準に考えます。

スマホ対応のために、プラグインは必要ですか

レスポンシブのテーマを使っていれば、プラグインは要りません。テーマがスマホの表示まで受け持つためです。

スマホのときだけ別の画面に切り替えるプラグインもありますが、動的な配信と同じく管理の手間が増えます。テーマ側の表示と食い違い、内容がずれる原因にもなります。崩れを直したいなら、プラグインを足す前に、はみ出している部品を探すほうが近道です。

まとめ

スマホ対応には3つの構成があり、Googleが勧めるのはレスポンシブです。理由は表示の速さではなく、実装と維持のしやすさにあります。

スマホ版の用意は検索に出る要件ではないものの、評価に使われるのはスマホで読み込んだ内容です。専用のテストは終わっているため、実機とブラウザの検証機能で確かめます。崩れの多くは、幅の固定、寸法のない画像、小さな文字、近すぎるリンクから起きます。

まずは手元のスマホで自分のサイトを開き、横スクロールが出ないかを確かめてください。