UIに必要な錯視について理解する①
こんにちは、塩です。今回は、以前別のブログ用に執筆した文章の要点だけを切り取って、より簡易にまとめたnoteになります。
この記事を読んでいる方は、開発メンバーへデザインの意図を伝えるときに、コミュニケーションの仕方で認識の齟齬が起こってしまった経験はありますか？筆者は、上手く伝えられずに困ったことが何度かあります。
そこで、デザイナーが意識している点を、しっかり言語化して相手に伝えてみよう！というお話です。
錯視と視覚調整について
錯視や視覚調整という単語をご存知でしょうか？もしかしたら聞いたことがある方もいらっしゃるかと思います。
錯視とは、目から入った情報に対して脳が補正をかけることで、実際とは異なる知覚を得ることを言います。
視覚調整とは、人間の錯視（目の錯覚）を考慮したデザインの調整のことを指します。
身近な企業ロゴや書体デザインに施されていることが多いです。例えば、Googleのロゴに錯視調節が使用されているのがこちらになります。
次に、UIデザインにおいて気をつけるべき錯視について、代表的なものを何点か紹介します。
①三角形二等分錯視
デザイナーが三角形を図形の中央に配置するデザインを作成する時、数値的にみるのではなく重心をみています。これは三角形の底辺側が重く見える目の錯視が深く関わっているため、重心が中央にくるように配置する必要があるからです。形によって、視覚的な中央と、実際の中央は違う場合があるので、アイコンやボタンを作る際に気をつけることが多いです。実際にあるアイコン例を挙げるなら、YouTubeが該当します。
視覚調整はセンスなのか
日本のクリエイティブディレクターである水野学さんが著者の「センスは知識からはじまる」では、数値化できない事象の良し悪しを判断し、最適化する能力をセンスの良さであると称していますが、ここで言われるセンスとは、特別な才能ではなく、誰もが持っている「普通」という感覚で測ることです。自分がデザインを見たときに、例えば「重心が少し右にずれている」と感じる小さな違和感こそが、センスの根幹を成すものだと捉えています。このような直感は、デザインを作成するにおいて重要です。
私たちは「センスは天賦の才だ」と決めつける前に俯瞰し、「普通」という基準を持って多角的・多面的に物事を測った上で「普通」を改めて判断する能力を養う必要性がありそうですね。理由としては、普通という概念を基に、あらゆる事象を測ることで、デザインを問わず、つくり出す創作において、新しい価値を生み出すことができるようになると思うからです。
②ハーマングリット
グリット上に並べられた正方形の余白部分に交差する点がありますが、この点に灰色のシミのような影が見える現象をハーマングリッド（Hermann Grid Illusion）と呼びます。この錯視は明度の対比による現象の１つで、1870年にドイツの学者ハーマン（Ludimar Hermann）によって発見されました。影が一度目に入ってしまうと気になってしまう錯視がもたらす効果には、視覚のメカニズムが密接に関係しています。その一例として「側方抑制」が挙げられます。
側方抑制とは、特定の感覚刺激に応答したニューロンが、周囲の抑制性ニューロンの活性化を介して、その感覚刺激への応答性の弱いほかのニューロンの神経活動を阻害する現象のことを指します。
なぜこのような現象が起こるのかについて、より噛み砕いて説明してくれているWebサイトを発見しました。サイトの一部を抜粋し、考察してみようと思います。
白線の交差点では白色が網膜の受容野（＝ニューロンの神経応答を変化させる刺激が提示される場所）のほとんどを満たします。 それにより、強い側方抑制（＝特定の感覚刺激に応答したニューロンが抑制性の活性化を介して他の動きを阻害する現象）を引き起こすため、 交差点に灰色の影が生まれます。 交差点をまっすぐ見た際に灰色の影が生じない理由は、視野の中心にある中心窩がはたらくことで、 側方抑制がほとんど起こらなくなるからです。 中心窩は視覚の中でも解像度が最も高いため受容野は最も小さく（＝周辺視野は鈍い）光受容細胞数が最も多いですが、 網膜は周辺視野に特化しているため中心窩より大きな受容野を持っており、 反対に解像度は低くなっています。
ここで考えるべきは、錯視が私たちの知覚にどれほど影響を与えるかという点です。普段の生活で無意識に行っている視覚処理が、実際にはかなり複雑なメカニズムの上に成り立っています。意識的ではなく、無意識でサイトを流し見でスクロールするといったように、視線移動の中で錯視が起きてしまうことを、デザイナーは考慮しなければなりません。視覚的なバランスや配置の工夫によって、意図的に視覚効果を軽減したり、視覚調整でデザイン課題を解決することはもちろん可能です。
視覚調整で解決する
例えば、ハーマングリットを視覚調整で解決したい場合に、デザイナーがUIデザインで意識する3点ポイントを紹介します。
①間隔の調整
余白を細くしたり、広くすることで、ユーザーが見やすい幅を作り出すことが可能です。適切な間隔を設けることで、視覚的な快適さが向上し、錯視の影響を最小限に抑えることができます。
②グリット幅を不規則にする
四角のサイズや縦横の幅を変えることで、錯視の発生を分散させることが可能です。ただし、デザイン全体の統一感が失われる可能性があるため、視覚的なバランスを確認しながら、不規則さを取り入れる配置の工夫に気を配る必要があります。
③余白に色付けする
背景が白いと影が目立ちやすいですが、背景色を変更することで錯視を和らげられます。デザインに合った適切な色を選ぶことで、統一感を持たせつつ、視覚的なノイズを減らすことも可能です。
さいごに
今回は、錯視の中の三角形二等分錯視とハーマングリットについて考察していきました。次のnoteでは、ここで紹介しきれなかった別の錯視について紹介していきます。ここまでお読みいただきありがとうございました！