意外と見逃してたかも！配色の知識が増える記事10

• 作成：2016/10/11
• 更新：2016/10/11
• Webデザイン >

デザインの印象の大部分は配色によって決まるといっていいほどです。パッとしないデザインにならないように、配色や色彩の使い方が上達する知識をまとめました。

エンジニア速報は Twitter の@commteで配信しています。

セパレーション（分離配色）

赤とオレンジ色、白とグレーのような似通った色を識別するために区切りを入れる方法をセパレーションといいます。色と色の間に別色を入れて色同士を分離させることによって配色を和らげたり、引き締めたりします。服でいえばベルトやインナー、フォントならアウトライン。

メリハリがつくので元気な印象や活発さを出したいときに使えます。これとは逆に明度順に並べることをグラデーション配色といいます。

色彩の調和/セパレーション

カマイユ

わずかな明度差を利用した配色方法をカマイユといいます。曖昧な印象が出るものの、上品で慌ただしくない静寂さを出したいときに使うとよいでしょう。色相やトーン差を大きくしたものがフォカマイユ配色となります。

カマイユとフォカマイユ配色 | カラーコーディネータの知識集

ウォームシェードとクールシェード

同じ色相でも橙色のように温かみを感じさせる暖色系の色を帯びているのをウォームシェード、青緑色のように冷たさを感じさせる寒色系の色を帯びているのをクールシェードと呼ばれています。

こちらのサイトを参考にさせていただきますと、ピンク色を基準にすると、ウォームシェードがサーモンピンク（オレンジ色が入っている、あたたかい感じ）、クールシェードがローズピンク（赤紫が入っている、洗練された感じ）となりメイクなどに応用されているようです。

ベースカラーによる色彩調和｜MIKAKO'ｓ Wｏｒｌｄ ～色のもつ不思議な世界～

イエローベースとブルーベース

あらゆる色は、黄みがかったイエローベースと、青みがかったブルーベースの2種があるというメイクや服装などに活用されている考え方があります。イエローベースは温かみを感じ、ブルーベースは冷たさを感じます。同じグループ同士の色で合わせると、まとまりやすくなります。

パーソナルカラーとは｜イエローベースとブルーベース｜フォーシーズン分類

パーソナルカラー

デュオトーン

最近多く見かけるようになったデュオトーン（duotone）。こちらのサイトによると2つの色を混ぜて作られた作品だそうで、昔から印刷などで使われているようです。ファーストビューなんかで使われていると、今っぽくて洗練された印象をうけます。

最近Webデザイン界で流行っている「Duotone」をうまく使えば超イケてるサイトに様変わりするに違いない - Brian'z Imagination

ナチュラル・ハーモニー

明るい色を黄み寄りに、暗い色を青み寄りにすると自然な配色となります。以下のサイトには葉っぱの例が書いてありますが、日光が当たる葉の部分は黄緑に見え、影になった葉は青緑色に見えます。ナチュラル・ハーモニーとは、自然調和を得るための配色方法です。

COLOR NOTE > 配色のコツ > 配色技法③

ベゾルト-ブリュッケ現象

照明の色によって色相が違ってみえる現象をベゾルト（ベツォルド）-ブリュッケ現象といいます。例えば輝度が低いと黄緑が緑色に近くなるような感じです。こちらのサイトによると明るくなればオレンジは黄色に、青紫は青色の色相が傾くということらしいです。

色の錯視　＋その３＋

ハレーション

彩度とは色の鮮やかさですが、純色（明度差がなくカラフルで彩度が高い色。）を組み合わせると目がチカチカするような不快な感じがしませんか？これをハレーションといいます。ハレーションが起きると不快感がでるので避けたいところですが、どうしても使う必要がある場合は前掲（上のほうで記述）したセパレーションで色を区切ってあげるとハレーションが緩和されます。

ハレーション|カラー用語辞典【カラーナビ】

ベースカラー

ベースカラーは面積が最も大きい色のことです。強い色のアクセントは面積が小さいほど効果的です。

WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」｜TECHNICAL BLOG｜株式会社エムハンド

ベーシックカラー

ベースカラーと混同しそうになりますが、ベーシックカラーとはホワイト・ブラック・グレー・ネイビー・ベージュなどのオーソドックスな色のことです。トレンドに左右されない色とされています。

ベーシックカラーを意識する ファッションスタイル メンズ レディースのカジュアル ファッション 通販 販売 ショッピングサイト