colorize

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

必須の準備

ユーザーは /colorize を使ってこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込みます。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前に、このプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず先に $setup を読み込んでください。さらに、既存のブランドカラーも確認します。

---

色を取り入れる機会を評価する

現在の状態を分析し、色を取り入れる機会を特定します。

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

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

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

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

コードベースから判断できない点があれば、推測できないことについてユーザーに直接確認してください。

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

色の戦略を計画する

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

パレットの構成、コントラスト、色相ファミリーの選択、色温度、テーマの挙動については、色とコントラストのリファレンスを参照してください。 色の淡色、トーン、濃色、再利用可能な色の段階を構築または修復する必要がある場合は、カラースケールのワークフローのリファレンスを参照してください。 色でブランドの個性だけでなく状態、アラート、ステータスも伝える必要がある場合は、セマンティックカラーのリファレンスを参照してください。

• カラーパレット：ブランドやコンテキストに合う色は何ですか？（ニュートラルカラー以外は最大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 色を選んでください）
• 意味を持たせずに色をランダムに適用する
• 色付きの背景にグレーのテキストを載せる（色あせたように見えます）。代わりに、背景色の濃い色合い、または透明色を使ってください
• その場しのぎの明度調整ヘルパーで色合いを作り、システムと呼ぶ
• ニュートラルカラーに純粋なグレーを使う（洗練された印象にするため、ほのかな暖色または寒色の色味を加えてください）
• 広い領域に純粋な黒（#000）または純粋な白（#fff）を使う
• WCAG のコントラスト要件に違反する
• 色だけを唯一の識別手段にする（アクセシビリティ上の問題になります）
• あらゆるものをカラフルにする（色を使う意味がなくなります）
• 紫から青へのグラデーションを安易に使う（AI らしさを狙った安っぽいデザインになります）

色の追加を検証する

色を加えることで体験が向上するか、テストしてください。

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

色は感情に訴え、大きな力を持ちます。温かみを生み、注意を誘導し、意味を伝え、個性を表現するために活用してください。ただし、彩度や多様性よりも、節度と戦略が重要です。色を使いながらも、意図を持って使いましょう。