初心者必見！デザイナーなら知っておきたい「光学効果」の基礎

近年、 UX ・ UI の世界で、光学効果(オプティカルエフェクト)という現象が注目されています。
もともと光学効果はプロダクトデザインの世界においてはしばしば話題に出されるものでしたが、 UX ・ UI の世界がある程度成熟してきたこともあり、少しでも見え方にこだわりたいと思っているデザイナーたちによって、改めて注目を集めているのです。

人間の知覚というのは、不思議なものです。
ある条件では大きく見えるものが、同じものを別の条件で見ると小さく見えたりするものです。

本稿では、そうしたデザインにおける「光学効果」の基礎を、初心者にも分かりやすく解説していきます。
フォント やタイポグラフィからボタンやアイコンなどの ユーザー インターフェイスまで、 UX や UI に対するこだわりを高めていきたいのであれば、ぜひこのまま読み進めてみてください。

2017年9月28日 本文中に一部誤りがありましたので修正しました。

光学効果とは？

光学効果とは、目が光を受け取ることによって、実際にそこに存在するものとは違った見え方をしてしまう効果のことです。

例えば、次の画像をご覧ください。
左の正方形と、右側の円は、どちらのほうが大きく見えるでしょうか。

筆者作成

幾何学的な話をすれば、この2つの図形は、高さ・幅ともに同じです。
しかし、上の図形をじっくり見てみると、なんだか円よりも正方形のほうが大きく見えてくるのではないでしょうか。

筆者作成

もし、同じ幅、同じ高さであるということが信じられないのであれば、補助線を入れてみるといいでしょう。
こうすると、はっきりします。

さて、もう一度先ほどと同じように正方形と円を見てみましょう。
今度は同じ大きさに見えますか？

筆者作成

実は、右側の円は、先ほどの図より少しばかり大きくしています。
もともと円のほうが小さく見えてしまうので、こうすることで、ようやく同じくらいの大きさに見えてくるのが分かりますね。

筆者作成

こうした一連の現象は、光学効果が発生することによって起こります。
つまり、デザインをする際には、「実際の」数値だけを頼りにするだけでなく、人間の目にどのように映っているのかを考慮してデザインをおこなう必要があります。

アイコンの大きさがバラバラに見えてしまう？

さて、同じ高さや幅で作成した図形であっても、大きさのバランスが崩れてしまう例をご紹介しました。
この光学効果によってデザインの秩序が崩れてしまう格好の例が、アイコンセットの使用です。

アイコンセットとは、一連のデザインアイコンをワンパッケージにしているもので、多くの素材集などを配信しているサイトで簡単に入手できます。
すべてのアイコンが同じテイストで使われているので、非常に便利ではありますが、一方で光学効果によって大きさがばらばらに見えてしまうことがあります。

筆者作成

例えば、上のアイコンはすべて縦横を同じ比率で並べたものです。
実際、同じ大きさというどころか、バラバラな大きさに見えてしまいますね。

筆者作成

枠で括ってみると、確かに同じ大きさになっています。
しかし、大きさがそれぞれに違って見えるのは、光学効果が原因です。

筆者作成

おそらく、上のようなサイズに調整することで、はじめて同じくらいの大きさに見えるのではないでしょうか。

同様に、 ブログ サイトなどでよく表示される ソーシャルメディア アイコンも、光学効果の犠牲になってしまうことがあります。

もちろん、実際のサイズよりも、見え方を優先したほうが UX 上効果があることは言うまでもありません。
最終的には、自分の目で確認してデザインを完成させることが大切です。

フォーム のパーツのサイズはどれが一番適切？

同じく、光学効果を考える上で取り上げてみたいケースが、 フォーム の大きさです。
例えば、 ブログ サイトなどに検索窓を設置する際、アイコンとボタンの高さを揃える場合がほとんどだと思います。
しかし、以下を確認していただければご理解いただけるように、送信ボタンを円形に設定してしまうと、送信ボタンが小さく見え、弱々しいデザインになってしまいます。

筆者作成

しかし、円形の送信ボタンのサイズを少し調整してあげるだけで、バランスが整います。

筆者作成

また、 フォーム を縦に並べるときに、インプットエリアや送信ボタンの位置をどのようにしようか迷うと思います。
アラインメントの基準をラベルとインプットエリアで揃えてしまうと、情報のヒエラルキー構造があいまいになってしまうので、段差を設けて設置をしたほうがいいでしょう。

なぜiPhoneのアイコンはあの形なのか？

画像引用元：Apple

光学効果を深く知ると、同じ縦横比のものでも全く違う見え方をするということにセンシティブになります。
四角形はしっかりどっしりと構えて見え、丸は少し小さく見えるため弱々しく見えてしまうことがあります。

ところで、iPhoneのアイコンは四角形の縁を丸く削った形になっていますが、なぜあの形なのでしょうか？
環境工学者のマーク・エドワード氏によれば、iOS7から始まったなめらかなカーブを持つあの形は、「完璧な図形」だと言います。
この図形には、黄金比(golden ratio proportion)が隠されているというのです。

画像引用元：muzli

今でさえこの「角のない四角形」はiOSの定番になっていますが、BGRによれば、角のない四角形のアイデアは、故スティーブ・ジョブズ氏がiPhoneをリリースする20年以上も前から温めていたアイデアだといいます。

ある専門家によれば、とがった角は思考のプロセスを遮断してしまう効果があるといいます。
iPhoneのアイコンが適度に丸みを帯びているおかげで、プロダクト全体が美しく見えるのです。

まとめ

デザインといえば1pxにこだわって設計をしていくのが大切なようにも思えますが、実際に人間の目で見たときにそれでは違和感を感じてしまうことがあるかもしれません。

そのようなときに、デザイナーは柔軟に微調整を行い、 ユーザー 体験を優先させることができれば、プロダクトは成功の波に乗ることができるでしょう。