デザインは奥が深い！目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック

Post on:2017年10月19日

三角形の交点による錯覚

三角形の見た目の中心はどこにあるでしょう？

三角形分割錯視（triangle-bisection illusion）

アイコンは特に複雑な幾何学的パターンを備えていると、その中心を見つけるのが難しいものです。すべてのアイコンが対称であるとは限りません。ピクセルは完璧で、一貫したアスペクト比を維持しています。再生ボタンのようなアイコンは一見簡単そうですが、見た目の中心を見つけることが実は難しいです。

三角形を四角形に配置すると、要素が光学的に正しい位置ではないように見えることがあります。この理由は三角形分割錯視として知られている効果によるものです。三角形の重心は、最小境界のボックスに基づいて計算されます。もし三角形の高さのちょうど半分に点を置くと、それは光学的にずれて見えてしまいます。

見た目で、どれが中心に配置されていますか？

この錯覚には、2つの理論があります。

不適切な不変性スケーリング

この錯覚は、例えば正三角形の頂点が遠くで下底が近くとして、遠近法をつかった道路の平坦な絵として認識されることがあります。
重心と中心

中間点を見つけるよう求められた場合、その要素の上と下で等しい面積を持つ重心を見つけることになります。正三角形の重心は、中間点のかなり下に位置し、その2つの間の点を選択してしまいます。

四角形の中の三角形を光学的に中央に見えるようにするには、それぞれの頂点と反対側の線の真ん中を結ぶ線を引き、その交点が三角形の重心になります。
計算式にすると、下記のようになります。

三角形の重心を求める数式

数式を掲載したのはジョークです。これは物理学の論文ではありません（でも数式は正しいものです）。

重心は、各辺から反対側の頂点までの距離の1/3に位置しています。この方法はほかの形にも適用できます。

垂直の水平方向による錯覚

レッドのボックスは長方形でしょうか？いいえ、正方形です。長方形はブルーです。

垂直水平錯視（vertical-horizontal illusion）

正方形はあらゆるデザインにおいて、基本になる構造的なブロックです。Material Designでも見かけ、FacebookやPinterestやDribbbleでもよく見かけます。

正方形を長方形の中に配置すると、実際は正方形なのに垂直方向に長く見えてしまうことがあります。この現象は垂直水平錯視と呼ばれます。

Facebookの投稿の画像は1：1の正方形

この錯覚の面白い点は異なる文化で、この錯覚を違った視点で感じることです。都市に住んでいる人は、田舎に住んでいる人よりも長く見えてしまう傾向があります。おそらく、田舎に住んでいる人たちは丸い家を見慣れているからです。

明度による錯覚

パネルの周辺に、シャドウが見えますか？それは目の錯覚です。

明度の錯視（Mach bands）

フラットデザインでは、同じカラーの色合いを互いに隣接させることが一般的なトレンドでした。じっくり見ると、コントラストのある陰影のエッジの間に、存在しないシャドウが現れることがあります。この現象は明度の錯視と呼ばれます。実際にはシャドウは加えられていませんが、わたし達の目にはシャドウがあるように見えます。

セルの端にシャドウが現れる

この効果の技術的な説明は、横方向の抑制によるものであり、より暗いエリアはより暗く見え、明るいエリアはより明るく見えることを意味します。

この効果は、ビジュアルデザインの世界ではかなり繊細ですが、歯科医師にとってはかなりの障害になることがあります。そのため、歯のレントゲン写真は相違を解析するために、グレースケール画像を使用します。

奥行きによる錯覚

垂直の2本の線も動いて見えますか？

ヘリング錯視（Hering Illusion）

極細のラインを含むロゴ、小さいドットの背景を使ったWebサイトを見たことはありますか？スクロールした時に、それらのラインやドットが動いたように感じたことはないでしょうか？また、テレビで細いラインの洋服がうねうねして見えたことはないですか？

これらはモアレと呼ばれるエイリアシング効果によるもので、2つの格子パターンが互いに重ね合うことで、擬似モーションを生成します。2つの格子パターンはこの場合ただのイメージで、実際に錯覚を引き起こすのは常にリフレッシュしているモニターです。

上下にスクロールすると、振動して見えます

モアレはかっこいいエフェクトに見えますか？それ自体は錯覚ではありませんが、妨害するパターンと言えるでしょう。このテクニックはどちらかと言うと、オプ・アートで人気が高いです。

格子による錯覚

四角形を見てみてください、周辺にぼんやりと何か見えませんか？

ハーマングリッド（Hermann Grid）

ハーマングリッド錯視はかなり人気があり、高コントラストの背景に配置された四角形のグリッドを含むレイアウトで見ることができます。任意の正方形を見ると、その周囲の交差点にゴーストのようなくぼみができています。しかし、交差点を見ると、くぼみは消えます。

四角形を見ると、グレーのくぼみが見える

この効果の理由は、横方向の抑制によるものです。簡単に言うと、隣接するニューロンを減らすことで、ニューロンの収容力が活発になります。

コントラストによる錯覚

2つの分離した長方形は、同じカラーですか？

同時コントラスト錯視（Simultaneous Contrast Illusion）

最近のWebデザインでは垂直に分割したレイアウトが人気です。
同じカラーの2つのオブジェクトを異なる背景に配置すると、両方のオブジェクトが実際とは異なるカラーに見えてしまいます。この現象は同時コントラスト錯視として知られています。コントラストはデザインの世界で王道ですが、この効果は一部の人々にとっては異なる場合があります。

