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

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

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

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

筆者作成

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

筆者作成

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

筆者作成

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

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

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

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

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

筆者作成

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

筆者作成

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