モバイルフレンドリーテスター
Free, no signup. Run this tool's seven weighted mobile-layout checks and get a 0–100 diagnostic score, plus a phone-viewport preview as separate supporting evidence.
Free, no sign-up. The analysis reads your HTML the way a mobile browser would; the screenshot renders in headless Chrome on a 390×844 iPhone-sized viewport.
チェックは当サーバーから実行します。入力したURLは取得しますが、結果は保存しません。 Results are kept in a short-lived cache, not stored long-term. Anonymous aggregate stats feed our research posts; domains are counted once via an anonymized hash and never stored in the clear. 匿名化した実行単位の結果件数を集計調査に使う場合があります。URL、ドメイン、IPアドレス、識別子は含めず、100回未満の実行から統計を公開しません。
+ で現在のサイトまたはページを保存します。保存したサイト、ページ、リストの横にある☆を使うとお気に入りに追加できます。最近のチェック履歴は下に表示されます。
名前付きリストを作成
ローカルの選択内容から対象を入力しました。
サイトパスポート この保存済みサイトのローカルコンテキスト
ローカルデータ
保存した対象、名前付きリスト、最近のチェック概要はこのブラウザ内だけに残ります。
390×844 viewport · iPhone user agent
This is a static-analysis check plus a real render — fast and directional. It can’t see CSS applied by JavaScript frameworks at runtime, so pair a borderline score with the screenshot: if the page looks right on the phone frame, trust your eyes.
Compare a later score
Download this free analysis as a private JSON baseline, then import it after another run to see score and failing-check changes. Snapshots stay in your browser unless you choose to save a file.
このツールを評価
What the score is made of
| Check | Threshold / points | What this free pass can confirm |
|---|---|---|
| Viewport | 30 points | width=device-width and zoom accessibility |
| Responsive CSS | 20 points | @media rules in inspected CSS |
| Fixed widths | 15 points · >400px warning | Markup-level width attributes and inline styles |
| Font sizes | 10 points · <12px warning | CSS declarations and legacy font tags |
| Tap targets / horizontal overflow | Needs a rendered layout pass | Not claimed by this free HTML score |
Viewport is 30 points
Without width=device-width, phones render your page at ~980px and shrink it to fit — every other mobile problem starts here. Disabling zoom costs points too: it’s an accessibility failure.
Layout checks
Responsive CSS (@media rules, including in external stylesheets), hard-coded widths over 400px, and sub-12px font sizes — the three classic ways a desktop layout breaks on a phone.
Delivery checks
Responsive images (srcset/<picture>), HTML page weight on mobile networks, and leftover <object>/<embed> plugin content that mobile browsers won’t run.
このツールについて
viewport、レスポンシブCSS、固定幅、フォントサイズ、画像、ページ重量、プラグインを7項目で診断し、0〜100の製品スコアを表示します。
スマートフォンのビューポートでの別プレビューと、各項目の具体的な改善手掛かりを確認できます。
機能
- viewportとレスポンシブCSSの確認
- 固定幅、フォント、画像、プラグインの検査
- 0〜100のモバイル対応スコア
- スマートフォン幅の個別プレビュー
仕組み
公開URLを取得し、viewport、スタイル、寸法、フォント、画像、ページ重量、プラグインの手掛かりを抽出します。各項目を決定論的に採点し、スマートフォンの固定ビューポートで描画例を表示します。
制限事項
- スコアは取得したHTML、CSS、画像、選択したビューポートの静的な診断であり、すべての端末、ネットワーク、支援技術での体験を保証しません。
- 動的な操作、ログイン後の画面、実ユーザーの性能指標、検索順位を測定しません。
よくある質問
Google はモバイルフレンドリーテストを廃止しましたが、これは代替ツールですか？
Google は 2023 年後半に、単独のモバイルフレンドリーテストと Search Console のモバイルユーザビリティレポートを廃止しました。このツールは独自の 7 項目診断モデルを適用します。これらはモバイルレイアウトの問題を見つけるための製品ヒューリスティックであり、Google の適格性基準でも、実機テストの代わりでもありません。
このテストは JavaScript をレンダリングしますか？
0〜100 のスコアは、HTML と最大 4 つのスタイルシートを対象とする静的分析から算出するため、JavaScript は実行しません。スマートフォンのスクリーンショットは Headless Chrome によるプレビューで、補助証拠として役立ちますが、1 つの表示領域と 1 つの描画環境にすぎません。結果が一致しない場合は、ページを調査し、代表的な実機でテストしてください。
ビューポートタグが原因で 30 点失うのはなぜですか？
ビューポートの確認は、ほかのすべてのモバイル動作が依存する唯一の設定なので、100 点中 30 点を占めます。<meta name="viewport"> タグがないと、スマートフォンはページをおよそ 980px 幅でレンダリングして画面に合うよう縮小するため、テキストが小さく、タップ位置もずれます。修正は <head> 内の 1 行です：<meta name="viewport" content="width=device-width, initial-scale=1">。ズームを無効にする user-scalable=no または maximum-scale=1 は大部分の点数を維持しますが、アクセシビリティ上の問題となるため警告になります。
固定幅の要素と見なされるのは何ですか？
「コンテンツを表示領域に合わせる」の確認では、インラインの style:width または width="…" 属性で 400px を超える固定幅が設定された要素を示します。こうした幅はスマートフォン画面からはみ出して水平スクロールを生じさせやすいためです。1〜2 件なら警告、3 件以上なら不合格です。小さな画面でブロックが縮むよう、パーセント値または相対単位とともに max-width を使ってください。
スクリーンショットが「利用不可」でもスコアが表示されるのは不具合ですか？
いいえ。スコアと 7 つの確認項目は、先に実行される無料の HTML 分析から得られます。スマートフォンのスクリーンショットは別の従量制レンダリングで、自主的な日次・月次の費用上限に達した場合、描画処理が一時的に混雑している場合、またはページがヘッドレスブラウザーをブロックした場合に省略されることがあります。どの場合も注記は意図的に穏やかで、スコアには影響しません。分析はスクリーンショットに依存しません。
よくある問題と修正方法
- エラー viewportメタタグがないか無効です 修正: 初期HTMLのheadに、有効なwidth=device-widthのviewportメタタグを追加してください。
- 警告 レスポンシブCSSのシグナルがありません 修正: 狭いviewportに合わせてレイアウトとタイポグラフィを調整するレスポンシブCSSのブレークポイントを追加してください。
- エラー 固定幅コンテンツがviewportを超えています 修正: viewportからはみ出す固定幅を、流動的なmax-width、パーセント、grid、flexによるサイズ指定に置き換えてください。
- 警告 テキストがモバイルで読むには小さすぎます 修正: モバイル本文を読みやすい基本サイズに引き上げ、重要なテキストで12 CSSピクセル未満を避けてください。
- 警告 画像がレスポンシブにサイズ指定されていません 修正: 画像をmax-width:100%とheight:autoで制限し、必要に応じてレスポンシブな画像ソースを指定してください。
- 警告 HTML ページ ウエイグハト 高 修正: 不要なインラインデータを削除し、アセットを圧縮し、重要でないリソースを遅延させてモバイル転送量を減らしてください。
- エラー 互換性のないプラグインのコンテンツがあります 修正: Flash、Javaアプレットなどの未対応プラグインコンテンツを、ネイティブHTML、CSS、JavaScriptに置き換えてください。