quality-checklist について
Quality Checklistは、会話内のデザインを評価するためのデザインレビュー用スキルです。階層、タイポグラフィ、色、余白、仕上がり、デザインシステムへの拡張性を体系的に確認し、合否ではなく診断に使います。
主な機能
- 01視覚的な階層の確認
- 02タイポグラフィと色の確認
- 03余白と仕上がりの評価
- 04デザインシステムの拡張性評価
- 05レビュー時のよくある誤りの提示
活用シーン
- 01画面デザインのレビュー
- 02アクセシビリティのコントラスト確認
- 03コンポーネント間の一貫性評価
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/quality-checklistを入力して読み込まれたか確認します。
詳細
品質チェックリスト
デザイン品質のあらゆる側面を体系的に確認します。
使い方
/quality-checklistこの会話内の任意のデザインについて、品質評価を実行します。
制約
階層
- 各画面に明確な主要要素がある
- 視覚的な重みがコンテンツの優先度と一致している
- 同じ階層レベルで意図せず競合する要素がない
- 視線の流れが意図した読み順に沿っている
タイポグラフィ
- 文字サイズのスケールに一貫した比率がある
- ウェイトの使い分けが、用途を明示して体系化されている
- 行の高さが適切に変化している（見出しは詰め、本文はゆったり）
- 画面あたりの文字サイズは、明確な根拠のあるものに限り4～6種類以内
- 書体がプロダクトのトーンに合っている
色
- すべての色に明確で、重複しない役割がある
- セマンティックカラーが全体で一貫している
- 大部分の役割をニュートラルカラーが担っている（80～90％）
- アクセシビリティに十分なコントラストがある（WCAG AA 以上）
余白
- 余白が一貫したスケールに沿っている
- 要素間の近さが適切な関係性を示している
- 密度がユースケースに合っている
- マージンによって適切な余裕が生まれている
仕上がり
- 要素の種類ごとに角丸が一貫している
- 意図した箇所の配置がピクセル単位で正確である
- すべての状態を網羅している：読み込み中、空、エラー、成功、オーバーフロー
- トランジションに意図があり、時間が一貫している
システム
- 画面をさらに10個追加しても破綻しない設計である
- 別のデザイナーが質問せずに拡張できる
- コンポーネントが再利用可能で、使い捨てではない
- システムの逸脱が意図的であり、偶発的ではない
アンチパターン
- 情報アーキテクチャを無視し、見た目の洗練だけを確認する
- チェックリストを診断ツールではなく、合否判定として扱う
- チェックリストを一度実行しただけで、以降見直さない
コメント
Markdown 対応