#460
インタラクション・アニメーション
#460視覚的なバランス
視覚的なバランス
別名・表記:Visual Balance
UIXHERO Definition
デザインの要素（色、形、大きさ、位置など）が釣り合っており、安定感や美しさを感じさせる状態。
概要
物理的な重さと同じように、視覚的な要素にも「視覚的重さ（Visual Weight）」がある。
人は無意識に重さのバランスを取ろうとするため、画面上の要素の配置が偏っていると「不安定」「落ち着かない」と感じる。
UXでの活用
- アシンメトリー（非対称）: シンメトリーは安定感を与えるが、静的でフォーマルな印象になりやすい。 アシンメトリー（非対称）は動きや緊張感を生み出すが、視覚的重さの調整を誤ると不安定に見える。
- ホワイトスペース: 余白もまた、バランスを取るための重要な要素である。
💡 使いどころ
LPのファーストビューや、バナーデザイン。「どこを見ていいかわからない」という混乱を防ぎ、視線をスムーズに誘導する。
⚠️ 注意点・誤用
完全に均等（シンメトリー）なバランスは静的で退屈になりがち。Webデザインでは、左右非対称（アシンメトリー）によって視線移動（Z型、F型）を促すことが多い。
具体例
- Googleのトップページ（中央のロゴと検索バーによる完全なシンメトリー）
- 写真の右側にテキストを配置してバランスを取ったヒーローイメージ
出典・参考文献:
- Arnheim, R. (1974). Art and Visual Perception: A Psychology of the Creative Eye. University of California Press.
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.
- Ware, C. (2012). Information Visualization: Perception for Design (3rd ed.). Morgan Kaufmann.