S
SnapUtil
Design Tools

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

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

プリセット

4px
12

ビジュアルプレビュー

0
0rem
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
7
1.75rem
8
2rem
9
2.25rem
10
2.5rem
11
2.75rem
12
3rem

スケール表

名前pxrem変数
00px0rem--space-0
14px0.25rem--space-1
28px0.5rem--space-2
312px0.75rem--space-3
416px1rem--space-4
520px1.25rem--space-5
624px1.5rem--space-6
728px1.75rem--space-7
832px2rem--space-8
936px2.25rem--space-9
1040px2.5rem--space-10
1144px2.75rem--space-11
1248px3rem--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%無料 - 隠れた費用やプレミアム機能はありません
  • ✓登録不要 - アカウント作成なしですぐに使えます
  • ✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
  • ✓超高速 - サーバー遅延なしで即座に結果を確認できます

使い方

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

機能

  • ✓Multiple scale types (linear, geometric, fibonacci)
  • ✓Base size configuration
  • ✓Custom step count
  • ✓Visual spacing preview
  • ✓CSS, SCSS, and Tailwind output
  • ✓Design system presets

よくある質問

Which spacing scale should I use?

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

関連ツール

タイポグラフィスケールジェネレーターカラーパレットジェネレーターdesign tokens