color-palette

カラーパレットの作成

概要

このスキルは、一般的な AI 生成デザインとは一線を画す、独自性がありアクセシブルな UI およびウェブデザイン向けカラーパレットの作成を支援します。色彩理論のガイダンス、ドメイン別に厳選された例、アクセシビリティ検証ツール、よく使われるパターンを避けるための戦略を提供します。

このスキルを使う場面

次のような場合にこのスキルを使います：

• ウェブサイト、アプリ、デジタルインターフェース向けのカラーパレットをデザインするとき
• 特定のドメインや業界向けの配色を求められたとき
• デザインシステムやスタイルガイドを構築するとき
• アクセシビリティ要件（WCAG AA/AAA）への準拠を確認するとき
• ありきたりな「AI らしい」デザインから脱却するとき
• 既存の色の選択を検証する必要があるとき

ワークフロー

ステップ 1：背景と要件を把握する

色を選択または生成する前に、重要な背景情報を集めます。

ドメイン／業界に関する質問：

• どの業界またはドメイン向けですか？（テクノロジー／SaaS、E コマース、ヘルスケア、金融、クリエイティブ、食品など）
• パレットでどのような感情や連想を伝えたいですか？
• 活用または拡張できる既存のブランドカラーはありますか？

技術要件：

• ライトモード、ダークモード、または両方ですか？
• アクセシビリティ要件はありますか？（最低限 WCAG AA、できれば AAA）
• 必要な色数はいくつですか？（通常：プライマリー 1～2 色、セカンダリー 1～2 色、アクセント 1～2 色、ニュートラルのフルスケール、セマンティックカラー）

独自性の目標：

• 「AI 生成」に見えないようにしますか？
• 避けたい色や色の組み合わせはありますか？
• 暖色系と寒色系のどちらが好みですか？

ステップ 2：基本アプローチを選択する

背景に基づいて、次のアプローチから選択します。

アプローチ A：ドメイン別に厳選されたパレット

使用する場面： 業界／ドメインが明確で、効果が実証された組み合わせを使いたい場合

手順：

1. references/color-palette-ui-design-reference.md を読み、該当するドメインのセクションに注目します
2. そのドメインのパレット候補を 2～3 個提示します
3. それぞれが効果的な理由を説明します
4. 必要に応じて選択されたパレットを調整します

ドメインの例：

• テクノロジー／SaaS：信頼性と安定性、モダンミニマル、プロフェッショナルなダッシュボード、ダークモード
• E コマース：ファッション、美容、スポーツ、ホーム、ラグジュアリー
• ヘルスケア：落ち着いたプロフェッショナルな印象、癒やし系アプリ、メンタルヘルス／ウェルネス
• 金融：従来型の銀行、モダンなフィンテック、投資プラットフォーム
• クリエイティブ／ポートフォリオ：大胆でモダン、ミニマリスト、芸術的、開発者向けポートフォリオ
• 食品／レストラン：暖かく食欲をそそる印象、デリバリーアプリ、オーガニック、高級感

アプローチ B：ブランドカラーから生成する

使用する場面： 既存のブランドカラーを起点に、完全なシステムを構築する必要がある場合

手順：

1. scripts/generate_palette.py を使ってカラースケールを作成します：

   python scripts/generate_palette.py #3B82F6 scale
   

2. 色彩理論を使って調和する色を生成します：

   python scripts/generate_palette.py #3B82F6 complementary
   python scripts/generate_palette.py #3B82F6 triadic
   python scripts/generate_palette.py #3B82F6 analogous
   

3. コントラスト比を検証します（ステップ 3）
4. 60-30-10 ルールを適用します（リファレンスドキュメントを参照）

アプローチ C：インスピレーションをもとにしたカスタムパレット

使用する場面： 独自性のあるユニークなパレットが必要で、具体的なインスピレーションの源がある場合

手順：

1. ユーザーからインスピレーション（画像、アート作品、場所など）が提供された場合、その情報源から色を抽出します
2. ありきたりなパターンを避けるため、リファレンスにある「よくある AI デザインの落とし穴」のセクションを確認します
3. リファレンスドキュメントの色彩調和の原則を適用します
4. 独自性を確保するため、「AI 対策チェックリスト」を使います
5. アクセシビリティを検証します（ステップ 3）

