「色を変えたいのに、30箇所も修正が必要…」「フォントサイズのルールがバラバラ…」——CSS変数（カスタムプロパティ）を正しく設計すれば、そんな悩みとは無縁になります。
本記事では、実務で役立つCSS変数のデザイントークン管理手法を、具体的なコード付きで解説します。
1. カラートークンの体系化
色は「意味」で名前をつけるのがポイントです。--blue ではなく --color-primary。デザイン変更時、ブルーからグリーンに変わっても変数名はそのままで済みます。
--color-primary
--color-text-dark
--color-text-mid
--color-bg-off
--color-border
HTML
<div class="token-grid">
<div class="token"><div class="token__swatch" style="background:#E31010"></div><div class="token__name">--color-primary</div></div>
<div class="token"><div class="token__swatch" style="background:#1A1A1A"></div><div class="token__name">--color-text-dark</div></div>
<div class="token"><div class="token__swatch" style="background:#6B6560"></div><div class="token__name">--color-text-mid</div></div>
<div class="token"><div class="token__swatch" style="background:#F9F6F2"></div><div class="token__name">--color-bg-off</div></div>
<div class="token"><div class="token__swatch" style="background:#EAEAEA"></div><div class="token__name">--color-border</div></div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.token-grid {
/* 本体のスタイル */
}
.token__name {
/* 本体のスタイル */
}
.token__swatch {
/* 本体のスタイル */
}
.token {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
:root {
/* ブランドカラー */
--color-primary: #E31010;
--color-primary-light: rgba(227, 16, 16, 0.08);
/* テキスト */
--color-text-dark: #1A1A1A;
--color-text-mid: #6B6560;
--color-text-light: #9A9794;
/* 背景 */
--color-bg: #FFFFFF;
--color-bg-off: #F9F6F2;
--color-bg-section: #FBF9F7;
/* ボーダー */
--color-border: #EAEAEA;
}
2. スペーシングスケール
余白のサイズも変数で管理しておくと、「なんとなく20px」から「ルールに基づいた16px」に変わります。4の倍数（4, 8, 12, 16, 24, 32, 48, 64）が使いやすいスケールです。
--space-xs (4px)
--space-sm (8px)
--space-md (16px)
--space-lg (32px)
--space-xl (64px)
HTML
<div class="spacing">
<div class="spacing-row"><span class="spacing-label">--space-xs (4px)</span><div class="spacing-bar" style="width:4px"></div></div>
<div class="spacing-row"><span class="spacing-label">--space-sm (8px)</span><div class="spacing-bar" style="width:16px"></div></div>
<div class="spacing-row"><span class="spacing-label">--space-md (16px)</span><div class="spacing-bar" style="width:40px"></div></div>
<div class="spacing-row"><span class="spacing-label">--space-lg (32px)</span><div class="spacing-bar" style="width:80px"></div></div>
<div class="spacing-row"><span class="spacing-label">--space-xl (64px)</span><div class="spacing-bar" style="width:160px"></div></div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.spacing-row {
/* 本体のスタイル */
}
.spacing-label {
/* 本体のスタイル */
}
.spacing-bar {
/* 本体のスタイル */
}
.spacing {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 64px;
}
/* 使用例 */
.section { padding: var(--space-xl) var(--space-lg); }
.card { padding: var(--space-lg); margin-bottom: var(--space-md); }
.button { padding: var(--space-sm) var(--space-lg); }
3. コンポーネントスコープの変数
グローバル変数だけでなく、コンポーネント単位でも変数を活用すると、同じ構造で色違いのバリエーションを簡単に作れます。
ライトカード
Defaultダークカード
Variant
HTML
<div class="card-a">
<p class="card-a__title">ライトカード</p>
<span class="card-a__tag">Default</span>
</div>
<div class="card-a card-b">
<p class="card-a__title">ダークカード</p>
<span class="card-a__tag">Variant</span>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.card-a__tag {
/* 本体のスタイル */
}
.card-a__title {
/* 本体のスタイル */
}
.card-b {
/* 本体のスタイル */
}
.card-a {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
/* ベースカード：コンポーネント変数を定義 */
.card {
--card-bg: #fff;
--card-text: #1A1A1A;
--card-accent: #E31010;
background: var(--card-bg);
color: var(--card-text);
}
.card__tag {
background: var(--card-accent);
color: #fff;
}
/* バリエーション：変数を上書きするだけ */
.card--dark {
--card-bg: #1A1A2E;
--card-text: #E0E0E0;
--card-accent: #7C3AED;
}
💡 ポイント：コンポーネント内の色を直接書き換えるのではなく、変数を上書きするだけでバリエーションを作る。この設計パターンを覚えると、CSSの保守性が劇的に上がります。
4. レスポンシブ対応の変数
メディアクエリ内で変数の値を変更すれば、フォントサイズや余白をブレイクポイントごとに一括調整できます。
CSS
:root {
--font-size-h1: 2rem;
--font-size-body: 1rem;
--section-padding: 80px;
}
@media (max-width: 768px) {
:root {
--font-size-h1: 1.4rem;
--font-size-body: 0.9rem;
--section-padding: 48px;
}
}
/* コンポーネント側は変数を使うだけ */
h1 { font-size: var(--font-size-h1); }
body { font-size: var(--font-size-body); }
section { padding: var(--section-padding) 0; }
まとめ：変数設計はプロジェクトの「背骨」
- カラートークン → 色に「意味」で名前をつける
- スペーシングスケール → 4の倍数で統一ルール
- コンポーネント変数 → 上書きでバリエーション生成
- レスポンシブ変数 → メディアクエリで一括調整
CSS変数を「ただ便利な変数」として使うのではなく、プロジェクト全体のデザインシステムの基盤として設計すること。それが真の保守性向上につながります。
💡 ツタワルの制作では：すべてのプロジェクトでCSS変数によるデザイントークン管理を導入しています。運用フェーズでのスタイル変更を最小コストで行えるのが、私たちの設計の強みです。