今回は、UIデザインにおけるテーマカラーについて記事にします。
基礎知識はもちろん、テーマカラーの選び方や色が与える印象についてもご紹介しているので、ぜひ最後までご覧ください。
基礎知識：テーマカラーの分類とその用途
1. プライマリーカラー
メインカラーとして目立たせたい場所に使用します。テーマカラーの狭義ではこのプライマリーカラーを指すことが多いため、この記事でもテーマカラー≒プライマリーカラーと考えていただいて結構です。ほとんど全てのページで意匠的に用いられるため、サービスの印象に大きく作用します。以下のポイントを踏まえた上で選んでください。
- ブランドイメージに合う、目立つ色: 他のテーマカラーに比べて目立つ色を選択することで、サービスのテーマカラーとしての刷り込みができ、より有効性の高い動線誘導を実現できます。
2. ドミナントカラー
メインの背景色として使用されます。以下のポイントを考慮して選びます。
- 明るくニュートラルな色: ユーザーが長時間閲覧しても疲れない色を選びましょう。白、灰色、淡い青などが良い選択肢です。
3. セカンダリーカラー
文字やアイコンに使用される重要な色です。以下のポイントに注意して選びます。
- コントラスト: ドミナントカラーとは適度にコントラストをつけましょう。例えば、背景色が明るい場合は濃い文字色を選ぶなどします。
4. アクセントカラー
CTA（Call to Action）やエラーメッセージなどに使われる色です。以下のポイントを考慮して選びます。
- 明るい色: 目立つ色を選びましょう。ボタンやリンクの色として使用することで、ユーザーの注意を引きます。
テーマカラーの選び方(作り方)
カラーツールを使用すると、美しいカラーパレットを簡単に生成できます。例えば、Goodpaletteは素晴らしいツールです。アプリやウェブサイトでどのように見えるかをダイナミックなモックアップでプレビューできます。
テーマカラーが与える印象
色は私たちの生活において重要な役割を果たし、私たちの気分、認識、感情に影響を与えます。色には象徴的な意味があり、それは生理的反応、文化的文脈、個人的経験によって異なります。
色の意味は色の象徴によって影響を受けます。色の意味は特定の色の客観的な重要性を指します。一方、色の象徴は、人々が色に割り当てる主観的または文化特有の意味を指します。
これらの意味は、宗教的、歴史的、または文化的な関連性に基づいており、文化や時代によって大きく異なります。例えば、白はある文化では純潔や無垢と関連付けられることがありますが、他の文化では喪や死と関連付けられることがあります。
さらに、異なる色に対する人々の主観的な関連付けに基づくいくつかの色の感情があります。これらは文化的信念、個人的経験、そして脳が色の情報を処理する方法によって影響を受けます。
以下に、各色の与える印象の例を示します。
ブルー系
■
- ポジティブ
- 信用
- 自信
- 自由
- 知性
- リラックス
- 爽やかさ
- ネガティブ
- 食欲の減少
- 悲観的感情
- メラトニンの減少
- 冷たさ
グリーン系
■
- ポジティブ
- 新緑
- 成長
- 再生
- 健康
- 環境
- 爽やかさ
- 平和
- ネガティブ
- 羨望
- 嫉妬
- 貪欲
- 物質主義
オレンジ系
■
- ポジティブ
- 陽気
- 楽観主義
- 食欲換気
- エネルギー
- 暖かさ
- ネガティブ
- 自己中心的
- 不誠実
- 無関心
- 焦り
- 未熟
イエロー系
■
- ポジティブ
- 幸福
- 楽観主義
- パワー
- 明快さ
- 自発性
- 知性
- 希望
- 喜び
- ネガティブ
- 嫉妬
- 危険
- ラテンアメリカ・中東では喪服
