UXにおける色の役割

色彩心理学を理解することは、デジタルデザインでうまく機能するカラーパレットを作成するための重要な側面です。 色は、一部のデザイナーによって純粋に美的な選択と見なされることもありますが、実際には、ユーザーに対するデザインの心理的影響、つまりそのUXの重要な要素です。

よく考えられたカラーパレットは、デザインを「良い」から「素晴らしい」に引き上げることができますが、平凡または悪いカラーパレットは、ユーザーの全体的なエクスペリエンスを損ない、サイトやアプリを使用する能力を妨げることさえあります。

一般に色彩理論は複雑なテーマであり、UXデザインでの色の使用は、見栄えのするパレットを作成するだけではありません（同じ色相内のさまざまな色合いのアクセシビリティや心理的効果など）。 設計者は、プロセス全体を再考することなく、徐々に色のより良い使用法をデザインに組み込むことができます。 デザイナーが基本をカバーしたら、色彩理論の最もやりがいのある部分の1つは、予想外の色をデザインに組み込むことを学ぶことです。

色の心理学

色彩理論と色がユーザーに与える可能性のある心理的影響は、複雑でしばしば主観的なトピックです。 しかし、より普遍的なレベルで取り組むことができる特定の側面があります。

メインカラー（原色、二次色、三次色）の一般的な意味、従来のカラーパレット、色の意味の文化的バリエーションなどは、すべてかなり簡単です。 設計者はこれらの基本を簡単に学び、自分の仕事に適用することができます。 ただし、 UXデザインで色を使用する場合は、さらに細かい点を学ぶ必要があります。

インターフェイスの色の感情的な影響を見逃してはなりません。 また、UXデザインでは一部の色が「普遍的」ですが（黒、白、灰色など、その少なくとも1つは、ほぼすべての優れたデザインで使用されています）、それらを組み合わせた色は、大きな影響を与える可能性があります。ユーザーの認識。

もちろん、色の使用方法も、色の認識に劇的な影響を与える可能性があります。 たとえば、モダンでミニマリストなデザインで原色として使用される青は、より複雑な企業デザインでアクセントカラーとして使用される同じ青とは非常に異なる感触を持ちます。

色の文化の違い

デザイナーが見落としがちな問題の1つは、さまざまな色の周りに存在する可能性のある文化の違いです。 たとえば、多くの西洋文化では、白は純粋さ、無垢、希望などに関連付けられています。 しかし、アジアの一部では、白は死、喪、そして不運に関連しています。

一部の色は、文化に関係なく一般的に肯定的な意味合いを持っていますが（オレンジなど）、白のような他の色は国によって大きく異なります。 これは、可能な限り多くの聴衆にアピールするデザインを作成しようとするときに、デザイナーの生活を確かに複雑にする可能性があります。

設計者は、製品またはWebサイトの対象読者に基づいて、カラーパレットの文化的影響を確認することが重要です。 製品が世界中の視聴者をターゲットにする場合は、否定的な文化的意味合いを防ぐために、使用されている色と画像のバランスをとるようにしてください。 製品が主に特定の文化のみを対象としている場合、設計者は、選択したパレットが他の文化に与える影響にあまり注意を払うことができません。

UXカラーとブランドのマッチング

ブランド価値は、カラーパレットを作成する上で重要な役割を果たす必要があります。 しかし、それらだけが重要な要素ではありません。 競合他社がすでに使用している色と同様に、業界の規範も重要です。 ブランドの主要な競合他社とほぼ同じカラーパレットを使用することは、混乱を招き、ブランドが目立たないようにするための優れた方法です。

確かに、これには例外があります。 たとえば、マクドナルドとウェンディーズを考えてみましょう。 どちらも直接競争しているファーストフード店です。 そして、両方とも赤と黄色のカラーパレットを使用しています。 ただし、ロゴを見ると、ウェンディのロゴは主に赤で黄色のアクセントが付いていますが、マクドナルドのロゴはその反対です。 彼らのパッケージもこれらの色をさまざまな方法で使用しており、ブランドをさらに差別化しています。 このため、ロゴやその他の識別マークがパッケージから削除されていても、どちらも簡単に混同されることはありません。

ブランドの価値観をサポートするブランドカラーパレットを作成するための最初のステップは、さまざまな色の意味と、それらをどのように明るく/明るく/暗く/鈍くするかなどを理解することです。 それらに影響を与える可能性があります。 さまざまな色の意味の基本的な内訳は次のとおりです。

