デザイン
2023-10-20
こんにちは、Creative.LABのスタッフY.Mです。
Webに限らずですが、デザインの仕事には基本的にAdobeソフトやFigmaなどのデジタルソフトが使われています。
デジタルソフトは緻密な計算に基づいたデザイン設計が可能ですが、人間には「錯視」という、目で見たときに実際とは異なって見える・感じられる現象があります。
そこで今回は錯視を意識したWebデザインについてご紹介したいと思います！
■視覚調整
数値的には均等なはずなのに均等に見えない、なんて経験はありませんか？
これは錯視（目の錯覚）によるものです。その錯視を考慮してデザインを調整することを「視覚調整」と言います。
錯視として有名なものに「ミュラー・リヤー錯視」があります。
【上図】上下の水平線は同じ長さですが、外向きに矢羽をつけた左側の図の方が線が長く感じられます。
ここからはよくあるWebデザインパーツを例に出しながら、実作業で意識したい視覚調整をご紹介！
■パターン① ボタンのデザイン
数値上は同じ大きさでも、下よりも上にあるものの方が大きく見えることを上方距離過大の錯視と言います。
ボタンのデザインが長方形のとき、テキストの上の空白が広く見えることで、数値的に正しく中央に配置してもテキストが下寄りに配置されているように見えてしまいます。少し上にズラして調整しましょう。
■パターン② 三角形のアイコン
三角形を図形の中央に配置すると、三角形の底辺側に少し寄っているよう見える錯視のことを三角形分割錯視と言います。
これは三角形を中央に配置するアイコンなどを作る際に気をつけたい錯視です。
三角形の重心が中央にくるように配置して調整しましょう。
■パターン③ 同色のアイコン＋テキスト
同色で大きさの異なる要素をふたつ並べると、それぞれの色が同色ではないように感じられます。
これは同色のアイコンとテキストを並べる際に気をつけたい錯視です。
明るい色の場合：面積が大きくなるにつれて、より明るく
暗い色の場合：面積が大きくなるにつれて、より暗く
色が揃って見えない場合は、目視で確認しながら、どちらかの明度を変更して調整しましょう。
まとめ
Webサイトにおいて、ユーザーが見た目に違和感を感じてしまったら、ユーザー行動の妨げになってしまう可能性があります。
デザイン本来の目的が損なわれないよう、視覚調整という細かな作業を行うことも重要ですね！
