Webデザインにおける「中心」には、幾何学的な中心と視覚的な重心の2種類が存在します。
例えば、三角形のアイコンをボタンの中央に配置する場合、数値上の中心に置くと、底辺側のボリュームに引っ張られて、反対側がスカスカに見えてしまうことがあります。
実務では、paddingやmarginを数値通りに設定するだけでなく、要素の密度が濃い部分を意識して、わずかに位置をずらす「視覚補正」を行うことで、ユーザーに安定感を与えられます。
ヘッダーに配置するロゴやアイコンは、その形状によって重心が大きく異なります。
imgタグで書き出された画像自体のサイズが同じでも、中身が「円形」か「長方形」かによって、隣り合うテキストとのバランスが変わって見えます。
特に、複雑な形状のロゴを扱う際は、ブラウザのデベロッパーツールで境界線を確認するだけでなく、一歩引いて画面全体を眺め、余白の「重み」が均等に分散されているかを確認する習慣が大切です。
重心は、要素がある場所だけに存在するわけではありません。何も配置されていない「余白（ホワイトスペース）」も、デザインの重心を決定する大きな要因となります。
画面の上部に重い要素を配置すれば「緊張感」や「権威性」が生まれ、下部に重心を置けば「安定感」や「親しみやすさ」が生まれます。
CSSでのレイアウト設計時には、flexやgridを活用しながら、画面全体の重力がどこに向かっているかを意図的にコントロールすることが求められます。
視覚的な重心を整えることは重要ですが、それは適切な構造があってこそ活かされます。
例えば、装飾目的で重心バランスを取るために挿入した画像には、alt=""を設定してスクリーンリーダーが無視できるように配慮しましょう。
情報の重心（ユーザーが最も注目すべき内容）と視覚の重心を一致させることで、情報の伝達速度は飛躍的に向上し、誰にとっても使いやすいインターフェースへと繋がります。
Webサイトは静止画とは異なり、スクロールやホバーアクションによって状態が変化します。
JavaScriptで要素を動かしたり、opacityを変化させたりすると、その瞬間にユーザーの視線（重心）が移動します。
予期せぬ位置に重心が飛び火しないよう、アニメーションを実装する際は「視線の起点と終点」を意識し、レイアウトが崩れて見えないような、滑らかな重心移動を設計することがプロのコーディング技術と言えます。