colorize

単調すぎるデザイン、グレー一色のデザイン、または視覚的な温かみや個性に欠けるデザインに、色を戦略的に取り入れます。

必須の準備

/impeccable を実行してください。デザインの原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を始める前にこのプロトコルに従ってください。デザインのコンテキストがまだ存在しない場合は、必ず最初に /impeccable teach を実行してください。さらに、既存のブランドカラーも確認します。

---

色を活かせる箇所を見極める

現在の状態を分析し、色を活かせる箇所を特定します。

1. 現在の状態を把握する：

   • 色の欠如：完全なグレースケールですか？ニュートラルカラーが限られていますか？控えめなアクセントカラーが1色だけですか？
   • 活用できていない機会：色を加えることで、意味や階層、楽しさを生み出せるのはどこですか？
   • コンテキスト：この分野や対象ユーザーに適しているのはどのような色ですか？
   • ブランド：使用すべき既存のブランドカラーはありますか？

2. 色が価値を生む箇所を特定する：

   • 意味づけ：成功（緑）、エラー（赤）、警告（黄／オレンジ）、情報（青）
   • 階層：重要な要素に注目を集める
   • 分類：セクション、種類、状態を区別する
   • 感情的なトーン：温かみ、活気、信頼、創造性
   • 道案内：ユーザーが移動し、構造を理解しやすくする
   • 楽しさ：視覚的な面白さや個性を生み出す

コードベースから判断できない点があれば、推測できない内容をユーザーに直接質問して明確にします。

重要：色が多いほど良いわけではありません。毎回、無秩序に色を使うより、戦略的に使うほうが効果的です。どの色にも目的が必要です。

色の方針を立てる

目的に沿った色の導入計画を作成します。

• カラーパレット：ブランドやコンテキストに合う色は何ですか？（ニュートラルカラー以外は最大2～4色にします）
• 支配色：色を使う要素の60％を占める色はどれですか？
• アクセントカラー：コントラストや強調に使う色はどれですか？（30％と10％）
• 適用方針：それぞれの色をどこに、なぜ使いますか？

重要：色は階層や意味を際立たせるために使い、混乱を招いてはいけません。重要な場面では、控えめに使うことが大切です。

戦略的に色を取り入れる

次の各要素に、体系的に色を加えます。

意味を表す色

• 状態表示：

  • 成功：緑系（エメラルド、フォレスト、ミント）
  • エラー：赤／ピンク系（ローズ、クリムゾン、コーラル）
  • 警告：オレンジ／アンバー系
  • 情報：青系（スカイ、オーシャン、インディゴ）
  • ニュートラル：非アクティブ状態にはグレー／スレート

• ステータスバッジ：状態（アクティブ、保留中、完了など）を背景色や境界線の色で示します

• 進捗インジケーター：完了度や健全性を示す色付きのバー、リング、グラフ

アクセントカラーの適用

• 主要なアクション：最も重要なボタン／CTAに色を付けます
• リンク：クリック可能なテキストに色を付けます（アクセシビリティを維持します）
• アイコン：主要なアイコンに色を付け、認識しやすさと個性を高めます
• ヘッダー／タイトル：セクションのヘッダーや重要なラベルに色を加えます
• ホバー状態：操作に応じて色を加えます

背景とサーフェス

• 色味のある背景：純粋なグレー（#f5f5f5）を、温かみのあるニュートラルカラー（oklch(97% 0.01 60)）や寒色系の色味（oklch(97% 0.01 250)）に置き換えます
• 色付きセクション：控えめな背景色で領域を区切ります
• グラデーション背景：控えめで意図的なグラデーションを使って奥行きを加えます（ありがちな紫から青へのグラデーションは避けます）
• カードとサーフェス：カードやサーフェスにわずかな色味を加えて、温かみを出します

色には OKLCH を使用してください。知覚的に均一な色空間なので、明度の変化が同じなら見た目にも同じ程度の変化になります。調和の取れた色階調を作るのに適しています。

データの可視化

• チャートとグラフ：色でカテゴリや値を表します
• ヒートマップ：色の強さで密度や重要度を示します
• 比較：異なるデータセットや期間を色分けします

境界線とアクセント

• アクセント境界線：カードやセクションの左側または上部に色付きの境界線を加えます
• 下線：強調表示やアクティブ状態を示す下線に色を付けます
• 区切り線：グレーの線ではなく、控えめな色付きの区切り線を使います
• フォーカスリング：ブランドカラーに合わせた色付きのフォーカスインジケーターを使います

タイポグラフィの色

• 色付きの見出し：セクション見出しにブランドカラーを使います（コントラストを保ちます）
• テキストの強調：強調やカテゴリ分けに色を使います
• ラベルとタグ：メタデータやカテゴリを示す小さな色付きラベルを使います

装飾要素

• イラスト：色付きのイラストやアイコンを追加します
• 図形：背景要素として、ブランドカラーの幾何学図形を使います
• グラデーション：カラフルなグラデーションオーバーレイやメッシュ背景を使います
• ブロブ／有機的な形状：視覚的なアクセントとして、柔らかな色付きの形状を使います

バランスと洗練

色を加えることで、見た目が圧迫されるのではなく、改善されるようにします。

階層を保つ

• メインカラー（60％）：主要なブランドカラー、または最もよく使うアクセントカラー
• セカンダリーカラー（30％）：変化をつけるための補助色
• アクセントカラー（10％）：重要な箇所に使う高コントラストの色
• ニュートラルカラー（残り）：構成を整えるグレー、黒、白

アクセシビリティ

• コントラスト比：WCAGへの準拠を確保します（テキストは4.5:1、UIコンポーネントは3:1）
• 色だけに頼らない：色とあわせてアイコン、ラベル、パターンを使います
• 色覚特性への対応をテストする：赤と緑の組み合わせがすべてのユーザーにとって機能することを確認します

一貫性

• 一貫したパレット：任意の色を選ぶのではなく、定義済みのパレットの色を使います
• 体系的な適用：同じ色は常に同じ意味で使います（緑は常に成功を表します）
• 色温度の一貫性：暖色系のパレットは暖色系に、寒色系は寒色系に保ちます

絶対に避けること：

• 虹のようにあらゆる色を使う（ニュートラルカラー以外は2～4色に絞ります）
• 意味づけなくランダムに色を使う
• 色付きの背景にグレーのテキストを置く（色が薄く見えます）。代わりに、背景色の濃い色合いや透明色を使います
• ニュートラルカラーに純粋なグレーを使う（洗練された印象にするため、暖色または寒色の色味をわずかに加えます）
• 広い領域に純粋な黒（#000）や純粋な白（#fff）を使う
• WCAGのコントラスト要件に違反する
• 色だけを指標として使う（アクセシビリティ上の問題になります）
• すべてをカラフルにする（色を使う目的が損なわれます）
• 紫から青へのグラデーションを安易に使う（AIらしい凡庸な見た目になります）

色の追加を確認する

色を加えることで体験が改善されているかテストします。

• 階層が明確になる：色が適切に注意を誘導していますか？
• 意味が伝わりやすくなる：色が状態やカテゴリの理解に役立っていますか？
• 魅力が増す：インターフェースがより温かく、親しみやすく感じられますか？
• アクセシビリティが保たれる：すべての色の組み合わせがWCAG基準を満たしていますか？
• 圧迫感がない：色のバランスが取れ、意図を持って使われていますか？

色は感情に訴えかける強力な要素です。温かみを生み、注意を誘導し、意味を伝え、個性を表現するために使いましょう。ただし、彩度や多様性よりも、節度と戦略が重要です。カラフルにしつつ、意図を持って使いましょう。