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

モバイル対応には3つの構成がある

Googleはモバイルフレンドリーなサイトの構成方法として、3つを挙げています。レスポンシブデザイン、動的な配信、別個のURLです。

違いはURLとHTMLを分けるかどうかです。分けるほど、守るべき決まりが増えます。

レスポンシブデザイン

同じURLで同じHTMLを配信し、画面サイズに応じて表示方法だけを変える方式です。パソコンでもスマートフォンでも、返ってくるものは同じです。

Googleは実装と維持が最も簡単なデザインパターンとして、この方式を推奨しています。

URLもHTMLも1つで、画面の幅に応じて見え方だけを変える方式です。現在の主流で、Googleも推奨しています。

管理する対象が1つで済むため、更新の手間が増えません。PCとスマートフォンで内容が食い違う問題も起きません。

動的な配信

URLは同じですが、アクセスしてきた端末を判別してHTMLを出し分ける方式です。サーバー側で処理します。

端末の判別を誤ると、意図しないほうが表示されます。端末が増えるたびに、出し分けの管理を続ける手間がかかります。

URLは1つですが、アクセスしてきた端末を判定して、返すHTMLを変える方式です。表示を大きく変えたい場合に使われます。

判定を誤ると、スマートフォンにPC版が返ることがあります。端末の種類は増え続けるため、判定の仕組みを維持し続ける必要があります。

別個のURL

パソコン用とスマートフォン用でURLを分ける方式です。「m.」で始まるアドレスを使うものが該当します。

この構成を選ぶと、canonicalとalternateの相互指定、robots.txtの統一、構造化データの一致など、守るべき項目が一気に増えます。

PC用とスマートフォン用で、別のURLを用意する方式です。以前は多く使われていました。

2つのURLが同じ内容だとGoogleに伝える指定が必要で、これを誤ると評価が分散します。新規で選ぶ理由は、現在ではほとんどありません。

• 参考：モバイル ファースト インデックス登録

Googleが推奨するのはレスポンシブ対応

3つのうち、Googleが名指しで推奨しているのはレスポンシブです。理由は性能ではなく、実装と維持のしやすさです。

公式ガイドの後半には、動的な配信と別URLだけに適用される注意事項が並んでいます。レスポンシブなら、この部分をまるごと読み飛ばせます。

別URLで増える作業

パソコン版とモバイル版で、タイトルとメタディスクリプションを一致させる。構造化データを両方に置く。画像の代替テキストを揃える。エラーページの状態を合わせる。

どれか1つが崩れると、インデックスから外れる可能性があります。ページ数が増えるほど、管理は難しくなります。

記事を1本追加するたびに、2つのURLで更新が必要になります。片方だけ直して、もう片方が古いまま残る事故が起きます。

指定の記述も、ページごとに正しく対応させる必要があります。ページ数が増えるほど、確認の手間も増えます。

WordPressなら標準で対応できる

WordPressのテーマは、多くがレスポンシブで作られています。テーマを選ぶ時点で構成が決まるため、個別の設定は不要です。

このサイトも自作テーマをレスポンシブで作っています。同じHTMLをCSSで出し分けているだけで、端末ごとの処理は入っていません。

現在配布されているテーマの多くは、レスポンシブに対応しています。専用のプラグインを入れる必要はありません。

古いテーマを使い続けている場合は、対応していないことがあります。判別は、PCのブラウザで画面の幅を狭めてみるだけで済みます。文字や画像が縮まずに横スクロールが出れば、対応していません。

• 参考：レスポンシブ ウェブ デザイン

モバイル対応は必須ではないが、強く推奨される

ここは誤解が多い部分です。Googleはモバイル版のページを用意することについて、検索結果に表示させるための要件ではないと明記しています。

ただし非常に強く推奨されるとも書かれています。出ないわけではないが、勧められない状態です。

評価に使われるのはモバイル版

Googleはインデックス登録とランキングに、スマートフォンでクロールしたモバイル版の内容を使います。これをモバイルファーストインデックスと呼びます。

つまり、モバイル版に載っていない情報は評価の対象になりません。スマホで表示を減らすと、その分が届かなくなります。

PC版にしか載っていない情報は、評価の対象になりません。スマートフォンで表示を省略している箇所があれば、その内容は検索エンジンから見えていない状態です。

確認は、スマートフォンの実機でページを開き、PC版と見比べます。見出しや本文が省略されていないかを見ます。

減らすのではなく畳む

画面が狭いからといって内容を削ると、評価される情報も減ります。Googleは、コンテンツを取り除くのではなくアコーディオンやタブに移すことを勧めています。

畳んで隠しても、HTMLの中にあれば読み取られます。表示の工夫と、情報を減らすことは別です。

スマートフォンで見づらいからと情報を削ると、その内容は評価の対象から外れます。削るのではなく、畳んで隠す形にします。

