build-color-palette

スキル：カラーパレットの構築

目的

リアルなインターフェースの構築に十分な色合いを備えた、包括的で体系的なカラーパレットを作成します（グレー8～10色、プライマリー5～10色、アクセント5～10色）。

種類

生成＋評価

入力

• ブランドカラーまたはデザインの雰囲気・意図
• UI の複雑さ（シンプルなランディングページか複雑なダッシュボードか）
• 必要なセマンティックな意味（成功、エラー、警告、情報）
• カテゴリ別の色が必要か（グラフ、カレンダー、タグ）

出力

• 複数の色合いを含むカラーパレットの仕様
• 各色合いの役割の割り当て
• 使用ガイドライン
• 既存のパレットの合格／不合格評価

実施する変換

機能上のニーズを、グレー、プライマリー、アクセントの3つのカテゴリに整理した包括的なパレットへと変換します。各カテゴリには、それぞれ5～10色の異なる色合いを用意します。

判定基準

合格（良好なカラーパレット）

• グレー：8～10色 - テキスト、背景、パネル、フォームコントロール用（UI の大部分）
• プライマリー：5～10色 - プライマリーアクションやアクティブなナビゲーションに使う、中心となる1～2色
• アクセント：各5～10色 - セマンティックな状態（赤、黄、緑）、新機能、カテゴリ分類用
• 体系的な色合い：各色について、明るい色から暗い色までのバリエーションをあらかじめ定義
• 明確な階層：プライマリーカラーで全体の印象を定め、アクセントは控えめに使用
• 十分なコントラスト：すべてのテキストが WCAG AA を満たす（通常のテキストは4.5:1、大きなテキストは3:1）
• 不透明度を使用しない：すべての色合いに明示的な16進数値を指定

不合格（不十分なカラーパレット）

• グレーが少なすぎる（3～4色では妥協が必要）
• プライマリーカラーの色合いが不足している（ホバー状態や控えめな背景色を作れない）
• セマンティックな状態やカテゴリ分類に使うアクセントカラーが足りない
• 定義済みの色合いではなく不透明度（rgba）を使用している（一貫性がない）
• 体系的な色合いの段階がない（明暗のバリエーションが場当たり的）
• アクセシビリティに必要なコントラストが不足している

パレットの構成

グレー（8～10色）

UI の大部分はグレーです。必要だと思う以上の色数を用意しましょう。

White / Near-white: #FFFFFF, #F9FAFB
Gray 100: #F3F4F6 - Subtle backgrounds
Gray 200: #E5E7EB - Borders, dividers
Gray 300: #D1D5DB - Disabled states
Gray 400: #9CA3AF - Placeholder text
Gray 500: #6B7280 - Secondary text
Gray 600: #4B5563 - Body text
Gray 700: #374151 - Strong text
Gray 800: #1F2937 - Headings
Gray 900: #111827 - Near-black text

暗いグレー（純粋な黒ではありません）から始め、一定の間隔で白まで段階的に明るくしていきます。

プライマリーカラー（5～10色）

サイト全体の印象を決める1～2色です。

Primary 50: Ultra-light (alert backgrounds)
Primary 100: Very light (subtle backgrounds)
Primary 200-300: Light (hover states)
Primary 400-500: Base (buttons, links)
Primary 600-700: Dark (hover text, emphasis)
Primary 800-900: Very dark (text on light)

アクセントカラー（各5～10色）

注目を集めたり、意味を伝えたりするために控えめに使用します。

色	使用例
赤	破壊的なアクション、エラー、警告
黄／アンバー	新機能、注意、強調
緑	成功、好ましい傾向、確認
ティール／ピンク／紫	機能の強調、カテゴリ分類、カレンダー

各アクセントカラーにも、プライマリーカラーと同様に5～10色の色合いが必要です。

使用する視覚・UX の指標

1. 色合いの段階：明るい色から暗い色まで一定の間隔で変化
2. グレーが主体：グレーを基盤とし、色はアクセントとして使用
3. セマンティックな意味：赤＝危険、緑＝成功、黄＝警告／機能
4. コントラスト比：コントラストが高いほど、重要度または読みやすさが高い
5. 控えめに使用：プライマリーカラーとアクセントカラーは意図的に使い、あらゆる場所には使用しない

よくある失敗

失敗	説明	対処法
5色ジェネレーター	UI 全体に5つの16進数カラーコードしか使用しない	グレー8～10色、プライマリーの色合い5～10色、アクセントの色合い5～10色からなる包括的なパレットを構築する
グレーが少なすぎる	グレーが3～4色しかなく、妥協が必要になる	ほぼ白からほぼ黒まで、グレーを8～10色に増やす
色合いに不透明度を使用	rgba() で明るい色や暗い色を作る	一貫性を保つため、色合いをあらかじめ明示的な16進数で定義する
ホバー状態がない	インタラクション用の明るい色や暗い色のバリエーションがない	インタラクティブな各色に5～10色の色合いを用意する
セマンティックカラーがない	ブランドカラーしかなく、赤／黄／緑がない	エラー、警告、成功用のアクセントカラーを追加する
アクセントの色合いが少なすぎる	赤／緑／黄がそれぞれ1色しかない	柔軟に使えるよう、各アクセントカラーに5～10色の色合いを用意する
テキストに純粋な黒を使用	#000000 を使用する（刺激が強い）	#111827 または #1F2937 から始める

前提条件

• ブランドガイドラインまたはベースカラー
• UI の状態（エラー、成功、ホバーなど）に関する理解
• カテゴリー別のニーズ（チャート、タグなど）に関する知識

依存関係

• establish-visual-hierarchy（色は階層をサポートします）
• manage-color-contrast（アクセシビリティ要件）

Refactoring UI の参考項目

• 「思っているより多くの色が必要です」
• 「色の明度をあらかじめ定義しましょう」
• 「UI の大半はグレーです」
• 「不透明度を使って色を明るくしないでください」
• 「5 つのカラーコードではなく、包括的なパレットを作りましょう」

色の明度の定義方法

各色について、HSL の明度を調整して明度の段階を定義します。

• 極めて明るい色：明度 95～98％（背景）
• 明るい色：明度 80～90％（ホバー時の背景）
• ベースカラー：明度 45～55％（ボタン、リンク）
• 暗い色：明度 20～35％（テキスト、強調）
• 極めて暗い色：明度 10～15％（見出し）

評価例

入力： ブランドブルー #0066FF、ライトブルー #E6F2FF、白、グレー #999999、黒のみのパレット

評価： 不合格

• ブルーが 2 段階のみ（5～10 段階必要）
• グレーが 1 色のみ（8～10 色必要）
• セマンティックカラー（赤、黄、緑）が不足
• アクセントカラーの明度が不足

推奨事項： 包括的なパレットを作成しましょう。

グレー（10 色）： #F9FAFB, #F3F4F6, #E5E7EB, #D1D5DB, #9CA3AF, #6B7280, #4B5563, #374151, #1F2937, #111827

プライマリーブルー（8 色）： #EFF6FF, #DBEAFE, #BFDBFE, #93C5FD, #60A5FA, #3B82F6, #2563EB, #1D4ED8

アクセントカラー（各 7～8 色）：

• 赤：#FEF2F2... #991B1B（エラー、破壊的操作用）
• 黄：#FFFBEB... #92400E（警告、新機能用）
• 緑：#F0FDF4... #166534（成功、ポジティブな状態用）

合計：グレー 10 色＋プライマリー 8 色＋アクセント 21 色＝体系的に整理された 39 段階