マークアップ間隔設計 | スペーシングシステム自動生成ツール

1️⃣

基本サイズを選ぶ

4px・8px・16pxなど設計の基準となるサイズを指定します

2️⃣

倍率・モードを選ぶ

黄金比・1.5倍・リニアなど、スケールの生成方法を選択

3️⃣

コードをエクスポート

Tailwind設定・CSS変数として即コピー。デザインガイドHTMLも生成

⚙️ パラメーター設定

基本サイズ（px）

px（カスタム）

スケールモード

倍率（Ratio）

ステップ数: 8

4 steps12 steps

ラベル: xs, sm, md, lg, xl, 2xl, 3xl, 4xl

👁️ スペーシングプレビュー

8px / 0.5rem

12px / 0.75rem

18px / 1.125rem

27px / 1.6875rem

40.5px / 2.5313rem

2xl

60.8px / 3.8rem

3xl

91.1px / 5.6938rem

4xl

136.7px / 8.5438rem

🗂️ チートシート

8px

0.5rem

tw: 2

12px

0.75rem

tw: 3

18px

1.125rem

tw: 4.5

27px

1.6875rem

tw: 6.75

40.5px

2.5313rem

tw: 10.13

2xl

60.8px

3.8rem

tw: 15.2

3xl

91.1px

5.6938rem

tw: 22.78

4xl

136.7px

8.5438rem

tw: 34.17

📋 コードエクスポート

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
      'xs': '0.5rem',
      'sm': '0.75rem',
      'md': '1.125rem',
      'lg': '1.6875rem',
      'xl': '2.5313rem',
      '2xl': '3.8rem',
      '3xl': '5.6938rem',
      '4xl': '8.5438rem',
      },
    },
  },
};

📄 デザインガイドHTML出力

チームや顧客に共有できる、視覚的なスペーシングデザインガイドHTMLを生成します。

📊 スケール値一覧

ラベル	px値	rem値	Tailwind spacing
xs	8px	0.5rem	2
sm	12px	0.75rem	3
md	18px	1.125rem	4.5
lg	27px	1.6875rem	6.75
xl	40.5px	2.5313rem	10.13
2xl	60.8px	3.8rem	15.2
3xl	91.1px	5.6938rem	22.78
4xl	136.7px	8.5438rem	34.17