なんだか違和感?「錯視」とは?

なんだか違和感?「錯視」とは?

こんにちは、デザイナーのレミーです。
きっちり同じようにデザインして作ったはずなのに、なんだか違和感を感じる時ってありませんか?
「少し大きく感じるけど、コピペしたし気のせい?」
「色味が違う気がするけど、スポイトで抽出したし気のせい?」

・・・なんて!

この違和感には「錯視」が関係しています!
今回は、主にWEBデザインで気をつけるべき錯視」をいくつかご紹介します。

◼︎まず錯視って?
【1】色の進出色・後退色
【2】中央揃えのレイアウト
【3】正方形の調整
【4】文字の太さ
◼︎まとめ

◼︎ まず錯視って?

そもそも錯視ってなんのこと?

錯視とは、視覚に関する錯覚のことである。俗に「目の錯覚」ともよばれる。生理的錯覚に属するもの、特に幾何学的錯視については多くの種類が知られている。
引用元:Wikipedia

そう、錯視とは「目の錯覚」のことです!
この目の錯覚は目が間違っているわけではなく、目で見た情報を脳が勝手に補正をかけてしまうことが原因で起きてしまうそうです。
この錯視によって、「違和感」が生まれて、実際の姿とは違うように見えてしまうんですね…

【1】色の進出色・後退色

1

色によって奥行きが変化して見えることを、進出色・後退色といいます。
左の黄色い四角は前に、右の青い四角は奥にあるように見えませんか?

進出色【赤や黄のような暖色系で明るい色、鮮やかな色は進出するように見える。
後退色【青や青紫のような寒色系で暗い色、濁った色は後退して見える。

用途によって、進出色と後退色を使い分ける必要がありますね!

【2】中央揃えのレイアウト

2

上図の左の図は、背景のきっちり中央に要素を配置していますが
錯視により「下に寄って」見えていますね…

一方右の図は真ん中よりも「少し上」に配置しています。
こちらの方が真ん中に配置されているように見えます。

中央揃えのレイアウトにしたいときは、
実際の中央よりも「少し上」に配置することで中央に配置されているように見えます。

【3】正方形の調整

3

正方形って縦幅と横幅の数値を同じにしてもなんだか縦長に見えませんか?

上図は左が本当の正方形ですが、少し縦長に見えます…
一方で右の図は少し横幅を長くしていますが、こちらの方が正方形に見えます。

このように数値的には合っていても、正方形はどうしても縦長に見えてしまうので縦幅もしくは横幅の調整が必要です!

 

【4】文字の太さ

4

小文字のテキストの横に大文字のテキストを配置した場合、同じサイズのフォントでも
大文字のテキストの方が大きく見えませんか?

上図の左は同じフォントサイズで、右は大文字のテキストを少し小さくしています。
大文字にするとどうしても大きく見えてしまうので、小文字と同じサイズに見せたい場合はフォントサイズを下げる必要があります。

◼︎ まとめ

ついPhotoshopのツールや機能に頼りっぱなしになってしまいますが、
決してそれが正しい「見え方」とは限りません。
人間の目に正しく認識されるように、自分の目で調整をしなくてはいけません…!

そのためには日々の仕事の中で感覚を磨いて「視覚調整力」を高めていかなくてはなりませんね!
(ああ、自分で言って耳が痛い。。がんばります!)


Previous: とにかくおしゃれ!ミニマルデザインのススメ Next: 簡単なカスタマージャニーマップを作ってみた。

© 2017 ALL CONNECT Inc. All Rights Reserved.