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