「なんかダサい…」
「ごちゃごちゃして見づらい…」
「情報は正しいのに伝わらない…」
その原因、多くの場合は
余白不足です
デザイン初心者ほど
- とにかく詰め込む
- 情報を全部見せようとする
- 空いているスペースが不安になる
という傾向があります。
ですが結論から言うと、
余白は“空白”ではなく“デザイン”です。
この記事では
- 余白の基本
- なぜ重要なのか
- 具体的な使い方
- 実務での改善方法
を分かりやすく解説します。
余白とは何か？
余白とは
何も置かれていないスペースのことです。
種類
① 外側の余白（マージン）
要素と要素の距離
② 内側の余白（パディング）
要素の中の余白
この2つを使ってデザインを整えます
なぜ余白が重要なのか
① 見やすくなる
余白があると
情報が整理される
② 高級感が出る
余白＝余裕
③ 読みやすくなる
目が疲れない
④ 伝わりやすくなる
強調が生きる
つまり
余白があるだけで“プロっぽくなる”
余白がないデザインの特徴
NG① 詰め込みすぎ
呼吸できない
NG② 情報が密集
読みにくい
NG③ 強調が分からない
全部同じ
NG④ 視線が迷う
どこ見ればいいか分からない
これ全部「余白不足」
余白の基本ルール
① 詰めない
空ける勇気
② グルーピングする
関連するものは近く
③ 関係ないものは離す
距離で意味を作る
④ 一定のルールを作る
バラバラにしない
⑤ 余白に意味を持たせる
意図して空ける
余白の具体的な使い方
① セクション間
上下40〜80px
② テキスト
行間：1.5〜1.8
③ ボタン
上下左右に余白
④ カードUI
内側にpadding
これだけで見違える
余白で変わるビフォーアフター
Before
詰め込み
ごちゃごちゃ
After
スッキリ
見やすい
やることはシンプル
余白を増やす
よくあるNG例
NG① 余白がバラバラ
統一感なし
NG② 詰めすぎ
読みにくい
NG③ 余白が狭すぎる
窮屈
NG④ 余白の意味がない
適当配置
一気に良くなる改善方法
① 余白を2倍にする
まずこれ
② 不要な要素を削る
足すより削る
③ 行間を広げる
読みやすくなる
④ セクションを分ける
整理される
これだけで激変
プロがやっている考え方
プロは
余白から設計する
初心者
中身 → 余白
プロ
余白 → 中身
ここが大きな違い
UIデザインとの関係
余白はUIでも重要
・押しやすい
・ 読みやすい
・ 迷わない
UXが向上する
余白の黄金ルール
余白 = 情報整理
余白 = 強調
余白 = 高級感
まとめ
余白の基本
① 詰め込まない
② 距離で意味を作る
③ 余白を統一する
④ 行間を広げる
⑤ 削る意識
最後に
余白は
・“何もない”ではなく
・“意味があるスペース”
です。
ここを意識するだけで
デザインは一気に変わります。
