What Is Color Theory? Meaning & Fundamentals

色彩理論の基本と効果的な色の選び方 | アドビ UX 道場 #UXDojo

色は視覚的コミュニケーションにおける強力なツールです。この記事は、ビジュアルデザインにおける色の役割と効果的な配色の選び方を紹介します。

Ran Liu によるイラストレーション。

Ran Liu によるイラストレーション

by akihiro kamijo

Posted on 07-26-2021

色は視覚的コミュニケーションにおけるもっとも強力なツールのひとつです。色が持つ力は、人々の感情、気分、振る舞いに影響を与えます。それゆえ、デザイナーにとって慎重な色選びはとても重要です。

この記事では、まず色彩理論の基本を確認し、次に効果的で視覚的に興味深い配色の選択に役立つ情報を紹介します。

色彩理論とは何か

言うまでもなく、色はインタラクションの重要な一要素です。タイポグラフィなどの他の要素と同様に、デザイナーは色を注意深く選ぶべきです。色の組み合わせは無限にあるため、どの配色が自分のデザインに最も適しているかを判断するのは容易ではありません。幸いなことに、バランスが取れた効果的な色の組み合わせを選ぶための原則として色彩理論が利用できます。

これから、デザインシステムのために効果的な配色を選ぶ際の参考になる色彩理論の一部を紹介します。

使用する色数を制限する

色の調和は色彩理論の主要な原則のひとつです。新しい配色を決めるときは、多くの色を選びたい気持ちになるかもしれませんが、その誘惑に負けてはいけません。色数が多すぎると視覚的バランスをとることがとても困難になるからです。これはユーザーを混乱させる原因にもなります。

そこで、多くても 2 ~ 3 色から構成されるシンプルな配色に保ちます。それではクリエイティビティが制限されてしまうと考えるデザイナーもいるかもしれませんが、色調を操れば興味深い視覚的な組み合わせをつくり出すことは可能です。それに単純な配色はユーザーに効果的です

赤からつくられた配色の例。

ひとつの色からつくられた配色の例 出典: Adobe

カラーホイールを使って色を選ぶ

次は実際の色選びの方法です。この場面でデザイナーが通常使うのはカラーホイールです。カラーホイールは、三原色(赤・黄・青)、第二色(三原色の組み合わせ - オレンジ・緑・紫)、第三色(三原色と第二色の組み合わせ - 赤オレンジ・黄オレンジ・黄緑・青緑・青紫・赤紫)から構成されます。

12 色のカラーホイール。

12 色のカラーホイール 出典: Sakurambo

以下はカラーホイールを使ってつくられる主要な三種類の配色です。

単色の配色の例。

単色の配色の例 出典: Adobe

カラーホイールの近くに位置する色からつくられた類似色の配色の例。

カラーホイールの近くに位置する色からつくられた類似色の配色の例 出典: Adobe

補色の配色の例。

補色の配色の例 出典: Adobe

Adobe Color は色彩設計を行うための優れたツールです。既存の配色を自由に修正することもできます。カラーパレットの色は、わずか数クリックで変更可能です。

Adobe Color を使って単色の配色を作成した例。

Adobe Color を使って単色の配色を作成した例 出典:Adobe Color

色の心理学

色彩理論を理解するために欠かせない側面が心理学です。カラーパレットを選ぶときにはどんな見た目になるのかを考えることと同じくらいに、それを見た人がどう感じるかを考えることが大切です。色は人間の脳に強い心理的な影響を与えます。それぞれの色は、ユーザーにとって異なる意味や感情を表します。

すべての場面に適用できるルールはありませんが、一般的な色と感情の関係をいくつか紹介します。

性別と色の好みの関係

性別は色の好みに影響するでしょうか? ある調査では、研究者の Joe Hallock が大きな差を発見しています。

男性と女性の色の好みの調査結果。

男性と女性の色の好みの調査結果 出典: Smart Insights

以下は調査結果の要約です。

年齢と色の好みの関係

年齢も色の好みに影響を与えます。「Color Psychology And Color Therapy」の著者である Faber Birren は、年齢の低い世代は波長の長い色(赤やオレンジ)を好み、年齢の高い世代は波長の短い色(青)を好むことを発見しました。Joe Hallock の調査でもこの結果は概ね肯定されていますが、紫を好む年代の存在も見つけています。

