コラム◆IT散歩/第6回:「UI・UX雑感(その2:色、その不思議−1)」

プレゼンテーション・レイヤーを語るにあたり、重要な点が「UI」「UX」。今回は、「色」について。2回に渡って書き留めたい。

「UI」「UX」とは何かに関しては以前にも書いた。以下のホワイトペーパーを参考にして欲しい。
「What’s UI,What’s UX(UIって?UXって?)」

終わりの方で、ちょっと不思議な動画を用意したのでぜひ見てください。
では・・・「色は光」といった難しい話は後に回すとして、最初は「色の三属性」について。

色の三属性:「色相」「明度」「彩度」

「色相」
色そのもの。青とか、赤とか、緑とか。“色相環”の表現は様々だが、図1に対して6色に限定したものが図2。
ある色に対して円の逆側にある色を「補色」と言う。「補色」は面白い性質を持っているので、これも後で書きたい。

色相環

図1:色相環

色相環

図2:色相環(6色)

「色相」に比べると「明度」は分かるが、一般的に「彩度」は分かりづらい。図3を見てください。

明度と彩度

図3:明度と彩度

縦軸が「明度」、横軸が「彩度」
一番右の「赤」が「純色」としての「赤」。左に行くほど「赤」の量が少なくなり、「高彩度」が「低彩度」になっていく。一番左の列は、すでに赤を含まず「白」から「黒」。これらは「無彩色」、色ではないともいう。
縦軸の「明度」は上に行くほど「白」の量が増え、下に行くほど「黒」の量が増える。
図3は「赤」に対するものだが、各「色」について「明度と彩度」の図がそれぞれ存在することになる。

眼の構造

図4:眼の構造

図4は前回も掲載した。
私が使っているノートの表紙の色はオレンジ。
「オレンジとして見ている」「オレンジと脳が判断している」と言ってもいい。

私が「オレンジ」と見ているのは、ノートが反射している「光」だ。光がない真っ暗な中では、ノート自体も確認できない。「色」は「光源」、「物」、「視覚」の3つの要素、その兼ね合いによって表れる。

prism

図5:プリズム

虹はきれいで現れれば見入ってしまう。
“虹は七色”とされているが実際は7色として必ず全ての色が見えるわけではない。

図5はプリズムでの光の分離。
虹は“水滴”がプリズムの役割を果たしている。

では、改めて・・「光」とは何か?

「光」は「電磁波」であり、電気と磁気の波だ。WiHi、スマホ、パソコン、みな電磁波が放出されている。紫外線や赤外線も同様。

余談だが、私はスマホを目覚まし時計代わりにしている。枕の横に置いて寝ているけれども、健康には良くないらしい・・・・もちろん電磁波による影響。

電磁波は波があり、波の山と次の波の山、その間の距離を“波長”という。波長は一般的にnm(ナノメートル)(1mの10億分の1)で表される。こうした電磁波の中で、波長が380nm~780nmの光を「可視光線」といい、“人間が目に見える光”だ。そして、その光に「色」を感ずる。光そのものに色がある訳ではない。先ほどのプリズムは、波長によって光の屈折率が異なることを利用して分離が起こっている。

“電磁波の波長により一部の光(電磁波)には色を感ずる”。“色を感ずる”・・うーん、何とも不思議。

前回、「網膜は2次元(平面)なのに、なぜ人は3次元の世界を見ているのか」、その話をした。今回は網膜のもっと奥。その奥には「桿体(かんたい)」と「錐体(すいたい)」という2種類の光検知細胞がある。
「桿体」は弱光下で物を見るのに使われており、1種類しかない。一方の「錐体」は3種類あり、赤、緑、青に感応する。


図6:桿体と錐体

日本語の図を用意できず、申し訳ないです。
Rod cell=桿体、Cone cell=錐体

錐体は、「S(Short)錐体」、「M(Medium/Middle)錐体」、「L(Long)錐体」の3種類があり、それぞれ波長の短い光から長い光に反応する。
おおよそ、Sは青、Mは緑、Lは赤。ダイレクトに青や緑と決定するわけではないが、脳に情報を届ける。こうした仕組みは動物によって異なるので、見ているものの色は人間とは違うと考えられる。

