mcpField
B
brand-color-psychology

brand-color-psychology

github.com/mike-coulbournデザイン・UI45304 回インストール4 週間前に更新
リポジトリ

brand-color-psychology について

心理、利用文脈、差別化、実務上の制約に基づいてブランドパレットを作る参考スキルです。ブランドやデザイン業務向けに、配色バランス、色指定、文化的適合性、アクセシビリティの枠組みを示します。

主な機能

  1. 01文脈に基づく色の解釈
  2. 0260-30-10の配色比率
  3. 03ブランドアーキタイプ別の色設計
  4. 04色彩調和のパターン
  5. 05競合色の空白領域分析
  6. 06アクセシビリティと文化の確認

活用シーン

  1. 01ブランドカラーパレットの開発
  2. 02競合を調査して視覚的な空白を探す
  3. 03印刷・デジタル用の色指定を記録
  4. 04コントラストと文化的適合性の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mike-coulbourn/claude-vibes --skill brand-color-psychology

インストール後、Claude Code で/brand-color-psychologyを入力して読み込まれたか確認します。

同梱ファイルreference/templates.md

詳細

ブランドカラーの心理学と戦略的なパレット開発

心理学、差別化、実用的な応用に基づいて戦略的なブランドカラーパレットを開発するためのクイックリファレンスです。

「製品についての直感的な判断の62~90%は、色だけに基づいています。」 — Satyendra Singh, Management Decision (2006)

「色を一貫して使用すると、ブランド認知度が最大80%向上する可能性があります。」 — Reboot Online Study

「ブランドの文脈に色が適切であることが、最も重要な要素である可能性があります。」 — Help Scout Research


主な統計

指標値意味
色に基づく第一印象90%色は瞬時に印象を生み出します
一貫した色使いによるブランド認知度80%一貫性は時間とともに効果を高めます
色に基づく直感的な判断62-90%色が第一印象を形作ります
判断が形成されるまでの時間90秒90秒ルールでは色が重要な役割を果たします

基本的なフレームワーク

1. 色と文脈の理論(Elliot & Maier)

基本原則: 色の効果は普遍的でも恣意的でもありません。文脈に左右されます。

主な原則:

  1. 色の意味は心理的な文脈によって変わります
  2. 反応には生物学的なものも、繰り返しの組み合わせを通じて学習されるものもあります
  3. 色相だけでなく、明度と彩度も重要です
  4. 同じ色でも、文脈が異なれば異なる反応を引き起こします

例: セールのバナーでの赤は、緊急性を表します。ヘルスアプリでの赤は、危険や警告を表します。バレンタインでの赤は、愛や情熱を表します。意味は文脈によって決まります。

使用する場面: ブランド固有の文脈、オーディエンス、業界における色の意味について、戦略的な判断を行うときです。


2. 適切性の原則

重要なポイント: 色の効果は、ブランド、製品、文脈との適合性がどう認識されるかによって決まります。

理論上「より良い」色でも、違和感があれば、「適切な」色の方が効果を発揮します。

  • 信頼のシグナルが期待される金融業界では、青が効果を発揮します
  • 子ども向けのキャンディブランドでは、青が効果を発揮しない場合があります
  • 適合性 > 理論

意味: 「これは良い色か?」ではなく、「この色は、このブランドの、この文脈に合っているか?」と問いかけましょう。


3. 60-30-10のルール

視覚的なバランスと階層を生み出す、色の配分フレームワークです。

割合役割用途
60%主役/ベースニュートラルカラー。背景や広い領域
30%セカンダリーメインのブランドカラー。ヘッダーやナビゲーション
10%アクセントコントラストの高いCTAや強調箇所

効果がある理由: 視覚的な階層を生み出しつつ、圧迫感を与えません。アクセントカラーで必要な箇所に的確に注目を集められます。

使用する場面: ウェブサイト、パッケージ、マーケティング資料、アプリのインターフェースなど、あらゆるブランド展開で使用します。


4. ブランドアーキタイプのカラーフレームワーク

各ブランドアーキタイプには、個性を強調する色のパレットがあります。

アーキタイプ色のイメージ心理的効果
Hero鮮やかな赤、青、ゴールド、黒力強さ、強さ、達成
Sage青、落ち着いた色調、グレー、白知恵、知識、信頼
Outlaw黒、赤、エレクトリックカラー反抗、破壊、危険
Innocentパステルカラー、白、ベビーブルー、淡い黄色楽観、純粋さ、シンプルさ
Explorerアースカラーの緑、茶、オレンジ、青冒険、自由、発見
Caregiver柔らかな青、緑、温かみのあるアースカラー育むこと、信頼、思いやり
Creator鮮やかで型破りな色の組み合わせ革新、自己表現
Ruler深い紫、ゴールド、黒、ネイビー権威、贅沢、支配
Magician紫、深い青、神秘的な色調変革、ビジョン、想像力
Lover赤、ピンク、温かみのある色、官能的な色情熱、親密さ、享楽
Jester鮮やかで遊び心のある多色の組み合わせ楽しさ、ユーモア、 spontaneity
Everymanアースカラー、親しみやすい色、青、緑親近感、帰属意識、信頼

