視覚科学で紐解く「脳にやさしい」デザイン

デザイナーなら一度は、アクセシビリティ・チェッカーの数字に頭を悩ませたことがあるでしょう。この配色のほうが美しいし、絶対に見やすいはずなのに、なぜか不合格（NG）になる。ガイドライン通りに作った画面のはずが、なぜか見ていて疲れる。そんな経験はないでしょうか？

視覚科学者はよく「目は脳の出店だ」といいます。目は映像を写し取る役割を超え、情報処理の最初の部分をも担っているからです。デザインの本質は、網膜に映る像をきれいにすることではなく、その先にある「脳での情報処理」を最適化することにあります。

今回は「コントラストの正体」「細い文字が読みにくい理由（わけ）」「視覚的不快感」、この3つのトピックで、コントラストと目（脳）のはたらきの関係をお話します。

目次

コントラストの正体 ― 形をつくるのは「色」よりも「明るさ」

コントラストを上げるためにやることといえば、色の調整でしょう。もちろん、最終的には色調整をするのですが、私たちが「モノの形」を認識するメカニズムを知ると、より本質的なアプローチが見えてきます。ヒトが「色のあるモノ」を見るためには、大まかに以下2つのチャネルでの処理が行われている、と考えられています。

・輝度チャネル： 
    明るさの情報を処理する。解像度が高く、動きや輪郭の構造を処理する基盤となる 
・色チャネル： 
    色の情報を処理する。解像度は低いが、ヒトの多彩な色彩体験を支える

文字やアイコンといった「形」を認識する際、最も頼りにしているのは輝度（明るさ）とコントラストです。どれだけ美しい色を使っても、背景との輝度差がなければ、脳は形を捉えるのに余計なエネルギーを消費してしまいます。色収差（光の波長による焦点のズレ）があることで明るさに差がつくと仮定しても、色が文字の読みやすさに与える影響はあまりないと報告した研究もあります。コントラストチェッカーでNGが出たとき、読みやすくしようと色を選び直すデザイナーも多いでしょう。しかし、実際には明るさ（輝度）が認識の鍵を握っています。この仕組みを意識するだけで、修正の方向性に迷いがなくなるはずです。 例えば、図の①は色相が異なる二色ですが、グレースケールに変更すると（図③）、明るさの差がほとんどありません。図②は色自体は似ていますが、明るさの差があるために左よりも読みやすいです（図④）。

「輝度差がない」ことを利用したアートもあります。最も有名なのは、クロードモネの『印象 日の出』です。

クロード・モネの『印象 日の出』　1872年、マルモッタン・モネ美術館蔵（出典：Wikimedia Commons） この絵の中の空と太陽は、色こそ違いますが、輝度（明るさ）を揃えて描いているのが特徴です。輝度に差がない二色では、輪郭が曖昧になり、境界付近が揺れているように見えることが知られています。朝日が昇るときのユラユラ感を、明るさに差のない色を使うことで表現した、素晴らしい絵画です。このような効果が科学的に説明されるよりも前に描かれた作品なので、モネの観察眼は人並外れていたことがわかります。図録や画像などでは色が現物とは少し変わっていて、そのような効果が表れないことが多いので、ぜひ直接鑑賞したい作品です。

ただ、UIデザインなどの文脈では「読んでもらう」「認識してもらう」ことを目的にする場合が多いため、明るさにあまり差のない色の組み合わせは現実的ではないかもしれません。

実践へのヒント：  
もしコントラストの調整に迷ったら、一度デザインを「グレースケール」にしてみてください。明るさの差だけで情報がパッと目に飛び込んでくるなら、それは脳にとって「形が整理された」良いデザインです。色は「認識」のその先、ユーザーの感情を動かし、ブランドの体験を豊かにするために使いましょう。

細い字は読みにくい？― フォントとコントラストの意外な関係

細いフォントは、洗練された印象を与えます。しかし、実際にデザインしたものをみると「なんだか薄く見えるな」と感じることも多いはず。その勘は当たっています。たとえ色の設定を「背景：白／文字：黒」にしてコントラストを最大化しても、「線が細い」ことは、視覚情報処理にとっては「コントラストが低い」ことと同義なのです。

いくつかの研究では、文字を認識する上で欠かせない成分があることが報告されています。その成分の量は、線の細い文字では少なく、太い文字では多く含まれる傾向があります。そのため、細い文字では、よりコントラストを高くして、文字を認識するために必要なエネルギーを補う必要があるのです。UDフォントが太めに設計されているのも、文字を読むのに必要なエネルギー量を最大化する意図があるのかもしれません。

文字をぼかして、認識するために重要な成分だけにフォーカスしてみると、細い文字よりも太い文字のほうが「濃く」みえますでは太ければ太いほどいいのか？ というと、そうでもありません。ある一定の太さを超えると、エネルギー量が下がっていきます。エネルギーが最大になるのは、文字と背景のバランスがちょうど半分くらいのときです。ウェイトでいうと、MやBあたりがエネルギー量としては最大に近いと考えられます（フォントによってウェイトと実際の太さが違うので、一概には言えませんが）。

