UIデザインのQAチェックリスト：デザインレビューで見落とさないための確認事項

デザインのQA（Quality Assurance）は、開発開始前にデザインの問題を発見・修正するための重要なプロセスです。本記事では、UIデザインのQAで確認すべきチェックポイントをまとめます。

デザインQAの重要性

デザインの問題を開発中・リリース後に発見すると、修正コストが数倍になります。デザインフェーズでQAを実施することで、手戻りを最小化できます。

視覚的一貫性のチェック

カラーの確認：

• すべての色がデザインシステムのカラートークンを使用しているか
• 色の直接指定（ハードコード）がないか
• ダークモードのカラーが適切に設定されているか

タイポグラフィの確認：

• フォントスタイル（サイズ・ウェイト・行間）がスタイルガイドと一致しているか
• テキストのカラーがセマンティックトークンを使用しているか
• 長いテキストの折り返し処理が適切か

スペーシングの確認：

• 要素間の余白がグリッド（8px倍数など）に従っているか
• 同じ種類の要素間で余白が統一されているか
• セーフエリアのパディングが適用されているか

コンポーネントの確認

すべての状態の確認：

各コンポーネントの全状態（Default・Hover・Active・Disabled・Error・Loading）がデザインされているか確認します。

• ボタン：デフォルト・押下時・無効時・ローディング時
• 入力フォーム：通常・フォーカス・入力済み・エラー
• カード：通常・ホバー・選択済み

コンポーネントのインスタンス確認：

デザインシステムのコンポーネントを使用しているか、ローカルに独自コンポーネントを作成していないか確認します（Figmaのコンポーネント使用状況で確認可能）。

アクセシビリティの確認

コントラスト比チェック：

Figmaのアクセシビリティプラグイン（Stark・Contrast等）を使って、すべてのテキスト要素のコントラスト比をWCAG AA基準でチェックします。

タップ領域のチェック：

すべてのインタラクティブ要素のタップ領域が44×44px以上になっているか確認します。

アクセシビリティラベルの確認：

アイコンのみのボタン・画像に適切なアクセシビリティラベルが設定されているか確認します。

レスポンシブ・マルチデバイスのチェック

デバイスサイズの確認：

• iPhone SE（375px）・iPhone 15 Pro Max（430px）の両端で表示確認
• Android端末の代表サイズ（360px・390px・412px）での確認
• iPad（768px〜1024px）での確認（必要な場合）

ダークモードの確認：

すべての画面のダークモード版がデザインされているか、または自動対応が想定通りに動作するか確認します。

デザインハンドオフの確認

開発者が必要な情報の確認：

• コンポーネントの注釈・説明が記載されているか
• アニメーションの仕様（duration・easing）が明記されているか
• 状態遷移・インタラクションのフローが示されているか

まとめ

UIデザインのQAは「見た目だけでなく、機能・アクセシビリティ・実装可能性まで確認する」総合的なチェックプロセスです。デザインレビューのプロセスにQAチェックリストを組み込むことで、高品質なデザインの量産が可能になります。