Responsiveness Check

ウェブサイトのレイアウトがビューポート幅の変化にどう対応するかをテストします。単一ブラウザセッションでブレークポイント間をリサイズし、各幅でスクリーンショットを撮影し、隣接するサイズを比較し、レイアウトが壊れる場所をレポートします。

テスト内容: レイアウトの応答性 — オーバーフロー、スタッキング、ナビゲーション遷移、コンテンツの再フロー。

テスト対象外: 一般的なアクセシビリティ (ARIA、セマンティック HTML、見出しの階層構造、色のコントラスト)。これらはビューポート幅によって変わらないため、代わりに ux-audit スキルを使用してください。

ブラウザツール優先度

開始前に、利用可能なブラウザツールを検出します:

1. playwright-cli (推奨) — リサイズ、名前付きセッション、サブエージェント並列処理をサポートしています。インストール済みの場合は、まず /playwright-cli を実行して完全なコマンドリファレンスを読み込みます。
2. Playwright MCP (mcp__plugin_playwright_playwright__*) — ビューポート変更用の browser_resize。
3. Chrome MCP (mcp__claude-in-chrome__*) — ビューポート変更用の resize_window。ユーザーのログイン済み Chrome セッションを使用します。

利用可能なものがない場合は、ユーザーに通知し、playwright-cli または Playwright MCP のインストールを提案してください。

動作モード

モード 1: 標準チェック

実行時: 「check responsive」「responsiveness check」「test breakpoints」

デバイススペクトラムをカバーする 8 つの主要ブレークポイントをテストします:

幅	デバイス環境
320px	小型スマートフォン (iPhone SE)
375px	標準スマートフォン (iPhone 14)
768px	タブレット縦向き (iPad)
1024px	タブレット横向き / 小型ノートパソコン
1280px	ノートパソコン
1440px	デスクトップ
1920px	フルHD
2560px	ウルトラワイド / 4K

プロセス:

1. URL を単一ブラウザセッションで開きます (高さ: 900px)
2. 320px から開始します。各ブレークポイント幅について: a. ビューポートをリサイズします b. CSS リフロー (レイアウト遷移) を待ちます c. 上部を見える範囲でスクリーンショットを撮影します d. ページに大きな下部コンテンツがある場合はスクロールしてスクリーンショットを撮影します e. 8 つのレイアウトチェックを実行します (下記のマトリックスを参照) f. 問題があれば重大度とともに記録します
3. 隣接する幅を比較し、レイアウト遷移が発生する場所を特定します
4. レポートを作成します

モード 2: スウィープ

実行時: 「responsive sweep」「sweep all breakpoints」「find where it breaks」

320 から 2560 まで 160px ごと (計 15 幅) をテストします。標準と同じく単一セッションアプローチですが、より多くのデータポイントが得られます。このモードはレイアウトが壊れる正確な幅を見つけるためのものです。

幅: 320, 480, 640, 800, 960, 1120, 1280, 1440, 1600, 1760, 1920, 2080, 2240, 2400, 2560

開始前に簡潔に確認してください (15 枚のスクリーンショットは意味のあるセッションです)。

モード 3: 対象範囲

実行時: 「check between 768 and 1024」「test tablet breakpoints」「focus on mobile widths」

ユーザーが指定した範囲を 80px 刻みでテストします。既知の問題エリアの詳細調査が必要な場合に使用します。

例: 「check between 768 and 1024」は以下をテストします: 768, 848, 928, 1008 (+ エンドポイント 1024)。

マルチ URL

複数の URL をテストする場合 (例: 「ホームページ、プロフィールページ、お問い合わせページをチェック」):

• 並列サブエージェントを起動します。1 URL あたり 1 つ (ブレークポイントあたりではなく)
• 各サブエージェントは独自の名前付きセッションで自分の URL に対して標準チェックを実行します
• 結果を単一レポートに統合します

# Sub-agent pattern (playwright-cli)
playwright-cli -s=page1 open https://example.com/ &
playwright-cli -s=page2 open https://example.com/about &

レイアウトチェックマトリックス

これら 8 つのチェックは実際にビューポート幅によって変わる問題を対象としています:

#	チェック項目	確認事項
1	水平オーバーフロー	ビューポートより広いコンテンツ — 水平スクロールバーが表示される、要素が切り取られている
2	テキストオーバーフロー	テキストが単語の途中で切れている、隣接要素と重なっている、フォントサイズが読めない (< 12px)
3	ナビゲーション遷移	ハンバーガーメニューが正しい幅で表示/非表示になる、モード間で「壊れた」状態がない
4	コンテンツスタッキング	マルチカラムレイアウトが狭い幅で論理的な読み順で単一カラムにスタックする
5	画像/メディアのスケーリング	画像がコンテナをオーバーフロー、アスペクト比が歪む、レスポンシブサイジングが不足している
6	タッチターゲット	モバイル幅 (< 768px) では対話要素が 44px 未満 — ボタン、リンク、フォーム入力
7	ホワイトスペースバランス	モバイルで詰まりすぎている (余白がない)、広い画面でスカスカ (コンテンツが失われている)
8	CTA の可視性	主要な行動喚起要素が各幅でスクロールなしに上部を見える範囲で表示される

遷移検出

このスキルのユニークな価値は、レイアウト遷移が起こる場所を見つけ、それが滑らかであるかどうかを判定することです。

隣接する幅でスクリーンショットを比較する際、以下の幅にフラグを立てます:

• カラム数が変わる (3 列 → 2 列 → 1 列グリッド)
• ナビゲーションモードが切り替わる (フルナビ → ハンバーガー、またはその逆)
• サイドバーが表示/非表示になる (コンテンツ幅がジャンプする)
• グリッドが再フロー (カードが次の行にラップ)

各遷移の正確な幅範囲をレポートします:

遷移	開始	終了	幅範囲
ナビ: ハンバーガー → フル	768px	1024px	約 960px で切り替わり
グリッド: 1 列 → 2 列	640px	768px	約 700px で再フロー
サイドバー表示	1024px	1280px	約 1100px で表示

これにより、開発者は CSS ブレークポイントを設定 (または修正) する場所が正確にわかります。

重大度レベル

ux-audit と一貫性があります:

重大度	意味
Critical	レイアウトが壊れている — コンテンツが読めない、ナビゲーションにアクセスできない、ページが使用不可
High	大きなレイアウト問題 — 大きなオーバーフロー、主要コンテンツが非表示、遷移が壊れている
Medium	目立つが使用可能 — 不自然な間隔、軽微なオーバーフロー、最適でないスタッキング順序
Low	ポーランド — ホワイトスペース調整、軽微な位置合わせ問題、軽微なタッチターゲット不足

自律性のルール

• それをやる: ビューポートをリサイズ、スクリーンショットを撮影、レイアウトを分析、幅を比較
• 簡潔に確認: スウィープモード実行前 (15 ビューポート)、並列で 4 つ以上の URL をテストする前
• 最初に尋ねる: フォームと対話する、認証フロー経由でクリックスルーする前

レポート出力

レポートを docs/responsiveness-check-YYYY-MM-DD.md に書き込みます (単一ページの簡単なチェックはインラインでも OK)。

レポート構造については references/report-template.md を参照してください。

リファレンスファイル

場合	参照
ブレークポイント詳細と問題エリアの確認	references/breakpoints.md
レスポンシブネスレポートの作成	references/report-template.md