では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。
色相差で配色
【イメージ効果】
暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な
→ 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。
背景色の心理補色(黄⇔青 赤⇔緑)の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。(色相対比)
明度差で配色
【イメージ効果】
軽い⇔重い 浅い⇔深い 弱い⇔強い 柔らかい⇔硬い あっさり⇔くどい
→ 明度が違う色同士を組み合わせると、明るい色はより明るく見え、暗い色はより暗く見えます。(明度対比)
彩度差で配色
【イメージ効果】
派手な⇔地味な 動的な⇔静的な
→ 彩度が違う色同士を組み合わせると、彩度の高い色はより鮮やかに、彩度の低い色はよりくすんで見えます。(彩度対比)
トーンを基調にした配色
【イメージ効果】
- ビビットトーン:鮮やか・賑やか・エネルギッシュ
- ブライトトーン:明るい・陽気・華やか
- ライトトーン:軽やか・楽しい・澄んだ・純粋・幼い・爽やか
- ペールトーン:女性的・優しい・可愛い・繊細
- ソフトトーン:柔らかい・穏やか
- ライトグレイッシュトーン:渋い・上品・エレガント・フェミニン
- ダルトーン:シック・ナチュラル・和風
- グレイッシュトーン:クラッシック・地味
- ディープトーン:濃い・深い・濃い・実り・和風・伝統的
- ダークトーン:大人・丈夫・高級
- ダークグレイッシュトーン:男性的・固い・陰気・重厚
- ストロングトーン:力強い
→ トーンは色の調子を表す言葉で、明度と彩度を表した「色のものさし」のようなものです。
トーンに共通性があると統一感のある配色になりやすく、トーンを基調に配色すると簡単に印象やイメージをコントロールすることができます。
- 同一トーン … 色相差0
- 類似トーン … 色相差2〜3
- 対照トーン … 色相差8〜10
トーン別のカラーチャートや伝統色など Web デザインに役立つサイト
色彩のスパイス - 色彩の配色と色見本
PCCS(ヒュートーンシステム)配色
- ドミナントトーン配色
同じトーンで統一した配色(色相差0〜2)
「同一色相」配色が基本となるが、類似色相配色までの範囲でまとめてもよい
- ドミナントカラー配色
同じ色相で統一した配色
- トーンオントーン配色(色相差は自由)
同じ色相でトーン(色調)を変化させた配色
穏やかで落ち着いた配色ですが、平凡になりやすい
- トーンイントーン配色
明度は同じで色相を変化させた配色
「同一トーン」or「類似トーン」で明度差の小さい組み合わせ
明暗が同じなので、違う色相を使っても違和感がない
- トーナル配色
トーナルとは「色調の」「色合いの」という意味
中明度、中彩度の中間色調(d、sf)、濁色調(ltg、g)の配色
- カマイユ配色
色相 ・トーン共に近い色を組み合わせた配色
単一画の絵画技法で、ほとんど一色に見えるほどの色の差が微妙な配色
- フォカマイユ配色
カマイユ配色よりやや色相差がある配色
- ピコロール配色
ピコロールとは、「2色」という意味
コントラストの効いた明快な配色
- トリコロール配色
トリコロールとは「3色」という意味
フランス国旗の「赤、白、青」ドイツ国旗の「黒、赤、黄」のような3色配色のこと
無彩色を活用
【イメージ効果】明るい⇔暗い 軽い⇔重たい
無彩色(白・黒・グレー)はどんな色とも不調和を感じさせません。
対比の強い配色を和らげたり、曖昧な配色にメリハリをつけたい時に、無彩色や彩度の低い色を「セパレートカラー」に使うと効果的です。
色の面積効果
同じ色でも面積によって色の見え方は異なります。
明るい色は小さな面積より大きな面積の方がより明るく感じられ、暗い色はより暗く感じられます。
色の誘目性
人の視線の流れは、左から右・上から下へと流れていきます。
誘目性の高い色は、上側や左側に配置すると、ページや文章にリズムをつけ自然に視線を誘導することができます。
無彩色よりも「有彩色」「彩度の高い色」「暖色」のほうが注目されやすくなります。
多色使いのポイント
- 低彩度の色は、色数を多くしてもOK.
- 高彩度の色は、色数を少なく面積は小さく
- 面積の広い部分は低彩度の色を使う
日頃から、雑誌やパッケージデザインなどを見て「なぜその商品に惹かれたのか」考えることも配色の勉強になりますね。
【こちらもオススメ】
坂本邦夫の「基礎からわかるホームページの配色」
【関連記事】
[無駄に長くなった]