• 赤—赤は、危険と情熱、そして興奮の色です。 それは非常に強い色であり、人々に強い反応を引き出すことができます。 ピンクに明るくすると、よりフェミニンでロマンティックになり、マルーンの色合いを暗くすると、より落ち着いた伝統的な色になります。
• オレンジ—オレンジは非常にクリエイティブな色で、冒険や若者にも関係しています。 とてもエネルギッシュです。 オレンジは70年代のスタイルとの強い結びつきがあるため、レトロな雰囲気を呼び起こすこともできます。
• 黄色—黄色は幸せで、楽観的で、陽気です。 子供から大人まで、さまざまなデザインで人気があります。 より多くのパステルカラーがジェンダーニュートラルな赤ちゃんの色としてよく使用されますが、より明るい黄色はクリエイティブなデザインで人気があります。 黄色の暗い色合いは金色になり、富と成功につながります。
• 緑—緑にはさまざまな関連があります。 一方では、それは富と伝統の感情（特に暗い色合い）を引き起こしますが、他方では、それは環境保護と自然と強く関連しています。 ライムグリーンはしばしば更新と成長に関連しています。
• 青—青は、ほとんどの場合、忠誠心と信頼に関連しています。 明るい青はコミュニケーションと関連している可能性があり、鈍い青と暗い青は悲しみと鬱病と関連している可能性があります。 青は世界で最も一般的に好まれている色であり、これが多くの企業がブランドに青の色合いを選ぶ理由を説明している可能性があります。
• 紫—紫はさまざまな意味を持つ別の色相です。 それは長い間王族と富に関連付けられてきました（紫色の染料は多くの古代文明ではまれだったので、王族のために予約されていました）。 しかし、それはミステリーとスピリチュアリティにも関連しています。 紫は創造性を呼び起こすこともできます。
• 黒—黒は洗練と豪華さを意味します。 しかし、それは悲しみと否定性にも結びつく可能性があります。 黒と一緒に使用されている他のUXカラーに応じて、モダンまたはトラディショナル、フォーマルまたはカジュアルを感じることができます。
• 白—白は、純粋さ、無垢、そして積極性と結びついています。 白は、その中立性とシンプルさから、ミニマリストデザインでも非常に人気があります。 黒のように、白はそれが使用される他の色の特徴を簡単に引き継ぎます。
• 灰色—灰色には、状況に応じてさまざまな意味があります。 それは保守的で洗練されたものでも、薄汚くて鈍いものでもかまいません。 それは無感情または不機嫌になる可能性があります。 それはまた、悲しみや悲しみと関連している可能性があります。
• ブラウン—ブラウン（実際にはオレンジの濃い色合いです）は、地に落ちて接地されていることに関連しています。 それはまた、自然や居心地のよさにも関係しています。 そして、もちろん、それは汚れていたり薄汚いことと関係している可能性があります。

これらの基本的な色の意味を知ることで、デザイナーはあらゆるブランドや製品のカラーパレットを構築するための確固たる基盤を得ることができます。

しかし、色彩理論は科学と芸術の一部です。 色が一般的に特定の感情や気分に関連付けられているからといって、それを別の色と組み合わせたり、正確な色相を変更したり、他のデザイン要素間で使用方法を変えたりすることによって、他の方法で認識できないことを意味するわけではありません。

型破りなUXカラーの使用

UXカラーの型破りな使用は、ブランドを際立たせるための優れた方法です。 また、デザイナーが組み合わせたいと感じる古い色を単純に組み合わせるよりも精巧さが必要ですが、UXデザインで予期しない色を使用する方法を学ぶことはそれほど難しくありません。

アクセントカラーは、デザインに型破りな色を追加する場合に開始するのが最も簡単な場所です。 たとえば、法律事務所のWebサイトでは、ネイビーブルーとグレーの従来のカラーパレットを使用する場合があります。 しかし、ライムグリーンのアクセントを加えると、突然、ネイビーブルーとグレーのウェブサイトを持つ他の法律事務所の海とは一線を画すデザインになります。 または、ホーガンロヴェルズのこの例を見てください。この例では、白、灰色、ライムグリーンのカラーパレットを使用して、他の法律業界のサイトとは一線を画す最新のWebサイトを作成しています。 それはあなたの平均的な合法的なサイトよりも若くて現代的な群衆にアピールするでしょう。

Berdan Real Estateは、予期しないカラーパレットを使用する別のサイトです。 不動産サイトでは、黄色と桃の色合いを使用しています。どちらも、平均的な不動産サイト（青、赤、緑の大きな帯が支配的）よりもはるかにエネルギッシュです。

保険は一般的に現代の画期的な産業とは考えられていませんが、それは彼らのデザインがそうではないという意味ではありません。 レモネードのウェブサイトは、フクシアのアクセントが付いたグレーと白の配色を使用しています。 リスクを取ることで知られていない業界では、それはまったく予想外のことです。

インスピレーションを得るために使用できる、Webの周りで実際に使用されている型にはまらないUXカラーの例は他にもたくさんあります。

60-30-10ルール

60-30-10ルールは、バランスがよく視覚的に興味深いカラーパレットを作成するための単純な理論です。 アイデアは、1つの色（一般的にはかなりニュートラルなもの（文字通りまたは心理的に））がパレットの60％を構成するというものです。 別の補色がパレットの30％を占めています。 そして、残りの10％のデザインのアクセントとして、3番目の色が使用されます。

この方法により、設計者は、業界またはブランド内で予想される基準から大きく外れることなく、型にはまらないカラーパレットの実験を開始することがはるかに簡単になります。 予想外の色合いのポップを追加すると、特定の会社に期待されるものに収まるデザインを高めることができます。 また、競合他社よりもはるかに前向きなブランドパレットを作成するための最初のステップであり、それによってブランドを際立たせ、より印象深いものにすることができます。

結論

色彩理論は複雑なテーマですが、基本を学ぶことは特に複雑ではありません。 そこから、デザイナーは知識に基づいて、デザイン用のより多様で洗練されたカラーパレットを作成できます。

適切に設計されたカラーパレット、特に予期しない色合いを含むカラーパレットは、単に美的な選択ではありません。 それはユーザーに重大な心理的影響を与える可能性があり、UXデザイナーはより良い体験を生み出すためにそれを利用する必要があります。

•••

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

• デザイン心理学と素晴らしいUXの神経科学
• 暗いUI。 良い点と悪い点。 規則ルール。
• 持続可能な製品デザインのための感情的なブランディング
• インスピレーションを活用する–ムードボードのガイド
• 説得力のあるデザイン：高度な心理学を効果的に使用する