MENU

出張デモ

資料請求
見積依頼

お問い合わせ

CONTACT

お問い合わせ

サイト職人CMSに関する
お問い合わせ・ご相談はこちらまで

東京本社

0120-546-384

受付時間 平日9:30~18:00

関西オフィス

0120-546-218

受付時間 平日9:30~18:00

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. 見やすい色の性質について考えよう

サイト職人スタッフブログ

見やすい色の性質について考えよう

6b0b511ef8b1dbbb460faadb107522b9_s

見やすい色とは、どういった色をイメージしますか?一言で見やすさと言っても、読みやすいかどうか、視界に入りやすいかどうか…など、複数の観点があります。
以前のデザインの基本となる「4大原則」についての記事では、主にレイアウトに着目して見やすさについて考えましたが、今回は色の性質に着目して考えてみましょう。

見やすい色の概要と具体例

標識、看板、案内表示など、街中では様々なデザインを見かけますが、私たちはパッと見ただけで、それが何であるかすぐに認識することができます。これは、デザインの基礎である見やすい色を利用しているからかもしれません。ここでは、見やすい色についての概要と具体例について確認していきます。

誘目性

誘目性とは、「注意を向けていない対象の発見のされやすさ」のことです。簡単に説明すれば、特に意識していないのに、「あれって、なんだろう?」と興味を持ってしまうようなイメージです。

誘目性を高くするには、有彩色や暖色、高彩度を意識します。主に、無彩色よりも有彩色を用いて、アピール度を高めます。道路の進入禁止の標識や地雷の危険エリアの標識を見れば、誘目性の意味をすぐに理解できると思います。

 

具体例…標識の禁止表示など
yuumokusei

 

可読性

可視性と類似する言葉として、可読性というものがあります。可読性とは、「すでに発見した対象物の持つ情報がすんなり理解できるかどうか」のことです。可読性の高い媒体物は、メッセージがストレートに伝わります。

たとえば、白い背景に黄色の文字では、大変見づらいと感じることでしょう。しっかりと見なければ、何が書かれてあるかよくわからないと思います。しかし、黄色い背景に黒色の文字ならどうでしょうか?何が書かれているのか、すぐに理解することができます。可読性を高くするには、地色(背景)と文字色の明度差を大きくすることが大切です。

 

具体例…案内表示における文字や数字・記号など
kadokusei

 

明視性

明視性とは、「図形が伝える意味の理解のしやすさ」のことです。類似する言葉としては、視認性があります。視認性は、対象物の見つけやすさに着目していますが、明視性は、対象物に含まれている図形の情報をすぐに理解できるか、ということに焦点があたります。

明視性は、図形自体の分かりやすさ、図形と背景の色の組み合わせにも影響されます。明視性が要求される標識として具体例を挙げると、非常口への避難誘導灯がイメージしやすいでしょう。安全性を表現する緑色で、人の形をした図形が非常口へと走っています。

この標識が表現するメッセージ性は、「こちらへ逃げてください。こちらは安全ですよ」といったものです。何かを伝えるために、必ずしも文字は必要ありません。いくつかの図形を用いることで、メッセージを伝えることもできるのです。

 

具体例…ピクトグラム、絵や図形など
meishisei

 

識別性

識別性とは、「複数の対象の中での区別・認識のしやすさ」のことです。識別性を高くするには、それぞれの情報を色で見分けられるように配慮することが大切です。たとえば、鉄道の経路図は、識別性を意識して作成されています。

鉄道といっても、〇〇線や□□線など、さまざまなものがあります。複雑に入り組んだものを同じ色で表現してしまったら、非常に見づらいでしょう。それぞれ色を分けて使うことで、どこにどの路線があるのかが、視覚を通してすぐにわかります。

他の識別性の例としては、電気ケーブルがわかりやすいでしょう。パソコンのモニターのケーブルには、主に青が利用されています。他の色はあまり見かけません。これは、たくさんのケーブルを利用する際、識別性を高めるために色が統一されているのです。

 

具体例…鉄道の路線図、パソコンのモニターのケーブルなど
sikibetusei

 

まとめ

コンテンツを多くの人に見てもらうためには、ただ配色を考えるだけでなく、これらの性質も意識することが大切です。また、カラーユニバーサルデザインといった言葉もあります。こちらでも基礎から解説しておりますので、見てみてください。

初心者でも簡単カラーユニバーサルデザインの基礎知識
https://www.site-shokunin.com/blog/design/2823.html

PAGETOP