一貫性のある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 | 実寸 |
システム設定
スペーシング・システム・ビルダーとは？
本ツールは、デザインシステムにおける「スペーシングスケール（余白の段階）」を定義し、デザイナーと開発者の共通言語を作るための補助ツールです。 当てずっぽうな余白指定を避け、8pxや4pxといった基本単位（ベースグリッド）の倍数でルール化することで、直感的かつ整然としたレイアウトを実現します。
こんなシーンで便利です
デザインシステムの立ち上げ
新規プロジェクトでマージンやパディングの共通ルールを策定する際、基本単位を決めるだけで標準的なスケール（xs〜6xl）を自動作成します。
コーディングの効率化
PXからREMへの計算を手動で行う手間を省きます。16pxベース、10pxベースなどプロジェクトに応じたREM換算が瞬時に行えます。
一貫性のチェック
生成されたプレビュー（実寸）を見ながら、各ステップのジャンプ率が適切か、視覚的なバランスを確認しながらルールを微調整できます。
Tailwind CSSのカスタマイズ
デフォルトのテーマ設定を上書き、または拡張するための設定オブジェクトを生成。そのまま `tailwind.config.js` に貼り付け可能です。
使い方は簡単 4ステップ
- 「基本グリッド」にプロジェクトの基準値（例: 8）を入力します。
- 「ステップ数」で生成したい余白の段階数を設定します。
- テーブルで実際のPXサイズとREM値、視覚的なボリュームを確認します。
- 「CSS変数」または「Tailwind設定」ボタンでコードをコピーし、プロジェクトに導入します。
※プレビューの青いバーは実際のピクセルサイズで表示されているため、画面上でのサイズ感を直接確認できます。
ご利用時の注意点
- アクセシビリティ：REM単位を使用することで、ユーザーがブラウザのフォントサイズを変更した際に、余白も適切にスケーリングされます。
- 接頭辞の活用：プロジェクト名や `space` などの接頭辞を付けることで、コード上の補完機能がより使いやすくなります。
- 等間隔の原則：基本的には基本単位の整数倍でスケールを作成することが、美しいリズムを生む秘訣です。
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 余白 設定
デザインシステムにおけるスペーシングトークンの運用方法とマルチデバイス最適化
自動生成したスペーシングスケールを実際のプロダクトへ組み込む際、コンポーネントの再利用性や多画面展開の品質を高めるための実践的なフロントエンド実装アーキテクチャを詳解します。
UIコンポーネントのカプセル化を担保するマージンとパディングの分離原則
コンポーネントを再利用可能な状態に保つためには、要素の内側の余白（パディング）のみをコンポーネント自体に持たせ、外側の余白（マージン）は親要素であるレイアウト層から指定するのが鉄則です。
なぜなら、コンポーネントに固定のマージンを持たせると、配置する場所によって余白の調整が必要になり、再利用性が著しく低下するからです。
Figmaからコードへ落とし込む際は、親コンポーネント側でスタックレイアウトやギャップのユーティリティを活用して配置間隔を一元管理してください。
ブレイクポイントに応じたスペーシングスケールの動的シフトと流動的レイアウト
モバイル環境とデスクトップ環境では画面の専有面積が大きく異なるため、同一の余白設定を適用するとスマホ画面が空白だらけになる問題が発生します。
この課題を解決するには、CSSのクランプ関数やTailwind CSSのメディアクエリを用いて、画面幅に応じて余白を自動で縮小・拡大（流動的スペーシング）させる設計が有効です。
例えば、デスクトップで64pxの余白（4xl）を持たせるセクション間隔を、モバイルでは32px（2xl）へと動的にシフトさせることで、全端末で一貫したビジュアルリズムを維持できます。
デザインシステム初学者向けのリニアスケールと指数関数的スケールの使い分け
余白の段階（ステップ）を設計する際、すべての数値を等間隔で増やす（4, 8, 12, 16, 20...）リニアスケールは、数値が大きくなるにつれて視覚的な変化が認識しづらくなります。
そのため、24px以降の大きな余白については、24, 32, 48, 64, 96...のように段階的にジャンプ率を上げる指数関数的なスケールを採用してください。
人間が知覚できる「余白の対比」を計算に入れたスケールをツールで可視化し定義しておくことで、レイアウトの強弱が明確になり、洗練されたホワイトスペースのコントロールが可能になります。
よくある失敗と対策
デザインシステムにないマジックナンバー（感覚値の余白）をコードに直書きしてしまう
Figmaのデザインやコーディング時に「なんとなく綺麗に見えるから」と「margin-top: 13px」や「padding: 27px」のようなスケール外の数値を直書きしてしまい、プロジェクト全体のレイアウトの一貫性が崩れ、カオスなCSSコードが量産される失敗です。
💡 対策・解決策を見る▼
PX単位でマージンやパディングを固定し、ブラウザのフォントサイズ変更（アクセシビリティ）を破壊する
余白を「padding: 24px」のようにPX単位でハードコーディングした結果、高齢者や視覚障害を持つユーザーがブラウザの文字サイズ（ルートフォントサイズ）を拡大した際に、テキストと余白のバランスが崩れてコンテンツが重なったり画面外にはみ出したりする失敗です。
💡 対策・解決策を見る▼
Tailwind CSSの既存スペーシングを中途半端に上書きし、デフォルトのレイアウトクラスが破綻する
「tailwind.config.js」の「theme.spacing」内に既存の命名規則を考慮せず独自の余白ルールを上書き（override）してしまい、Tailwindが本来持っている「w-full」や「p-4」などのデフォルトユーティリティクラスが機能しなくなる開発現場でのトラブルです。
💡 対策・解決策を見る▼
デザイナーと開発者間で「余白の命名規則」が共通化されず、引き継ぎやUIコンポーネントの実装効率が低下する
Figma上では「Space/Small」「Space/Medium」と命名されているのに、エンジニアのCSSコード内では「--margin-sm」「--padding-md」などと独自に実装され、UIデザインシステム構築において最も重要な「共通言語（トークン化）」が失われる失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.なぜUIデザインの余白設計において8pxグリッドシステムが広く推奨されているのですか
A. 偶数である8の倍数は多くの液晶画面解像度で割り切れやすく、Retinaディスプレイなどの高画質端末向けに画面サイズをスケーリングした際にも、小数点のピクセル崩れを起こしにくくデザインに数学的な一貫性と美しいリズムをもたらすことができるためです
Q.Tailwind CSS以外のCSS構成やフロントエンド開発フレームワークでも活用できますか
A. はい、利用可能です。本ツールはCSS変数形式でのコード書き出し機能も備えているため、通常のCSSやSass、CSS-in-JSとして人気のあるStyled Componentsなど、プロジェクトで採用しているあらゆるスタイル手法に組み込むことができます
Q.余白サイズをPXではなくREM単位へ自動変換してコード設計を行う理由は何ですか
A. ブラウザの標準フォントサイズである16pxを基準とした相対単位に変換することで、高齢者や視認性の調整が必要なユーザーがブラウザの文字サイズ設定を拡大・縮小した際、余白も文字の大きさに追従して動的に伸縮し、レイアウト崩れを防ぐ高いアクセシビリティを担保できるためです
Q.設定フォームに数値を入力した際デザインシステムの情報が外部に送信され漏洩する心配はありませんか
A. 一切ありません。当ツールはすべての余白計算とコード生成をユーザー自身のデバイスおよびブラウザのメモリ内のみで処理する完全ローカル処理型を採用しています。データが外部のサーバーに送信や保管される仕組みはないため機密性の高い開発プロジェクトでも安心です
Q.基本グリッドの変更やステップ数の増減を行ったときテーブル内のプレビューは即座に連動しますか
A. はい、即座に反映されます。数値を変更するとリアルタイムでピクセル値とREM換算値が再計算され、視覚的なバーの長さも直接更新されるため、生成されるスペーシングスケールのジャンプ率やボリューム感を画面上で直感的に比較検証しながら微調整できます
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。