機械と人間の隙間を埋める。デザイナーの必須スキル「視覚調整」とは

媒体関係なくデザインをするうえで大切な要素の1つである「錯視」。目から入った情報に対して、脳が勝手に補正をかけてしまい、実際に異なる知覚を得ることを「錯視」といいます。
Photoshopや、Illustratorなどのソフトで計算された画像を作ることができても、人間の知覚を考慮したデザインを制作することはできないため、目で見てデザインを調整する視覚調整を行わなければなりません。それは、微々たる違いではありますが、視覚調整がされていない場合の画像を見比べたとき、多くの方がその誤差に気づくはず。機械ではできないこの微調整こそが、デザイナーの仕事であり、必須スキルなのです。今回はその事例をいくつかピックアップして、視覚調整した場合と比較してみました。

レイアウト

これは、ボタンのデザインやレイアウトでもっとも頻繁に使用する視覚調整です。黒の背景に対して、オレンジ色のボタンの位置を中央揃えにした場合、錯視によって上に寄って見えてしまいます。右側は、中央よりも少し下げて調整しました。

ウェイト

青い円の中にある左右の三角形の位置を比べるてみると、右は中心に位置しているのに対して、左の三角形は左側に寄っているように見えませんか?
このような三角形の場合はウェイト(重み)が左側にあるため、中央揃えにする左側に寄って見えてしまうという錯視が起こります。手動で右に寄せて調整することで、中心に位置しているように見せています。

スケール

左側は同じピクセルで作成した丸と四角が並んでいるのですが、面積が広い四角の方が丸に比べて大きく見えますよね。そのため、右は丸のサイズを四角に合わせて手動で補正しました。正しいと感じるまで目視で1ピクセルずつ値を増減していきます。

テキスト

上にある大文字のテキストは、隣のテキストに比べて大きく見えますよね。デザインの目的が、大文字を目立たせるためであれば、このままでも構いませんが、そうでなければ、下のテキストのように大文字のテキストのピクセル数を下げて調整しなければなりません。

画像サイズ

左は数値的に正しい正方形で、右は上下を5ピクセルカットし視覚調整を行った正方形の画像です。この2つを見比べたとき、左のほうが縦長に見えませんか?数値のみを揃えた正方形の場合、どうしても縦長に見えてしまうので、視覚調整で正方形らしく見せる工夫が必要です。

まとめ

人間の脳はどんな機械よりも複雑で、錯覚といった知覚があるように、事実をありのまま処理しているわけではありません。画像でも、ボタンでも、テキストでも、ほんの1ピクセル調整することで正確なデザインに近づけることができるのです。
人工知能が人の仕事を奪う時代がくると言われていますが、機械と人との差を埋めることができるのは人間であり、それがデザイナーの仕事だと私は思います。

BRANU株式会社's job postings
Anonymous
4070004d b6b2 4f51 99d2 5474b5117ef6?1535858111
2380eedd 9523 4d21 b75d 8f3c7a1b09ea?1502332293
Picture?height=40&width=40
10007526 425705297566168 5543553205522845321 n
13754406 1146058395460521 5131089603704592746 n
17 Likes
Anonymous
4070004d b6b2 4f51 99d2 5474b5117ef6?1535858111
2380eedd 9523 4d21 b75d 8f3c7a1b09ea?1502332293
Picture?height=40&width=40
10007526 425705297566168 5543553205522845321 n
13754406 1146058395460521 5131089603704592746 n
17 Likes

Weekly ranking

Show other rankings

Page top icon