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

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

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

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

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

光学効果とは？

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

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

筆者作成

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

筆者作成

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

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

筆者作成

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

筆者作成

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