色の面積比による配色

3級

配色の面積構成
3級

配色を考えるときは、色の面積比を考慮し、色に主従関係をつけることで意図がはっきりします。

ベースカラー(基調色)

最も面積が大きい色
配色の背景となり、全体のイメージをつくる

アソートカラー(配合色)

二番目に面積が大きい色
ベースカラーを補助し、配色の方向性を左右する

  • ベースカラーと同系色なら、ベースカラーの印象が際立つ
  • ベースカラーと対照的な色なら、配色に動きが生まれる

アクセントカラー(強調色)

小面積で使う色
配色全体を引き締めたり、変化を与えたりする

アクセントカラー
3級

中でも、目立つ色をアクセントカラーとして小面積で使うことで、配色に変化をつけることができます。小面積であれば、使う位置や形は自由です。

全体の色に対して、色相トーンが大きく異なる色をアクセントカラーとして選ぶと効果的です。
他の色との差が大きければ、無彩色でも効果的なアクセントカラーになります。

高彩度色を使う

低明度どうしの配色に、高彩度・高明度色を加えて引き締める

明度差のある無彩色を使う

高明度どうしの配色に、低明度の無彩色を加えて変化をつける

セパレーション
3級

色の境界部分に別の色を加えて色を分離することをセパレーションといい、コントラスト感の調節に用いられます。
コントラスト感を調節したくなるのは、たとえば次のような場合です。

  • 2色の対比が強すぎてギラギラとして見える
  • 2色の差が曖昧で境界がぼやけて見える

セパレーションでは、色と色の間に、背景に対して明度差のある色をとして配置します。
これにより、境界のギラギラ感を和らげたり、境界を明確にしてそれぞれの色を引き立てたりすることができます。

強すぎる対比を和らげる

高彩度色の間に、高明度の無彩色である白を加える

似た色の境界を明確にする

高明度色の間に、低明度色を加える

同時にアクセントカラーにも

アクセントカラーはその色自体が目立つ色で、数も位置も自由でした。一方、セパレーションは他の色を引き立てる色で、色と色の境界部分で使用します。

明度差だけでなく彩度差も大きい色をセパレーションとして加えると、セパレーションの効果と同時にアクセントカラーとしての役割も与えられます。

たとえば、文字の縁取りでは、縁取りがセパレーションとして文字色を引き立たせます。
さらに、高彩度の縁取りにすると、縁取り自体が視線を集めて注意喚起のような効果も得られます。これは、縁取り自体が目立つアクセントカラーとしての効果になります。

読みづらいテキスト

Hello World!

低明度・低彩度どうしでコントラストが弱く、読みづらい

明度差によるセパレーション効果

Hello World!

高明度の縁取りをつけると、文字が読みやすくなる

彩度差によるアクセントカラー効果

Hello World!

さらに高彩度の縁取りにすると、文字の輪郭自体が視線を集める