デザインにおける色彩心理学

すべての色は決定です。ボタンの赤は装飾ではなく、コンバージョン賭けです。ヘルスケアアプリの青は美学的嗜好ではなく、信頼信号です。これを理解するブランドは機能するパレットを出荷します。理解しないブランドは良く見えてコンバージョンしないパレットを出荷します。

これが色心理学が実際のデザイン決定と出会ったときの見え方です。

色は装飾的ではありません

色は脳がビジュアルに遭遇するときに最初に処理するものです。目がヘッドラインを読んだりロゴを認識したりする前に、それは既に色に反応しています。その反応は感情的で、即座で、ほぼ無意識です。

これは神秘主義ではありません。これは神経科学です。色は文化、経験、背景から構築された協会をトリガーします。赤は普遍的に「危険」を意味するものではありません。それはどこに現れるか、何が周りにあるかに完全に依存する緊急感、エネルギー、情熱、食欲、または警告を意味します。

ほとんどのデザイナーが犯す誤りは、色心理学をルックアップテーブルとして扱うことです。赤は興奮に等しい、青は信頼に等しい、緑は自然に等しい。その枠組みは有用であるには単純すぎます。色心理学は文脈的であり、普遍的ではありません。

各色が実際に伝えるもの

これが正直な分解です。単純化されたバージョンではなく、各色が実在の製品、実在のブランド、または実在のインターフェースに現れたときに実行することです。

赤 は他の色よりも速く注目を集めます。Coca-Cola、YouTube、Netflixはすべてそれを使用しています。赤が緊急感と食欲をトリガーするため。UIでは、赤はあなたの「今すぐ行動する」色です。販売バッジ、エラー状態、ニュートラルページの主要なCTA。控えめに使用するか、それは何かを意味するのをやめます。

青 は理由がインターネットの好きな色です。信頼、安定性、能力を示しています。PayPal、LinkedIn、Calmはすべて青に依存して「あなたはここで安全です」と言います。リスクは平坦さです。スペース内のすべての競合他社が青を使用している場合、青いアイデンティティは群衆に消えます。

緑 は二重の責任を果たします。ウェルネスとエコブランド(Whole Foods、Beyond Meat)では、自然で健康的として読み取られます。フィンテック(Robinhood、Mint)では、金と成長として読み取られます。Spotifyは音楽に緑を使うことでモールドを破り、強いブランディングはデフォルトの関連付けを無効にできることを証明しました。

黄色 は純粋な楽観と温かさですが、最も使いにくい色です。黄色が多すぎると圧倒されます。余りに少なくなくなります。Snapchat、IKEA、National Geographicはそれを背景の洗浄ではなく支配的な信号として使用します。小さく、高コントラストの用量で最も効果的です。

紫 はプレミアムと非慣例的を示唆しています。Figma、Twitch、Cadburyはそれをブルーグリーンの多数派から目立たせるために使用します。フィンテックでは、紫は「私たちはあなたのお父さんの銀行ではありません」と言っています。それは子供っぽくなく創造的として読み取られます。

オレンジ は赤の緊急感と黄色の温かさの間の親しみやすい中間地点です。Headspace、HubSpot、Fantaはそれを使用してエネルギッシュながら親しみやすく感じています。赤のアラーム無しで明るい背景と暗い背景に対して飛び出すため、最も強いCTA色の1つです。

黒 は権限と贅沢を伝えています。Apple、Chanel、The New York Timesはそれを「興味深い色が必要です」と言うために使用しています。編集デザインでは、黒は自信です。ファッションでは、それはプレミアムです。テクノロジーでは、努力せずに洗練されています。

文脈は理論を打ち負かします

Spotifyは緑です。Whole Foodsも。1つは音楽ストリーミングを販売しています。もう1つは有機食料品を販売しています。同じ色、完全に異なる関連付け。緑は両方のコンテキストで同じ仕事をしていません。

これは色心理学のアドバイスのほとんどが崩壊するところです。色を3つの要因に基づいて変わる柔軟な信号であるとき、固定された意味として扱っています。

飽和度と値。 湿潤したほこりっぽいバラは新しいホットピンクから完全に異なるものを伝えます。同じ色合い、別の惑星。飽和していない色は洗練されて穏やかに読みます。飽和色は大胆でエネルギッシュに読みます。

隣接する色。 白いページの赤いボタンは自信のあるCTAとして読み取られます。オレンジページの同じ赤いボタンはノイズとして読み取られます。色は単独では存在しません。それらはすべての隣人との関係に存在します。

文化的背景。 白は西洋デザインで純粋さを意味しています。それは東アジアの部分で喪を意味しています。地理を無視する枠組みは不完全です。

パレットの3つのルールが変換されます

この記事からそれ以上何も取らない場合は、これら3つを取ってください。

ルール1: コントラストドライブアクション。 インターフェイスで最も重要な色の決定は、CTAに選択した色ではありません。画面上のアクションと他のすべてのもの間にどのくらいのコントラストを作成するかです。ボタンはどの色でもかまいません。その背景で最も視覚的に異なる要素である限り。

ルール2: 一貫性が認識を構築します。 より少ない色を選択し、すべてのどこでも同じように使用します。StripeはPurpleを一貫して使用しています。Mailchimpは黄色を一貫して使用しています。カラーパレット自体は、すべてのブランドタッチポイントでのアプリケーションの一貫性ほど重要です。

ルール3: アクセシビリティはオプションではありません。 8%の男性と0.5%の女性は色覚欠陥の何らかの形を持っています。設計が色だけに依存して意味を伝える場合、何百万ものユーザーを除外しています。常に色をテキスト、アイコン、またはパターンと配置します。

パレットをテストする方法

4つのテスト。5分。4つすべてを実行せずに配送しないでください。

1. 目を細める試験。 すべてがぼやけるまで設計で目を細めてください。まだプライマリアクションがどこにあるか判断できますか? CTAが消える場合、コントラストは失敗しています。

2. グレースケールテスト。 設計をグレースケールに変換します。階層はまだ成り立つ? すべて同じ灰色に押し潰される場合、視覚的アイデンティティは色合いに依存しすぎており、値にはエノフではありません。

3. コンテキストテスト。 デザインコンテキストなしで5人にパレットを表示してください。それがどの種類の会社に属しているかを尋ねてください。彼らの答えが意図からワイドに発散する場合、パレットは伝えていません。

4. アクセシビリティ監査。 WCAGコントラストチェッカーを使用してカラーコンボを実行してください。本文には最小4.5:1の比率が必要です。大きなテキストには3:1が必要です。

よくある質問

色心理学は本当に変換に影響しますか?

はい、しかし大多数の記事は主張する方法ではありません。ボタンを緑から赤に変更すると、コンバージョンは21%増加しません。重要なのはコントラストとコンテキストです。スタンド アウトするボタンは、その特定の色に関係なく、より良くコンバージョンされます。

CTA ボタンの最良の色は何ですか?

ページの残りの部分に対して最高のコントラストを持つ任意の色。ユニバーサルな答えはありません。ページがほぼ青い場合、オレンジはポップアップします。ページが中立的な場合、ほぼすべての飽和色が機能します。唯一の間違った選択は混ざるCTAです。

ブランド パレットには何色含まれるべきですか?

3 から 5 個。1 つの主要な、1 つの二次的、1 つのアクセント、および 1 つまたは 2 つのニュートラル。より多くのノイズが作成されます。より少ないので柔軟性が制限されます。制約は機能です。