テキストのカラーはどちらも同じです

不幸にも、この錯覚がなぜ起こるのかについて、確かな説明はありません。しかし、推測する研究は数多くあります。ハーマングリッドとマッハバンドの原因となる横方向の抑制がその一つの理由です。

カラーによる錯覚

離れても、同じ色のパープルに見えますか？

ムンカー錯視（Munker-White Illusion）

この錯覚は繊細ですが、非常に魅力的です。上のアニメーションを見て、左のパープルのブロックは、右のパープルより明るく見えます。しかし、実際には2つとも同じです。

テーブルのセル

ムンカー錯視の理由は、、、あなたが推測した通り、横方向の抑制です。

淡い色による錯覚

長方形の内側はすべてホワイトですか？ボーダーと同系色の淡いカラーに見えませんか？

水彩錯視（Water Colour Illusion）

オブジェクトにボーダーを加えただけなのに、「背景色も変えましたか？」と聞かれたことはありませんか？もしあなたがじっくりとそれを見ると、ボーダーのカラーに基づいて同じカラーの明るいシェードで塗られているように見えるかもしれません。そして、あなたは実はその明るいエリアがホワイトのままであることに驚くでしょう。

水彩錯視として知られているこの視覚現象は、色拡散効果を生じさせるために等高線の輝度と色のコントラストの組み合わせに依存します。

ボタンの内側は、ボーダーのカラーに基づいてわずかな色味を帯びているように見えます

私はこれを確認するためにカラーピッカーを使用しなければならないほど、この錯覚に惑わされたことを認めます。

カーブによる錯覚

グリーンとオレンジの扇形はどちらが大きいですか？

ジャストロー錯視（Jastrow illusion）

図柄か文字かにかかわらず、イラストやロゴは異なる形状のスライスやカットが必要です。この錯覚はカーブがあるオブジェクトで起こります。2つの要素はサイズが異なって見えますが、実際には同じサイズです。

同一に湾曲したエッジは小さく見える

この錯覚はジャストロー錯視として知られ、なぜ異なるサイズに見えるのか決定的な説明はありません。一つの説では、脳がより大きい、そして小さい半径の間の大きさにおける相違によって混乱させられるということです。つまり、短辺では長辺が長く見え、長辺では短辺が短く見えます。

グラデーションによる錯覚

2つのオブジェクトは同じカラーに見えますか？

コーンスウィート錯視（Cornsweet Illusion）

この錯覚は同時コントラスト錯視と明度の錯視に類似しています。中心になるラインで、画像の片面が実際には他の部分よりも暗いという印象をグラデーションで作り出します。しかし実際には、両方とも同じカラーです。2つのオブジェクトは縦に並べると同じカラーだということが分かります。

すべてのダイヤモンドは同じグラデーションです、しかし下の方が暗く見えます

この錯覚は同時コントラスト錯視と明度の錯視に似ていますが、実際には2つの重要な点で異なります。

明度の錯視はシャドウの境界に近いエリアだけで見られます。コーンスウィート錯視はエリア全体に影響を与えます。
コーンスウィート錯視はエッジの明るいエリアはより明るく見え、暗いエリアはより暗く見えます。同時コントラスト錯視とは逆の効果です。

文字の形による錯覚

異なる文字を同じ大きさのように揃えて配置するのは難しいですね。

ミューラー・リヤー錯視（Müller-Lyer Illusion）

タイポグラフィはあなたの論理的思考ではなく、デザインの直感に頼る必要があることを理解するでしょう。フォントの高さに基づいて数学的に配置してしまうと、視覚的には全体が不均衡に見えてしまいます。
タイポグラフィの一般的な練習には、オーバーシュートと呼ばれるプロセスがあります。簡単に言うと、オーバーシュートは光学バランスを達成するために文字のサイズを個々に変更します。

オーバーシュートがなければ、Likedinの「e」とAmazonの「z」は光学的にバランスがとれていません

上の有名な2つのロゴ見ると、ベースラインとx-heightにいくつかの文字が揃えられていないことに気がつきます。タイポグラフィは最良の結果を得るために、手動で文字を光学的に調整する必要があります。

なぜタイポグラフィでオーバーシュートする必要がありますか？

オーバーシュートが必要な理由は、世界で最も人気のある錯視「ミューラー・リヤー錯視」のためです。この視覚現象は、ラインの端にジグザグを配置すると、ジグザグの方向に応じてラインが短く見えることがあります。この古典的な錯覚は、人間の知覚の誤りを証明しています。

参考

その他の錯覚

リファレンス

Anstis, S., Gregory, R. and Heard, P. (2009). The Triangle-Bisection Illusion. Perception, 38(3), p.321.
Ibid., p. 330.
Ibid., p. 331.
En.wikipedia.org. (2017). Centroid.
En.wikipedia.org. (2017). Vertical–horizontal illusion.
En.wikipedia.org. (2017). Mach bands.
En.wikipedia.org. (2017). Grid illusion.
En.wikipedia.org. (2017). Lateral inhibition.
Ibid.
En.wikipedia.org. (2017). Jastrow illusion.
En.wikipedia.org. (2017). Cornsweet illusion.
Io9.gizmodo.com. (2017). The Famous Optical Illusion Hidden in Every Typeface