colorize

単色で退屈な、または視覚的な興味に欠けるデザインに戦略的に色を導入し、インターフェースをより魅力的で表現力豊かにします。

必須準備

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

---

カラー機会の評価

現在の状態を分析し、機会を特定します。

1. 現在の状態を理解する:

   • 色の欠如: 純粋なグレースケール? 限定的なニュートラルカラー? 控えめな単一アクセント?
   • 見落とされた機会: 色が意味、階層構造、または喜びをもたらせる場所はどこか?
   • コンテキスト: このドメインと対象ユーザーにとって何が適切か?
   • ブランド: 使用すべき既存のブランドカラーはあるか?

2. 色が価値を添える場所を特定する:

   • セマンティック意味: 成功(緑)、エラー(赤)、警告(黄/オレンジ)、情報(青)
   • 階層構造: 重要な要素への注目を集める
   • カテゴリ化: 異なるセクション、タイプ、または状態
   • 感情的なトーン: 温かみ、エネルギー、信頼性、創造性
   • ナビゲーション: ユーザーが構造をナビゲートして理解するのを支援する
   • 喜び: 視覚的な興味とパーソナリティの瞬間

これらのいずれかがコードベースから不明確な場合は、立ち止まり、AskUserQuestion ツールを呼び出して明確にしてください。

重要: 色が多い = より良い、ではありません。戦略的な色はレインボーの過剰使用に勝ります。すべての色に目的があるべきです。

カラー戦略を計画する

目的のある色導入計画を作成します。

• カラーパレット: ブランド/コンテキストに合う色は何か? (ニュートラルカラー以外で最大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 標準を満たしていますか?
• 圧倒的でない: 色はバランスが取れていて目的がありますか?

覚えておいてください: 色は感情的で強力です。温かみを作成し、注目を集め、意味を伝え、パーソナリティを表現するために使用します。ただし、飽和度と多様性よりも抑制と戦略が重要です。色彩豊かに、ただし意図的に。