デザインソフトの整列機能を使ってオブジェクトを自動調整しても、ずれて見えたり、凹んで見えたり、位置の微調整をよく指摘されてしまいます。それは「錯視」という人間の目の錯覚が関係していて、アプリの機能に頼るだけではなく人間の目で、視覚的微調整が必要だということがわかりました。
そこで今回は、フィードバックをもらうことの多い調整箇所をいくつかまとめていきたいと思います。
大きさの視覚調整
数値上はどちらも同じ大きさでも、上に位置する方が下に位置するよりも大きく見える錯視のことを上方距離過大の錯視といいます。
これは特にボタンやアイコンなど中央揃えのレイアウトでテキストを挿入する際に気をつけたいポイントで、テキスト上部の空白が広く見えることで、テキストが下に寄って配置されているように見えてしまいます。
テキストを中央より少し上寄りに配置して、調整を行いましょう。
整列の視覚調整
三角形をオブジェクトの数値上中央に配置しても、左に少し寄っているように見える錯視のことを三角形分割錯視と言います。
アイコン付きテキストや句点、「！」などの記号付きテキストを整列する際に注意したいポイントで、中央揃えのレイアウトでは、数値的に正しく中央に配置してしまうと錯視により、左に少し寄って見えてしまいます。
配置するオブジェクトの重心が中央にくるように調整しましょう。
色の視覚調整
同じ色でも面積が広いものと狭いものでは見え方が異なる錯視のことです。明るい色は面積が大きくなるとより明度と彩度が高く感じられ、暗い色は面積が大きくなるとより明度と彩度が低く感じられます。
アイコンと文字をセットで配置する場合などに気にかけたいポイントで、文字の色を濃くするか、アイコンの色を薄くするか調整が必要です。細めの文字を本文に利用する場合などは、同じ色にしていても明るく見えてしまうので色を少し濃くしてあげると馴染みやすくなりました。
文字の微調整
文字は些細な差でもデザインに与える影響が大きく、ほんのわずかな差が読みやすさにつながります。カーニングを行う際によく指摘される、意識して押さえておきたい調整箇所をまとめます。
記号の文字詰め
文章に句読点や記号を使う際に注意したいのが記号の文字詰めです。カンマの空きが広すぎると不格好に見えてしまいます。
文字間を調整したり、単位のサイズを小さくすることでバランスが良くなります。また、幅に余裕が生まれ文字の大きさをUPさせることもできます。
コロンやハイフンの位置調整
コロンやハイフンはデフォルトだと下に寄って見えてしまうので、位置を少し上げてあげるとバランスが良くなります。
電話番号はズレが目立つので、よく指摘されるポイントです。
さいごに
このように、整列機能で数値上のレイアウトを揃えるだけでは人の目で見た印象が大きく異なってしまいます。
錯視の種類や現象を知っておくことで、デザインを作成する中で感じる視覚的な違和感に適切に対処することができると思います。アプリケーションの整列機能だけを信じるのではなく、違和感に気づける目を鍛えていきたいです。
