テクニカルSEO

モバイルフレンドリー・タップターゲット監査ツール

Googleは2023年に独自のモバイルフレンドリーテストを廃止しました。ページのHTML(インラインでなければCSSも)を貼り付けると、viewport meta、固定デスクトップ幅レイアウト、読みやすいフォントサイズ、推定タップターゲットサイズ、旧式プラグインタグ、WCAGカラーコントラストという7つの実チェックを実行します。

CSSが必要なチェック(レイアウト幅、フォントサイズ、タップターゲット、コントラスト)は、HTML内にもこの欄にもCSSが見つからない場合、スキップされるか「データ不足」と表示されます。

これは静的なルールベースの監査であり、実機のようにページをレンダリングするものではありません。そのためタップターゲットとレイアウトの結果はCSSに基づく近似値であり、ピクセル単位の正確な測定ではありません。

このツールがチェックする内容

実際のモバイル訪問者とGoogleのモバイルファーストインデックスの両方にとって重要な7項目:正しくズームを妨げないviewportタグ、ハードコードされたデスクトップ幅レイアウトが無いこと、読みにくいほど小さい文字が無いこと、リンクとボタンのタップターゲットが十分な大きさであること、Flash/Java/marqueeなどの動作しないマークアップが無いこと、WCAG準拠の文字コントラスト。ページのHTML全体(View Sourceで可)と、外部スタイルシートにある場合はCSSも貼り付けてください。

各チェックの仕組み

ここでは何も推測しません — すべての結果は、貼り付けたHTML(DOM)と貼り付けたCSS(@mediaブロックを展開する本物のルールパーサー)の解析から得られ、GoogleとWCAGが公開している基準をそのまま適用します。

Viewport metaタグ

タグが存在するか、width=device-widthとinitial-scale=1を使用しているか、ピンチズームをブロックしていないか(user-scalable=noまたはmaximum-scaleが2未満はWCAG 1.4.4違反)を確認します。

固定デスクトップ幅レイアウト

CSS内の構造的セレクタ(body, .wrapper, .container, #pageなど)に601px以上のハードコードされたwidthまたはmin-widthが無いかスキャンします — レイアウトが一度もレスポンシブ化されていない典型的な兆候です。

読みやすいフォントサイズ

ピンチズームなしでモバイル画面上で快適に読める一般的な最小値である12px未満のfont-size宣言をフラグします。

タップターゲットサイズ

font-size、line-height、padding(または明示的なwidth/height)からリンク・ボタン・role="button"要素のレンダリング高さを推定し、Google LighthouseとWCAG 2.5.5が示す約44-48pxの基準と比較します。

旧式プラグインコンテンツ

<applet>、<marquee>、<blink>、およびFlash(.swf)を参照する<embed>/<object>をフラグします — これらは現在のモバイルブラウザでは一切動作しません。

カラーコントラスト(WCAG)

文字色と背景色を同時に指定しているCSSルールについて、実際のWCAG相対輝度コントラスト比を計算し、AA最低基準の4.5:1(大きい文字・太字は3:1)と比較します。

レスポンシブブレークポイント

CSS内の@mediaルールの数を、レイアウトが小さい画面に適応しているかの参考シグナルとしてカウントします — 流動的なレイアウトはメディアクエリが無くてもレスポンシブになり得るため、あくまで情報提供です。

よくある質問

なぜGoogleはモバイルフレンドリーテストを廃止したのですか?

Googleは2023年12月に単体のモバイルフレンドリーテストツールを終了し、モバイルフレンドリー性の確認をより広範なSearch Consoleのレポートに統合し、迅速な単一ページ確認ツールを提供しなくなりました。このツールは、ログイン不要でルールベースの高速監査を、貼り付けた任意のHTMLに対して実行することでそのギャップを埋めます。

なぜCSSを別途貼り付ける必要があるのですか?

ほとんどの実際のページは、外部スタイルシート(<link rel="stylesheet">)からCSSを読み込んでおり、貼り付けられたHTMLだけからこのツールがそれを取得することはできません。そのスタイルシートの内容をCSS欄に貼り付ければ、レイアウト・フォントサイズ・タップターゲット・コントラストのすべてのチェックがそれに対して実行されます。

良いタップターゲットサイズとはどのくらいですか?

Google LighthouseとWCAG 2.5.5(Target Size)によると、縦横おおよそ44-48 CSSピクセルです。それより小さいと、実際の画面上で実際の指が隣接するリンクを誤タップする頻度が明らかに増えます。

タップターゲットの推定値は正確ですか?

いいえ — 宣言されたfont-size、line-height、padding(または明示的なwidth/height)からの確かな推定値であり、実際のブラウザレンダリングではありません。44-48pxの境界付近の結果は「実機で確認が必要」、それより大きく下回る結果は明確な不合格として扱ってください。

このツールは私のHTMLやCSSをどこかに送信しますか?

貼り付けたHTML/CSSは、パーサーを実行するために一度だけHTTPS経由でサーバーに送信され(誰にでも同じルールエンジンを適用するために必要)、リクエスト終了後は保存されません。