使用するタイミング: ブランドの個性とアーキタイプのポジショニングを定義した後です。


5. 色彩調和のシステム

伝統的な色彩理論(Isaac Newton の Opticks)に基づいています。

配色説明最適な用途
Monochromatic1つの色相に明度、暗度、トーンを加える洗練された一体感のある印象(Spotify の緑)
Complementary色相環で正反対に位置する色(青/オレンジ、赤/緑)最大限のコントラストと視覚的なインパクト(控えめに使用)
Analogous隣り合う3色(青、緑、ティール)調和のとれた落ち着きのあるパレット
Triadic色相環上で等間隔(120°)に配置された3色鮮やかでバランスがよい配色。1色をメインに、他をアクセントとして使用
Split-Complementaryベースカラーと、その補色の両隣にある2色緊張感を抑えつつ、良好なコントラストを実現

使用するタイミング: メインカラーを選んだ後、サブカラーとアクセントカラーを選定するときです。


ブルーオーシャンのカラー戦略

Kim と Mauborgne のブルーオーシャン戦略から着想を得て、競合のいないビジュアル領域を見つけます。

プロセス
  1. カテゴリーを調査する:主要な競合他社はどのような色を使っていますか?
  2. 空白を特定する:使われていない、または活用が不十分な色は何ですか?
  3. 適合性を評価する:代替の色は、ブランドの個性やオーディエンスの期待に合っていますか?
  4. 領域を試す:その色の領域を、説得力をもって自社のものにできますか?
成功事例
ブランド戦略結果
Lufthansa青/赤が多い航空業界で黄色を採用世界的に認知される差別化を実現
T-Mobile通信業界でマゼンタを採用青/赤を使う競合他社との差別化により、瞬時に認識
Apple黒/グレーが多い業界で白/シルバーを採用純粋さとデザイン重視の姿勢を伝達
ING保守的な青が主流の銀行業界でオレンジを採用革新性と親しみやすさを表現
Tiffany & Co.PMS 1837(商標登録済み)ロゴがなくても、色だけで認識される

重要なポイント: 業界の色の慣習に従うのは安全に思えますが、戦略的に差別化することで、より大きな価値が生まれることがよくあります。


カラー仕様システム

すべてのブランドカラーを、次の4つのシステムで記録します。

システム説明用途形式の例
HEXRGBを表す6桁のコードウェブ開発、CSS#FF0000
RGB赤、緑、青の値デジタル画面、アプリrgb(255, 0, 0)
CMYKシアン、マゼンタ、イエロー、ブラック印刷物C:0 M:100 Y:100 K:0
Pantone標準化された特色ブランドの一貫性、高品質な印刷PMS 485 C

重要な注意事項:

  • RGBは最も広い色域を持ちます。印刷では再現できない色もあります
  • CMYKの色域はより狭いため、デジタルで鮮やかな色が印刷ではくすんで見えることがあります
  • Pantoneカラーの約30%は、CMYKで再現できません
  • 一部のPantoneカラーは商標登録されています(Tiffany Blue PMS 1837、UPS Brown、Barbie Pink)

業界別の慣例

テクノロジーと金融
  • 主流: 青(信頼、安定性、能力)
  • 主な使用企業: IBM、Facebook、Chase、LinkedIn
  • 差別化の機会: 紫(Twitch)、緑(Robinhood)、マゼンタ(T-Mobile)
ヘルスケアとウェルネス
  • 主流: 青(信頼)、緑(癒やし、落ち着き)
  • 活用方法: 寒色は患者の不安を軽減します
食品・飲料
  • 主流: 赤、黄、オレンジ
  • 科学的根拠: 暖色は食欲と迅速な意思決定を促します
高級・プレミアム
  • 主流: 黒、ゴールド、濃紺、白
  • 活用方法: メタリックなアクセントを取り入れた控えめな配色が適しています。シンプルなほど効果的です
環境・サステナビリティ
  • 主流: 緑、アースカラー(茶、ベージュ)
  • 主な使用企業: Whole Foods、Patagonia

文化による色の考慮事項

色の意味は文化によって大きく異なります。

色西洋東洋・アジア中東
白純潔、結婚式喪、死純潔、平和
赤危険、緊急、愛幸運、繁栄危険、注意
緑自然、成長若さ、豊穣イスラム教、楽園
黄幸福、警告勇気、王権(日本)幸福
黒洗練、喪権力、健康(中国)神秘、悪
青信頼、落ち着き不死(中国)保護

