一貫性のあるUIデザインに欠かせない「余白のルール」を構築。 グリッドに基づいたスケールを視覚化し、CSS変数やTailwind CSSの設定コードを一瞬で生成します。
| 名前 | サイズ | REM / PX | プレビュー |
|---|---|---|---|
| sp-xs | 8px | 0.5rem | 実寸 |
| sp-sm | 16px | 1rem | 実寸 |
| sp-md | 24px | 1.5rem | 実寸 |
| sp-lg | 32px | 2rem | 実寸 |
| sp-xl | 40px | 2.5rem | 実寸 |
| sp-2xl | 48px | 3rem | 実寸 |
| sp-3xl | 56px | 3.5rem | 実寸 |
| sp-4xl | 64px | 4rem | 実寸 |
システム設定
Advertisement
スペーシング・システム・ビルダーとは？
本ツールは、デザインシステムにおける「スペーシングスケール（余白の段階）」を定義し、デザイナーと開発者の共通言語を作るための補助ツールです。 当てずっぽうな余白指定を避け、8pxや4pxといった基本単位（ベースグリッド）の倍数でルール化することで、直感的かつ整然としたレイアウトを実現します。
こんなシーンで便利です
デザインシステムの立ち上げ
新規プロジェクトでマージンやパディングの共通ルールを策定する際、基本単位を決めるだけで標準的なスケール（xs〜6xl）を自動作成します。
コーディングの効率化
PXからREMへの計算を手動で行う手間を省きます。16pxベース、10pxベースなどプロジェクトに応じたREM換算が瞬時に行えます。
一貫性のチェック
生成されたプレビュー（実寸）を見ながら、各ステップのジャンプ率が適切か、視覚的なバランスを確認しながらルールを微調整できます。
Tailwind CSSのカスタマイズ
デフォルトのテーマ設定を上書き、または拡張するための設定オブジェクトを生成。そのまま `tailwind.config.js` に貼り付け可能です。
使い方は簡単 4ステップ
- 「基本グリッド」にプロジェクトの基準値（例: 8）を入力します。
- 「ステップ数」で生成したい余白の段階数を設定します。
- テーブルで実際のPXサイズとREM値、視覚的なボリュームを確認します。
- 「CSS変数」または「Tailwind設定」ボタンでコードをコピーし、プロジェクトに導入します。
※プレビューの青いバーは実際のピクセルサイズで表示されているため、画面上でのサイズ感を直接確認できます。
ご利用時の注意点
- アクセシビリティ：REM単位を使用することで、ユーザーがブラウザのフォントサイズを変更した際に、余白も適切にスケーリングされます。
- 接頭辞の活用：プロジェクト名や `space` などの接頭辞を付けることで、コード上の補完機能がより使いやすくなります。
- 等間隔の原則：基本的には基本単位の整数倍でスケールを作成することが、美しいリズムを生む秘訣です。
Advertisement
UIデザインにおける標準スペーシング・スケール早見表
8pxグリッド（ベース単位：8px / 1rem = 16px）に基づいた、モダンなWebデザインで推奨される余白設計の基準値一覧です。
| ステップ (Name) | ピクセル (PX) | REM換算 (16px) | 主な推奨用途 |
|---|---|---|---|
| Space-1 (xs) | 4px | 0.25rem | アイコン内の余白・非常に狭い行間 |
| Space-2 (sm) | 8px | 0.5rem | ボタン内のパディング・小さな要素の間隔 |
| Space-3 (md) | 12px | 0.75rem | カード内のコンテンツと境界線の余白 |
| Space-4 (lg) | 16px | 1.0rem | 本文のパディング・標準的な要素の間隔 |
| Space-6 (xl) | 24px | 1.5rem | セクション内の見出しと本文の間隔 |
| Space-8 (2xl) | 32px | 2.0rem | カード同士の間隔・中規模なブロック余白 |
| Space-12 (3xl) | 48px | 3.0rem | コンテンツブロック間の大きな仕切り |
| Space-16 (4xl) | 64px | 4.0rem | ヒーローエリア・セクション間の大きな余白 |
| Space-24 (5xl) | 96px | 6.0rem | ランディングページの区切り・余白を活かした設計 |
【8pxグリッドシステム（8pt Grid）のメリット】
8pxを基準とする理由は、「偶数であるためスケーリングが容易」「ほとんどの解像度（Retina等）で割り切れる」「16px(1rem)との相性が抜群に良い」という点にあります。 これにより、マージンやパディングに数学的な一貫性が生まれ、デベロッパーへの受け渡しもスムーズになります。
ブラウザの標準フォントサイズである16pxを1remとして計算することで、ユーザーのブラウザ設定に依存した柔軟なレイアウト（レスポンシブWebデザイン）が可能になります。
Tailwind CSSのデフォルトのスペーシング（w-4 = 1rem = 16pxなど）も4の倍数に基づいています。本ツールで生成したカスタム設定により、一貫性をさらに強化できます。
※キーワード：Webデザイン 余白 ルール, 余白 設計 ツール, 8pxグリッド 計算, マージン パディング 基準, CSSスペーシングスケール 生成, Tailwind CSS 余白 設定
よくある質問（FAQ）
Q.4pxグリッドと8pxグリッドどちらが良いですか？
A. より緻密な制御が必要な場合は4px、管理をシンプルにし、大胆なレイアウトを目指す場合は8pxが適しています。
Q.負の値（ネガティブマージン）は生成できますか？
A. 現在のバージョンは正のスケールのみ対応しています。負の値が必要な場合は、生成されたCSS変数に対して `-1` を掛けて使用してください。
Q.生成された表は画像として保存できますか？
A. 現在はコード出力のみですが、表をコピーしてドキュメント（NotionやFigma等）に貼り付ける際の数値リファレンスとして活用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。