デザインツール

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

デザイン用の一貫したスペーシングシステムを生成

今すぐ使う

無料で利用登録不要ブラウザですぐに処理

プリセット

基本サイズ4px

スケールタイプ

ステップ数12

単位

変数プレフィックス

ビジュアルプレビュー

0rem

0.25rem

0.5rem

0.75rem

1rem

1.25rem

1.5rem

1.75rem

2rem

2.25rem

2.5rem

2.75rem

3rem

スケール表

名前	px	rem	変数
0	0px	0rem	--space-0
1	4px	0.25rem	--space-1
2	8px	0.5rem	--space-2
3	12px	0.75rem	--space-3
4	16px	1rem	--space-4
5	20px	1.25rem	--space-5
6	24px	1.5rem	--space-6
7	28px	1.75rem	--space-7
8	32px	2rem	--space-8
9	36px	2.25rem	--space-9
10	40px	2.5rem	--space-10
11	44px	2.75rem	--space-11
12	48px	3rem	--space-12

:root {
  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
}

スペーシングスケールジェネレーターとは？

デザイン用の一貫したスペーシングシステムを生成

スペーシングスケールジェネレーターは、ブラウザで直接動作する無料のオンラインツールです。インストールやサインアップは不要です。すべての処理はデバイス上でローカルに行われ、データのプライバシーとセキュリティが確保されます。

なぜスペーシングスケールジェネレーターを使うべきですか？

✓100%無料 - 隠れた費用やプレミアム機能はありません
✓登録不要 - アカウント作成なしですぐに使えます
✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
✓超高速 - サーバー遅延なしで即座に結果を確認できます

使い方

上の入力エリアにテキストを入力または貼り付けてください
ツールが自動的に入力を処理します
結果をコピーするかファイルとしてダウンロードしてください

機能

✓スペーシングスケール生成
✓比率プリセット
✓カスタムベース値
✓Tailwind互換
✓CSS変数出力

よくある質問

Which spacing scale should I use?

Linear scales are simple, geometric scales grow exponentially, and Fibonacci scales follow natural proportions.