留意点: 常に、対象となるすべての市場で色の意味を調査してください。必要に応じて調整できるように準備しておきましょう。


アクセシビリティ要件

WCAGのコントラスト比
基準比率用途
AA(最低)4.5:1通常のテキスト
AA(最低)3:1大きなテキスト(18pt以上)
AAA(強化)7:1通常のテキスト
AAA(強化)4.5:1大きなテキスト
色覚特性への配慮
  • 人口の約5%に、何らかの色覚特性があります
  • 1型色覚(赤色覚異常)、2型色覚(緑色覚異常)、3型色覚(青色覚異常)でテストしてください
  • 色だけを唯一の手がかりにしてはいけません。 必ずアイコン、テキスト、またはパターンを併用してください
テストツール

よくある間違い

間違いうまくいかない理由代わりにすること
色を6色以上使う認識が薄れ、維持が困難になります明確な階層を設け、3~5色に絞ります
競合他社を模倣する差別化できず、埋もれてしまいます競合を調査し、戦略的な空白を見つけます
アクセシビリティを無視するユーザーの約5%(色覚異常のある方)を除外してしまいますコントラストをテストし、色だけに頼らないようにします
トレンドを追いかけるトレンドはすぐに古くなり、2~3年後にブランド変更が必要になります価値観に合った、時代に左右されない色を選びます
個人的な好みを優先する創業者の好みとオーディエンスの心理は一致しませんオーディエンスを調査し、データに基づいて判断します
文化による色の意味の違いを無視する西洋での意味と世界各地での意味は異なりますターゲット市場を調査し、必要に応じて調整します
一貫性のない適用認識を損ない、プロフェッショナルさに欠けた印象を与えますHEX、RGB、CMYK、Pantone の仕様を文書化します

重要な考え方

認知は時間とともに積み重なる

Coca-Cola の赤は、当初は特別な色ではありませんでした。何十年にもわたって一貫して使われたことで、象徴的な色になりました。一貫性が認知を築きます。

彩度と明度が重要です
  • 明るく、彩度が高い=エネルギッシュで若々しい
  • くすんでいて、彩度が低い=洗練され、成熟した印象
  • 色相は要素の一つにすぎません
シンプルさは展開しやすさにつながります

複雑なカラーパレットは管理された環境では機能しますが、実際の適用では破綻します。パレットがシンプルであるほど、一貫して適用しやすくなります。

90秒ルール

人は90秒以内に製品の印象を形成し、その評価の62~90%は色に基づいています。色は第一印象を決めます。


テンプレート

ワークシートへの記入、判断内容の文書化、最終的な文章の作成など、ユーザーが保存する成果物を作成する場合は、reference/templates.md を読んでください。概念的な質問や簡単な推奨事項の場合は、必要ありません。このファイルには目次があるため、必要なテンプレートだけを読み込んでください。

  • カラーパレット文書化テンプレート(出力構成全体)
  • 競合の色の監査テンプレート
  • アクセシビリティテストチェックリスト
  • 色彩心理に基づく根拠のテンプレート

この知識を活用する場面

戦略フェーズ
  • ブランドの個性に基づいて、アーキタイプカラーのフレームワークを適用します
  • 業界との適合性について、適切性の原則を考慮します
  • 特定の用途に、色彩の文脈理論を適用します
競合分析
  • ブルーオーシャン・カラー戦略のプロセスを使用します
  • 主流の色と、まだ活用されていない色の領域を特定します
  • 差別化の機会を見つけます
パレットの開発
  • 二次色には、カラーハーモニーの手法を適用します
  • 配色比率には、60-30-10ルールを使用します
  • 4つすべてのシステム(HEX、RGB、CMYK、Pantone)で指定します
検証
  • WCAG のコントラスト比をテストします
  • 色覚異常をシミュレートします
  • ターゲット市場における文化的な意味合いを確認します
  • よくある間違いのチェックリストに照らして確認します

重要な原則

  1. 好みより適切さを優先する:色はブランドの文脈に「合って」いなければなりません
  2. 意味は文脈によって決まる:同じ色でも反応は異なります
  3. 差別化が価値を生み出す:色にもブルーオーシャンの考え方を取り入れます
  4. 一貫性が認知を築く:認知は時間とともに積み重なります
  5. シンプルさは展開しやすさにつながる:色は最大3~5色にします
  6. アクセシビリティは必須です:WCAG 準拠が必要です
  7. 文化は重要です:ターゲット市場を調査します
  8. 漏れなく指定する:4つすべてのカラ―システムを指定します

コメント