![見出し画像](https://assets.st-note.com/production/uploads/images/72019037/rectangle_large_type_2_11b296f17bd210323fec12284e92d705.png?width=1200)
もっと早く知っておきたかった色彩の話
依然として駆け出し続けているエンジニアのきいです。デザインを見たり考えたりすることが好きなわたしは、日々「コードを書かねばならぬ」という強迫観念にあおられながら、まったく無縁というわけでもない「デザインも勉強したいよ!」と思い、全人類に内緒で勉強していたことを満を持してnoteで放出します。
なぜ、いまなのか? 色彩検定2級に合格したから🎉 です(本日15時発表)。箔が付いたでしょ? と言いたいわけじゃなく、もう勉強しちゃったもんね〜 という意味です。
ここでは、はじめてちゃんと色彩の勉強をしてみて、なるほど! 応用できるかも! と思ったことを中心にまとめます。
色の効能
色は見やすさを決める大切な要素です。色の効能について、いくつかにわけて見ていきます。
人の目を引く色: 誘目性
注意を向けていない状態で、どれだけ人の目を引くかを誘目性と言います。
無彩色よりも有彩色のほうが目を引かれますね。もっというと、グレーがかった微妙な彩度の色よりも、より彩度が高く、はっきりくっきりした色のほうが人の目に止まりやすくなります。
また、誘目性は背景色の影響も受けます。たとえば、下の画像のように、白い背景のときは赤がもっとも注意を引きやすい。一方で、黒い背景のときは黄のほうがはっきりと見え、もっとも誘目性が高い色だといえます。
![画像2](https://assets.st-note.com/production/uploads/images/40337084/picture_pc_0da4a5c955fb4b20d8dd2b0e7658badd.png?width=1200)
![画像3](https://assets.st-note.com/production/uploads/images/40337099/picture_pc_a19d43aebd6dd5a3217a414ef849757d.png?width=1200)
※右に行くほど誘目性が高くなる。
上の2パターンに共通しているのは、寒色系と比較して暖色系のほうがより目を引きやすい位置にあることです。ざっくりとこのことだけでも知っていると無意識下で気づいてもらいたい! というときに有効な色が選べそうですね。
街なかの洋服屋さんのディスプレイなどを思い浮かべてみても、赤色や黄色などの暖色系が使われていると、無意識に歩いていてもぱっと目に入るのがイメージできるかもしれません。
見つけやすい色: 視認性
注意を向けた状態で、どれだけ発見しやすいかを視認性と言います。意識的に探したときに見つけやすいかどうか、です。
見つけやすさの肝になるのは明度の差です。暗い背景に暗い文字色をのせたときよりも、明るい背景に暗い文字色をのせたときのほうが見やすくなります。以下の図を見比べてみると、わかりやすいですね。
![画像4](https://assets.st-note.com/production/uploads/images/40338190/picture_pc_c1a65698ae5a65e6af992f4244a79c1e.png?width=1200)
要は、明るさにコントラストがある方が発見してもらいやすいよ、視認性が高まるよ、ということです。
区別しやすい色づかい: 識別性
複数の対象の区別しやすさのことを識別性といいます。色分けすることで、わかりやすくしている例は日常の中にもたくさんあります。路線図が典型的な例です。
![スクリーンショット 2020-12-07 2.34.35](https://assets.st-note.com/production/uploads/images/40338455/picture_pc_caa0031360f7e9a3c11aa2b91e020445.png?width=1200)
[参考]東京メトロ - 路線・駅の情報
入り組んだ路線も色分けされていることで、認識しやすくなっていますね。
*色覚には多様性がある
ここで色の見え方には個人差があるということをお伝えしておかなくてはなりません。
一つは、色覚特性によるもの。遺伝的な要因によって、黄緑とだいだい色が見分けにくい、青と紫が見分けにくい、などさまざまな人がいます。
もう一つは、加齢により目の水晶体が黄変し、色味が違って見えることによるものです。黄変すると黄色がかって見えるようになるため、青と黒や黄と白の識別が難しくなります。
*誰にとっても見やすい色づかいとは?
誰にとっても見やすい色づかい(色のユニバーサルデザイン)を意識したときのポイントとして知っておきたいことは以下の3つです。
1. 混同されやすい色を避ける
とくに高齢者が使うことが想定される場面なら青と黒や白と黄を使わないようにするとよいでしょう。
2. 明度差をつけるようにする
色覚の多様性によっては、明度の近い色が同じ色に見えてしまうことがあります。明度差をつけておけば、違う色として認識しやすくなります。
3. セパレーションも有効
一見、区別しにくい色の組み合わせだったとしても、白や黒など明確に異なる色を挟むだけで、これだけ見やすさが変わります(セパレーション)。
![画像6](https://assets.st-note.com/production/uploads/images/40338760/picture_pc_7f8a731d96d1e484f17e29b16537b32a.png?width=1200)
色のもつイメージ
次に、色のイメージを見ていきます。
![画像1](https://assets.st-note.com/production/uploads/images/40265230/picture_pc_bcef2fb4a48a78db7b9dd6c92135d069.png?width=1200)
赤が「危険」・黄色が「注意」・緑が「安全」というのは、信号の色と通づるので感覚的によくわかるかと思います。Bootstrapのアラートの例を見てみても、まさにそのような色づかいがされているんですよね。
![スクリーンショット 2020-12-07 1.59.11](https://assets.st-note.com/production/uploads/images/40339115/picture_pc_7893d2e5f1daba6e56fdc23a9c260f75.png?width=1200)
また、コーポレートカラーを決める際にも色は印象を決める大事な要素の一つです。たとえば、ファストフードのロゴには、赤やオレンジなどの暖色系を使ったものが多くあります。あたたかく、あかるい色味がよく馴染むためです。一方で、体感温度の下がる青は使われにくい傾向にあります。ただし、冷たさがウリのアイスクリーム屋さんにはよく似合う色ですね。
*もっとも好かれる色は青
青は世界中で最も好かれる色だそうです。一方で、茶色や黄土色などはあまり好かれる色ではないそう。世界中で、というのがまた興味深いですね。
さいごに
以上、色の効能や基本的な特性についてお伝えしました。もっともっと幅広く勉強してみて、まだまだ話足りない感もあるので、それはまた別の機会か、こっそり加筆するかしようと思います。
ここまでお読みいただき、ありがとうございました! ふとしたときに思い出したり役に立ったりすることがあればうれしいです。
この記事が気に入ったらサポートをしてみませんか?