モバイルプレビューとは？
モバイルプレビューは、PC上でスマートフォンの表示をシミュレーションできるツールです。Googleは2019年からモバイルファーストインデックスを全サイトに適用しており、スマホ版のページが検索順位の評価基準となっています。つまり、モバイル表示が最適化されていないサイトは、検索順位で大きく不利になります。
日本ではスマートフォンからのインターネット利用率が80%を超えており、多くのサイトでモバイルユーザーが大半を占めています。PC上での見た目は完璧でも、スマホで見ると文字が小さすぎたり、ボタンが押しにくかったり、レイアウトが崩れていることは珍しくありません。当ツールを使えば、実機がなくても各端末サイズでの表示を手軽に確認でき、問題箇所を素早く特定できます。
主な機能
iPhone/Android切替
主要端末のプリセットをワンクリック切替
複数画面サイズ
360px〜768pxまで自由にサイズ変更
タッチ操作シミュレーション
タップ・スワイプ操作を再現
表示崩れ検出
はみ出し・重なりなどの問題を検出
使い方ガイド
- 下の「モバイルプレビューを使う」ボタンをクリックするか、トップページにアクセスしてください。
- 確認したいWebサイトのURLを入力欄に貼り付けます。
- 端末プリセット（iPhone SE / iPhone 15 / Android等）を選択するか、任意の画面幅を指定します。
- 表示結果を確認し、文字サイズ・ボタン配置・レイアウト崩れなどの問題がないかチェックしてください。
💡 改善のヒント
- タップターゲット（ボタン・リンク）は最低48px×48pxのサイズを確保しましょう
- フォントサイズは最低16pxを基本とし、ピンチズームなしで読める大きさにしましょう
- 横スクロールが発生していないか、全ページで確認しましょう
- viewport metaタグ（width=device-width, initial-scale=1.0）を必ず設定しましょう
- 画像はmax-width: 100%を指定し、画面幅に合わせて自動縮小されるようにしましょう
よくある質問
Googleは2019年からモバイルファーストインデックスを全サイトに適用しています。これはスマホ版のページを優先的にクロール・インデックスするということです。モバイルで表示が崩れたり操作しづらいサイトは、検索順位が大きく下がる可能性があります。日本ではスマホからのアクセスが80%以上を占めるサイトも多く、モバイル対応は必須です。
最低でもiPhone SE（375px）、iPhone 14/15（390px）、iPad（768px）の3サイズで確認しましょう。Androidでは360px幅の端末が多いため、360pxも重要です。当ツールではこれらの主要端末サイズをワンクリックで切り替えて確認できます。
レスポンシブデザインとは、1つのHTMLで画面サイズに応じてレイアウトが自動的に変わるデザイン手法です。CSSのメディアクエリを使って、PC・タブレット・スマホそれぞれに最適な表示を実現します。Googleも推奨する方式で、URLが統一されるためSEO面でも有利です。
2024年以降、AMPはGoogle検索のトップニュースカルーセルの必須条件ではなくなりました。ただし、AMPはページの高速表示に効果があるため、ニュースサイトやコンテンツ中心のサイトでは導入メリットがあります。一般的なサイトでは、レスポンシブデザインとCore Web Vitalsの最適化に注力するほうが効果的です。
画像の最適化（WebP形式・遅延読み込み）、不要なJavaScriptの削減、CSSの最適化が基本です。また、フォントの読み込みを最適化し、サーバーのレスポンス時間を短縮することも重要です。Googleが推奨するCore Web Vitals（LCP・FID・CLS）の指標を目安に改善しましょう。