モバイル対応テストツール

URLを入力すると、テストツールはデフォルトのiPhoneサイズ(375×812ピクセル)のシミュレーションされたスマートフォン画面にそのページを表示し、Googleが廃止する前にモバイル対応性テストで検出していた一般的な読みやすさ上の問題を確認します。そして、修正可能な問題の一覧を返します:ビューポートメタタグの欠落、テキストサイズが12px未満、タップ対象が48×48px未満、水平スクロール、Flashやサポートされていないプラグイン、およびビューポートよりも広いコンテンツなどです。

テストの実行方法

  1. 1

    URLを入力してください

    プロトコルを含む完全なURL。公開ページのみです。

  2. 2

    ページは携帯サイズのビューポートでレンダリングされます

    デフォルト値は375×812で、設定可能です。

  3. 3

    自動チェックが実行されています

    ビューポートのメタ情報、テキストサイズ、タップ対象間隔、オーバーフロー、プラグイン

  4. 4

    プレビューとレポート

    レンダリングされた電話画面のスクリーンショットおよび具体的な問題の一覧です。

テスターがチェックする項目

ビューポートの設定

  • <meta name="viewport" content="width=device-width, initial-scale=1">が存在しますか? ない場合、モバイルブラウザは端末の画面サイズをデスクトップサイズとして認識し、画面に合わせて縮小して表示されるため、テキストが非常に小さくなってしまいます。

テキストサイズ

  • 12px より小さいすべてのレンダリングテキストはマークされます。ピンチズーム機能がないスマートフォンでは読みにくくなります。 多くのスタイルガイドでは、ボディサイズを最小16pxにすることを推奨しています。非常に小さなキャプションは問題ありませんが、11pxのボディコピーは適していません。

タップ対象サイズ

ボタン、リンク、フォームコントロールは少なくとも48×48pxのサイズで設定する必要があります(Google/W3Cモバイルアクセシビリティガイドライン)。 小さなターゲットは親指で正確にタップするのが難しく、フラグが立てられます。

タップ対象の間隔

隣接するターゲットから8pxより近い位置にあるターゲットは誤タップを引き起こします。個別にフラグが設定されます。

水平スクロール

ビューポートを超えるコンテンツでは水平スワイプが強制され、モバイルユーザー体験が悪化します。これは通常、max-width: 100%属性を備えていない画像や再配置できないテーブルが原因です。

サポートされていないプラグイン

Flash、Silverlight、ActiveXはスマートフォンでは動作しません。旧式のサイトではまだこれらを参照している場合があります。

フォントの読み込み

数秒間にレンダリングが阻害される非常に大きなウェブフォントはマークされます。

なぜ今も重要なのか

Googleは2023年12月に独立したモバイル対応性テストを終了しましたが、モバイル対応性は引き続きCore Web Vitalsやページ体験関連の指標を通じて直接的なランキング評価要素となっています。「モバイルファースト」インデックスングとは、Googleがサイトをスマートフォン向けにクロールする仕組みであり、モバイル環境で問題となる点はデスクトップ版のランキングにも反映されます。

典型的な修正方法

  • <head>および<meta name="viewport" content="width=device-width, initial-scale=1">に「viewport」メタ情報を追加してください。 – メディアクエリを用いたレスポンシブCSS:@media (max-width: 768px) { ... }
  • 固定幅レイアウトではなく、FlexboxおよびGridを使用します。
  • 画像max-width: 100%; height: autoを設定すると、ビューポートに合わせて画像が縮小します。
  • 小画面ではテーブルをスクロール可能に設定する:<div style="overflow-x: auto">で折り返します。
  • テキストのサイズ設定にはremまたはemを使用してください。これにより、ユーザーの設定に応じたスケーリングが正しく機能します。

テスト者が見逃してしまう点

  • 実際のハードウェア環境での性能。 3Gネットワークを接続した低価格帯のAndroidスマートフォンでは、本テストではシミュレートしていない遅延が発生します。性能評価にはLighthouseをご利用ください。
  • **タッチ操作に関する動作。**タップ時に開くべきであるにもかかわらず、ホバーのみで展開されるドロップダウンは、実際のデバイス上で手動でテストする必要があります。 – モバイル端末のサイズ制限を超えたアクセシビリティ。コントラスト、スクリーンリーダー対応、キーボードナビゲーションなど、専用のアクセシビリティツールを活用してください。 – モバイル専用ブラウザでのJavaScriptエラー。iOS版のSafariは、他のWebKitベースのブラウザと比べて動作が異なる場合があります。

よくある質問

チェック内容は同じだが、実装方法は異なる。Googleは2023年末にその公開ツールを廃止した。このテストツールは、ヘッドレスブラウザが取得するページのバージョンに対して、Googleが使用していた従来のチェック項目群を同じように適用する。

はい、Googleは2020年から「モバイル優先」の原則を採用しており、つまり検索結果のランキングにおいてもモバイル版が主要な対象となっています。モバイル環境での表示問題はデスクトップでの検索においてもランキングに悪影響を及ぼします。

いいえ。テストツールは公開でアクセス可能なURLのみを取得します。保護されたステージ環境では、Chrome DevToolsのデバイスエミュレーションモードを使用してローカルでテストしてください。

デフォルトは375×812(iPhone 12/13/14)です。390×844(iPhone 14 Pro)、360×640(一般的なAndroid端末)、または412×915(Pixel 7)に設定可能です。

通常はページの内容量に応じて5〜15秒かかります。多くのスクリプトを含む重いページでは時間がさらに長くなります。テスト者は読み込みイベントおよび短時間のアイドル期間を待った後でデータを取得します。

関連ツール

このツールは他の言語でも利用できます