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