color-theory

色彩理論

戦略的な色の選定から、アクセシブルなダークモードまで、体系的に色をデザインします。

対象範囲

次のような場合にこのスキルを使用します。配色の定義、パレットの作成、コントラストの確認、ダークモードの設計、セマンティックカラーの設定、色のデザイントークンの作成、既存のカラーコンセプトの品質監査を行う場合です。

原則

1. 色は装飾ではなく、コミュニケーション手段です

すべての色はメッセージを伝えます。色の選定は戦略的な決定です。

2. 色数を減らすほど、インパクトが強まります

プロジェクトの95％では、2〜4色で十分です。プライマリーカラー＋アクセントカラー＋ニュートラルトーンで構成します。

3. コントラストは必須です

十分なコントラストがなければ、色は効果を発揮しません。コントラストは読みやすさ、階層、アクセシビリティを左右します。

4. すべてのチャネルで一貫性を保ちます

色はどこでも同じように表示される必要があります。そのためには、名前付きトークンを含む定義済みのカラーシステムが必要です。

5. 色は雰囲気だけでなく、機能のために使います

色はステータス（赤＝エラー、緑＝成功）を示し、操作可能であることを伝え、関係性を表します。

ルール

配色の構築

• DO：最小限の配色にします。プライマリーカラー1色＋アクセントカラー1色＋ニュートラルトーン3〜5色。
• DO：各色を9〜11段階（50〜950）で展開します。
• DO：セマンティックカラーを定義します。success（緑）、warning（オレンジ）、error（赤）、info（青）。
• DO：配色の出発点として、補色、類似色、またはトライアドを使います。
• DON'T：無作為に選んだ色を使わないでください。それぞれに根拠（ブランド、機能、感情）が必要です。
• DON'T：ニュートラルトーンを除き、5色を超える有彩色を使わないでください。

カラーモデルとフォーマット

• DO：内部ではHSLを使用します（体系的な色の展開に直感的です）。
• DO：知覚的に均一な色の展開には、最新のCSSでoklch()を使います。
• DON'T：WebでCMYKを使わないでください。CMYKは印刷用です。

コントラストと読みやすさ

• DO：通常のテキスト（< 24px）：最低 4.5:1（WCAG AA）。
• DO：大きなテキスト（>= 24px / 太字で >= 18.66px）：最低 3:1（WCAG AA）。
• DO：UIコンポーネント（アイコン、境界線、フォーカス）：最低 3:1。
• DO：色覚特性（1型色覚、2型色覚、3型色覚）をシミュレーションしてテストします。
• DON'T：色だけを唯一の識別手段にしないでください。必ず第2の手がかり（アイコン、テキスト、形状）も用意します。
• DON'T：テキストや操作要素に、白い背景上の明るいパステルトーンを使わないでください。

色彩心理と効果

• DO：業界に合ったプライマリーカラーを選びます。
  • 青：信頼（金融、テクノロジー、ヘルスケア）
  • 緑：自然、成長（オーガニック、サステナビリティ）
  • 赤：エネルギー、緊急性（食品、セール）
  • 黒：高級感（ラグジュアリー、ファッション）
  • オレンジ／黄：楽観（スタートアップ、教育）
  • 紫：創造性（クリエイティブ業界、ウェルネス）
• DO：国際的なプロジェクトでは、文化による違いを考慮します。
• DON'T：意図的な差別化戦略なしに、業界の期待に反する配色にしないでください。

ダークモード

• DO：ダークモードは反転ではなく、独立した配色として設計します。
• DO：彩度を下げ、明度を中程度にしたプライマリーカラーを使います。
• DO：背景にはダークグレー（#121212〜#1E1E1E）を使い、純粋な黒（#000）は使いません。
• DO：テキストには#FFFFFFではなく#E0E0E0を使います。
• DON'T：暗い背景に彩度の高い明るい色を使わないでください。「光って」見えます。

デザイントークン

• DO：2層構成にします。プリミティブトークン（--blue-500）＋セマンティックトークン（--color-primary）。
• DO：コンポーネントではセマンティックトークンのみを使用します。
• DON'T：コンポーネントのCSSでHEX値を直接使わないでください。

パターン

パターンの詳細な説明は、references/patterns.mdを参照してください。

60-30-10ルール

支配色（背景）60％＋セカンダリーカラー（カード、ナビゲーション）30％＋アクセントカラー（CTA、強調箇所）10％。

モノクロマティック配色

1色を5〜7段階で展開します。CTAには、対照的な1色だけを使ってアクセントを加えます。

補色のコントラスト

対立する2色を使います。比重を同じにせず、必ず一方を支配色にします（60-30-10）。

セマンティックな色分け

緑＝成功、赤＝エラー、オレンジ＝警告、青＝情報を表します。これらの意味は文化を越えて定着しており、別の意味に解釈し直すことはできません。

アンチパターン

レインボーデザイン

システムのない多色使いです。解決策：60-30-10の法則を適用します。有彩色は最大5色にします。

色だけで伝える

アイコンやテキストを添えず、赤だけでエラーを示します。解決策：色とともに、必ず冗長なシグナルを用意します。

トレンドカラーを無批判に採用する

ブランドとの適合性を考慮せず、トレンドカラーをメインカラーにします。解決策：トレンドはインスピレーションとして活用し、ブランドの価値観を判断基準にします。

コントラスト違反を無視する

客観的に確認せず、「自分には問題なく見える」と判断します。解決策：ツール（WebAIM、Chrome DevTools）を使って、すべての組み合わせを確認します。

ダークモードを単純に反転する

黒と白を入れ替えます。解決策：彩度と明度を調整した、独立した配色を用意します。

チェックリスト

• 配色を定義していますか：プライマリーカラー＋アクセントカラー＋ニュートラルカラー＋セマンティックカラー？
• 有彩色は最大5色ですか？
• 60-30-10の法則を適用していますか？
• すべてのテキストと背景の組み合わせがWCAG AA（通常テキストは4.5:1、大きなテキストは3:1）を満たしていますか？
• UIコンポーネントのコントラスト比は3:1以上ですか？
• 色覚特性の違いを考慮してテストしていますか？
• 色だけを唯一のシグナルとして使っていませんか？
• デザイントークン（プリミティブ＋セマンティック）を定義していますか？
• コンポーネント内にHEX値を直接記述していませんか？
• ダークモードを独立した配色として設計していますか？
• ダークモードの背景色は#121212-#1E1E1Eですか（#000ではありませんか）？
• 色彩心理を業界に適した形で活用していますか？

相互参照

• ui-design -- レイアウトにおける階層化の手段としての色
• web-typography -- テキストの色とコントラスト比
• accessibility -- WCAGのコントラスト要件の詳細
• branding-identity -- ブランドアイデンティティとしての色
• visual-direction -- 現在の色のトレンド
• design-trends -- 受賞歴のあるウェブサイトに見られる色のトレンド