お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

色彩理論ビギナーに贈る、色の「見えやすさ」についてのあれこれ

どうもこんにちはJBです。色の話というと「色彩心理学」とか「色彩イメージ」の話になりがちですが、見えやすいかどうかってのも割と重要だと思います。意識しなくても割と出来ている場合が多いのですが、ここは初心に立ち返って「見えやすさ」について考えてみたいと思いますよ!

見えやすいって?

一口に「見えやすさ」といっても、実は色々と定義があります。例えばこんな感じ。

  • 誘目性…注意を向けていない場面での発見のしやすさ
  • 視認性…注意を向けている場面での発見のしやすさ
  • 明視性…図形・細部の理解のしやすさ
  • 可読性…文字の理解のしやすさ

その場面にあった「見えやすさ」をうまく使い分けると、より人に伝わる演出ができるかと。

誘目性

あまり聞かない言葉ですが、パッと目を引きやすいかどうかということです。
背景色によって多少変動がありますが、こんな感じです。
誘目性
総じて暖色系が誘目性が高いですね!「気をつけろ!」「お買い得!」みたいな、見つけてもらいたいオブジェクトには誘目性が高い配色を使うと良さそうです。
道路標識とかも、危険系は黄色と黒の組み合わせや、赤のものが多いですし。
ただし、読みやすいかどうかは別問題になってくることもあるので、そこのところはよく考えて使うとよろしいかと思います。

視認性

視認性は、誘目性と同じ「発見のしやすさ」に関わっていますが、「視認性が高い」色合いと「誘目性が高い」色合いは違います。

視認性は、オブジェクトと背景の「明度差」が大きく影響します。
いかに周りに埋もれないかということが大事ですね!

「何か埋もれてるな…」という時は、明度差を大きくとってあげると視認性が向上しますよ!
明度差

明視性・可読性

便宜上分かれてますけど、大体気をつけることは視認性と同じです。背景に埋もれさせないことが大事です。
そんな訳で、こちらも明度差を大きくとってあげると見やすさがアップします。

「いいや!俺はどうしてもこの配色を使いたい!」という配色があって、その可読性が低い場合は、間に識別しやすい色を挟んでやってください。
セパレーション

また、長文はいくら明度差があっても、ギラギラした色合いだと読みにくいです。文章が長い場合は、出来る限り落ち着いた色を使った方がベターです。きっと。

実際に作ってみよう

実際に見えやすいものを作るときは、こんな感じのことをしたら、やりやすいんじゃないかと思います。

HSBで見る

カラーピッカー
カラーピッカーってありますよね。大体RGBやCMYKと一緒にHSBってのがあると思います。HSBはHue(色相)、Saturation(彩度)、Brightness(明度)で色指定するヤツです。
「明度変えてみようかなー」「色相をいじろうかなー」という時は、こちらを使った方が断然分かりやすいですよ!おすすめ。

組み合わせる

誘目性は高いけど、判別が難しい色もあります。白地に黄色とかは代表的ですね。
そんな時は記号や文字を判別しやすい色合いにして組み合わせてみても良いです。
Extramation
色だけでどうにかしようというのは難しいので、文字やアイコンなど、その他の要素をうまく使っていくことが必要になってきます。

番外編:ディスプレイでの見やすさ

ここまでは「明度差大きい=高コントラスト」の方が見やすい的な流れですが、
Webやアプリはディスプレイが発光しているため、コントラストが高すぎると目が痛みます。というか「キツいな…」という感じになります。
タイポグラフィ的なアイキャッチ部分とかはパキッとして格好いいのですが、長文とかだとけっこう堪えます。私は。私はですよ?
そんな時はゴリゴリの「白&黒」よりも、ほんのり白を灰色がかった感じにしたり、黒をダークグレー的にしたりすると痛さが和らぎますので、お試しくださいませ。

まとめ

いかがだったでしょうか?

Webでもアプリでも、ただ「わーキレイっすねー」というだけでなく、「コンテンツが見やすい」ことが大事になってきます。

色彩心理学的に…とか、コーポレートカラーがコレだから…とかの兼ね合いもあるので制約も結構多いですが、ここぞと言うところはきちんと見やすいように想定してあげると良いかと思います!

それではー!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00