類似色の定義とその特徴を理解する | アドビ UX 道場 #UXDojo

類似色は、カラーホイールの隣接する 3 つの色の組み合わせです。この記事は、類似色の調和の力とその使い方を紹介します。

デザイナーが色彩理論を学ぶ際、最初に目にするツールのひとつがカラーホイール（色相環）です。基本的なカラーホイールは 12 色から構成されます。3 つの三原色、3 つの第二色、6 つの第三色の計 12 色です。ホイールの対角線上に位置する 2 つの色は補色と呼ばれ、デザインで組み合わせて使うとお互いを強調します。

補色と同じく、類似色も組み合わせて使うと効果的な色の組み合わせです。こちらはカラーホイールの中で隣り合う 3 つの色の組み合わせです。類似色がとても効果的である理由は、自然の中で繰り返し見られるカラーパレットであるからです。たとえば夏のハイキングの途中で落ち葉を見つけたとします。おそらくその葉はさまざまな色合いの緑、黄緑、黄色から構成されています。これは類似色の組み合わせです。

類似色の心理

人間の目は、自然の中であまり見かけない色の組み合わせよりも、ごく自然に見かけることの多い類似色を好むようになっています。もちろんこれは類似色だけを使うべきということではありません。色の選択は目的次第で変わります。

類似色の場合は、ある種の表現を強調するために使われることがあります。たとえば、青、青緑、緑の組み合わせをデザインに使い、緑の草原に横たわって青い空を見上げているような穏やかさを表現することができます。あるいは、オレンジ、黄オレンジ、黄の組み合わせを使えば、夏の日のような明るく活気のあるデザインを表現できます。

このように類似色を使って表現できる感情、気分、体験は数多くあり、選択する類似色次第で、ロマンス、ラグジュアリー、ネイチャーといったテーマを伝えられます。デザイナーにとって類似色は、人の心理に訴えるデザインをつくるための手段のひとつになります。

類似色の選び方

デザインで類似色を使おうとする前に、まずは選択した色がスタイルガイドやデザインシステムに確実に含まれるようにしておくことが重要です。そうすればプロジェクトに関わるデザイナーが誰であれ、選ばれたカラーパレットに簡単にアクセスすることができます。

さらに、選んだ色が確実に最終的に使われるようにするため、開発者へのハンドオフを効率的に行う方法も十分に検討するべきです。色の HEX 値をドキュメントに含めること、デザイントークンの使用は推奨されるアイデアです。

それでは、利用可能な類似色の組み合わせの一覧と、使い方をより良く理解するために自然界の実例を見ていきましょう。

類似色のリスト

デザイナーが利用できる類似色の組み合わせは 12 あります。それぞれの組み合わせはカラーホイールで隣り合う 3 つの色から構成されます。具体的な類似色の組み合わせは以下のリストをご覧ください。

• 黄 （黄緑、黄 、黄オレンジ）
• 黄オレンジ （黄 、黄オレンジ、オレンジ）
• オレンジ （黄オレンジ、オレンジ、赤オレンジ）
• 赤オレンジ（オレンジ、赤オレンジ、赤）
• 赤 （赤オレンジ、赤、赤紫）
• 赤紫 （赤、赤紫 、紫）
• 紫 （赤紫 、紫、青紫）
• 青紫 （紫、青紫、青）
• 青 （青紫、青、青緑）
• 青緑 （青、青緑 、緑）
• 緑 （青緑 、緑、黄緑）
• 黄緑 （緑、黄緑、黄）

芸術作品に見る類似色

アーティストたちははるか昔から、意味や雰囲気や感情を伝えるために作品の中で類似色を使用してきました。正しく使えば類似色は作品とそれを見た人の心を結びつけます。

クロード・モネは類似色を使用した絵画で有名な画家のひとりです。彼の「睡蓮の池」では、緑の類似色が使われている様子を見ることができます。青緑、緑、黄緑の組み合わせが生き生きとしたさまを伝える様子を確認できます。

フランクリン・カーマイケルの絵画 Spring も類似色の好例です。この作品でカーマイケルは黄の類似色を使いました。黄緑、黄、黄オレンジの組み合わせが新しい芽吹きの感触をつくり出しています。

自然の中の類似色

類似色の組み合わせは自然の様々な箇所に見つけることができます。これから、自然の中の類似色の例をいくつか紹介します。

サンセベリア

サンセベリアは観葉植物として広く栽培されている、縦じまの細長い葉が特徴的な植物です。葉は黄緑の類似色の組み合わせになっていて、緑、黄緑、黄の色合いが見られます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

サンセット

下の写真に写しだされたケニアのアンボセリの日没は、類似色の調和が生み出す美しい風景の一例です。ここで見られる類似色は、黄オレンジ、オレンジ、赤オレンジの組み合わせです。オレンジの色合いの組み合わせが、静寂と平穏を想起させます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

サンゴ礁

下の写真は、カリブ海で撮影されたサンゴ礁です。明るい青と紫の触手が、活気のある刺激的な印象をつくり出しています。このサンゴ礁は、紫、青紫、青の組み合わせから構成される青紫の類似色に分類できます。

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

類似色の持つ力を活用しよう

類似色は見た人の視覚と感情の両方を効果的に捕らえることができるツールです。また、類似色がつくり出す調和はデザインの統一の原則にも貢献します。

次に自然の中に出かける機会があれば、発見した類似色を撮影してみてください。そして、それらを着想を得るための素材集に加えておきましょう。次にデザインするときの役に立つかもしれません。

この記事は What Are Analogous Colors? Definition & List（著者:Dan Silveira）の抄訳です