colorize

モノクロすぎるデザインや、グレーばかりで視覚的な温かみや個性に欠けるデザインに、戦略的に色を取り入れます。

必須の事前準備

frontend-design を読み、そのコンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、重要な情報が不足している場合にのみ質問してください。さらに、既存のブランドカラーも確認してください。

---

色を活用できる箇所を評価する

現状を分析し、色を活用できる箇所を特定します。

1. 現状を把握する：

   • 色の不在：完全なグレースケールですか？ニュートラルカラーが限られていますか？控えめなアクセントカラーが1色あるだけですか？
   • 活用の見落とし：色によって意味や階層、楽しさを加えられる箇所はどこですか？
   • コンテキスト：この分野と対象ユーザーには、どのような色が適していますか？
   • ブランド：使用すべき既存のブランドカラーはありますか？
   • 色温度：ニュートラルカラーは暖色系、寒色系、それとも意図せず生気のない印象ですか？
   • 色に頼らない階層：色を取り除いたとしても、インターフェースは明確ですか？

2. 色が価値を加える箇所を特定する：

   • 意味の表現：成功（緑）、エラー（赤）、警告（黄／オレンジ）、情報（青）
   • 階層：重要な要素に注意を引きます
   • 分類：セクション、種類、状態を区別します
   • 感情的なトーン：温かみ、活気、信頼、創造性
   • 道案内：ユーザーが構造を把握し、移動するのを助けます
   • 楽しさ：視覚的な面白さや個性を加える場面

コードベースから判断できない点がある場合は、推測できない内容を明らかにするため、ユーザーに直接確認してください。

重要：色を増やせばよいというわけではありません。毎回、色を無秩序に使うよりも、戦略的に使うほうが効果的です。すべての色に目的を持たせてください。色は既存の階層を補強するものであり、置き換えるものではありません。

色の戦略を計画する

目的を持った色の導入計画を立てます。

パレットの構成、コントラスト、色系統の選択、色温度、テーマの挙動については、color and contrast のリファレンスを参照してください。 色合い、トーン、シェード、再利用可能なカラーストップを作成または調整する必要がある場合は、color ramp workflow のリファレンスを参照してください。 色でブランドの個性だけでなく、状態、アラート、ステータスも伝える必要がある場合は、semantic color のリファレンスを参照してください。

• カラーパレット：ブランドやコンテキストに合う色は何ですか？（ニュートラルカラー以外は最大2～4色にします）
• パレットの配色関係：モノクロマティック、類似色、補色、三色配色のうち、どれが適していますか？
• 支配色：色を使う要素の60％を占める色はどれですか？
• アクセントカラー：コントラストや強調に使う色はどれですか？（30％と10％）
• 適用方針：それぞれの色をどこに、なぜ使いますか？
• シェードシステム：色の適用を始める前に、どのグレー、プライマリーカラーのシェード、セマンティックカラーの段階が用意されていますか？
• スキーマ：後続の画面でも一貫性を保てるよう、色の役割と使用可能な色の段階が明確に記録されていますか？

重要：色は階層や意味を高めるために使い、混乱を生まないようにしてください。重要な場面ほど、色は控えめにするのが効果的です。

適用前にパレットを作成する

最終的にパレットを OKLCH で表現する場合でも、色相、彩度、明度を意識してください。

ニュートラルスケール

• 暗いほぼ黒からオフホワイトまで、8～10色のニュートラルカラーをあらかじめ定義します
• 色味をわずかに暖色系または寒色系に調整し、生気のない印象ではなく、意図を感じさせるインターフェースにします
• 最も暗いニュートラルカラーは本文に、最も明るい色はページの背景に使います

プライマリーカラーとアクセントカラーのスケール

• ボタン、アクティブ状態、強い強調表示に使えそうなベースシェードを選びます
• テキストや高コントラストの UI に使う暗い側の色と、色付き背景に使う明るい側の色を定義します
• 各画面で即興的に選ぶのではなく、安定した5～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 色を選びます）
• 意味付けなしに色をランダムに使う
• 色付きの背景にグレーのテキストを載せる（色が薄く見えます）。代わりに、背景色の濃い色合い、または透明色を使います
• その場しのぎの明度調整ヘルパーで色合いを作り、システム化したつもりになる
• 色付きパレットを好むという理由だけで、承認済みのニュートラル、黒、白のトークンを置き換える
• WCAG のコントラスト要件に違反する
• 色だけを唯一の識別手段にする（アクセシビリティ上の問題です）
• 何もかもカラフルにする（色を使う目的が損なわれます）
• 紫から青へのグラデーションを安易に使う（AI らしさを過剰に演出する見た目です）

色の追加を検証する

色を加えることで体験が向上するかテストします。

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

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