design-qa-checklist について
実装が仕様に沿っているかを体系的に確認する、デザイン QA 向けのスキルです。視覚要素、レイアウト、操作、コンテンツ、アクセシビリティ、プラットフォーム間の動作を扱います。
主な機能
- 01視覚的な正確さの確認
- 02レイアウトとブレークポイントの確認
- 03操作状態の検証
- 04コンテンツとアクセシビリティの確認
- 05クロスプラットフォーム対応の確認
活用シーン
- 01デザイン仕様に照らした実装のレビュー
- 02レスポンシブレイアウトと操作状態の確認
- 03デザイン上の不具合の記録と優先順位付け
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/design-qa-checklistを入力して読み込まれたか確認します。
詳細
デザイン QA チェックリスト
デザイン実装を検証するための体系的な QA チェックリストを作成するエキスパートです。
行うこと
デザイナーが実装とデザイン仕様を体系的に照合できるチェックリストを作成します。
QA カテゴリ
視覚的な正確性
- 色がデザイントークンと一致している
- タイポグラフィが指定されたスタイルと一致している
- 余白とサイズが仕様と一致している
- 角丸、影、不透明度が正しい
- アイコンのサイズと色が正しい
- 画像のアスペクト比と品質が正しい
レイアウト
- グリッドの配置が正しい
- 各ブレークポイントでのレスポンシブ動作が仕様と一致している
- コンテンツが適切に再配置される
- 想定外のオーバーフローやクリッピングがない
- 最小幅と最大幅が守られている
インタラクション
- すべての状態（デフォルト、ホバー、フォーカス、アクティブ、無効）が正しく表示される
- トランジションとアニメーションが仕様と一致している
- クリック／タッチ領域が十分な大きさである（最小 44px）
- キーボード操作が正しい順序で機能する
- フォーカスインジケーターが見える
コンテンツ
- 実際のコンテンツがレイアウトに収まる（本番環境に lorem ipsum がない）
- 仕様どおりにテキストが切り詰められる
- 空の状態が正しく表示される
- エラーメッセージが正しい
- ローディング状態がデザインどおりに表示される
アクセシビリティ
- スクリーンリーダーが正しく読み上げる
- 色のコントラストが WCAG AA を満たしている
- フォーカス管理が機能する
- ARIA ラベルとロールが正しい
- 動きを減らす設定が尊重される
クロスプラットフォーム
- 必要なブラウザーで動作する
- 必要なデバイスで動作する
- さまざまなテキストサイズに対応する（OS のアクセシビリティ設定）
- さまざまな画面密度に対応する
QA プロセス
- 開発者がチェックリストに沿ってセルフレビューする
- デザイナーがビジュアル QA を実施する
- デザインと実装を比較するスクリーンショットを添えてバグを報告する
- 重大度に応じてバグの優先順位を付ける
- 修正を検証する
ベストプラクティス
- 記憶ではなくデザイン仕様に照らして QA を行う
- 実際のコンテンツとデータでテストする
- 正常系だけでなくエッジケースも確認する
- ブラウザーの開発者ツールを使って正確な値を検証する
- 再発防止のため、繰り返し発生する問題を記録する
コメント
Markdown 対応