色彩の利活用！機能的役割と色彩の連想効果の知識

色彩には、プロダクトやサービスをイメージ付けする効果、文字や画像を見やすくする・目立たせる効果、人の感情や気分など、様々な面で影響を与えています。
色彩の概念を取り入れることで、CV率向上や購買行動の促進にも繋がります。

また、心理学の「メラビアンの法則」(3Vの法則, 7-38-55 ルール) から、他者の印象は、言語情報 [Verbal] (7%), 聴覚情報 [Vocal] (38%), 視覚情報 [Visual] (55%) の割合で判断しているといわれています。

今回は、ユーザーとプロダクトやサービスの繋ぎ目となる視覚情報の中から色彩の機能的役割と色彩の連想効果についてご紹介します。

• サービスやプロダクトにより付加価値を付けたい
• 色彩の持つ役割や効果について知りたい
• 仕事や私生活共に活かせる知識について学びたい

色彩の機能的役割

色の表し方

色は大きく分けて、無彩色 (色みのない色の 白・灰・黒) と有彩色 (色みのある色) に分類されます。

無彩色においては明度、有彩色においては色相, 明度, 彩度で色が表されます。

• 色相 (Hue)は・・・色みの種類や性質
• 明度 (Value, Lightness, Brightness) は・・・色の明るさ
• 彩度 (Saturation, Chroma) は・・・色の鮮やかさ

色の機能的役割

色には、機能的な役割があります。
意図したメッセージを伝えるためには、いかに効果的に表示するかがポイントとなります。

視認性

注意を向けた状態で対象物を探した際の対象物の発見のしやすさのことです。
視認性を意識することで「見やすさ」が向上します。

視認性を高めるには・・・

• 背景色と対象物の間に明度差を設ける
• 扱う色やフォントのルールを統一する (必要以上に使用数を増やさない)
• 色固有の持つイメージを活用する

他にも・・・

• フォントサイズや行の高さを調整する
• メインコンテンツの幅を調整する
• サイトに合ったレイアウトを使用する

誘目性

注意を向けられていない状態での対象物の発見のされやすさのことです。
誘目性を意識することで「目につきやすさ」が向上します。
無彩色よりも有彩色、低彩度よりも高彩度、寒色よりも暖色の方が誘目性が高いとわれています。

誘目性を高めるには・・・

• 背景色と対象物の間に明度差を設ける
• 特に注目を集めたい箇所には誘目性の高い色 (赤や黄など) を使用する

明視性・可読性

対象物の理解のしやすさを表し、それぞれ、図形の場合は明視性、文字の場合は可読性といいます。
明視性・可読性を意識することで、図形や文字における「理解のしやすさ」が向上します。

明視性や可読性を高めるには・・・

• 項目に合った理解しやすいアイコンを使用する
• 色の組み合わせを意識する

他にも・・・

• 他にもコンテンツ間に適切な余白を設ける
• フォントサイズや行間、字間、行長を調整する

識別性

複数の対象物の区別や認識のしやすさのことです。

識別性を高めるには・・・

• 複数の分類があった際、区別しやすい色を使用する
• 色から連想するイメージを活用する

色から連想するイメージ

色には固有の持つイメージやキーワードがあります。
個々の連想イメージを意識することで、状況に応じた色の使い分けをすることができます。

色が与える心理的効果

色は人の様々な心理作用に影響を与えるといわれています。

暖色と寒色

暖かく感じられる色と冷たく感じられる色があり、暖かみを感じられる色を暖色 (赤, オレンジ, 黄など)、冷たく感じられる色を寒色 (青緑, 青, 青紫など) といいます。

進出色と後退色

対象物の距離間が同じでも、暖色は近くにあるように見えるため進出色、寒色は遠くにあるように感じられるため後退色といいます。

膨張色と収縮色

明度が高い色はサイズが大きく見える膨張色で、明度が低い色はサイズが小さく見える収縮色といいます。

興奮色と鎮静色

暖色で彩度が高い色に多い興奮色、寒色で彩度が低い色に多い鎮静色があります。

色彩は人の印象に影響を与え、サイト作りやプロダクト、サービスに欠かすことのできない
要素です。
クリエイティブ職やフロントエンド周りの職に就いている方に限らず、色彩に興味や関心を持つことで、普段の生活や仕事に利活用することができます。

弊社では、事業共創プロジェクトチームを掲げており、部門を横断して、様々な知見を持つメンバーでチームを結成しております。
Webサイト新規構築や事業や販売拡大を考えたリニューアルなど、お考えの方は、お気軽にお問い合わせください。