視覚調整は、人間の脳に対して視覚的なアプローチをとることが多いデザイナーにとって大切なスキルです。
今回は、UIデザイナーが行う視覚調整の主な例を紹介していきます。

視覚調整とは

視覚調整とは、人間の錯視（目の錯覚）を考慮したデザインの調整のことを指します。
身近な企業ロゴに施されていることも多く、Googleのロゴでも取り入れられています。（以下の画像は、Googleのロゴを考察したツイート↓）

この考察内容を見ても、調整前と調整後の違いはかなり微量であるように思えます。本当にここまで細かい調整が行われているのかと疑ってしまいたくなりますが、実際にこのような微妙なデザインの調整はUIデザインにおいてもよく行われています。

錯視（目の錯覚）

視覚調整の対象になる人間の錯視とは、目から入った情報に対して脳が補正をかけることで、実際とは異なる知覚を得ることを言います。文章で表すと少し分かりずらいので、代表的な錯視の例を見ていきましょう。

一般的に知られる錯視


こちらはミュラー・リヤー錯視と呼ばれるものです。
右側の図から分かるように、上下の水平線は同じ長さです。しかし左側の図に目を移すと、内向きの矢羽をつけた線分は短く、外向きの矢羽をつけた線分は長い、と知覚されます。
いわゆる“だまし絵”というと分かりやすいかもしれません。

UIデザインにおける錯視

ミュラー・リヤー錯視以外にも錯視はたくさんありますが、UIデザインにおいて気をつけるべき錯視にはどんなものがあるのでしょうか。ここからは、UIデザインによく見られる錯視とその調整例を紹介します。

ハーマングリット

グリット状に並べられた模様の余白部分にいくつか交差点があります。ここに灰色の影のようなものが見えませんか？交差点以外に目を向けると影が見える仕組みになっているため、なんとなく見ているだけでも影が目に入り、気になります。

ハーマングリットは、画像をグリット状に並べる際に気をつけたい錯視です。
調整の仕方は主に下記の4つです。

  1. 余白を細くする
  2. グリットを不規則にする
  3. 余白の列幅を広くする
  4. 背景に色付けをする

上方距離過大の錯視

同じ大きさの円が縦に並んでいます。心なしか上半分の円の方が大きく見えませんか？
数値上はどちらも同じ大きさでも、上方に位置する方が下方に位置するよりも大きく知覚される上方距離過大の錯視というものです。
これは特にボタンやアイコンなど中央揃えのレイアウトで文言を挿入する際に気をつけたい錯視で、文言上の空白が広く見えることで、文言が下寄りに配置されているように見えてしまいます。
文言を中央より少し上寄りに配置する調整を行いましょう。

三角形分割錯覚

三角形を四角形の中央に配置すると、数値的には正しくても、三角形の底辺側に少し寄っているように知覚されます。
三角形を中央に配置するアイコンなどを作る際に気をつけたい錯視です。
配置する三角形の重心が中央にくるように配置して調整しましょう。


※三角形の重心は、各辺の中点から反対側の頂点までの線分の交点に位置しています。
2019/06/10追記

色の面積効果

同色で大きさの異なる要素をふたつ並べると、それぞれの色が同色ではないように知覚されます。

  • 明るい色の場合：面積が大きくなるにつれて、より明るく
  • 暗い色の場合：面積が大きくなるにつれて、より暗く

同色のアイコンとテキストを並べる際に気をつけたい錯視です。アイコンとテキストが同色に設定されていても、色が違っているように見えることがよくあります。

このような場合は、目視で確認しながら、どちらかの明度を変更して調整すると良いです。

UIデザイナーが視覚調整をするべき理由

視覚調整はデザインソフトやCSSでの数値による確認ではなく、目視による絶妙な調整が必要不可欠です。では、錯視を理解しそれに合わせた調整を行う、デザイナーがこの細かな作業をすることにはどんな意義があるのでしょうか。

違和感をなくすため

ユーザーが一瞬でも「何か変だな。」と感じてしまうこと、それはたとえ一瞬であったとしてもユーザー行動におけるノイズになることがあります。また、そのノイズによってデザイン本来の目的を果たせない、というようなことは起こり得ることです。
これを防ぐために、デザイナーが事前に察知できる違和感は解消していく必要があります。

美しさの追求

はじめに紹介したGoogleのロゴに対するツイートのように、たとえ微量な違いであっても、そのこだわりに気がつく人は気がつくもの。ですから、人に届くものを作る以上、美しさを追求する意識は常に持つべきでしょう。視覚調整はそうした美に対する最後の詰めを行うために必要なスキルなのです。

さいごに

錯視など様々な違和感に対する感度を高めるためにも、ぜひ、今回紹介したものをはじめとした視覚調整の例を探してみてください！

参考資料

https://www.wantedly.com/companies/branu/post_articles/71870
https://uxmilk.jp/1505
https://bulan.co/swings/the_illusion_in_the_design/
https://designcolor-web.com/2016/06/14/the-illusion-in-the-design/
https://coliss.com/articles/build-websites/operation/design/optical-illusions-found-in-visual-design.html
https://amix-design.com/blog/blog-37-1984.html
https://www.wantedly.com/companies/branu/post_articles/71870

Share on

eri
神奈川県在住のGoodpatchインターン生。デザインと1人カラオケが大好きです。