ステップ 3：アクセシビリティを検証する

コントラストチェックスクリプトを使って、必ずコントラスト比を検証してください：

python scripts/check_contrast.py <foreground> <background> <text-size>

例：

# Check normal text on background
python scripts/check_contrast.py #1A1A1A #FFFFFF normal

# Check large text (headings)
python scripts/check_contrast.py #4A4A4A #FFFFFF large

# Check button contrast
python scripts/check_contrast.py #FFFFFF #3B82F6 normal

要件：

• 通常のテキスト：最低 4.5:1（AA）、推奨 7:1（AAA）
• 大きなテキスト（18pt 以上）：最低 3:1（AA）、推奨 4.5:1（AAA）
• UI コンポーネント（ボタン、境界線、アイコン）：最低 3:1

検証に失敗した場合：

• 前景色を暗くします
• 背景色を明るくします
• パレットジェネレーターを使って、より暗い色合いまたは明るい色合いを作成します
• 別の色の組み合わせを検討します

ステップ 4：完全なカラーシステムを構成する

デザインシステムのベストプラクティスに従って、パレットを整理します。

プライマリーカラー

• メインのブランドアイデンティティ（1～2 色）
• フルスケール（50～950 の色合い）
• 用途：ロゴ、プライマリーボタン、アクティブ状態

セカンダリーカラー

• ブランドを補完するカラー（1～3色）
• 用途に応じてフルスケールまたは一部のスケールを使用
• 用途：セカンダリーボタン、アイコン、目立たせる必要のない機能

アクセントカラー

• 注目を集めるカラー（1～2色）
• 60-30-10 ルールを適用：デザインの 10% のみに使用
• 用途：CTA、ハイライト、バッジ、通知

ニュートラルカラー

• 構成に使うグレー／ニュートラルカラー
• フルスケール（50-950）が必須
• 用途：テキスト、背景、枠線、無効状態

セマンティックカラー／機能カラー

• 成功：緑系の色合い
• エラー：赤系の色合い
• 警告：黄／オレンジ系の色合い
• 情報：青系の色合い

命名規則：

Primitive tokens: blue-500, gray-100, red-700
Semantic tokens: background-surface-primary, text-body, button-primary-background

ステップ 5：AI デザインの落とし穴を避ける

仕上げる前に、参考ドキュメントの AI 対策チェックリストに照らし合わせて確認します。

重要な確認項目：

• 白地に紫／青のグラデーションを使っていない（ブランドに適している場合を除く）
• オレンジとティールの組み合わせを使っていない
• 彩度の高いグラデーションをあらゆる場所に使っていない
• 汎用的な色ではなく、コンテキストに特化した色を含めている
• 実世界に由来するインスピレーションがある
• 特定のブランドストーリーや分野を反映している
• デフォルト値ではなく、独自の色合いを使用している

問題点が見つかった場合は、次の方法で修正します。

• 紫と青の代わりに、自然に着想を得たグラデーションを使用する
• 暗い背景にネオンカラーを使う代わりに、落ち着いたアクセントカラーを使用する
• 調和を保ちながらも意外性のある色の組み合わせを使う
• 厳選されたパレットから、業界に特化した色の参考例を使う

ステップ 6：パレットを提示する

最終的なパレットをわかりやすくまとめます。

