配色のルールと色の対比
配色のルール
- 配色にもある程度ルールがあり、ルールを知っていれば短時間でバランスのいい色選びができるようになります
配色の考え方
- 色を選ぶ時は、カラーホイール（色相環）を使って色の組み合わせを考えていきます
- 色数が増えるほどバランスを取るのが難しくなるので、色数は3色程度に制限したほうがいいでしょう
色の配色比率「70：25：5の法則」
- 一般的に、基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされています
- 最も大きな面積を占める色を「ベースカラー（70％）」、ブランドのイメージカラーなどデザインの中心になる色を「メインカラー（25％）」、画面にアクセントを持たせるための色を「アクセントカラー（5％）」と呼びます
ベースカラー・メインカラー・アクセントカラーの役割
ベースカラーの役割
- ベースカラーはデザインの中で最も大きな面積を占める色になります。「背景」や「余白」に用いることが多く、メインカラーやアクセントカラーを邪魔しないような色を選びましょう
メインカラーの役割
- メインカラーはその名の通り、主役となりデザインの中心になる色です
- メインカラーはロゴなどに使用されることが多いので、「明度の低い色」が扱いやすいとされています。
ベースカラーと似た色を使えばまとまった印象、補色になる色を使うとデザインに動きをつくることができます。
アクセントカラーの役割
- アクセントカラーは、ワンポイントで画面にアクセントを持たせるときに使用する色です
- メインカラーとベースカラーだけでは単調になりがちなので、メリハリをつけるために使用します
色の対比
- 色は互いに影響し合い、単色でみた時よりも鮮やかに見えたりくすんで見えたりします
対比の種類
- 色の対比には大きく4つの対比があります
- 明度対比
- 彩度対比
- 色相対比
- 補色対比
- 周りの色の明度差によって明るさが違って見える現象を明度対比、同じように彩度差によって鮮やかさが違って見える現象を彩度対比といいます
- 色の組み合わせによって色相がずれて見える現象を色相対比、補色同士が隣合ってお互いの色を鮮やかに見せる効果を補色対比といいます
明るさの感じ方が変わる「明度対比」
- 明度対比は、周りにある色の明度によって同じ色が違って見える現象です
真ん中のグレーは同じ色ですが、高明度（薄いグレー）に囲まれた方は実際の色よりも暗く、低明度（黒）に囲まれたグレーの方は明るく感じます。
明度差のある2色の配色は、明るい色をより明るく、暗い色をより暗く見せる視覚効果があります。
縁辺対比（えんぺんたいひ）
- 縁辺対比は、隣接した2色の境界付近が強調されて見える現象のことをいいます
縁辺対比により色の境界付近は、実際よりも差異が強調されます。
明るいグレーと暗いグレーが接する部分、明るいグレーはより明るく、暗いグレーはより暗く見えます。
無彩色などを間に挟めば、縁辺対比を回避できます。
この現象は明度だけに限らず、色相・彩度の対比によっても起こります。
鮮やかさの感じ方が変わる「彩度対比」
- 彩度対比は、周りにある色の彩度によって同じ色が違って見える現象です
- 周りの色が高彩度だと対象の色がくすんで見え、反対に周りの色が低彩度だと対象の色が鮮やかに見えます
真ん中の水色は同じ色ですが、高彩度（左シアン）に囲まれた方は実際の色よりも濁った色、低彩度（右グレーブルー）に囲まれた水色の方は鮮やかな色に感じます。
色相がずれて見える「色相対比」
- 色相対比は、周りの色の影響を受けて色相がずれて見える現象です
- 色相の異なる色を同時に見ると、周りの色の補色に近づいて見えます
真ん中のオレンジは同じ色ですが、赤に囲まれたオレンジは少し黄色っぽく、黄緑に囲まれたオレンジは赤っぽく見えます。
赤に囲まれたオレンジは、赤の補色である緑の方向に色相がずれて黄色っぽく、黄緑に囲まれたオレンジは赤紫の方向に色相がずれて見えるので赤っぽく見えます。
互いの色が主張し合う「補色対比」
- 補色対比は、色相環で反対側に位置する色（補色）同士を組み合わせると、互いの色が鮮やかに見える現象です
真ん中の赤は同じ色ですが、薄グレーに囲まれた赤よりも緑に囲まれた赤の方が色鮮やかに見えます。
ハレーション
- ハレーションを回避するには、色と色の間に無彩色などを入れるorどちらかの色の彩度を下げる方法があります
