モバイル幅オーバーフロー検査
URL を入れるだけで30秒、viewport meta タグの設定 + iPhone 標準幅（375px）を超える固定幅要素（inline style / img / iframe）を HTML から自動検出します。Google モバイルファーストインデックス時代の必須チェック。
01 WHY IT MATTERS
モバイル崩れは SEO 直撃 + CV 直撃の二重ダメージ
1. SEO 直撃: Google はモバイルファーストインデックス（モバイル版を主インデックスとする方針）を 2021 年に完了済。モバイルで読めないサイトは PC でも順位低下します。Core Web Vitals の CLS（レイアウトシフト）も悪化。
2. CV 直撃: 国内のスマホ流入比率は業種により60〜85%。問い合わせフォームや CTA ボタンが横スクロール内に隠れていれば、その分だけ CV を取りこぼしています。
3. アクセシビリティ: 横スクロールは弱視・高齢者の閲覧コストを大幅に上げます。WCAG 1.4.10「リフロー」（コンテンツが横スクロールなしで表示できるべき）違反になります。
02 CHECK ITEMS
本ツールの検出項目
- viewport meta タグ:
<meta name="viewport" content="width=device-width, initial-scale=1">の存在 + 設定値の妥当性 - inline style の固定幅:
style="width: 1200px"のような px 指定で 375 超の要素 - img の width 属性:
<img width="999">で 375 超のもの（CSS で max-width:100% で打ち消されていれば問題なし） - iframe の width 属性: YouTube / Google Map 埋め込みで固定幅指定があると要警戒
- table 数: 多すぎると mobile レイアウト崩れの兆候。CSS overflow-x:auto 必須
- pre 数: コード/整形済テキストは折り返さないので overflow-x:auto / white-space:pre-wrap が必要
CSS 由来の崩れまでは静的解析では完全に検出できないため、Chrome DevTools のデバイスエミュレータか、Google モバイルフレンドリーテスト での最終確認を推奨します。
03 FAQ
よくある質問
Q. なぜ 375px が基準？＋
iPhone SE / iPhone 12 mini / iPhone 13 mini / iPhone 15 などが 375px 幅の論理ピクセル（CSS px）です。これより小さいスマホはほぼ流通しておらず、375px を「最も狭い実用幅」として設計するのが業界標準です。Android 系も多くは 360〜414px の範囲なので、375px 基準で問題が無ければ大半の端末で動きます。
Q. 静的解析で実装の崩れまで判定できる？＋
HTML 内に明示された固定幅（inline style の width:NNNpx, <img width=999>, <iframe width=800> 等）は確実に検出できます。一方で外部 CSS 由来の崩れ（width: 1200px と書かれた CSS クラス、display: flex の overflow など）は静的解析では完全には判定できません。本ツールで検出ゼロでも、Chrome DevTools の Device Toolbar（Ctrl+Shift+M）で実視確認することを推奨します。
Q. viewport meta だけ設定すれば OK？＋
viewport meta は必要条件ですが、十分ではありません。viewport が正しくても、HTML 内に固定幅 px の画像 / iframe / table がある場合は横スクロールが発生します。「viewport ✓ + 固定幅要素なし + CSS でレスポンシブ実装」の3条件揃って初めて完成です。
Q. user-scalable=no はなぜ問題？＋
ピンチズームを禁止する設定です。視覚障害者・高齢者など、文字を拡大して読みたい利用者を排除することになります。WCAG 1.4.4「テキストのサイズ変更」違反として扱われるため、Apple のアクセシビリティガイドラインや Lighthouse のアクセシビリティ監査でも警告対象です。デザイン都合でも避けるべきです。
Q. Google モバイルフレンドリーテストとの違いは？＋
Google のモバイルフレンドリーテスト（search.google.com/test/mobile-friendly）は実機エミュレータで実際にレンダリングして判定します。本ツールは静的 HTML 解析のため、より高速・無料で何度でも実行できますが、CSS 由来の崩れまでは見られません。本ツールで「viewport ✓ + 固定幅 0」を確認してから、Google の公式ツールで最終確認するのがおすすめです。
04 RELATED TOOLS