質問をタップして回答が開く形、見出しを押すと本文が開く形。どちらもHTMLには内容が存在するため、評価には使われます。

モバイル対応の確認方法は変わった

かつてはモバイルフレンドリーテストという専用ツールがありましたが、2023年12月1日に提供を終了しました。Search Consoleのモバイルユーザビリティレポートも同時に終わっています。

いまだにこのツールを勧める解説が残っていますが、使えません。いまも紹介する記事が残っているので、代わりの手段を知っておく必要があります。

実機で開くのが最も確実

手元のスマートフォンでページを開き、実際にスクロールしてボタンを押します。これ以上に確実な方法はありません。

このサイトでも、問い合わせフォームがスマートフォンで右にはみ出していた時期がありました。パソコンでは正常に見えていたため、実機で開くまで気づけませんでした。

ブラウザの検証機能

Chromeで右クリックして検証を選び、デバイスツールバーを開きます。画面幅を変えながら、崩れる位置を探せます。

複数の画面幅をまとめて確認できるので、実機の前の一次チェックに向いています。

PCのブラウザで、F12を押して開発者ツールを開きます。左上のスマートフォンの形をしたボタンを押すと、画面の幅を変えて確認できます。

ただし、これは幅を変えているだけです。実機の描画速度やタップの感触までは分かりません。最終確認は実機で行います。

Lighthouse

Chromeの開発者ツールに入っている診断機能です。表示速度やアクセシビリティとあわせて、モバイルでの問題を確認できます。

ただしこれは総合的な診断ツールで、モバイル対応の合否を判定するものではありません。点数を目標にせず、指摘された箇所だけを見てください。

• 関連記事：CLSとは？合計ではなく最悪の5秒間、直す前に見る3か所

モバイル表示が崩れる4つの原因

レスポンシブのテーマを使っていても、崩れることはあります。原因の大半は4つです。

どれも見た目の問題に見えますが、読めない・押せない状態は離脱に直結します。

幅を固定している

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

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

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

読み込みが終わった瞬間に、周囲の要素が押し下げられます。読もうとした行が動く、押そうとしたボタンが移動する。この原因になります。

難しい設定は不要で、すべての画像に幅と高さを指定すれば場所が先に確保されます。

幅と高さが書かれていないと、読み込みが終わるまで場所が確保されません。読み込んだ瞬間に、その下の要素が押し下げられます。

スマートフォンは画面が狭いため、画像1枚の影響が大きくなります。PCでは気づかない程度のずれが、スマートフォンでは目立ちます。

文字が小さい・押す場所が近い

拡大しないと読めない文字サイズや、隣を押してしまうほど近いリンクは、スマートフォンでは使いにくくなります。

この記事の図解も、1200px幅で作ったものがスマートフォンでは約0.28倍まで縮みます（本文カラム340px時点の実測）。縮んでも読めるように、図解内の文字は42px以上を保つ設計にしています。

本文の文字は16px前後を目安にします。これより小さいと、拡大しないと読めません。

リンクやボタンは、指で押せる大きさを確保します。縦横44px程度が目安です。大きさだけでなく、隣の要素との間隔も8px以上あけます。並んだリンクが近すぎると、意図しないほうを押してしまいます。

• 関連記事：Core Web Vitalsとは？3指標の意味と、直さなくていい場合の見分け方
• 関連記事：LCPとは？画像を圧縮しても直らない理由と、4つの区間の見つけ方

よくある質問

レスポンシブにしないと検索順位が下がりますか。
直接下がるとは限りません。ただし評価に使われるのはモバイル版の内容なので、スマホで読めない状態は不利になります。要件ではありませんが、強く推奨されています。

モバイルフレンドリーテストはもう使えませんか。
2023年12月1日に提供が終了しました。現在は実機での確認、ブラウザの検証機能、Lighthouseなどを使います。

いまある別URLの構成をレスポンシブに変えるべきですか。
問題が起きていないなら急ぐ必要はありません。ただし管理する項目が多いため、リニューアルの機会があればレスポンシブに寄せると運用が楽になります。

スマホ版だけ内容を減らしてもいいですか。
勧められません。評価に使われるのはモバイル版なので、減らした分は届かなくなります。減らすのではなく、アコーディオンやタブに畳んでください。

まとめ

モバイル対応には3つの構成があり、Googleが推奨するのはレスポンシブです。理由は性能ではなく、実装と維持のしやすさです。

モバイル版を用意することは検索結果の要件ではありませんが、強く推奨されています。検索での扱いを考えると、評価に使われるのはモバイル版の内容だからです。

確認の手段は変わりました。専用のテストツールは終了しているので、実機での確認とブラウザの検証機能を使います。

まず手元のスマートフォンで自分のサイトを開き、横スクロールが出ないかを見るところから始まります。出ていれば、どこかに幅の固定が残っています。