design-review

デザインレビュー

レンダリングされたインターフェースを確認し、表示上および操作上の不具合を特定してから、依頼されている、またはすでに許可されている場合は、確認済みの問題を修正します。レビューのみの依頼では、ソースを編集せずに、指摘事項と証拠を提示します。

対象範囲

差分を考慮したレビューでは、実際のベース／マージベースを使って、対象 URL と変更されたルートを特定します。ブラウザーへのアクセス、スナップショット、ロール／ビューポートのカバレッジ、安全な操作については、共通のQA の探索手順に従います。無関係な作業ツリーの変更はそのまま保ち、必要に応じてすべてをスタッシュまたはコミットするのではなく、別のチェックアウトを使用します。

依頼されたプロダクト画面には Full モード、重要な画面／状態には Quick モード、より広範な操作性／アクセシビリティ監査が明示的に依頼された場合には Deep モードを使用します。確認した内容を記録します。対象範囲に本質的な曖昧さがある場合は一度だけ確認し、ユーザーの回答と許可を以後も引き継ぎます。

確認

DESIGN.md、デザイントークン、コンポーネント、ブランドアセット、レンダリングされたページを基準に確認します。関連するデザインチェック項目を使用します。階層、タイポグラフィ、余白／配置、文言、状態、レスポンシブ時のレイアウト変更、キーボード／フォーカス、コントラスト、モーション、サポート対象のテーマを確認します。

実際に見える不具合／計算値で確認できる不具合と、見た目に関する提案は区別します。フォント、グリッド、色、角丸だけでは不具合の証拠になりません。意図されたブランド表現を維持します。実際のテキスト色／背景色とフォントサイズ／ウェイトを確認します。18px の通常ウェイトのテキストは通常のテキストであり、WCAG AA では 4.5:1 のコントラスト比が必要です。大きなテキストのしきい値は、通常ウェイトで 24px、または太字で約 18.67px です。

重要な操作をページ間でたどって確認します。静的なスクリーンショットだけでなく、フォーカス順序、エラー／復旧状態、状態の継続性も確認します。ブラウザーツールがスクリプト評価に対応している場合は、各ページ遷移後に 1 回のスクリプト評価で、コンソールエラー、失敗したリクエスト、コントラスト、フォントの読み込み、フォーカス順序を収集し、関連するすべてのビューポートを一度に記録します。確認項目は変わらず、往復回数だけを減らせます。共通の原因を示す証拠がある場合は、繰り返し発生する症状を体系的な指摘事項にまとめます。ユーザーへの影響、スクリーンショットまたは計算値による証拠、再現手順、修正案を記録します。

修正と検証

修正モードでは、自分が担当する最小限の範囲を変更し、影響を受けるルートと隣接する状態を検証して、修正前／修正後の証拠を記録します。最終ファイルに対し、設定済みの関連チェックを一度実行します。明示的に許可された場合に限り、検証済みで担当範囲内の変更だけをコミットし、コミット禁止モードを尊重します。回帰があれば修正するか、自分が行った変更だけを元に戻します。HEAD を自動的に元に戻したり、続行の可否を決めるために根拠のない確率式を使ったりしないでください。

回帰、修正の繰り返しの失敗、原因の不明瞭さ、対象範囲の変更があれば、改めて評価します。依頼された受け入れ基準または合意した予算に達した時点で終了し、未解決事項を報告します。無関係な見た目の調整によって 10/10 のスコアを追い求めないでください。

提出

テストしたルート／ビューポート／状態、指摘事項、検証済みの変更、残っているブロッカー、証拠へのリンクを報告します。検証が不完全な状態と不具合を区別します。問題なしと判定するには、関連するチェックを実行している必要があります。スコアを求められた場合は、定性的な評価として明記し、ブロッカーを覆す判断材料にはできません。ソースの修正、コミットの状態、任意のバックログ提案はそれぞれ区別します。