気になる人
- 配色理論や勉強したけど、実際にやってみるとあまりうまくいかない
と、思っている方に配色方法と配色が与える印象を、実例を交えてご紹介します！
こんにちはとある企業で企画やWeb/UIデザイン・UXデザインを担当しています。モーリーと申します。
【配色の決め方①】配色理論と配色の種類を徹底解説！では、アメリカの色彩学者ジャッド氏の色彩調和論に絞り配色の種類などを解説していきました。今回は色の特性の解説と配色の系統ごとにまとめ、各配色の系統がどういったものなのか、またどんな印象を与えるのかについて解説しています。
目次
配色の基本！意味・印象と実例紹介
WEB/アプリUIデザインにも使える配色ツール５選で紹介している配色ツールを利用しながら、こちらの記事を読むことでより理解が深まると思います。
色の特性
イメージだけでなく、色には様々な特性があります。
これらの特性を理解しておくことでも目的にあった効果的な配色を考えることができます。
- 色の誘目性
- 進出色・後退色
色の誘目性
光の色には、人の目を引き付ける効果があります。
- 彩度は高い方が誘目性が高い
- 寒色系よりも暖色系の方が誘目性が高い
- 明度が低いよりも明度が高い方が誘目性が高い
- 色相でいうと、赤・黄・オレンジがもっとも誘目性が高い
危険を知らせるためのサインや、広告でもっとも目立たせたいところに誘目性の高い色を使うと効果的です。
誘目性は瞬間的なものなで、じっくり見るものや長時間過ごす場所に多用するのは意味がありません。
進出色・後退色
平面上でも明るい部分は手前に飛び出し、暗い影の部分は奥に引っ込んで見えます。
色の場合は、赤やオレンジなどの暖色系の明るい色ほど手前に、青や青に近いグリーンなどの寒色系の暗い色ほど奥に見えます。
暖色系の明るい色は進出して見えるため空間そのものを狭く感じさせるという特もあります。
逆に寒色系の色を壁などに用いて空間をより広く感じさせ、奥行きがあるようなイメージにすることも可能です。
配色の基本と効果
色を組み合わせることで、「穏やか・激しい」などの印象を与える効果があります。
このような視覚的あるいは心理的効果には一定の規則があります。
配色の基本となる規則について実例を交えて紹介していきます。
暖色の配色
暖色系統の色のうち、彩度の高い色味では暖かさや、情熱、活力など、力強い印象を人に与えます。
彩度の低い暖色の場合、優しさや穏やかさを感じさせる効果があります。
また、暖色系等の色には食品をより美味しそうに見せたり、購買意欲を高める効果があると言われています。
暖色配色の配色ポイント
基本的に同系色の組み合わせが基本になります。
暖色から外れた色を多用してしまうと、暖色のイメージが弱くなってしまいます。
ベースとなる色は、純色の赤です。
ここに同じ色相で明度と彩度を変化させた色を組み合わせるとモノトーン配色が、色相の近似色を取り入れることで近似色配色が出来上がります。
(アイデンティティ/ドミナントカラー配色/トーン・オン・トーン配色)
単調になりすぎる場合は明度や彩度の変化を大きくつけたり、無彩色を追加すると良いでしょう。
バランスの良い配色を目指すのであれば、同系色以外の色の彩度を抑えた色を用いて異なる色相を取り入れることも可能です。
暖色のイメージをキープした状態で、カラフルな彩りの印象を与えることができます。
ポイントカラーとして強い寒色を持ってくるのも印象的です。
この場合は使用する面積をごく少量にしましょう。
寒色の配色
寒色系等の彩度の高い色には、理知的な力強さが感じられます。
また、清潔感や正義感といったイメージもあり、企業や政治家などのイメージカラーを表すのに使われます。
また、明度の高い感触には清潔感に加えて優しさや親しみやすさも感じられ、医療用品や赤ちゃん用品のカラーに適しています。
寒色系は誘目性が低いため、広告などに用いる場合には使用する面積を大きくする、明度差を強調してメリハリをつける、ポイントカラーに赤や暖色系の色を少しだけ追加するといった工夫が必要になります。
配色ポイント
基本的に同系色の組み合わせになります。
ベースとなる色は、純色の青です。
ここに同じ色相で明度と彩度を変化させた色を組み合わせるや、無彩色や無彩色に近い低彩度の色を加えることで、寒色のイメージを壊さずにバリエーションを出すことができます。
アクセントとして少量の補色関係の色を加えたり、暖色を取り入れることで華やかな印象に仕上げることが可能になります。
同一色相配色
例えば、「青」と一口に言ってもスカイブルーのような鮮やかな青から、明るいベビーブルーのような濃紺まで、様々なバリエーションがあります。
同一色相配色は、それだけで全体の調和が取れる配色のテクニックで、なおかつ使用する色の持つイメージを強く訴求することができます。
調和の取りやすい配色テクニックだが、その反面単調で寂しい印象にもなりがちです。
同一色相配色の配色ポイント
基本の色を決めたらその同一色のバリエーションをなるべく豊富に用意し、その中から使う色を厳選します。
同じ色相でも明度や彩度の変化を大きくすればメリハリを感じさせることができる。
ごく少量のアクセントカラーとして近似色や補色に近い色を加えることもおすすめです。
無彩色の配色
「色味」の全くない、白から黒へのグレーの諧調だけを用いた配色のことです。
硬質で無機質な印象を与えます。
しかし、豊かな諧調を持たせることで、暖かみや柔らかさを表現することも可能です。
また、人には、色合いの違いよりも明暗差の方が優先され目に入るという特性があります。
無彩色配色の配色ポイント
微妙な明暗を使い分けましょう。
白と黒を大胆に使い、明暗のコントラストを大きくはっきりと示します。
目を引きたい部分に少量のアクセントカラーを用います。
無彩色にほんのわずかな色味を加える方法もあります。
グラデーションの配色
徐々に色が移り変わっていくように感じられる配色のことです。
単色の配色にはない柔らかさを感じられます。
ある程度広い面積を使って表現すると、グラデーションの効果を際立たせることができます。
グラデーション配色の配色ポイント
同一色相で、明度や彩度だけをグラデーションをさせます。
これは基本になる色を一つ決め、始点あるいは終点に向けて徐々に変化をつけていきます。
多色づかいのグラデーションや色相の変化が大きいグラデーションは、中間長の部分が濁って汚く見えてしまうことや、連続したグラデーションの効果が薄れてしまう場合があります。
基準色を純色に近い色を選び、色相環でなるべく近い関係にある色を選ぶことが重要です。
また、全体的に明度や彩度を変えることで印象の違うバリエーションを作り出すことができます。
色相配色
色相環城から満遍なく色を拾って配色することです。
トライアド、テトラード、ペンタード、へクサードなどを用いて配色します。
彩り豊かに華やかに、またバランスよく見せることができます。
色相配色の配色ポイント
幾何学的に色を抽出する手法になります。
彩度・明度をコントロールすることで色相配色は完成します。
トーン配色
同じ赤い色でも、彩度の高い鮮やかな赤は、「強さ・激しさ」と言った印象を与え、明度の高い赤は「柔らかさ・優しさ」などを感じさせます。
これが色の持つ「トーン」になります。
トーンは彩度と明度でコントロールします。
彩度の高いビビッドなトーンのデザインは、躍動感があり、華やかな印象になります。
彩度と明度を下げたグレーよりのトーンを使えば、重厚で落ち着きの感じられるデザインになります。
トーン配色のポイント
彩度と明度が近い色だけを用いる配色のことです。
調和のとれた配色を考える場合には、まずその制作物に合うベースカラーを選択します。
続いてそのベースカラーに彩度・明度を合わせた別の色相の色を組み合わせていきます。
色相の選び方は、色相配色を参考にしてください。
明度対比
なんらかのデザインエレメントを「見える」状態にするには、そのエレメントの色と他の色との間に差をつける必要があります。
この差が「対比」です。
もっとも人の目に強くくっきりと見えるのが「明度対比」になります。
明度対比の配色ポイント
全体を暗くして1色だけ明るくするなどポイント的にコントラストをつけるものと、明暗のはっきりとした色を様々に組み合わせるものがあります。
ポイント的な対比の場合には、ベースになる色の明度を下げたパターンと逆にあげたパターンとを作り出すことができます。
デザイン全体の印象はシャープで落ち着いたものになります。
明暗の組み合わせの場合は、デザイン全体に躍動感と激しさを感じさせることができます。
また色相も大きく変化させることで華やかなイメージも作り出せます。
その分まとまりは感じにくくなります。
彩度対比
彩度の高い色と低い色とを組み合わせです。
鮮やかな色は華やかで力強く見る人の目に届く反面、むやみに使用すると落ち着きのない、軽薄なイメージにもなってしまいます。
多くの場合、低彩度の色との組み合わせで彩度対比を作り出します。
もっとも彩度対比の効果が強く感じられるのは、高彩度な色と黒や白、グレーなどの無彩色との配色になります。
低彩度な色をベースにしてポイント的に高彩度な色を配置すると、高彩度な部分がまっすぐ見る人の目に飛び込むようなポイントカラーとして効果が高まります。
色の力強さを前面に出したい場合には、高彩度な色面を極端に大きくしてそれ以外の要素の面積は小さくします。
彩度対比の配色ポイント
基本は、高彩度な色と無彩色との組み合わせです。
高彩度な色の色相を変化させたり、無彩色の明度を変えることで、組み合わせのバリエーションを作り出すことができます。
また高彩度な色の色相をわずかに変化させた近似色での組み合わせや彩度や明度を変化させてグラデーションのような配色方法も美しく、また豊かなイメージが与えられます。
高彩度な色で、色相の大きく異なる組み合わせは、ポップで派手なイメージになります。
この場合は、低彩度の色の面積を小さくし、その刺激性を強調するように考えると良いでしょう。
組み合わせる無彩色が白だと爽やかに、グレーでは都会的なイメージに、黒だとシックな印象に変わります。
アクセントカラー
注目させたい場所やメリハリ・緩急などといった見せ所の演出に用います。
例えば、彩度の高い場所にわずかに無彩色を配置すれば、その無彩色がアクセントになり、逆に無彩色の中にわずかに高彩度色を配置すれば、その高彩度色がアクセントカラーになります。
アクセントカラーの配色ポイント
他の色との差異が大きいほど、アクセントとしては効果的な色だと言えます。
特に彩度の高い色は、無彩色や低彩度の色と組み合わせて使用すると効果的です。
アクセントカラーを複数用いると華やかに見せることもできます。
この他に差異の付け方として有効なのが補色です。
青に対しての黄色や、緑に対しての赤など補色同士の組み合わせは目に鮮やかなアクセントになります。
補色関係の強すぎる場合には、無彩色を組み合わせたり、中間的な色相を加えることでマイルドな印象にすることもできます。
補色配色
色相環上でもっとも遠いところにある色の組み合わせ、つまり色相の差がもっとも大きい色の組み合わせのことです。
彩度の高い色同士の補色配色は、非常に華やかで刺激性の高い組み合わせになります。
インパクトを与えたいデザインや、躍動感を強調した場合によく用いられます。
彩度の高い補色を隣り合わせに配置すると「ハレーション」という目がチカチカする現象が発生するので注意が必要です。
補色配色は、彩度や明度をコントロールすることで刺激を和らげることが可能です。
補色配色のポイント
与えたい印象によって彩度をコントロールすることが重要になります。
彩度の高い色同士では最も華やかで強い印象を与えるが、その分目への刺激が強くなります。
いずれかの色、または両方の彩度を下げることで刺激性を和らげることができます。
あるいは補色の間に無彩色や低彩度色を挟んで距離を開けたり、補色の中間にあたる色や近似色を組み合わせることで印象をコントロールすることもできます。
また完全な補色ではなく少し色相をずらして組み合わせることもできます。
まとめ
いかがだったでしょうか？
まずは、クリエイティブを通して「何を伝えたいのか？」「どうな印象を与えたいのか？」を決めて、その時に最適な配色方法を、本記事を通してお伝えしました。
バナーやチラシなどを作る際は、ぜひこの記事を参考にしてみてください。
さらに配色について詳しく実例を交えて学びたい方は、下記の書籍がオススメです。
２冊紹介していますが、どちらか１冊あれば十分だと思います。
合わせて読みたい
【色の意味解説！】デザインにおける色の意味と心理効果を解説！
【デザイン初学者必見】デザイン配色の決め方とコツ【バナー作成に役立つ】
【配色の決め方①】配色理論と配色の種類を徹底解説！
