はじめに
前回の記事「エンジニア向けデザイン入門」の第二弾を書きます。
(前回の記事はこちら)
今回のテーマは 余白（スペーシング） です。
配色やフォントよりも、余白の取り方ひとつで "素人感" と "プロ感" が分かれます。
この記事では、エンジニアでも即実践できる「余白設計の型」をまとめます。
さらに今回は「悪い例 → 良い例」で比較しながら具体化します。
今回もコード例とデザインあるので、見てみてください。
結論：迷ったら倍、迷ったら固定値
エンジニアは数値が好きです。なので原則化すると：
- パディング：16px or 24px
- セクション間：32px or 48px
- ヘッダー-本文間：64px
- カード内余白：24px
- フォーム項目間：16px
"倍数原則" で揃えると破綻しません。
UIサンプル比較：悪い例 vs 良い例
【悪い例：素人感が出る余白】
- 全体に詰めすぎ
- 各セクションの間隔がバラバラ
- ボタンも内側ギチギチで余裕がない
- 文字とカードの枠が近すぎる
結果：なんとなく窮屈でチープ感が出る
【良い例：モダン感が出る余白】
- セクション間は常に32px以上
- カード内パディングは24px
- ボタンは上下16px・左右24pxのパディング
- フォーム項目は16px間隔で揃える
結果：一気に整って見える。落ち着き・読みやすさ・安心感が出る。
よく使う"余白テンプレート"一覧
| UI要素 | 推奨余白 |
|---|---|
| ボタン内パディング | 16px上下 / 24px左右 |
| カード内パディング | 24px |
| セクション間隔 | 32px or 48px |
| ヘッダーと本文の間 | 64px |
| 入力フォーム項目間 | 16px |
余白の裏技：CSS変数化しておく
:root {
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
}
この型で書き始めると、プロっぽいUI設計が驚くほど楽になります。
余白は「余白→中身の順」で設計せよ
初心者：まず中身を置く → 空いた隙間に余白を調整する
プロ：先に余白の骨格を決める → 中身をそのブロックに入れる
設計順序が逆転すると一気にUIが整います。
おわりに
デザインは余白で8割決まる。
配色・フォントをいじる前に、まずは "間" を整える癖をつけるだけで、UIが一気に見違える。
そして今回紹介したように、余白設計では 「固定値（px or rem）」 が基本。
「%指定じゃダメなの？」って思う人もいるけど、実は %指定の余白はブレやすくて不安定。
親要素のサイズによって余白が変わるから、画面幅によって「急に窮屈」「妙にスカスカ」になりがち。
特にボタンやカード、フォーム周りでは一貫性がある見た目が重要で、そこに%を使うと破綻しやすい。
だからこそ、「16px / 24px / 32px / 48px…」のように倍数ルールで固定しておくと崩れないUIになる。
次回は「カードUI設計のコツ編」を書く予定です。
よければLGTM・ブックマークしてもらえると嬉しいです！