コンピュータで正確な数値をもとに位置や大きさをそろえると、当たり前ですが確実にそろいます。一方で、数値的にそろえた状態が、必ずしも「そろえた」とは言えない現象が、デザインの分野ではたびたび起こります。
人があるものを目で認識するときに使う脳のはたらきによって、数値的には正確に同じでも視覚的には違って見えてしまうパターンがあります。目の錯覚、錯視といわれるもののことです。
関連記事
脳と創造性：脳、創造、社会に共通して重要なのは、スモールネットワーク
数値的な正しさ、視覚的な正しさ
錯視を調整するには、今でもコンピュータではなく、最後に人の手作業で行なう必要があります。これは、「そろって見える」には近接した要素との関係性を考慮した調整が必要＝変数が多く複雑な計算となり、コンピュータが苦手、人間が比較的かんたんに感覚で判断できる分野だからです。
しかし、錯視のパターンや視覚補正のセオリーを学んでいくうちに、規則性のようなものを感じました。
この規則性が分かれば、コンピュータにも視覚補正ができるのでは？と思ったので試してみました。
大きさをそろえる
錯視調整の代表例の1つ、正方形と正円を同じ大きさに見えるように調整していくパターンを実際に測ってみました。
正方形と正円で比べる
上の正方形と正円はどちらも高さが200pxです。そのままだと正円が小さく見えるのでバランスを取るために5%〜10%ほど大きくするのがセオリーです。
下の正方形と正円は同じ大きさに見えるよう調整したもの。今回は正円を216pxにしてみました。
補助線を引いてみたもので比べると分かりやすいです。
文字で比べる
視覚補正のお手本とされているHelveticaという書体があります。
その中から正方形と正円に近い文字で見比べてみました。2文字とも同じフォントサイズです。
先ほどのものと比較しやすいよう、Mの高さを200pxにしてから、同じフォントサイズでOも表示しています。
ガイドを引いてみました。
背景の水色の面積は200pxの正方形と216pxの正円です。
正方形を回転させる
今度は図形に戻り、45度傾けた正方形の高さを200pxにしたものを、200pxの正円と比べてみました。
今度は正円のほうが大きく見えるので、傾けた正方形の大きさを調整して同じに見えるようにしてみました。
このくらいでしょうか。
補助線を引いてみました。
分かったこと
6%くらい大きくすると良さそうだなというところですが、検証数が少なすぎるのでいろいろ試したいと思います。
いくつか試してみて分かったのは、
- 視覚補正で必要な調整はごくわずか
- 要素の面積はあまり関係ない
- 四隅が一定量埋まっていると大きく見える
- 要素に対して無意識に補助線を引いて大きさを比べているのでは
ということです。
一般的に誰もが美しいと思うものの1つに、「統一されている」「シンメトリーなもの」があります。
デザインには数学が大きく関わっていると思っていて、視覚的に説得力のあるデザイン力はもちろん、数学的にも説得力のあるデザインができるよう勉強していきたいです。
数式で証明したりは出来ませんでしたが、この記事は数学とコンピュータⅡ Advent Calendar 2017の3日目の記事として参加させていただきました。
ありがとうございました。