デザインの余白:上下に余白がある場合は下の余白を少し広く

U3
2026/2/20
2026/2/20

「視覚的な安定感」を出すために、下側の余白(ボトムマージン)をわずかに広く取る手法非常によく使われます


1. 理由:人間の視覚特性(錯視)

人間は、幾何学的に真っ中心にあるものを、「少し下に沈んでいる」と感じる傾向があります。

  1. 視覚的中心: 数学的な中心よりも、わずかに上が心地よい中心(視覚的中心)と感じられます。
  2. 安定感: 下の余白を広くすることで、重心が下がり、デザインが「どっしり」と安定して見えます。逆に下が狭いと、要素が下に落ちそうな、窮屈で不安定な印象を与えてしまいます。


2. 具体的な活用シーン

シーン

余白の調整方法

効果

ポストカード・ポスター

下の余白を一番広くする(上<左右<下)

額装された絵画のような高級感と安定感が出る。

ボタン内の文字

下を数ピクセルだけ広くする(または上を詰める)

アルファベットの小文字などの重心を考慮し、中央に見えるようにする。

Webサイトのセクション

基本は上下均等だが、フッター付近は広く取る

コンテンツの終わりを明確にし、安心感を与える。

名刺のデザイン

下側に名前や連絡先を置く際、底辺に余裕を持たせる

手で持った時の隠れを考慮しつつ、視覚的なバランスを整える。


3. 「均等」の方が良い場合

もちろん、すべてにおいて下を大きくすれば良いわけではありません。以下のような場合は上下均等が好まれます。

  1. グリッドシステムを重視するWebデザイン: 規則正しいリズムで作る場合、上下のパディング(内側の余白)を揃えたほうがコーディングも美しく、モダンでフラットな印象になります。
  2. 情報密度が高いアプリのUI: 画面をスクロールして次々に情報が出てくる場合、余白に差がありすぎるとリズムが崩れて見づらくなることがあります。

まとめ:迷った時の「黄金比」

もし「どれくらい広げればいいか?」と迷ったら、まずは以下の比率を試してみてください。

上:下 = 1:1.2 〜 1.5

これだけで、プロっぽく落ち着いたレイアウトに見えるはずです。




コメント

コメントはまだありません。