目の錯覚による違和感
こんにちは株式会社Wiz、UIUXデザイナーの山田です。
今回は目の錯覚についてお話していきます！
ツールを使用してデザインする際に、数値上では均整が取れているのに目の錯覚で違和感を感じたことがないでしょうか？
この目の錯覚による違和感をクイズ形式で紹介していきます！
ルール
・一問にかける時間は10秒まで
・第一印象で直感的に答えてみてくだい
ではスタート！！
問題1：正しいUIはどっち？（正解は10行後）
正解は右です。
左は同じ色を使用してますが、テキストの方がボタンより明るく見えます。逆に右側はボタンよりもテキストの色を少し濃い色にしてますが、同じ明るさに見えます。
これは、テキストを元の色よりも明るく感じさせるフォントスムージング効果であり、フォントが小さいほど、この視覚効果が強くなる現象です。
問題2：正しい再生ボタンはどっち？
正解は右です。
これは簡単でしたかね。
左の再生アイコンは数値上、左右中央揃えされていますが、中央からずれて見えます。
逆に右は三角形の位置は右よりですが、視覚的に真ん中に見えます。
これを解決するには、中央にそろったように見えるまで、手動で微調整しなければなりません。
問題3：数値的に正しい正方形はどっち？
正解は左です。
写真を見比べてみて、左の方が縦長に見えませんか？実際は左の方が数値的に正しい正方なんです。右は視覚調整をした正方形になります。
このように正方形は縦長に見えてしまうので、縦を少し短くすることで正方形らしく見えます。
まとめ
いかがだったでしょうか。
これらはほんの一部で、他にも錯覚はまだまだあります。
このように、数値的に正しいものであっても大きさが違ったり、ずれて見えたりしてしまいます。これらを踏まえて、美しく見えるように補正していくのが、デザイナーの仕事であると感じています。
また余談ですが
株式会社Wizでは、UI/UXデザイナーの職種募集を行っています！
SNSでもデザインについて発信しています！是非フォローよろしくお願いします！
https://www.instagram.com/wiz_creative_design/