COLOR LITERACY

COLOR

カラー・リテラシーを高めよう

色を利用して情報を分かりやすく

「センスが無い」では済まされない?
ロジカルな色選びで色の機能を活用しよう

フランスには「色と味は誰にも言い分がある」ということわざがあるそうです。
食べることは生きていく上で欠かせない行為ですから、グルメな人もジャンクフードが好きな人も、食の嗜好に関わらず皆それなりに語る言葉があるでしょう。
それと同じように、色を選ぶという行為も日常の中で繰り返し行っています。カラーバリエーションが豊富な商品の中から好きな色を選んだり、ファッションやインテリアの色の組み合わせを考えたり。
仕事の中でも何気なく色の選択を行なっています。例えば資料の文字色やグラフの配色を決めることもその一つです。
身の回りのありとあらゆるものには色が存在し、私たちは様々なシーンで意識的に、あるいは無意識的色の選択を繰り返していますよね。

また、人は情報の約8割を視覚から得ていると言われており、中でも「色」は「形」よりも脳の中で優先的に処理されているとも言われています。色から受ける影響は大きく、かつ色を選ぶ行為は「誰にでもできる」けれども、色を上手く活用できているか、自信が無い人も多いのではないでしょうか?
そこで、「何となく」選ぶのをやめて、「センス」を当てにしない、ロジカルな色選びに役立ちそうなポイントをまとめてみました。

色が持つ2つの役割

色には、大きく分けて2つの役割があります。

1.情報をわかりやすく伝える
2.イメージを表現する

アートやファッションの中の色彩表現など、主に2に関する方面に目を奪われがちですが、色が持つ機能を活用する1はビジネスパーソンにも欠かすことのできない重要なスキルの1つです。
情報を「見つけやすく・わかりやすく・見分けやすく」するために欠かせない色選びのポイントを以下から順に確認していきましょう。

見つけやすくする(目立たせる)配色のコツ

対象を見つけやすくするためには「誘目性」「視認性」の高い配色にすることが重要です。
まずこれらの言葉の意味を確認しておきましょう。

誘目性とは?
人の目を引きつける度合いのこと。注意を向けていないときに、周囲の環境から特に目を引く効果のこと。

特に意識していない人、関心の無い人に注目してもらうために重要なポイント。
つまり、関心の無い人を振り向かせるほど目立っている=「誘目性が高い」ということです。
セールを告知するポスターやタグには、赤などの目立つ色が使われていますよね。

誘目性を高めるには…

原則として、一般的には寒色系よりも暖色系、さらに高彩度の色が誘目性が高いとされています。
暖色系とは赤・黄赤・黄など暖かみを感じる色のこと。
左の色相環の中では左上に位置する色のことです。
反対側に位置するものが寒色系。また、温度を感じないその他の色は中性色と呼びます。

色相環上で暖色系と寒色系を示す

禁止事項や危険を知らせる場合など、気づいてもらわなければならない情報には高彩度の赤や黄色が多く使われていますよね。
また、広告などでも特に注目してほしい部分には赤系が使われているケースが多く見られます。

道路標識やセールのポスターなど

とは言え、「いつ、どんな時も」これらの色を使えば効果的という訳ではありません。
当たり前ですが、背景の色、周囲の色によってはかえって暖色系が目立たなくなってしまう場合があるからです。

背景と文字や図の色が近似している場合

赤い背景の上に、さらに赤系の文字や図を配置しては目立つどころ見過ごされてしまう危険も。

高彩度の赤でも、背景や周囲の色が全て同系色の場合は当然目立たなくなってしまいます。
デザインは1色では成り立たず、必ず複数の色から構成されるもの。色同士が互いに影響を受けることを常に意識しましょう。

補足

下図のように、背景色によって被験者が感じる誘目性に微妙な差が生じたという実験結果もあります。
背景は常に白とは限らないので配慮が必要となります。

誘目性の高い色と低い色の傾向

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

標識や建物内の案内表示などは高い視認性が求められる

対象を探している人にとって見つけやすく、分かりやすいと言う性質。
例えば公共施設の案内表示など、誰にとっても見つけやすく理解しやすいことが重要です。

視認性を高めるには…

コントラストが強い(違いの際立った)色の組み合わせは視認性が高くなります。この場合は特に明度差が重要です。
【明度】とは明るさの度合いのこと。最も明るい色は白、最も暗い色は黒ですが、赤や青といった有彩色にも明度差があります。