年齢別の色の好みを表したグラフ。

年齢別の色の好みを表したグラフ。年齢の低い世代は波長の長い色を好み、年齢の高い世代じゃ波長の短い色を好む 出典: Joe Hallock

色選びの実践的なヒント

色の基本的な性質に続けては、UI デザインの色選びに役立つ実践的ないくつかのヒントを紹介します。

ムードボードを使って適切な色を見つける

ムードボードは視覚的な閃きのソースとなるコレクションです。視覚的なデザインの判断に関してはたいていの目的に役立ちますが、色の選択に関しても同様です。気に入った画像や写真を見つけたら、CoolorsAdobe Color のようなツールを使って、直接イメージから配色をつくることができます。

ムードボードの例。

ムードボードの例 出典: Designmodo

色を使って焦点をつくる

流し読みのしやすさは良い Web デザインには欠かせない条件です。訪問者は簡単に必要な情報を見つけられるべきです。

これを補助するために色が利用できます。色はユーザーの目を誘導できるからです。たとえば、CTA ボタンに対比色を使うと、ボタンの視覚的な重みが増してより目立つようになります。

目立たせたいときは色のコントラストに頼ることができる。たとえば Mailchimp は CTA ボタンに注目を集めるために補色を使用している。

目立たせたいときは色のコントラストに頼ることができる。たとえば Mailchimp は CTA ボタンに注目を集めるために補色を使用している 出典: Mailchimp

鮮やかな色と淡い色を使い分ける

大抵の色は「鮮やか」あるいは「淡い」のどちらかに分けられます。プロジェクトの性質によって、どちらかのグループの色により依存することになるでしょう。

鮮やかな色は背景から浮き出てエネルギーを感じさせます。力強い印象をつくり出したり、伝統的ではないイメージを表現したい企業にとっては良い選択です。

ピンクと青を使い躍動的な雰囲気をつくり出している鮮やかな色のホームページ。

ピンクと青を使い躍動的な雰囲気をつくり出している鮮やかな色のホームページ 出典: Vredestein New Horizons

一方、淡い色はデザインに溶け込み、ユーザーを安心させる落ち着いた感覚を伝えます。

淡いパステルカラーとアースカラーを使った商品一覧ページ。

淡いパステルカラーとアースカラーを使った商品一覧ページ 出典: Collagerie

最終的には、デザインを見る相手に何を感じて欲しいか次第で色を選択するのがよいでしょう。

アクセシビリティを忘れずに

デザインには見た目だけでなく、機能性や使いやすさも求められます。UI デザインに関しては、様々な能力を持つ人々が利用できるものでなければなりません。デザイナーが色選びで直面するアクセシビリティの課題は、色弱者にとっての使い勝手です。

カラーホイールが正常者(左)と赤緑色覚異常を持つ人(中央と右)にどのように見えるかを示した図。

正常者が見るカラーホイール(左)と、赤緑色覚異常を持つ人が見るカラーホイール(中央と右) 出典: Sakurambo

ここでは色使いに関して覚えておくべき 2 つのポイントを紹介します。

赤や緑を識別できないユーザーのために、情報をこれらの色だけで伝えないようにするべき。

赤や緑を識別できないユーザーのために、情報をこれらの色だけで伝えないようにするべき 出典: WebAIM

コントラストの挽くテキストは読みづらく、ユーザー体験を低下させる。

コントラストの低いテキストは読みづらく、ユーザー体験を低下させる 出典: Nick Babich

アクセシビリティ確認ツールとしては、Color Contrast Checker をお勧めします。これは配色が WCAG ガイドラインを満たしているかを確認するためのツールです。

NoCoffee のようなツールを使うと色覚異常によりサイトがどのように見えるかを確認できる

NoCoffee のようなツールを使うと色覚異常によりサイトがどのように見えるかを確認できる 引用元: CNN

おわりに

色は、デザイナーが愛してやまないツールのひとつです。同時にマスターするのがとても困難なツールです。この記事で紹介したルールは、ビジュアルデザイナーにとって基本となるものですが、知識だけでは不十分です。スキルを向上させる唯一の方法は優れた配色を求めてつくり続けること、すなわち「習うより慣れろ」です。

この記事は What Is Color Theory? Meaning & Fundamentals(著者: Will Fanguy)の抄訳です

Topics: クリエイティブ, UI/UX & Web,

Products: XD,