スペーシングスケールジェネレーター カスタマイズ可能なベースユニットと乗数を持つ一貫したスペーシングスケールシステムを生成します。

What Is スペーシングスケールジェネレーター?

スペーシングスケールジェネレーターは、基本単位に事前に定義された係数を掛けて、Webデザイン用の一貫したスペーシングシステムを作成します。プロフェッショナルで調和のとれたデザインには、一貫したスペーシングが重要です。一貫性がないとレイアウトは不均衡で未完成な見たになります。このツールでは、基本単位（通常4pxまたは8px）に係数（0、0.5、1、1.5、2、3、4、5、6、8、10、12、16、20、24）を掛けて包括的なスペーシングスケールを作成します。視覚的なプレビューでは、それぞれのスペーシング値が色付きのバーとして表示され、相対的な差異を見やすくしています。出力は、CSSカスタムプロパティ（--space-0から--space-24）の一連であり、pxまたはremで表現されており、マージン、パディング、ギャップ、その他のスペーシング値として使用するためにスタイルシートにすぐに利用できます。

Why Use スペーシングスケールジェネレーター?

• 数学的に一貫したスペーシングのための基準単位システム
• 相対的なスペーシング差を示す視覚的なバー図表
• デザインシステム統合のためのCSSカスタムプロパティ出力
• pxとremの両方の出力単位に対応

Common Use Cases

デザインシステムトークン

デザインシステムの基礎となるスペーシングトークンを生成します。

コンポーネントライブラリのスペーシング

すべてのコンポーネントにわたって一貫したスペーシングを保証します。

新規プロジェクト設定

新しいWebプロジェクトを開始する際に、スペーシングシステムを確立します。

チームの整合

デザインと開発チーム全体で標準化されたスペーシングスケールを共有します。

Technical Guide

スペーシングスケールでは、基本単位に一連の係数を掛けて、一貫した比例的なスペーシング値を作成します。最も一般的な基本単位は4px（Tailwind CSSとMaterial Designで使用）と8px（多くのデザインシステムで使用）です。4pxの基本単位では細かい制御が可能になります: 4、8、12、16、20、24、32、40など。8pxの基本単位では大きなステップになります: 8、16、24、32、40、48など。CSSカスタムプロパティ（変数）は値を再利用するために使用されます: --space-1: 0.25rem。これらは、マージン、パディング、ギャップ、その他のスペーシングプロパティで使用できます。rem単位を使用すると、スペーシングがルートフォントサイズに比例して拡大縮小され、ユーザーがテキストの大きさを変更したときにも比率が維持されます。半分のステップ（0.5倍）は、小さいインクリメントに対する微調整を行うために提供されています。大きな乗数（16倍、20倍、24倍）では、セクション間のスペーシングや大きなレイアウトギャップを扱います。

Tips & Best Practices

• 1
  細かい制御には4px基準、シンプルなスケールには8px基準を使用
• 2
  アクセシビリティと拡張性のあるスペーシングのためにrem単位を適用
• 3
  CSSカスタムプロパティを使用してグローバルなスペーシング調整を容易に行う
• 4
  スケール値に従って一貫したデザインを作成するため、任意のスペーシング値は避ける

Related Tools

CSS グリッド プレイグラウンド

テンプレート列、行、ギャップのインタラクティブなコントロールを備えたビジュアル CSS グリッド ビルダー。

🎨 CSS & Design

Tailwind設定生成ツール

カスタムカラー、フォント、ブレークポイントを使用したTailwind CSS構成ファイルを生成します。

🎨 CSS & Design

タイポグラフィースケールジェネレーター

カスタマイズ可能なベースサイズ、比率、および単位を持つモジュラー型のタイポグラフィースケールを生成します。

🎨 CSS & Design

CSS

CSS(, , )

🎨 CSS & Design

Frequently Asked Questions

Q どのような基準サイズを使うべきか?

4pxが最も一般的（Tailwindで使用）です。8pxではよりシンプルなスケールになります。

Q pxとremのどちらを使用するべきか?

アクセシビリティのため、ユーザーのフォントサイズ設定に合わせて拡張縮小されるremが推奨されます。

Q なぜ任意のスペーシング値を使用しないのか?

一貫したスケールは視覚的な調和を作り出し、デザインを見た目に整理されたものにします。

Q これらのスペーシング値の使い方は?

マージンやパディング、ギャップなどのCSSカスタムプロパティを使用します：margin: var(--space-4);

Q 乗数セットを変更することは可能か?

標準のセットがほとんどのニーズをカバーしていますが、生成されたCSSを編集して乗数を追加または削除できます。

About This Tool

スペーシングスケールジェネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.