responsive-ui-qa

レスポンシブ UI の QA

スクリーンショット固有のパッチではなく、根本原因を見つけてください。修正後に報告された状態が機能することを示す証拠を提示してください。

ワークフロー

1. リポジトリの実行手順とテスト手順を読みます。通常のコマンドでアプリを起動します。
2. コンパクトなテストマトリックスを作成します。
   • 重要なルートまたはコンポーネント
   • デフォルト、読み込み中、空、エラー、長いコンテンツ、インタラクティブな状態
   • 該当する場合は、狭いモバイル、モバイル、タブレットまたは狭いコンテナー、デスクトップ、ワイドデスクトップ
3. 編集前に、報告された不具合を正確に再現します。ビューポート、ルート、状態、操作を記録します。
4. レイアウトの仕組みを調べます。包含ブロック、グリッド／フレックスの制約、内在サイズ、min-width、折り返し、配置、重なり順、オーバーフロー、固定／スティッキー要素のオフセットを確認します。
5. 重大度を分類します。
   • ブロッカー - 操作またはコンテンツにアクセスできません。
   • 重大 - 操作または理解が大きく損なわれています。
   • 軽微 - タスクの遂行には支障のない、見た目上の不具合です。
6. 根本にある制約を、まとまりのある最小限の変更で修正します。デザインが実際に切り替わる場合を除き、ビューポート固有のオフセットは避けます。
7. コンテンツに負荷をかけてテストします。長いラベル、区切りのない文字列、ローカライズによる文字数の増加、メディアの欠落／大型化、検証メッセージ、動的リストを確認します。
8. 入力方法と設定モードをテストします。キーボード、タッチ操作に適したターゲットサイズ、フォーカスの可視性、可能な場合はズーム、モーションの低減を確認します。
9. 失敗したケースに加え、隣接する幅と状態でも再テストします。新たな横スクロールやコンテンツの隠れが発生していないことを確認します。
10. 証拠、残存リスク、ローカルでテストできなかった事項を報告します。

修正ルール

• 内在レイアウト、折り返し、minmax()、min-width: 0、max-width、aspect-ratio、コンテナーを考慮したルールを優先します。
• リフローだけでは不十分な場合は、ブレークポイントで情報設計を変更します。
• オーバーフローを全体的に隠したり、可読性を損なうほど文字を小さくしたりして「修正」しないでください。
• 固定寸法は、実際にサイズが定められているコントロールやメディアに限って使用します。
• 固定またはスティッキーな UI が、フォーカス中の要素やアンカー先のコンテンツに重ならないようにします。
• キャンバス、WebGL、動画、グラフ、地図、埋め込みコンテンツは、描画されたピクセルとリサイズ時の動作を調べて検証します。
• バグの引き金となった正確な状態での動作を維持します。

納品要件

以下を返してください。

1. テスト済みマトリックス - ルート／状態／ビューポート／入力方法。
2. 検出事項 - 重大度、再現手順、根本原因。
3. 修正内容 - 変更したファイルと、その制約が適切である理由。
4. 証拠 - 修正前後のスクリーンショット、または明確なブラウザー上の観察結果。
5. 残存リスク - テストしていないブラウザー、データ状態、環境。

参考資料

最終的な画面幅横断および操作の確認については、references/qa-checklist.md を読んでください。