デザインとは、かっこいいものを作るだけでなく、見る側がストレス・違和感を感じることなく見てもらうこともとても重要です。ほとんどのデザインツールは「整列」機能で均等に要素を並べることができます。しかし、数値はあっているのになぜか文字がずれていたり要素が偏って見えたり…。違和感を感じてしまうこともあります。その違和感をなくす方法が視覚調整です。今回は、美しく、バランスの取れたデザインにするための視覚調整について、ご紹介します。1.視覚調整とは視覚調整（visual adjustment）人間の錯視を考慮して、デザインを調整すること。錯覚の一種で、「目の錯覚」と呼ばれることもあります。錯視の例①ミュラー・リヤー錯視どちらの棒が長く見えますか？もちろん下ですよね。しかし、２つの矢印の横棒の長さは同じなんです。無意識に矢印の斜め線も含めて長さとして脳が自動的に判断してしまうことが原因で、この錯視は起こります。②同時コントラスト錯視同じ色の円を、異なる背景に配置します。両方とも数値的には同じ色の円なのですが、下記のように見えると思います。黒背景 → 円が明るく見える白背景 → 円が暗く見える次はこの画像。真ん中の黄色い円は数値的には同じ色なのですが…。右→緑っぽい明るい黄色左→オレンジっぽい少し暗い黄色背景の色の影響を受けて、異なる色に見えてしまうんですね。デザインにおいて、違和感なく、美しく見せるために視覚調整を気を付ける必要があります。2.WEBデザインにおいての視覚調整のポイント上方距離過大の錯視棒の長さはどちらも同じなのに、縦の棒の方が長く見えます。これを上方距離過大の錯視といいます。Webデザインでよく使うボタンのデザインでもこの錯視の影響を受けることがあります。上下中央揃えにしているのに、上の空白が広く見えるという現象です。数値上はどちらも同じ大きさでも、上方の方が下方より大きく見えてしまうのです。対処法数px上にずらして調節することで、視覚的に中央に配置されているように見えるようになります。ボタン、アイコンデザインで気を付けたい錯視です。三角形分割錯覚四角に対して、三角形が左に寄って見えます。これを三角形分割錯覚といいます。三角形を四角形の中央に配置すると数値上は正しくても、三角形の底辺側に少し寄っているように知覚されてしまいます。対処方三角形の重心を中央に来るように配置すると寄っているように見えず、しっかりと中央にあるように知覚されます。重心とは？数学の話ではありますが、各辺の中点から反対側の頂点までの線分の交点に位置しています。三角形の重心は三角形の中央ではない。そのため、このような錯視が発生してしまうのです。ボタン、アイコン、動画サムネイルなどで気を付けたい錯視です。色の視覚調整色の視覚調整は、色の面積効果が起こった際に行わなくてはいけない調整のことです。色の面積効果というのは、同じ色をしているのに、色の明るさ・濃さが違って見える現象です。同色で大きさの異なる要素をふたつ並べると、同色ではないように知覚されてしまいます。対処法上図を例にすると、丸に対してテキストが明るく見えるので、少しテキストカラーをキウ楽しました。目視で確認しながら、どちらかの明度を変更するなどの「色の視覚調整」を行うことで同色に感じられるようになります。同色のアイコンとテキストを並べるデザインを作成する際には気を付けたいものとなっています。形の面積効果縦横幅が同じなのに、四角いものと丸いものを並べると、丸いものの方が小さく見えてしまいます。これを形の面積効果といいます。数値的に同じ大きさの図形でも、角が丸いものと角ばっているものでは目に見える面積に違いがあるため、角のある四角の図形の方が大きく見えてしまうのです。対処法数値的に同じサイズで二つを並べるのではなく、丸を少し大きく配置することで視覚的な同サイズにすることができます。複数のSNSや動画サイトのアイコンを並べるレイアウトを作成する際には気を付けたいものとなっています。まとめ視覚調整は、デザインツールによる数値での確認ではなく目視による調整が必要です。数値に捉われず、視覚的に正しいデザインをすることがデザイナーとして必要です。錯視を考慮し、ユーザーに違和感・ストレスを与えない気持ちの良いデザインを！