Suffix Official Blogサフィックス公式ブログ

Scroll

デザインの世界の「錯視」

Creative Member

文字をぴったり整列させているのにしっくりこない、正しい数値のはずなのに色が変わって見える...
デザインをしているとそんな経験をすることがあります。


これらの原因は錯視(目の錯覚)によるものです。


錯視は、目にしているモノの形、色、長さなどが実際とは異なって見える現象のこと。
一見厄介だと感じるかもしれませんが、ほとんどの人に同じように生じる現象でもあるので
錯視を理解することで効果的に利用できるようになります。


例えば「HAPPY」という文字列。
錯覚01
背景の四角形に対して物理的なセンター配置にしてみましょう。
すると少し左に偏って見えませんか?
これは文字の形が真っ直ぐな「H」に対し「Y」は右側の空間が広いためです。
そこであえて少し右に配置することで、視覚的にはセンター配置に見えるようになります。


もう一例見てみましょう。
錯覚02
「CUTE」という文字列、こちらは逆に頭の「C」が丸く左側に空間が生まれるため右に偏って見えますね。
今度は少し左に配置することでバランスが良くなりました。


今回は左右の余白で説明しましたが、もちろん上下でも同じです。


そしてこれは文字列だけでなく、図形でも同様のことが起きます。
錯覚03
再生マークでもお馴染み、三角形と四角形や円の組み合わせ。
三角形を物理的なセンター配置にすると左に偏って見えるのです。
少し右に配置すると背景に対してのバランスが良くなりますね。


こういった錯視はさまざまなところで見つけることができます。


例えば、フォント1文字をとっても錯視による考慮がなされています。
錯覚04
アルファベットの「G」。
正円に当てはめた際にぴったりの形にすると横線の部分がでっぱって見えます。
内側に入れてあげると全体が繋がったような綺麗な円に見えるという不思議。


最後に色による錯視もひとつ紹介しましょう。
錯覚05
ひし形が4つ並んでいます。
1つのひし形の中は単色ですが、隣接する色に影響されて左下が暗く、右上が明るく感じます。
左下が明るく右上が暗くなるようにうっすらグラデーションをかけることで、逆に単色に見えるようになりました。


人間の脳(目)はとても不思議ですね。
色も形も、あえて正しい数値からズラしたり変形させた方が美しくなることがあります。


今回紹介した例はほんの一部ですが、数値ではなく視覚情報で調整する大切さが伝わったのではないかと思います。
錯視は簡単にデザインに活かすことができますので、ぜひすぐに取り入れてみましょう。

  1. TOP
  2. お知らせ
  3. ブログ
  4. デザインの世界の「錯視」

PAGE TOP