デザインとの影響–色と感情へのガイド

公開: 2022-03-11

赤を見て。 ブルーな気分だ。 羨望の的で緑。

人気のあるイディオムは、人々が長い間、彼らが呼び起こす感情と色を関連付けていることを示しています。 人々は、赤を怒り(または欲望)と関連付け、青をうつ病と関連付け、少なくともシェイクスピアの日以来、緑を嫉妬と関連付けています。 (彼は彼の作品で嫉妬に関連して少なくとも3回緑色を参照しました。)

UXデザイナーは、人々の感情や実際の行動に影響を与えるために、色を活用して大きな効果を上げることができます。 色は、人々がデザインをどのように認識するかに最大の影響を及ぼしますが、プロジェクトのカラーパレットを適切に作成するために必要な時間と労力を費やしていないデザイナーが多すぎます。

その結果、多くの無駄な労力とカラーパレットが発生しますが、必ずしも製品への望ましい応答に影響を与えるとは限りません。 そして最悪のシナリオでは、デザインに関する他のすべてが最適化されている場合でも、色が人々をオフにする可能性があります。

ポジティブカラーとネガティブカラーはありますか?

一部の色は本質的にポジティブまたはネガティブであるという一般的な考えがあります。 ほとんどの場合、暖かい色(黄色、赤、オレンジ)は正と見なされ、冷たい色(青、緑、紫)は負と見なされます。

それでも、これらの関連付けは厳格なルールではありません。 たとえば、赤(暖かい色)は怒りや危険の感情を呼び起こすことができ(ティファニーで朝食をとる「平均的な赤」についてのホリー・ゴライトリーの独白を考えてみてください)、緑(涼しい色)は成長と新しい始まりの感情を呼び起こすことができます。 これが、色彩心理学と色彩理論が非常に複雑である理由の1つです。 色がどのように知覚され、それが人間の行動や思考にどのように影響するかに影響を与える可能性のある、一見無限の要因があります。

文化の違いも色の意味に大きな影響を与える可能性があります。 多くの西洋文化では、白は主に純粋さと平和に関連付けられていますが、一部のアジア諸国では、白は死と喪に関連付けられています。

設計者は、パレットの色が互いに調和して機能する方法、および各色が周囲の他の色にどのように影響するかに注意を払うことが重要です。

色の心理的影響

温かみのある色は、爽快で生き生きとした色になりがちです。 それらは通常エネルギーを与え、デザインに生命を与えることができます。 背景に溶け込むのではなく、温かみのある色が画面やページに「ポップ」し、デザインの最前線に立つ傾向があります。

温かみのある配色が黒い背景に浮かび上がります
Hourlyアプリのホームページにある赤と温かみのあるベージュのカラーパレットは、クールなカラーパレットでは作成できないエネルギーと緊急性を生み出します。

暖かい色で注意すべき興味深い点の1つは、3つの原色(赤と黄色)のうち2つが暖かく、2番目の色であるオレンジが2つの組み合わせであるということです。 これは、ほとんどの場合、暖かい色は純粋に暖かい、つまりプライマリであり、他の色と混合できないことを意味します。

涼しい色は、暖かい色よりも落ち着いた色として認識される可能性が高くなります。 ただし、常にそうであるとは限りません。特に、二次色である緑と紫は、一次クールカラー(青)とウォームカラー(黄色は緑を作成し、赤は紫を作成)を組み合わせて作成されるためです。 つまり、これらの色合いは「クール」と見なされますが、暖かい側面の特徴のいくつかを引き継ぐことができます。

色の意味:青は落ち着いていて信頼できる
ホワイトテイルジンのウェブサイトの落ち着いたブルーは、リラックスした印象を与えます。

緑、特に明るく明るいバージョンは、生命とポジティブなエネルギーに関連付けることができます。 紫は、特に明るい(フスキアのように)または明るい(ラベンダーのように)場合、非常に鮮やかな色になる可能性があります。

色相の値を変更すると、色の関連付けが変更されます
より明るい値(明るい紫やfuschiaなど)は、クールな色により多くのエネルギーを与えます。

ニュートラルカラー(ブラウン、タン、グレー、ホワイト、ブラック)は、組み合わせた色の特性を引き継ぐ傾向がありますが、これらの効果を抑制または強化することもできます。 たとえば、温かみのある色と白を組み合わせると、全体的な鮮やかさだけでなく、軽量で気楽に見えるデザインを作成できます。 それらの同じ暖かい色を黒と組み合わせると、それらをより強烈で劇的に見せることができます。 クールな色と黒を組み合わせると、より神秘的になり、白と組み合わせると、より落ち着いてリラックスできるようになります。

消費者行動に対する色の影響

色は人の気分や思考に影響を与える可能性がありますが、行動にも影響を与える可能性がありますか?

そのとおり。

マーケターは長い間、消費者に特定の行動をとるように影響を与えるために色に依存してきました。 そのため、通行人の注意を引くためのショーウィンドウの看板は黄色で表示され、セール価格は赤で表示されることがよくあります。

これらの選択肢の多くは、ハードサイエンスよりも伝統に基づいていますが、それが消費者の期待を高めています。 彼らが赤い価格を見るとき、彼らは彼らが見ているものは何でも売りに出されているか、またはクリアランスであると思います。 窓に黄色い看板が見えると、適切な情報が含まれていると期待しているので、少し時間を取って読んでください(黄色は人間の目に最もよく見える色の1つであるため、自然に注目を集めます)。

色の心理的影響:赤は​​売上に関連しています
ASOSのWebサイトでは、赤を使用して販売価格を示し、顧客にかなりの取引があることを示しています。

