スペーシングスケール生成器 — デザインの一貫した余白

任意のマージン・パディング値は一貫性のないインターフェイスにつながります。スペーシングスケールはタイポグラフィスケールと同様に、数学的比率に基づいた限られた値セットを定義します。

Tシャツサイジングアプローチ

Tailwind CSSは4pxベーススケールを使用：4・8・12・16・20・24・32・40・48・64px。このシンプルな線形スケールはほとんどのインターフェイスで優秀です。完璧な数学的進行よりも一貫性のほうが価値があります。

指数スケール

4・8・16・32・64px（倍増）はよりドラマチックな余白の差を与えます。Material Designは8pxをベースとして使用。AppleのHuman Interface Guidelinesは4pxの倍数を使用。1つのベース単位を選んで守り抜きましょう。

CSS変数での実装

--spacing-1: 4px; --spacing-2: 8px; --spacing-4: 16px; --spacing-8: 32px。デザイントークンはスペーシング変数をセマンティックな名前に紐付けます。ベースを変更するだけでインターフェイス全体を再スケールできます。