（Ohnishi & Oda, 2021, Fig.4） 
文字と背景のバランス（Duty Ratio）がちょうど半分（0.5）くらいのときに、
読むために必要な成分量が最大化されます実践へのヒント： 
最近では、フォントの太さまで加味した新しいコントラスト評価指標（APCAなど）も注目されています。「フォントを変えること」は「コントラストを調整すること」だと捉え直してみてください。細いフォントを使うなら、少しサイズを大きくしたり、背景との輝度差をより強固にしたりする。そうした「補償」の意識が、美しさと読みやすさを両立させます。

視覚的不快感 ― 脳のオーバーヒートを防げ

「読みやすくデザインした」はずなのに「見ていられない」。そんな不思議な現象があります。 自然界にはあまり存在しない人工的なパターン、例えば、コントラストの高い縞模様、色空間上で離れた（ビビッドすぎる）組み合わせ、特定の周波数でチラつく画面、白くて強い照明。これらによって、強い不快感や時には頭痛・吐き気を引き起こす場合があります。

これを「視覚的不快感（Visual Discomfort）」と呼びます。詳しい仕組みは研究途上ですが、特定の刺激によって脳の活動が偏ってしまうために、不快だと感じさせてその刺激から遠ざかろうとする機能がある、という説があります。いわば、強すぎる刺激で脳がオーバーヒートを起こすのを防止する仕組みです。

視覚的不快感についてもう一つ知っておきたいのは、個人差がものすごく大きいことです。蛍光オレンジと緑の組み合わせに全く違和感のない方もいれば、見るだけで頭が痛くなる方もいます。真っ白な紙に印刷された文章は、かなりコントラストの高い縞模様と同じ効果を引き起こします。つまり、読みたくないからではなく、「見るのを受け付けない」から読めないという場合もあるのです。これからの研究や支援がいっそう望まれる分野です。

実践へのヒント： 
「コントラストは高ければ高いほど良い」というわけではありません。トピック1・2で述べた「低すぎることによる負荷」と同様に、「高すぎることによる攻撃性」も存在するのです。 特に長時間向き合うツールやウェブサイトでは、コントラストの高すぎるパターンを避け、脳を刺激しすぎない絶妙なバランスを探ることが「やさしさ」につながります。

まとめ：ユーザーの「資源」を管理できるデザイナーになろう

アクセシビリティという言葉を聞くと、どこか「自由を制限される」「ルールを守らされる」という印象を持つかもしれません。また、2024年には民間事業者の「合理的配慮の提供」が義務化され、企業としての姿勢を問われる場面も増えるでしょう。しかし、視覚科学者の視点からは、デザイナーは、ユーザーの大切な脳のエネルギー（認知資源）を、どこにどれだけ配分するかを管理する「マネージャー」のような存在だと思っています。

「なぜこのフォントなのか」「なぜこの色なのか」を目や脳の仕組みから説明できることは、デザインに圧倒的な説得力を持たせます。認知資源の中には、今回取り上げたコントラストの他にも、視線や注意の配分などが含まれます。さらに、これまでの学習（文化的な背景を含む）も、無視できない大きな影響があります。そのため、人の脳のクセを知ることで、「根拠のある」デザインをすることができるのではないでしょうか。例えば、あえて読みにくいものを使うことにも、意味を持たせることができます（読みにくさによるストレスを超えるなんらかの効果を期待することにはなり、チャレンジングな取り組みだとは思いますが）。

ユーザーにすっと馴染み、心地よく使い続けられる。そんな脳にやさしく、そして美しいデザインが、この記事を読んでくださったあなたの手から生まれることを願っています。

参考文献・サイトなど 
内川惠二 (1986) 色覚のメカニズム: 心理物理学的立場から, 光学, 15,  368-375. 
​Livingstone, M. S., & Hubel, D. H. (1987). Psychophysical evidence for separate channels for the perception of form, color, movement, and depth. Journal of Neuroscience, 7(11), 3416-3468. 
Livingstone, M. S. (2022). Vision and art (updated and expanded edition). Abrams. 
Knoblauch, K., Arditi, A., & Szlyk, J. (1991). Effects of chromatic and luminance contrast on reading. Journal of the Optical Society of America A, 8(2), 428-439. 
Legge, G. E., Parish, D. H., Luebker, A., & Wurm, L. H. (1990). Psychophysics of reading. XI. Comparing color contrast and luminance contrast. Journal of the Optical Society of America A, 7(10), 2002-2010. 
Solomon, J. A., & Pelli, D. G. (1994). The visual filter mediating letter identification. Nature, 369(6479), 395-397. 
Ohnishi, M., & Oda, K. (2021). The effect of character stroke width on legibility: The relationship between duty ratio and contrast threshold. Vision Research, 185, 1-8. 
Conlon, E. G. (2012). Visual discomfort and reading. Visual aspects of dyslexia, 79-90. 
Hibbard, P. B., & O'Hare, L. (2015). Uncomfortable images produce non-sparse responses in a model of primary visual cortex. Royal Society open science, 2(2). 
Imaizumi, S., Koyama, S., & Tanno, Y. (2018). Development of the Japanese version of the Visual Discomfort Scale. Plos one, 13(1), e0191094.
https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Monet_-_Impression,_Sunrise.jpg