各色相が消費者の行動にどのように影響するかを簡単に説明します(マーケティングでの色の使用に関する詳細情報は、Suyatiのこのインフォグラフィックにあります)。

  • 赤は売買と強く関連しています。 使いすぎると、一部の顧客を遠ざける可能性があります。
  • オレンジは召喚状に使用できますが、使いすぎるとイライラすることもあります。 これが、ロゴやアクセントカラーの外ではあまり見られない理由です。
  • 黄色は注目を集め、消費者の注目を集めます。
  • 緑は人間の目で簡単に処理できるため、リラックス感を出すためによく使用されます。 それはまた、お金と運と強く関連しています。
  • 青は世界で最も人気のある色であるため、あらゆる種類の通信で広く使用されているのは当然のことです。 また、忠誠心、誠実さ、権力と強く関連しており、大企業やより保守的な業界(銀行や保険など)の企業に人気があります。
  • パープルは美容製品業界で多用されていますが、高級品(アスプレイのように、その代表的な香水であるパー​​プルウォーターと呼ばれることもあります)にも関連しています。
  • 黒は、マーケティングで使用される場合、一般的に洗練されたエレガントです。 これは、ほとんどの業界の通信で広く使用されています。
  • 白はしばしば清潔さに関連しているため、ヘルスケア業界で人気があります。 シンプルさとの関連性から、テクノロジー業界でも使用されています。
  • グレーはシンプルさにも関連しており、マーケターが消費者を落ち着かせるためによく使用します。

繰り返しになりますが、個々の色が消費者の行動に与える影響は、その使用方法やコンテンツのコンテキストに大きく影響されます。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

感情的にパワフルなカラーパレットの作成

多くのUXデザイナーは、特定の色は特定の状況では「使用できない」と考えています。 そのような考え方は時代遅れであり、現代のデザインにはありません。

2019年のパントンのカラーオブザイヤー:リビングコーラルを見てみましょう。 これは強い色合いであり、多くのデザイナーが多くのプロジェクトで使用することを躊躇する可能性があります。 (注:トレンドを追跡するためだけにこの特定の時流に乗ることを推奨しているわけではありませんが、実験の出発点としては適しています。)

結局のところ、Living Coralは、銀行のWebサイトやメンズスーツを販売するWebサイトのような場所にありますか(サンゴのスーツを揺さぶることができる男性への小道具ですが)? しかし、ここに、Living Coralを組み込んださまざまな業界で使用できるカラーパレットがあります。これは、デザイナーが適切なコンテキストで使用した場合に、ほぼすべての色を任意のプロジェクトに使用できることを証明するためです。

これがどのように役立つかわかりませんか? プロジェクトでデザイナーのところに来て、特定の「ブランドカラー」を使用するように主張するクライアントについて考えてみてください。そのカラーは恐ろしいものですが。

さまざまな業界に適した、リビングコーラルを組み込んだカラーパレットの4つの例を次に示します。

色とブランディング:クリエイティブなカラーパレット
このカラーパレットは楽しくてファンキーです。 子供やクリエイティブな活動を目的としたサイトに最適です。


企業サイトに最適な色の組み合わせ
これは、法律、銀行、保険などの従来の業界に最適なパレットですが、Living Coralを追加すると、よりアクセスしやすくなり、若い視聴者にアピールするのに役立ちます。


デザイナーのための色彩理論:ほとんどすべての色をブランドに組み込むことができます
このパレットはより控えめで、コンテンツがデザイン要素よりも目立つ必要がある衣料品会社やその他のサイトに最適です。


色の心理的影響は深刻な場合があります
このパレットは伝統的な感じ(ケープコッドの夏を考えてください)でありながら、新鮮でリラックスした感じもします。

4つの異なるパレット、4つのまったく異なる感情。 同じタイプの実験は、事実上すべての色で行うことができます。

一見不調和な色をデザインに組み込む別の方法は、黒、灰色、または白のいずれかを追加して色相の値を変更することです。

黒、白、または灰色を追加することにより、色の関連付けを変更できます
左側の明るい色は、黒、灰色、または白を(左から右に)追加することで、感情的な影響を変えることができます。

より落ち着いた色(グレーを追加)を作成すると、よりリラックスした気分になります。 黒を追加して色を暗くすると、より伝統的または保守的な感じになります。 色を明るくするために白を追加すると、より無邪気で平和な感じになります。

色彩理論の最も見過ごされている部分の1つは、デザイナーの本能を信頼する能力です。 色は非常に主観的であり、特定のガイドラインはありますが、それでもまだ比較的研究されていないデザインの領域です。

デザイナーは、本能に従ってさまざまなカラーパレットやアイデアを試し、ユーザーテストを行って本能が正しいかどうかを確認する必要があります。 ユーザーテスト、A / Bテスト、およびさまざまなカラーパレットの有効性に関するデータを収集するその他の方法は、最終的なデザインを作成する上で非常に重要です。

結論

色と感情の関係は、優れたUXデザインの最も重要な側面の1つです。 正しいカラーパレットは、サイトまたはデザイナーが望んでいるアプリでアクションを実行するように人々を促しますが、間違ったパレットは、訪問者がアクションを実行する前に目をそらす可能性があります。

適切なカラーパレットを選択することは、芸術と科学の一部です。 初期パレットの設計に関しては、設計者は利用可能な調査とともに本能に従い、次にテストと再テストを行って、カラーパレットが設計の全体的な目的を強化していることを確認する必要があります。

•••

Toptal Designブログでさらに読む:

  • 可能性のスペクトル:Go-ToUIカラーガイド
  • デザイン心理学と素晴らしいUXの神経科学
  • 原因と結果–色彩心理学の探求
  • ユーザーエンゲージメントを高めるための感情のデザイン
  • UXにおける色の役割