移行中の知識
視覚的重さ
Visual Weight
定義
視覚的重さ（visual weight）とは、構成内の要素が相対的にどの程度「重く」感じられ、全体の均衡へどの程度の力を持つように見えるかという知覚的な関係です。物理的な重量や単純な面積ではなく、大きさ、明度差、色の強さ、contrast、密度・複雑さ、位置など複数の条件で変わります。視覚的均衡は、異なるvisual weightを持つ要素同士の釣り合いとして考えられます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
landing pageのhero
大きな薄い画像と小さな強いCTA
見るポイント
大きな写真が淡く、CTAが小さくても周囲との差や色の強さによって相対的な重さの感じ方は変わりうる。面積だけで均衡を予測せず、CTAのcontrast・chroma・位置を変えた複数案を並べ、画像との重さの関係がどう変わるかを観察する。
desktop header
ロゴとnavigationの左右バランス
見るポイント
左の濃いロゴと右の複数linkを、要素数だけで均衡判断しない。ロゴの面積、dark/light差、link群の密度、端からの位置を含め、片側だけが重く見えないか確認する。
理解
理解のポイント
- visual weightを意識すると、対称でない構成でも異なる要素を釣り合わせたり、意図した焦点へ相対的な強さを与えたりしやすい。
注意
誤解しやすい点
- 大きい要素ほど必ずvisual weightが大きいと考え、色・contrast・密度・位置を無視する。
- 暗い色や高chroma色は常に重いと固定し、背景との関係や面積差を見ない。
- visual weightを「最初に目に入る順番」や「意味上の重要度」と完全に同じ概念として扱う。
観察
見比べて確かめる
関連
関連する概念
出典