作業の進め方
Design QA Checklist は、構築済みの画面が仕様に合っているかをチームで確認するためのスキルです。視覚的な値、レスポンシブレイアウト、コンポーネントの状態、実際の内容、アクセシビリティ、プラットフォーム要件を扱います。実際のデザイン仕様を基準とするため、記憶頼りのレビューよりも正確に不一致を特定できます。
ソースは、開発者の自己確認、デザイナーの QA、スクリーンショット付き不具合報告、修正確認という順序を説明しています。チェックリストの生成はその準備です。実行には、動く画面と対象デバイスへのアクセス、必要な支援機能の確認が別途必要です。
想定される成果物
- デザイン仕様から導いた、範囲の明確なチェックリスト。
- 関連する視覚・レスポンシブ・操作・内容の状態に対する確認項目。
- 実装の不一致を報告し、再テストするための構成。
ブリーフからレビューまで
- 01期待するデザインを読む
仕様、トークン、対象プラットフォームを集めます。確認者が何を観察すべきかがわかる項目に要件を変換します。
- 02状態と境界条件を網羅する
必要に応じてホバー、フォーカス、アクティブ、無効、読み込み、空、エラー状態を含めます。実際の内容を使い、省略表示、はみ出し、リフローを確認します。
- 03実装を確認する
開発者の自己確認の後、デザイナーが確認します。ブラウザーツールで正確な値を調べ、スクリーンショットで設計と実装を意味のある形で比較します。
- 04優先順位を付けて再テストする
不一致を重大度ごとに報告し、修正を検証します。繰り返す問題の種類を記録し、次回以降に早期発見できるようにします。