錯視って？

みなさんは錯視ってご存知ですか？

錯視とは、｢錯覚｣の一種で、視覚・聴覚・嗅覚等に異常がないにも関わらず、

実際と違う知覚を得ることを総じて「錯覚」と呼ばれます。

「錯視」は、その錯覚を視覚に限定したもの。

「目の錯覚」

と言い換えた方が馴染みがありますかね？

この現象は目が間違っているわけではなく、目から入った情報に対して、

脳が補正を行うことで起きてしまう事らしいですね。

デザインをしている中でちょいちょい出てくるのがこの錯視。

データ上は中央揃えにしているのに、ずれて見える・・・

という経験はないですか？

その感覚はもしかしたら錯視かもしれませんよ。

という訳で今回のテーマは錯視です

錯視の色々な例

ではでは有名な例から

ポッゲンドルフ錯視

 

Aから出る直線はB,Cどちらの直線とつながっているでしょうか？

Bと答えた方が多いんではないでしょうか

｢正解はC｣

です。定規を当ててみると良く分かります

ヘルムホルツの正方形

横縞の左図は縦長に

縦縞の右図は横長に見えませんか？

これ、同じ大きさの正方形の中に書かれています。

 

ミュラー・リヤー錯視

これも有名なやつですね。

上下の水平線の部分、上は長く、下は短く見えませんか？

これも同じ長さなんです。

 

外向きの矢羽を付けた上の線分は長く見えますが、

逆に内向きの矢羽を付けた線分は短く見えます。

色の錯視

左右の正方形の中央にある図を見てください

左の正方形が暗く、右の正方形が明るく見えませんか？

実は二つとも同じ色

なのですが、背景色が違うことによって、

色が違って見えています

他にも様々な錯視があります。気になる方はこちら

デザインと錯視

さて、いくつか例を挙げましたが、これとデザインがどう関係あるの？

という方もいると思います

という事で具体例です

 

左図は単純に中央揃えのレイアウトで、このままでは、上方距離過大の錯視により、

文字が下寄りに見えてしまいます。

ですので右図のように若干ですが、実際の中央よりも上に調整すると、中央に揃っている様に見えます。

WEBではバナーやアイコンで、中央揃えのレイアウトを使用する機会が多い為、違和感を感じた方は試してみてはどうでしょうか。

他には

 

進む、次のページへなどのアイコンで良くこういった図形が使われると思います。

もうお分かりでしょうが、左図が中央揃え、右図が手動で微調整した図になります

これは、三角形の視覚的ウェイトが左側にあるため、本当に中央揃えした時には

左図のように錯視によって、中央からずれて見えます。

下図のように長方形を重ねると分かり易いですかね。

人間の脳というのは実はかなりいい加減で、こういった錯視が日常的にあります。

このような錯視を考慮して微調整することを、デザインの世界では「視覚調整」と言われています。

 

ツール(Illustrator、Photoshop)を信じすぎない。

上下揃え、中央揃え、数値的に簡単に出来る様になりましたが、人間の目が正しく認識しなければ意味は無いです。

最終的に自分の目で確認する

 

と言う事を心がけて仕事に励みたいです！

ｂｙ　Oigami