簡単に作る不可能立体 #027

今回のチュートリアルでは有名な不可能図形の一つである「ペンローズの三角形」を作成します．ペンローズの三角形のように実空間上では実現不可能な立体を認識してしまうこの図形では，ある種の「錯視」が起こっていると言えます．今回の記事では「目の錯覚」と「グラフィックデザイン」の関係について考えてみます．

不可能図形は錯視の一種です．錯視には不可能図形の他にも多くの種類があり，その数は枚挙に暇がありません．

チェッカーシャドー錯視

上の画像はチェッカーシャドー錯視と呼ばれる種類の錯視です．AとBのタイルの色は実際には同じなのに，Aのほうが暗いグレーに見えてしまう錯視です．

シェパード錯視

また別の例では，実際には同じ形・面積の机の形が異なって見える錯視があります．これはシェパード錯視と呼ばれています．

---

さて，このような錯視とデザインはどのような関係があるでしょうか？ここでは単純な例として2つ上げて説明します．「タイプフェイスデザイン」と「カーニング」です．

タイプフェイスデザインでの例

上の画像に書かれたMとOはHelveticaという有名なフォントのものです．この2つの文字は同じポイントサイズで書かれているため，概ね同じ大きさで書かれているように見えます．しかし，実際にはこの2つの文字の上下の長さは少しだけ異なってます．

補助線を引くと明らかなように，OのほうがMよりも大きくデザインされています．これは，Oのように四隅に空白がある図形よりも，Mのように四隅が埋まっている図形のほうが大きく見えるという人間の視覚の特性を考慮しているからです．

「数値的に揃っている」ということよりも「(数値的には異なっているけれど)目で見ると揃っているように見える」ということのほうが，デザインでは重要なことがあるのです．そして，「目で見るとどうなのか？」と「数値的にはどうなのか？」に齟齬が起きるのが，まさにこの記事のテーマである「錯視」なのです．

タイポグラフィでの例

タイポグラフィの作成で重要な作業の一つにカーニングがあります．カーニングの説明をWikipediaから引用してみます．

カーニングとは……フォントの文字同士の間隔を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう

カーニング – Wikipedia

「機械的に，数値的に揃えました」というだけでは，揃っているようには見えない場合が多々あるということは知っておくべきでしょう．数値的な整列よりも視覚的な調整が必要になるということです．株式会社ZINEのWebで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 という記事で書かれているカーニングが必要な理由は，まさにこの記事の趣旨と合致します．

なぜ数値ではなく実際に見た感じを重視すべきかというと、人間には脳内補正が原因の錯覚・錯視があるからです。

フォントとかデザインの世界ではもう2分に一回くらい錯覚が起こってて数字とか全然アテにならんのですわ。東大寺の大仏が実際は頭めっちゃデカいとか、下から見上げる像はだいだい短足だとか、デザインの世界は数値で割り切れないものがある、ということを覚えておきましょう。

Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE

---

まとめ

その点で，「実際には同じ傾きだけど，右のほうが傾いて見えるはずだから，少しだけ調整しよう」のような場面もありそうなものです．そういった微調整がなされたデザインが，より自然に受け入れやすいということは想像できると思います．

ペンローズの三角形の話題から大きく逸れて，デザインと錯視の関係について考えてみました．その中で，錯視のような人間の目の特性を知ることは，デザインの上で重要であるということが見えてきたと思います．人間の目にはどんな錯覚があるのか，しっかりと目の特性を理解するとデザインの役に立つことでしょう．