もう色の決め方に迷わない！デザインにおける6つアイディアをマスターしよう

UI作成において悩む人の多いプロセスが、色の決め方です。

本記事では、UIに最適な色を選択するのに役立つ6つの考え方をご紹介します。色の決め方を簡単かつ生産的なものにし、作業効率化に繋げましょう。

1. 60-30-10ルール

デザインのバランスを保つために、色を60％：30％：10％の割合で調節することをさします。これはインテリアデザインが由来となったルールで、家の装飾にもよく適用されています。一番大きい部分はドミナントカラーを、構成の30％では二次色を、10％はアクセントになる色を指定します。

ベストな比率に沿って配色を決めれば、視覚的要素を徐々に認識することができます。

tubik / dribbble

2. 適切なコントラストレベルを選ぶ

色のコントラストは、ビジュアルコンポジションにおける非常に重要なパートです。各UI要素に個性をもたらし、それぞれが際立つようになります。同じ色グループのシェードのみで構成されたUIにしてしまうと、ユーザーの注意を引き付けるチャンスが減ってしまいます。

また、そのようなUIのコピーコンテンツは、識別しづらくなり、製品のインタラクションもほぼ不可能になってしまいます。

デザイナーは、達成すべき目標に応じてコントラストレベルを調整すべきです。たとえば、ユーザーが特定のUI要素に注意を払う必要がある場合は、青と赤のようなコントラストの高い二色を選ぶのがオススメです。ハイコントラストは、よくCTAボタンのデザインに使用されます。

ですが、UI全体で見ると、高いレベルの色のコントラストが上手く機能しないこともあります。たとえば、コピーコンテンツと背景色のコントラストが強すぎると、テキストの読み取りやスキャンが難しくなることがあります。

なので、コントラストの強さを中間に留め、強調表示する要素に対してのみハイコントラスト色を使用するのがベター。また、ソリューションの効果を確認するため、さまざまなデバイスでユーザーテストを行いましょう。

tubik / dribbble

3.色彩心理学を取り入れる

心理学は設計ワークフローを支えます。人の気分や行動に色の影響を示す心理学の一分野に、色彩心理学と呼ばれるものがあります。通常、我々は、気づかないうちに色に反応しています。人の目が色を知覚すると、脳は内分泌系に信号を与え、気分や感情の原因となるホルモンを放出します。

それぞれの色は、私たちの心に独自の影響を与えています。それぞれの反応について知ることで、デザイナーは正しいメッセージを伝達し、ユーザーに期待通りの動作を促すことができます。

以下が各色が持つイメージ及び人に与える心理的影響のリストです。

• レッド　愛、自信、情熱、怒りなどのポジティブな感情とネガティブな感情の象徴
• オレンジ　興奮をもたらす、エネルギッシュで暖かい色
  
• イエロー　幸せ・日差し・喜び・暖かさの象徴
  
• グリーン　穏やかで気分をリフレッシュさせる自然色
  
• ブルー　企業イメージの象徴。距離・悲しみの象徴
  
• パープル　ロイヤリティ・富・謎・魔法の象徴
  
• ブラック　悲劇・死・謎の象徴。伝統・近代性の象徴
  
• ホワイト　純度・無実・透明度の象徴

また、デザイナーは、視覚がすべての人にとって非常に個性的であることを覚えておく必要があります。年齢や性別などの要素も、色の好みに大きな影響を与えるので、ターゲットオーディエンスの特質を知ることも不可欠です。

tubik / dribbble

4.文化に合わせてローカライズする

それぞれの文化には独自の伝統と信奉があります。ですので、色を選択する前に、その意味/解釈を理解しておく必要があります。同じ色でも、国によってはまったく反対の意味を持つことがあるからです。

たとえば、ヨーロッパ諸国では 、白色は純粋さを意味し、よく結婚式などで用いられていますが、反対に、多くのアジア諸国において、白は死と悲しみを意味します。

誤った使い方は誤解を招く原因となり、製品に致命的なダメージを与える可能性もあります。この場合、各文化における色覚に詳しい専門家に意見を求めることで、誤解を招くリスクを減らすことができます。

5. 色の調和に励む

色の調和は、UIデザインにおける最も重要な部分です。デザイナーは、ユーザーの使用感を快適なものにするため、UIの設計においてバランスを取ろうとします。

色の調和とは、ユーザーの快適さを追求するために、デザイン内の色を最も魅力的かつ効果的に配置することを指します。調和のとれた色は、Webサイトやアプリケーションに素晴らしい印象をもたらしてくれます。

• 単色　このスキームでは、色の調和は1つの色と複数の色調・色合いに基づいています。
• 類似色　このスキームでは、カラーホイールの隣にある色が適用されます。
• 補色　カラーホイール上にお互いに配置された色の組み合わせ。高いコントラストを作り出すのが目的
• 分割補色　このスキームは、補色と同様に機能しますが、より多くの色を使用します。たとえば、青色を選択した場合、反対の色に隣接する二つの色(黄色と赤)を選ぶ必要があります。
• トリアディック　これは、カラーホイール上で等距離にある三つの色に基づいています。プロの間では、1つの色をドミナントに、他の色をアクセントとして使用することを推奨しています。
• トリアディック/二重補色　この場合は、相補対である車輪からの四色を使用します。選択した色の点と点を繋げると、四角形が出来上がります。

色の調和に関する詳細情報と使用例は、こちらの記事に掲載されています。

6.自然からアイデアを盗む

自然は世界最高のアーティストであり、デザイナーと言えるでしょう。自然環境でお目にかかれる色の組み合わせは、ほとんど完璧といっていいでしょう。自然は、色の組み合わせで溢れており、人々は夕日や夜明け、秋の森や冬の山々を見て楽しんでいます。

そこで、自然から色彩のアイデアを拝借してみてはいかがでしょうか？ 自然のそばを散歩してみたり、美しい自然の写真を検索すれば、インスピレーションを得られること間違いなしです。

出典：tubik

アプリやWebサイトが与える第一印象はUIの色選択にかかっています。色の決め方により、ユーザーの使用感もかわります。

（翻訳：Ayaka Takei）