レスポンシブデザインテスト：テストすべき必須ビューポートサイズ

必須ビューポートテストマトリックス

すべてのデバイスビューポートをテストすることは非現実的です。代わりに、適切に選択された代表的なサイズセットが最小限の労力で幅広いカバレッジを確保します。このガイドでは、徹底的なレスポンシブテストのための最小限のビューポートセットを提供します。

必須8ビューポート

幅	代表デバイス	優先度
320px	iPhone SE、レガシー小型スマートフォン	高
375px	iPhone 12 mini、標準iPhone	高
412px	Pixel/Samsung Androidスマートフォン	高
768px	iPadポートレート、タブレット標準	高
1024px	iPadランドスケープ、小型ノートPC	中
1280px	標準ノートPC、Tailwind xl	中
1440px	MacBook Air、一般的なデスクトップ	中
1920px	Full HDデスクトップモニター	低

テストツール

ブラウザDevTools：Chrome、Firefox、Safariにはすべてレスポンシブデザインモードが内蔵されています。特定のビューポートサイズを入力するか、プリロードされたデバイスプロファイルから選択できます。

自動テスト：このツールからビューポートサイズをJSONでエクスポートし、テストフレームワークで使用します：

const viewports = [
  { width: 320, height: 568 },
  { width: 375, height: 812 },
  { width: 412, height: 915 },
  { width: 768, height: 1024 },
  { width: 1024, height: 768 },
  { width: 1440, height: 900 },
];

for (const vp of viewports) {
  await page.setViewportSize(vp);
  await expect(page).toHaveScreenshot();
}

各サイズで確認すべきこと

• 320px：水平方向にはみ出さないこと。テキストが読みやすいこと。ボタンがタップ可能（最小44px）。
• 375-412px：ナビゲーションがハンバーガーに折りたたまれること。画像がスケールダウンすること。フォームが縦に積み重なること。
• 768px：2カラムレイアウトが始まること。サイドナビゲーションが表示される可能性。画像が中サイズで表示。
• 1024-1280px：完全なデスクトップレイアウト。すべてのカラムが表示。ホバーステートが期待通りに動作。
• 1440-1920px：コンテンツが広がりすぎないこと。Max-widthコンテナが正しく中央揃え。

方向テスト

少なくとも375x812（ポートレート）と812x375（ランドスケープ）でモバイルテストを行い、固定位置要素の重なりやランドスケープでのみ現れる水平スクロールバーなど、方向固有の問題をキャッチしてください。