はじめに

前回の記事「エンジニア向けデザイン入門」の第二弾を書きます。
(前回の記事はこちら)

今回のテーマは 余白（スペーシング） です。
配色やフォントよりも、余白の取り方ひとつで "素人感" と "プロ感" が分かれます。

この記事では、エンジニアでも即実践できる「余白設計の型」をまとめます。
さらに今回は「悪い例 → 良い例」で比較しながら具体化します。

今回もコード例とデザインあるので、見てみてください。

結論：迷ったら倍、迷ったら固定値

エンジニアは数値が好きです。なので原則化すると：

"倍数原則" で揃えると破綻しません。

結果：なんとなく窮屈でチープ感が出る

結果：一気に整って見える。落ち着き・読みやすさ・安心感が出る。

: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・ブックマークしてもらえると嬉しいです！