ノウハウをいつでも。ウェブマーケティングのポータルサイト

心を掴む!カラーマーケティングの極意

マーケティング

044見えやすさを決める配色の基本、「視認性」と「誘目性」

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
前回のコラム「Googleマテリアルデザインのカラーパレットのイメージと役割」では、主にプライマリーカラーの19系統の色のイメージと役割について、解説しました。

プライマリーカラーは、主に、ツールバーや大きなカラーブロック、ステータスバーなどに用いられます。プライマリーカラーよりも鮮やかなアクセントカラーは、主に、アクションボタン、スイッチ、スライダーなど、ユーザーに好意をうながすパーツに用いられます。

このように、Googleマテリアルデザインのカラーパレットは、目的に合った色を選びやすいように構成されています。今回は、視覚デザインの基本のひとつ「見えやすさ」について、解説します。

背景との関係が規定する「視認性」

見えやすさにも、いくつか種類があります。例えば、視認性は、均一の背景に異質な一つの色(文字)があった場合、どの程度の距離からその存在を検出できるかの度合いを指します。

color visibility01.jpg

上図のグラフの縦軸は、明度をあらわしています。有彩色の中では、イエローが最も明るく、ブルーやパープルが最も暗いことを示しています。白を背景にすると、低明度のブルーやパープルは見えやすく、高明度のイエローは見えにくくなります。

color visibility02.jpg

上図のグラフのように、中明度のグレーを背景にすると、低明度のブルーやパープルが見えやすくなり、中明度のレッドやグリーンが見えにくくなります。

color visibility03.jpg

上図のグラフのように、黒を背景にすると、低明度のブルーやパープルは見えにくく、高明度のイエローは見えやすくなります。

このように、特定の色が見えやすいのではなく、背景との差が視認性を左右します。色の三属性(色相、明度、彩度)のうち、視認性を規定する最も重要な条件は、背景との明度差です。背景を有彩色にする場合は、高明度のイエローと低明度のパープルのような組み合わせにすると、視認性が高くなり、オレンジとグリーン、あるいは、ブルーとパープルのように、明度差の小さい組み合わせにすると、視認性は下がります。

なお、色覚異常の大半は、明暗を弁別することができるので、適度な明度差のある配色にすれば、ユニバーサルデザインの観点からも、かなりの程度で「視認性」を確保することは可能です。

文字の「可読性」

可読性とは、文字や数字・記号の意味の理解のしやすさのことです。視認性は、文字など対象物の発見のしやすさのことですが、可読性は、すでに発見した対象物の持つ情報を理解できるかどうかを示しています。何かがあると認識できて、さらに、どのような文字が書いてあるのかわかる状態であれば、可読性は高いといえます。

文字の大きさ、字間の広さ、フォントなども重要な要素ですが、色に関しては視認性の高さ(背景との明度差)が、可読性を左右します。

前回のコラムでも触れたように、Googleマテリアルデザインのカラーパレットは、有彩色の背景に合わせて、黒か白、どちらか可読性の高い文字の色を用いています。視認性や可読性の手がかりとなるでしょう。


複数の「図」の関係が規定する「誘目性」

目立ち具合を物理的な距離で識別する「視認性」に対して、「誘目性」は、心理的な心の変化で目立ち具合を数値化します。「誘目性」は、背景の色、色の大きさ、強さ、持続時間、動きなどによって変わりますが、一般的に色の目立つ度合いは次の通りです。

  • 有彩色>無彩色
  • 白>黒
  • 暖色系>寒色系
  • 高彩度色>低彩度色
attention value.jpg

上図は、黒、中明度のグレー、3種類の無彩色背景での有彩色の誘目性を示したものです。背景の色によって、違いは見られるものの、全体の傾向として、イエロー、オレンジ、レッドといった暖色系の視認性が高いことを示しています。寒色系のブルーは目立つ色ではありませんが、グリーンやパープルといった中性色よりも視認性が高いので、多用しすぎるのは禁物です。

誘目性は彩度も重要です。 前回のコラムでも触れたように、Googleマテリアルデザインのカラーパレットは、プライマリーカラーと、より鮮やかなアクセントカラーで構成されています。目立たせたいところは、アクセントカラーを用いると効果的です。

視認性や誘目性は、知覚的な目立ち具合を表したもの。Googleマテリアルデザインのカラーパレットは、プライマリーカラー、アクセントカラー、文字の色を組み合わせて、配色の指針を示しています。 伝えたい情報の優先順位に合わせて、カラーパレットを活用してみてはいかがでしょうか?
参考
色のアンケート

ウェブアンケートを活用して、カラーリサーチを行っています。20秒程度でご回答いただけますので、ぜひ、ご意見をお寄せください。アンケートの集計結果は、今後のコラムで解説させていただきます。ご協力をお願いいたします。

© Hanae Matsumoto

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

マツモトハナエ

松本英恵

カラーコンサルタント
2005年6月より、All About(オールアバウト)カラーコーディネートガイド
好きな色、似合う色、売れる色、心をつかむ色など、さまざまな観点から、カラーコーディネート、カラーマーケティングのノウハウをお伝えしています。
著書に、『心をつかむ色とデザイン 商品力・サービス力を磨くためのスキルアップ講座』(日本能率協会マネジメントセンター)、『和モヨウ配色手帖 オシャレな“和モヨウ”でもっと磨く配色レッスンBOOK』(技術評論社)などがある。

取材・仕事・講演のご依頼は、公式サイトへお願いいたします。
松本英恵のカラーコンサルティング

他の参加者を見る

松本英恵

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!