Webサイトやポスターを作る際に、どんな色を使ってどのように配置すれば良いのか迷うことはないでしょうか？
色には、組み合わせた時に合う合わないなどの相性があったり、涼しい・情熱的な・愛情といった印象をそれぞれ持っています。これらの役割をうまく使っていくことで、Webサイトやポスターの印象が変わってきたり、人々を引きつけることができるかどうかも大きく変わってきます。
目的にあった配色ができるように、色のもつ役割を紹介していきます。
色を構成する要素とその機能
色がもたらす効果には、そのデザインがもつ統一感や違和感・視認性・ユーザーに与える印象・心理的効果などの心理的・機能的効果を与えたいときに使われます。企業のイメージカラーなどは、統一感や信頼性、購買意欲などに繋がることが多いです。
配色の知識には、どういったものがあるのか見ていきましょう。
配色をする上で最も必要なことは、色のパターンを決めることです。
色を決める要素には、明度・彩度・色相の３要素が非常に良く使われます。
これは、色を定量的に表す体系である表色系の１つで、マンセル・カラーシステム(Munsell Color System)と呼ばれているものです。
明度・彩度・色相には、それぞれ役割と持つ印象があり、それらを調整することで効果が大きく変わってきます。
次に、それぞれの役割や印象を紹介していきます。
色相(Hue)
色相は、色味扱う要素です。色味を扱う事で暖かさやクールさなどの寒暖感を決める事が出来きます。アットホームな配色にしたければ暖色系の色を、企業などきっちりしたイメージにしたければ寒色系などを選ぶといいでしょう。
明度(Brightness, Value)
明度は、色の明るさを扱う要素です。明度を高くすれば白に、低くすれば黒に近くなります。軽さや軟らかさ・重さや固さなどの軽重感を決める事が出来ます。これは、色が白に近ければ軽い、黒に近ければ重いという考え方に基づいているためです。
彩度(Chroma)
彩度は、色の鮮やかさを扱う要素です。元気さや落ち着き、シックさなどの気持ちの抑揚を決める事が出来ます。
トーン(Tone)
トーンは、似たような明度と彩度で色をまとめたものです。それぞれのトーンは、それぞれの明度と彩度から導きだされた印象を持っており、それらを意識する事で色同士を調和させることができます。
- トーンの種類
- ホワイト(White)
- グレイ(Gray)
- ブラック(Black)
- ペール(p+)
- ライトグレイッシュ(ltg)
- グレイッシュ(g)
- ダークグレイッシュ(dkg)
- ライト(lt)
- ソフト(sf)
- ダル(d)
- ダーク(dk)
- ブライト(b)
- ビビット(v)
- ストロング(s)
- ディープ(dp)
各色が持つ印象
色には、それぞれが持つ印象というものがあります。これは、どの色にも存在するもので、多くの人が普段見ている自然の色と密接に関わっていることが多いです。
青（寒色）
海・清潔感・冷たい・信頼感などの落ち着いたイメージ
企業系の Webに多く使われています
緑（中性色）
自然・癒し・調和・健康・安心感など心が落ち着くイメージ
黄色（暖色）
アクティブ、元気、明るいイメージ。主張の弱い色
オレンジ（暖色）
食欲、楽しい、暖かい、自由イメージ
食品系のパッケージなどで良く使われています
赤（暖色）
情熱的、刺激的、衝動的、ダイレクト感、警告、生命のイメージ
基本的に強い色なので彩度を高くすると主張が強くなります
紫（中性色）
優雅、魅力的、神秘的、おしゃれ、アダルトなイメージ
主張の強い色
白（無彩色）
純粋、無垢、潔白、純粋、汚れのないイメージ
色を際立たせるのでベースの色としてよく使われています
銀色（無彩色）
洗練、知的、誠実、冷たさ、先進的、上品イメージ
灰色
憂鬱、不安、過去、薄暗い
黒（無彩色）
高級感、機能的、闇、死、悪、夜、男性的
色がもたらす効果
色を効果的に使うことで、見る人や読む人に対して様々な効果や印象を与える事が出来ます。
機能的効果
- 視認性を上げる
- 可読性を上げる
- 誘視性を上げる
- 識別性を上げる
情緒的効果
これは、見た人の心理に直接的に働きかけるような効果が多く出ます。何か商品を買ってもらいたかったり、コレクションするきっかけなどユーザーの行動を誘導したいときに大きく影響します。
しかし、人によって効果が異なることも多いので、定量化するのが難しいものでもあります。
購買意欲
イラストやレイアウトが同じでも色が異なる事で、購買意欲が左右されます。特に効果の高いのが誘視性の高い、高彩度の暖色系の色。
この色はもともと、注目度が高く心理的に興奮させる色。その中でも赤は、緊張感や興奮感を増幅させるので、ネットショップなどいろいろなところで使われます。黄色やオレンジは、興奮感やカジュアル感を高め、より身近に感じやすいです。
- カラーバリエーション
- ターゲットを増やせる
- 各色が魅力的であること
- 全ての色を並べたときに美しくなる事
- 捨て色を用意すること
- 統一感を持たせられる
- 印象を変えられる
- 付加価値を上げられる
- 企業やメーカーなどに色を定着させる事ができれば、その色がブランドとなり付加価値をより上げてくれる
- オリジナル性が求められるため、汎用性の高い色や心理四原色を使ってこの効果を得るのは難しい
まとめ
今回は、配色がそのデザインが見た人にどのような印象を与えるのか、その人の行動にどう繋がるのかなどの心理的効果をまとめました。最後にもう一度紹介します。
- 色を構成する要素とその機能
- 色相
- 明度
- 彩度
- トーン
- 各色が持つ印象
- 色がもたらす効果
- 機能的効果
- 情緒的効果
- 購買意欲
配色にはまだまだ、バランスや調和など様々な知識がある。今度はその辺りについても、ブログに書いて行きます。
