判断されるのはわずか3秒!色の機能は活用必須

色の機能

はじめに

色の機能

こんにちは内定者の増田です。

皆さんは商品を買ったり、何か欲しいものを探すときに、どんなことに注目するでしょうか?

価格

その商品の独自の強み

原産地

使用方法

などなど、様々な要素が目に入ってくるかと思います。
しかし、世の中には同じような商品がいくつも溢れかえっています。

遜色ない

ちなみに、ホームページを使った商品販売において、お客様が探している
商品を扱っているページか判断するのに要する時間はわずか3秒です。

そんな中、いざ自分が商品を売る側になった時、数ある商品の中から
あなたの商品を目立たせるためにどうすれば良いでしょうか?

そこで今回は、見た目をよくするためだけではなく、情報を的確に伝える
ために、実用的な役割も担ってくれる『色の機能性』 をご紹介します!

色の機能性①
『見つけやすくする』配色

見つけやすい

★振り向かせたいと思ったら➡︎誘目性

・誘目性とは

人の目を引きつける性質のこと。
注意を向けていない時に、周囲の環境から特に目を引く効果のことです。
「禁止事項や危険」など緊急性が高く重要な情報を知らせる際には、欠かせないものです。

キャッチコピーなど関心の無い人にも注目してもらいたい要素に
「誘目性の高い色」を使うことによりその効果が期待できます。

特に目的なくウィンドウショッピングに訪れた人の目を引いて、
思わず衝動買いに走らせる「SALE」のポスターなどに利用されています!

Webサイト上で最も目を引きたい情報やバナーに使用して、効果を引き出します!

振り向かせたい

・誘目性の高い色

一般的には黄、黄赤、赤などの暖色系は誘目性が高いとされています。
原則として「暖色系かつ高彩度の色は誘目性が高い」と覚えてください!

・注意点

高彩度の場合でも、周囲に同じような色が使われている時は目立ちません。
文字と背景のバランスには、十分気をつけましょう!

★見つけてほしいと思ったら➡︎視認性

・視認性とは

注意を向けて何か探している時の対象の見つけやすさのこと。
周囲から際立っていて、認知しやすいという性質です。

公共施設の非常口やトイレなどの案内表示は、誰にとっても見つけやすいということが重要です。
必要な情報が見つけられないことは、受け手にとってストレスとなるので、
十分な配慮が必要です。

必要な情報が見つけられない、分かりにくいとサイト離脱の可能性も!
ユーザーが不満を抱きやすいポイントなので要注意。

ショッピングサイトのカートボタンや配送情報など、ユーザーが見つけやすいような配慮が必要です。

見つけてほしい

・視認性の高い色

コントラストが強めの(違いが際立った)色の組み合わせを選ぶことで視認性が高まります。

特に重要な要素は明度差です。明度差が大きければ大きいほど、対象を見つけやすくなります。
明度とは明るさの度合いのことです。

色の機能性②
『分かりやすくする』配色

分かりやすい

★分かってほしいと思ったら➡︎明視性
★読んでほしいと思ったら➡︎可読性

・明視性 / 可読性とは

明視性・可読性とは、認知した対象(文字や図形)の読み取りやすさ、
理解のしやすさのこと。

対象が図形の場合は明視性、文字・数字の場合は可読性、と言います。
標識や広告など、離れた位置からでも情報を正確に伝えるという点において大変重要視されます。

見やすい

・明視性と可読性が高い配色

視認性と同様、特に「明度差」が重要なポイントになります。
背景と図・文字の明度差が大きいほどコントラストが際立ち、分かりやすく読みやすくなります。

背景と図の明度差が低い場合は非常に見にくいものになってしまいます。
分かりやすく ・ 読みやすくするには、色以外の「形」や「書体」も重要になります!

色の機能性③
『見分けやすくする』配色

見分けやすい

★見分けてほしいと思ったら➡︎識別性

・識別性とは

対象物の区別のしやすさのこと。
情報量が多く複雑化した対象を瞬時に見分けさせるために、色を使って整理すると効果的です。

地下鉄の路線図は路線ごとに色が設定されており、見る人が入り組んだ図を
識別し利用するのに役立っています。

情報を整理し、直感的に見分けさせるために色を利用すると効果的です!

路線図

・識別性を高めるポイント
【1】
色数が多くなると、全体のまとまりが弱く、散漫な印象を受けます。
そこで、使用する色相の数を減らし、明度や彩度を変えることで、

色のバリエーションを増やすと統一感が生まれ、落ち着いた印象になります。
また、色同士が隣接している場合は、互いに明度差を付けることで、境界が
はっきりして見分けやすくなります。

【2】
ポイント1と同様に、色数が増えてバラついた印象になるのを抑えるために、
一部に無彩色を使う方法もあります。

無彩色はニュートラルな色なので、
どの色相に対しても、バランスを取りやすいのが特徴です。

【3】
色自体に意味が与えられ、それが社会の共通認識として浸透している場合があります。

例えば信号機の色。
「赤は止まれ、青は進め」は世界的に採用されている色の決まりです。

こうした「色のスタンダード」がある場合は、それに沿った配色を意識すると効果的です。

まとめ

いかがでしたでしょうか?
いつも何気なく見ている物も全てこの原理原則に沿って作られています!
色の違いを理解すると、移ろいやすいお客様の心理を上手く掴むことが出来ます。

今日から少し意識して彩りのある生活をしてみてはいかがでしょうか?
また、ぜひ御社のサイトがここに上げたようなポイントを含んでいるか
セルフチェックをしてみてください。

原理原則

 

色の機能

参考になったらシェアをお願いします!