簡単に言うと「明るい色と暗い色を組み合わせること」でコントラスト効果が高まり、視認性が向上します。

視認性が良い例と悪い例

背景色と対象(文字や図)の色の明度差が大きい方が視認性が高くなります。

上図では左側はそれぞれの背景色(赤・緑)に対して対象の文字や図の色は、最も明度の高い白が使用されており、明度差が大きいため高いコントラストを保持しています。
対して右側は背景色と対象の色の明度差が小さいためコントラストが低く、視認性が悪い状態です。

わかりやすくする配色のコツ

分かりやすくするためには「可読性」「明視性」の高い配色にすることが重要です。

可読性・明視性とは
文字や数字の読み取りやすさ、図形などの意味の理解のしやすさのこと。
(対象が文字や数字の場合は可読性・図形の場合は明視性)

可読性・明視性が良い例

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

視認性と同様に、明度差の大きな配色にすることがポイントです。

可読性が高い例と低い例

明視性が高い例と低い例

背景が明るい色の場合は文字や図には暗い色を、逆に背景色が暗い場合は文字や図に明るい色、という具合に、常に明度のコントラストが強い組み合わせにすると読みやすく、分かりやすくなります。

見分けやすくする配色のコツ

見分けやすくするためには「識別性」の高い配色にすることが重要です。

識別性とは
複数ある対象の区別のしやすさのこと。

複雑に入り組んだ都内の路線図は色によって識別性が高められている

「色で識識別させること」は、情報量量が多く複雑な視覚表示において特に効果的です。
対象を区別させるためには、まず上で書いたように「見つけやすく・分かりやすい」明度差に注意した配色にすることも重要ですが、色が持つ象徴性を利用することで識別性を高めることができます。

識別性を高める「色の象徴性」

色自体に意味が与えられ、それが社会の共通認識として浸透している場合があります。例えば信号機の色などはわかりやすい例です。「赤は止まれ、⻘は進め」は世界的に採用されている色の決まり。こうした「色のスタンダード」がある場合は、それに沿った配色を意識すると対象を区別しやすく、見分けやすくなります。

赤・黄・緑の信号の色はその意味が広く浸透しており、様々な表現に取り入れられている

注意を喚起する場合は黄色を、安心感や安全のイメージには緑を使用することで、状況や状態を直感的に伝えることができます。

例「温かい/冷たい」など温度感を伝える場合は赤系/青系の配色によって直感的に伝わりやすくなる

暖色系、寒色系という色相の違いで識別させる方法も、身の回りでよく使われています。

ポイントまとめ
  • 誘目性を高める配色は
  • 一般的には暖色系の高彩度色は誘目性が高い。
    ただし、周囲の色と互いに影響し合うため必ずしも該当する訳ではないことに注意が必要。

  • 視認性を高める配色は
  • 背景色と対象の明度差を広げることが重要。(明るい色と暗い色の組み合わせにする)

  • 可読性・明視性を高める配色は
  • 背景色と対象の明度差を広げることが重要。(明るい色と暗い色の組み合わせにする)

  • 識別性を高める配色は
  • 色の象徴性を利用することで識別しやすくなる。

ピックアップ記事

  1. 色の調子【トーン】を利用した色選び
  2. Googleカラーパレットから作るカラーイメージサンプル
  3. カラー・リテラシーを高めよう
  4. 明度差による色のコントラスト
  5. 色の対比が生む視覚効果

関連記事

  1. COLOR

    カラー・リテラシークイズ ➀「明度の高い色はどっち?」

    明度を比較してみよう視認性や可読性の高い配色にするためには…

  2. Psychology of Color

    COLOR

    色彩心理

    ビジネスに使える? 押さえておきたい色彩心理の基本「色彩心理」と聞…

  3. CONTRAST

    カラー・リテラシー

    明度差による色のコントラスト

    コントラストを上げて見つけやすく、分かりやすく色を利用して「見つけ…

  4. Color Association

    COLOR

    色の連想

    赤は情熱? 共有されている色のイメージ私たちは日常的に色から多くの…

  5. COLOR

    Google Material Color Toolが便利!配色が苦手な人のお役立ちツール

    カラーパレットから選ぶだけ配色の参考サイトやツールは多々あれど、以外…

  6. contrast

    COLOR

    色の対比が生む視覚効果

    色は互いに影響し合う色の組み合わせによっては、単色の時とは違った見…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ランディングページ制作のポイント
  1. contrast

    COLOR

    色の対比が生む視覚効果
  2. Color Association

    COLOR

    色の連想
  3. ランディングページ制作のポイント

    OTHER

    ランディングページ制作のポイント 基本を押さえて効果的なLPを作ろう
  4. tone

    COLOR

    色の調子【トーン】を利用した色選び
  5. COLOR

    Googleカラーパレットから作るカラーイメージサンプル