なお、皆さん記憶にあると思うが、
・光の三原色:R(赤)、G(緑)、B(青)
この三原色は錐体と関連したものだ。

日本語で表現すると、「赤青緑」がしっくりくるが、「RGB」も端子名などから浸透している。
この三原色を利用した身近な応用例はテレビ。

では、絵の具など「色の三原色」は?
・色の三原色:C(シアン)、M(マゼンダ)、Y(イエロー)
私が子供のころは、「赤青黄」だったと思う。当時、“シアン”“マゼンダ”など聞いたことがない。しかし、今はCMYだ。

元々「三原色」とは、「三色性の法則」として3種類の色で全ての色を表現できることからで、ここから3つを「三原色」と呼ぶ。そして、「光」と「色」の2種類の「三原色」には不思議な関係がある。

2種類の「三原色」

図7:2種類の「三原色」

不思議な関係とは、隣同士の色を混ぜ合わせると、お互いの「三原色」が表れること。不思議であり面白い。

なお、色を混ぜ合わせる方法として、「光の三原色」は「加法混色」。「色の三原色」は「減法混色」である。「色の三原色」が「減法」であるのは、絵の具を混ぜる場合を考えると分かる。

人はなぜ“物の色”を“色”として見ているのか?それは、物に反射している光を見ているから。その色以外の光は透過し、反射しないから。

全ての色の元であるシアン、マゼンダ、イエロー、3つの色を混ぜるということは、全ての色を透過させることに他ならない。結果として、反射される光がなくなり「黒」となる。
なお、プリンターなどがK(黒)のインクを持っているのは、より黒い黒を求めるため。

では、1つ動画を見ていただきたい。YouTubeにあげてあるが、音は出ないので安心して見てください。

見えましたか…?何にも見えないという方は再挑戦を! 鼻の頭だけをずっと見てください。

冒頭の色相環において、ある色の逆側の色を「補色」というと書いた。「補色」は逆側にあるから補色ではない。
補色同士は隣合わさると、お互いに刺激しあって、最高の輝きを発する。セブンイレブンのロゴ(赤と緑)などもその性質を利用していると思う。
しかし、2色を混合すると相殺しあって、固有の色を失いグレイシュなブラックになってしまう。この性質が補色の定義。
また、色相環の“ある色”を1つ除いて残りの色を全て混ぜ合わせると、除いた色の補色となる。これも面白い。

さて、先ほどの動画の残像で見えた「きれいな女性」は肌色をしていた。最初に見ていたのはネガだ。ネガ画像の残像になぜ肌色の女性が表れるのか。不思議で仕方がない。

残像の現象および同時性効果と呼ばれるもので、人の目はある1つの色が与えられると、みずからのバランスをとるために、その色の補色を網膜内に必要とする。その補色が視野に存在しない場合は、自然にその補色を補う。

この原理はデザインでも応用されているらしい。視野内に補色を用意することで目の網膜内に平衡状態を確立することができる。自分がデザインをするときに、これを意識しているかといったらそうではないが。

色、目は、知れば知るほど面白い。色はそれぞれ特性を持っており、感情にも影響を与える。次はそんな話を展開したい。

参考文献
  「ヨハネス・イッテン 色彩論」(美術出版社)
  「色と光の能力テスト TOCOL」(著者:篠田博之、三輪容子、渕上敏生)

文責:永井一美

コラム・ホワイトペーパー一覧へ戻る

おすすめ関連記事

コラム◆IT散歩/第7回:「UI・UX雑感(その2:色、その不思議−2)」

コラム◆IT散歩/第7回:「UI・UX雑感(その2:色、その不思議−2)」

コラム◆IT散歩/第5回:「UI・UX雑感(その1:眼とゲシュタルトの法則)」

コラム◆IT散歩/第5回:「UI・UX雑感(その1:眼とゲシュタルトの法則)」

コラム◆IT散歩/第4回:「正のレガシー、負のレガシー」

コラム◆IT散歩/第4回:「正のレガシー、負のレガシー」

コラム◆IT散歩/第3回:「戸籍とマイナンバーとITと」(後編)

コラム◆IT散歩/第3回:「戸籍とマイナンバーとITと」(後編)