「自社サイトはスマホでちゃんと見られているだろうか」と気になったとき、以前なら Google の「モバイルフレンドリーテスト」にURLを入力するだけで済みました。しかし、このツールは既に提供を終了しており、古い記事の手順どおりに進めようとすると迷ってしまいます。本記事では、モバイルフレンドリーテストが終了した背景を整理したうえで、現在使える確認方法と、診断でよく見つかる問題の改善方法を解説します。
- Googleの「モバイルフレンドリーテスト」と Search Console の「モバイルユーザビリティ」レポートは2023年12月に終了済み
- 現在はPageSpeed InsightsとChrome DevToolsの「デバイスツールバー」でスマホ表示を確認するのが基本
- Search ConsoleではCore Web Vitalsレポートでモバイル/パソコン別のデータを確認できる
モバイルフレンドリーとは？今も重要な理由
モバイルフレンドリーとは、スマートフォンやタブレットなど小さい画面でも、文字が読みやすく、ボタンが押しやすく、横スクロールが発生しないなど、快適に利用できるウェブサイトの状態を指します。
Googleは2023年10月31日、公式ブログで「モバイルファーストインデックス」への移行が完了したことを発表しました。これは、検索結果の順位付けにあたって、パソコン版ではなくスマートフォン版のページ内容を基準に評価する仕組みで、すべてのサイトに適用されています。詳細はGoogle検索センターの公式ブログで確認できます。つまり、スマホで見づらいサイトは、パソコンでの見え方がどれだけ整っていても、検索での評価そのものに不利に働きかねないということです。
モバイルフレンドリーテストは終了済み：まず知っておきたいこと
以前はURLを1つ入力するだけでモバイル対応の良否を判定してくれる「モバイルフレンドリーテスト」というツールがありましたが、2023年12月にツール本体・Search Consoleの「モバイルユーザビリティ」レポート・テスト用APIがすべて終了しました。この経緯は海外メディアのSearch Engine Landでも報じられています。
終了の背景には、前述のモバイルファーストインデックスへの移行が完了し、「モバイル対応かどうか」を単独で判定する専用ツールの必要性が薄れたという事情があります。現在は、スマホでの表示品質を含めたページ全体の体験を、後述するPageSpeed InsightsやCore Web Vitalsといった指標の中で見ていく形に整理されています。古いブログ記事や資料に「モバイルフレンドリーテストで確認しましょう」と書かれていても、そのツールは使えない点に注意してください。
現在の確認方法：PageSpeed InsightsとChrome DevTools
専用ツールが終了した今、実務で使える確認方法は主に2つです。
- PageSpeed Insights：URLを入力するだけで、モバイル・パソコンそれぞれの表示を分析し、改善提案まで提示してくれる無料ツールです。Lighthouseという測定エンジンを使っており、表示速度に加えてタップしやすさや文字サイズなど、モバイル表示に関わる項目も確認できます
- Chrome DevToolsのデバイスツールバー：Chromeブラウザで対象ページを開き、キーボードの F12（またはページ上で右クリックして「検証」）からDevToolsを開き、画面左上のスマホ・タブレットのアイコンをクリックすると、実機に近いサイズでの表示を直接確認できます。横スクロールの有無やボタンの大きさなど、見た目の問題はこの方法が最も分かりやすいです
PageSpeed Insightsで「何が問題か」を数値と指摘事項で把握し、DevToolsで実際の見た目を目で確認する、という2段階で進めると、スマホ対応の状況を漏れなく確認できます。
Search Consoleで分かること：Core Web Vitalsレポートの見方
サイト全体として、どのページ群にモバイル表示の問題が集中しているかを把握したい場合は、Google Search Consoleの「Core Web Vitals」レポートが役立ちます。前述のとおり専用の「モバイルユーザビリティ」レポートは終了しましたが、Core Web Vitalsレポートは実際の訪問者データをもとに、モバイルとパソコンを切り分けて表示・操作性の状態を確認できる仕組みになっています。レポートの詳しい見方はSearch Consoleヘルプに掲載されています。
個別のページを深掘りする前に、まずこのレポートで「モバイルで問題のあるURLグループ」を特定し、該当するページをPageSpeed InsightsやDevToolsで確認する、という順番が効率的です。
診断でよく見つかる問題と改善方法
実際に確認してみると、次のような問題が見つかることが多くあります。それぞれの基本的な対処方法とあわせて紹介します。
- viewportが設定されていない：スマホの画面幅に合わせて表示を調整する
viewportの設定がないと、パソコン用のレイアウトがそのまま縮小表示され、文字が極端に小さくなります。HTMLの<head>内に画面幅に合わせる設定を追加することで解消できます - 横スクロールが発生する：画像や表の幅が画面幅を超えていると横スクロールが発生します。画像やコンテンツの最大幅を画面幅以内に収める設定が必要です
- 文字サイズが小さすぎる：本文の文字が小さいと拡大操作が必要になり、離脱につながります。スマホ表示時の基本フォントサイズを見直しましょう
- タップ要素が近すぎる：ボタンやリンクの間隔が狭いと誤タップが起きやすくなります。要素間の余白を広げる、タップ領域そのものを大きくするといった対応が有効です
- ポップアップが表示を妨げる：ページを開いた直後に画面全体を覆う広告や案内が出ると、ユーザー体験を損ないます。表示するタイミングや頻度の見直しをおすすめします
これらの問題の多くは、使用しているCMSやテーマのレスポンシブ対応（画面幅に応じて自動的にレイアウトを変える仕組み）がどこまで整っているかに左右されます。古いテーマや独自カスタマイズが多いサイトほど、問題が見つかりやすい傾向があります。特に、公開から年数が経ったテーマや、パソコン表示を前提に作り込まれたページは、スマホ表示側の検証が後回しになりがちです。トップページだけでなく、問い合わせフォームや料金ページなど、成果に直結するページも忘れずに確認しておきましょう。
まとめ：まずは現状を正しく確認することから
モバイルフレンドリーテストというワンストップのツールは終了しましたが、PageSpeed Insights・Chrome DevTools・Search ConsoleのCore Web Vitalsレポートを組み合わせれば、以前と同様に、あるいはそれ以上に詳しくスマホ対応の状況を確認できます。まずは自社サイトのトップページや主要なページをこれらのツールで確認し、viewportの設定漏れや文字サイズなど、見つかった問題から優先的に手を付けていきましょう。
株式会社オモイカネでは、サイトのモバイル対応診断からマーケティング支援まで行っています。自社サイトのスマホ対応がどこまで進んでいるか分からない方は、お気軽にご相談ください。
