モバイルサイトのテストは、実際の訪問者が問題に気づく前に、サイトがスマホで読みやすく、使いやすく、速いかを確かめるためのものです。以下のチェックリストには、7つのグループに分けた30項目があります。ほとんどはPC上のスマホ表示で数秒で確認でき、一部は実機が必要です。公開やリニューアルの前には毎回すべてを確認し、通常のリリースでは短縮版を使いましょう。
始める前に：テスト環境を用意する
必要な表示環境は3種類です。
- PC上で手軽に使えるスマホ表示。 多数のページのレイアウト確認に使います。Chrome DevToolsのデバイスモードか、Mobile View Extension のような拡張機能です。違いはスマホシミュレーター拡張機能とDevToolsの比較で解説しています。
- 本物のモバイル用エンジン（とクロスブラウザテストのチェックリストにあるPCブラウザ）。Xcode Simulatorか実機iPhoneでのiOS版Safari、そしてAndroidのChromeです。iPhoneでの確認方法とAndroidでの確認方法をご覧ください。
- 最低1台の実機（ミドルレンジ）。 タッチ操作、キーボード、速度の確認に使います。
最低限テストしたい幅は次のとおりです（数値の意味はビューポートサイズとはで解説しています）。縦向きで360px、390〜402px、430〜440px、それに横向きを1サイズとタブレットを1サイズ。
1. レイアウトと読みやすさ
- どのページにも横スクロールがない。横にスクロールするページがあれば、画面より幅の広い要素を探します。固定幅、長いURL、幅の広い表がよくある原因です。
- 本文の文字サイズが16px以上で、行が画面幅を超えない。
- 見出しがきれいに折り返され、1語だけ次の行に取り残されていない。
- 画像が画面に合わせて縮小され、縦横比を保っている。
- カラムが縦に並んだときもコンテンツの順番が自然。最も重要な内容が長いサイドバーの下に追いやられていない。
- 横向きのとき、ノッチやホームインジケーターの裏に何も隠れていない（画面端まで使うレイアウトなら
env(safe-area-inset-*)を確認）。 - 正しいviewportのmetaタグがある。これがないと、スマホでは縮小されたPC版ページが表示されます。viewport metaタグの解説をご覧ください。
2. ナビゲーション
- メニューが1回のタップで開閉し、リンクを選ぶと閉じる。
- 入れ子のものも含め、すべてのメニュー項目にホバーなしでたどり着ける。
- すべてのページにロゴかトップページへのリンクがある。
- 横向きのとき、固定ヘッダーが画面の高さのごく一部しか占めない。
- 戻るボタン（とAndroidの戻るジェスチャー）で期待どおりの場所に戻れる。シングルページアプリケーションでも同様。
3. タッチ操作
- タップ領域が十分に大きく、間隔が空いている。WCAG 2.2では最小24 × 24 CSSピクセルとされ、AppleとGoogleのデザインガイドラインでは44〜48px程度が推奨されています。
- カルーセルやスライダーがスワイプで動き、操作ボタンも見えている。
- ポップアップやCookieバナーが簡単に閉じられ、表示直後に画面全体を覆わない。
- 本文中のリンクがホバーなしで見分けられる。
4. フォーム
- 各入力欄で適切なキーボードが出る：
type="email"、type="tel"、inputmode="numeric"。 - 入力欄の文字サイズが16px以上で、iOS版Safariでフォーカス時に拡大されない。
- 画面キーボードが入力中の欄や送信ボタンを隠さない。
- 名前、メールアドレス、住所、支払い情報で自動入力が効く（
autocomplete属性）。 - エラーメッセージが該当欄のすぐ近くに表示され、スクロールせずに見える。
5. メディアとファイル
- 画像が画面に合ったサイズで配信されている（
srcsetとsizes）。PC用の大きなファイルを縮小表示していない。 - 動画が音声付きで自動再生されず、意図した場合はiPhoneでページ内再生される（
playsinline）。 - アイコンやロゴが高密度ディスプレイでも鮮明（SVGまたは2x/3x画像）。
6. 表示速度
- 通信速度を制限した状態でもメインコンテンツがすぐ表示される。PageSpeed Insightsでフィールドデータを確認し、ラボテストも実行します。どちらもスマホでのサイト表示速度の測り方で解説しています。
- 読み込み中にレイアウトがずれない（Cumulative Layout Shift）。
- 最初のタップにすぐ反応する（Interaction to Next Paint）。
7. モバイルでのSEOとアクセシビリティ
- モバイルページのメインコンテンツ、見出し、構造化データ、metaタグがPC版と同じ。Googleはモバイル版をインデックスします。
- 文字を200%に拡大してもレイアウトが崩れず、少なくとも1台のスマホでスクリーンリーダーを使って操作できる。
- モバイルモードのLighthouse監査で、アクセシビリティやSEOの重大な問題が出ない。手順はChromeでLighthouseのモバイル監査をする方法をご覧ください。
毎回のリリース用の短縮版
デプロイのたびに30項目を確認する人はいません。通常のリリースでは次の4つで十分です。
- 変更したページを360pxと430pxのスマホ表示で開く
- 横スクロールやメニューの不具合がないか確認する
- 実機でフォームを1つ送信してみる
- メインのランディングページの速度レポートにざっと目を通す
10分ほどで済み、ほとんどのデグレを見つけられます。
モバイルテストでよくある失敗
- ブラウザのウィンドウを縮めるだけで確認する。 幅は変わりますが、ユーザーエージェント、ピクセル比、入力方式は変わりません。実際のスマホには別のページを返すサイトもあります。詳しくはPCでWebサイトのモバイル版を表示する方法をご覧ください。
- 最新のハイエンド機だけで確認する。 訪問者の多くは、開発者より遅い端末を使っています。
- 横向きやタブレットを無視する。 多くのレイアウトが崩れるのは768〜1024px前後です。ChromeでサイトをiPad表示で見る方法を参考にしてください。
- ログイン前のページだけ確認する。 マイページや購入手続きは、モバイルで最も後回しにされがちです。
よくある質問
スマホを持っていなくてもサイトをモバイルでテストできますか？
レイアウトはPCのChromeのスマホ表示で、iPhoneのSafariはMacのXcode Simulatorで、AndroidはAndroid Studioのエミュレーターで確認できます。重要な導線の最終確認は実機で行いましょう。
モバイルサイトで最も多い問題は何ですか？
画面より幅の広いコンテンツによる横スクロールです。たいていは固定幅の要素、幅の広い表、max-width: 100% が指定されていない画像が原因です。
Google公式のモバイルテストはありますか？
Googleは2023年12月にモバイルフレンドリーテストを終了し、代わりにLighthouseを案内しています。代わりのツールはGoogleモバイルフレンドリーテストの代替ツールにまとめています。