PAGE TOP

バンドワゴン効果

多数に人気のあるもの、支持されているものに惹かれて、それらの製品や事象への人々の支持がさらに高まる現象。行列がさらに人を呼ぶなど。
※『バンドワゴン』とはパレード楽団のこと

フォールス・コンセンサス

多くの人が自分と同じ意見を持ち、同じような行動をするだろうと考え、自分を多数派だと思い込むこと。
(さらには周囲と同じ行動を取れば安心するという心理)
※False Consensus:偽の合意

同調効果

周囲と同じ行動をしていると安心し、逆に自分が正しいと思っても他人が異なる行動をしている場合には不安になるといった集団心理のこと。

ピグマリオン効果

他者の期待値が本人の成長・成績結果に影響を与える心理効果。
アメリカの教育心理学者・ローゼンタールの実験では、教師が期待をかけた生徒とそうではない生徒の間では成績の伸びに違いが見られた。
※『ピグマリオン』はギリシャ神話の自作の乙女像に恋をした登場人物から。

ウィンザー効果

口コミやレビューなど、第三者から間接的に情報が伝わることによって、より信憑性や信頼感が増す心理効果。
直接本人から伝えられる評価に対しては利害関係を疑ってしまうため、無関係の第三者の意見の信憑性が増して感じられる。

ハロー効果

ある対象を評価するときに、目立ちやすい特徴に引きずられて他の特徴についての評価が歪められる現象のこと。後光効果とも呼ばれる、心理学における認知バイアスの1つ。

希少性の原理

需要に対して供給が少ない時、手に入る機会が限定される場合など、同じ内容のものであっても価値を高く評価してしまう認知バイアスのこと。

アンカリング効果

交渉の際、先行して提示される何らかの数値によって後の数値の判断が歪められる認知バイアスの一種。
例えば「この商品は1万円より高いと思うか?」と尋ねることによって、回答はアンカーである1万円に近い数値になる傾向のこと。

カクテルパーティー効果

多人数が談笑している会合など周辺の雑音レベルが高い場合でも、自分が話している相手の声はきちんと聞き取れる現象から、
自分に関係のある情報には注意が向けられる効果のこと。

ストーリーテリング

伝えたい内容を、それに関連した体験談やエピソードなどを引用しながら伝えるすることで、相手に強く印象付ける手法のこと。
物語として記憶されるので印象に残りやすい。

エピソード記憶

特定の日時や場所と関連した個人的経験(イベント)に関する記憶

損失回避性

損失を、利益よりも大きく評価する心理効果のこと。
新たに得られる利益からくる満足より、同額の損失がもたらす苦痛の方が大きいと感じる現象。

バイヤーズリモース

買い物をした直後に感じる不安や後悔の感情。
商品の品質に関係なく発生するため、こうした不安を解消することで返品や解約のリスクを下げ、リピートに繋がることが期待される。

親近効果

最後に提示された情報の再生率が良いこと。「新近性効果」とも言う。
接客業における「お見送り」など、最後の情報で印象が決定されやすい。

リフレーミング

事実に対して与えている意味づけを変え、異なる見方でとらえ直すこと。
例えば不動産物件の「徒歩15分」という表現に対して、「駅から遠過ぎて資産価値が無い」「歩けば健康に良い距離」など、同じ情報でも人によって受け取り方が違う現象。

想起集合

マーケティングにおける想起集合
例えば消費者に対して、ある分野のブランド名や企業名を想起させる「○○と言えば?」といった質問をした際に想起された一群(通常3~5個程度)を想起集合、もしくは喚起集合と呼ぶ。

準拠集団

個人の価値観、信念、態度、行動などに強い影響を与える集団。
何かを決めるときに判断の基準となることがある。