📐基準単位ベースで余白体系を自動生成

基準単位ベースで余白体系を自動生成

px
px

8ptグリッドとは?

8ptグリッドとは、すべての余白とサイズを8の倍数で設計するデザインルールです。iOS、Android、Material Designなど多くのプラットフォームが8pxを基本単位として採用しているため、8の倍数に値を合わせることで様々な画面解像度でもピクセルがずれずにきれいに整列します。アイコンやテキストの余白など細かい調整が必要な場合は、4ptグリッドを併用することも多くあります。

この計算機は基準単位を入力すると、0.5倍から12倍までの標準余白スケールを自動生成します。また確認したい任意の値を入力すると、最も近いグリッド値を上下で教えてくれるので、デザインシステムを作る際に適当な数字ではなく一貫した値を選べます。Figmaやspacingトークンを定義する際の参考資料として活用してください。

よくある質問

8ptグリッドとは何ですか?

余白やサイズをすべて8の倍数で決めるデザインルールで、様々な画面解像度でも一貫した整列を保ちやすくします。

4ptグリッドと8ptグリッド、どちらを使うべき?

アイコンなど細かい調整には4pt、一般的なレイアウト余白には8ptが広く使われています。