Primary Color - [Name] (#HEX)
├─ 50:  #XXXXXX
├─ 100: #XXXXXX
├─ ...
└─ 950: #XXXXXX

Secondary Color - [Name] (#HEX)
[Similar structure]

Accent Color - [Name] (#HEX)
[Similar structure]

Neutral Colors - Gray (#HEX)
[Full scale]

Semantic Colors:
├─ Success: #XXXXXX (contrast: X.X:1)
├─ Error:   #XXXXXX (contrast: X.X:1)
├─ Warning: #XXXXXX (contrast: X.X:1)
└─ Info:    #XXXXXX (contrast: X.X:1)

含める内容：

• 色名と 16 進数値
• 主要な組み合わせのコントラスト比
• 用途のガイド（各色の用途）
• このパレットが対象分野に適している理由
• 汎用的な AI のパターンをどのように避けているか

クイックリファレンス

色彩理論における調和

補色：色相環で反対に位置する色（コントラストが高く、緊張感が最大） 類似色：隣り合う色（調和があり、滑らかで、コントラストが低い） トライアド：等間隔に配置された 3 色（鮮やかで、バランスがよい） スプリットコンプリメンタリー：ベースカラーと、その補色の両隣の 2 色（コントラストが高く、緊張感は比較的低い）

詳しい説明は、references/color-palette-ui-design-reference.md → 色彩理論の基礎を参照してください。

60-30-10 ルール

60% - ドミナントカラー（背景、主要な面） 30% - セカンダリーカラー（カード、セカンダリーサーフェス） 10% - アクセントカラー（CTA、ハイライト、注目箇所）

避けるべきよくある落とし穴

1. 紫／青のグラデーション - 最も使い古された AI のパターン
2. オレンジとティール - AI 生成とすぐにわかる組み合わせ
3. あらゆる場所で彩度を高くする - 視覚的な休息がなくなる
4. 汎用的なセマンティックカラー - 独自性のない標準的な青／緑／赤
5. テンプレート思考 - 特定のコンテキストを考慮しない

リソース

scripts/check_contrast.py - WCAG コントラスト比を検証 scripts/generate_palette.py - カラースケールと調和を生成 references/color-palette-ui-design-reference.md - 以下を含む包括的なガイド：

• 色彩理論の基礎
• 色彩心理学
• 分野別に厳選された 60 以上のパレット例
• デザインシステムのアプローチ（Material Design、Tailwind、Ant Design）
• アクセシビリティのガイドライン
• AI 対策のデザイン戦略

例

例 1：テック系 SaaS ダッシュボード

ユーザーの依頼：「B2B SaaS 分析ダッシュボード向けに、プロフェッショナルなカラーパレットを作成してください」

手順：

1. 参考資料からテック／SaaS のセクションを読む
2. ベースとして「Professional SaaS Dashboard」パレットを選ぶ
3. コントラスト比を検証する
4. ジェネレーターを使ってフルスケールに拡張する

出力：

Primary: Professional Blue (#0072BB)
├─ Use for: Primary actions, active states, links
└─ Contrast validated: 4.6:1 on white background ✓

Secondary: Dark Navy (#28324E)
├─ Use for: Headers, important text, secondary buttons
└─ Contrast validated: 12.4:1 on white background ✓

Success: Soft Green (#77D38C)
Warning: Amber (#F0AD4E)
Error: Muted Red (#C1666B)

Neutral: Blue-Gray scale (#B5BDD7 to #28324E)

Why this works:
- Calm blue conveys trust and professionalism
- Muted semantic colors don't overwhelm data visualizations
- Full blue-gray neutral scale maintains cohesive color temperature
- Avoids purple-gradient cliche while staying professional

例 2：ファッション系 E コマースサイト

ユーザーの依頼：「サステナブルなファッション E コマースサイト向けに、温かみのあるアースカラーが必要です」

手順：

1. 参考資料から E コマース → ファッションとアパレルを読む
2. アースカラーのパレットを選び、サステナビリティを強調するように調整する
3. 主要な組み合わせをすべて検証する

出力：

Primary: Dark Teal (#264653)
├─ Evokes nature, sustainability, calm
└─ Use for: Navigation, primary buttons

Secondary: Living Teal (#2A9D8F)
├─ Fresh, natural, growth
└─ Use for: Highlights, hover states

Accent 1: Terracotta (#E76F51)
├─ Warm, earthy, organic
└─ Use for: CTAs, sale badges

Accent 2: Gold (#E9C46A)
└─ Use for: Premium products, special offers

Why this avoids AI-generic:
- Uses earthy tones instead of bright tech colors
- Warm accents on cool base (intentional temperature mixing)
- Terracotta is distinctive, not overused
- Reflects real sustainable fashion brand aesthetics

例 3：ダークモードのアプリ

ユーザーのリクエスト：「クリエイティブツールアプリ向けのダークモードの配色。ありきたりな暗い背景にネオンカラーを合わせた見た目は避けたい」

プロセス：

1. 「ダークモードの SaaS」と「AI によくある落とし穴」のセクションを確認します
2. ネオンカラー一色ではなく、落ち着いたアクセントカラーを選びます
3. カスタムの色スケールを生成します
4. すべてのコントラスト比を検証します

出力：

Background: Very Dark Navy (#0A0E27)
Surface: Dark Blue-Gray (#1E2749)

Primary: Vibrant Blue (#4A9EFF)
├─ Bright enough for contrast, not neon
└─ Contrast: 8.2:1 on background ✓

Secondary: Lavender Indigo (#8B7FE8)
├─ Creative, sophisticated
└─ Contrast: 7.1:1 on background ✓

Text: Off-White (#E8EAF6)
└─ Contrast: 13.2:1 on background ✓

Why this works:
- Deep, rich backgrounds (not pure black)
- Accents are vibrant but not harsh neon
- Lavender adds creativity without purple-gradient cliche
- Excellent contrast without eye strain

成功のためのヒント

1. 必ずコンテキストから始める - ドメイン、対象ユーザー、目的を理解する前に色を選び始めないでください
2. 参考例を積極的に活用する - 厳選されたパレットは、実際の製品で検証済みです
3. 早い段階から頻繁に検証する - 最後ではなく、作成しながらコントラスト比を確認してください
4. 独自性を出す - AI によく見られるパターンを積極的に避けてください
5. ストーリーを伝える - 色の選択はすべて、ブランドのストーリーやドメインに結び付けてください
6. システム全体を考慮する - プライマリカラーだけでなく、色スケールやセマンティックカラーも含めて検討してください
7. 実際のコンテキストでテストする - 色の見え方は、画面や照明、周囲のコンテンツによって異なります

高度な使い方

画像からカラーパレットを作成する

ユーザーが参考にする画像を提供した場合：

1. 主要な色を 2～3 色、手作業で特定するか、配色を説明します
2. HEX 値を抽出するか、近似値を求めます
3. それらをパレット生成のベースカラーとして使います
4. 色彩理論を適用し、調和の取れた色を追加します
5. アクセシビリティの観点から検証し、調整します

マルチブランドの配色システム

複数のブランドやテーマを持つ製品の場合：

1. 共通のニュートラルスケールを定めます（すべてのテーマで使用）
2. ブランドごとに異なるプライマリカラーを作成します
3. すべてのテーマが同じアクセシビリティ基準を満たすようにします
4. テーマを簡単に切り替えられるよう、セマンティックなトークン名を使います
5. 各ブランドのバリエーションを使う場面を文書化します

アクセシビリティを最優先するアプローチ

AAA 準拠が求められる製品の場合：

1. コントラスト要件（通常のテキストは 7:1）から始めます
2. 条件を満たす色の組み合わせを逆算します
3. 一般的なものより暗い色や明るい色を使います
4. 色覚シミュレーターでテストします
5. オプションとしてハイコントラストモードを用意します

よくある質問

Q: 使いやすさを損なわずに、独自性のあるパレットにするにはどうすればよいですか？ A: 標準的なセマンティックカラーに、独自の色合いを使います。成功を表す色が緑であることは一般的ですが、文化やドメインに適した特徴的な色合いを選んでください。

Q: パレットジェネレーターで作った色がブランドに合いません。どうすればよいですか？ A: ジェネレーターは数学的に均一な色スケールを作成します。他のレベルはそのままに、特定のレベルを手動で調整することも、生成結果を出発点として手作業で調整することもできます。

Q: 完全なパレットには、いくつの色が必要ですか？ A: 最小構成：スケール付きのプライマリカラー 1 色、ニュートラルカラー 1 色、セマンティックカラー 4 色。標準構成：スケール付きのプライマリカラー 1～2 色、セカンダリカラー 1～2 色、アクセントカラー 1～2 色、ニュートラルカラー 1 色、セマンティックカラー 4 色。複雑な構成：複数のプライマリカラー、多数のセマンティックカラー、専用の色スケール。

Q: ユーザーが紫のグラデーションにこだわる場合はどうすればよいですか？ A: それが本当にブランドの一部であるなら、独自の紫の色合いや意外性のあるグラデーションの組み合わせ、予想外のアクセントカラーとの組み合わせを使って、特徴を出してください。既定の #6366F1 → #8B5CF6 → white のパターンは避けてください。