カスタムプロパティで実現する動的なデザインシステム｜現場で使える実践テクニック

こんにちは！
今日は「カスタムプロパティを使ったデザインシステムの構築」について解説します。

これ、めっちゃ実務的やし、一度体験するとCSSへの向き合い方が変わる内容です。
ぜひ最後まで読んでいただきたいですね。

デザイナーと開発者の「色」のズレから始まった話

僕も経験があるんですけど、プロジェクト途中で「あ、この色、デザインと違う…」って気づくことありませんか？
ホームページのメインカラーが #2563eb だと思ってコーディングしてたら、実は #1e40af だったとか。
そういう場合、従来だとCSSファイル全体を検索して置換するしかない。

僕が以前関わったプロジェクトでは、色の指定が100箇所以上あったんですよ。
デザイン変更で全体を明るめに調整することになったときは、ほんまに大変でした。
「あ、ここ忘れてた」って後から見つかったり…。

でもカスタムプロパティを使えば、こういった問題は劇的に減ります。
変数のような使い方ができるので、色やサイズを一箇所に集約できるんです。

カスタムプロパティで一元管理するメリット

カスタムプロパティ（CSS変数とも呼ばれます）は、-- で始まるプロパティのことです。
まずは基本的な書き方を見てみましょう。

ルートレベルで定義する例：

:root {
  --primary-color: #2563eb;
  --text-color: #1f2937;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

そして使うときは var() 関数で参照します。

.button {
  background-color: var(--primary-color);
  color: white;
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
}

ほら、これだけでめっちゃ シンプルじゃないですか？
デザイン変更が必要になったら、:root の値をちょっと変えるだけ。
全体に反映されます。

カスタムプロパティの大きなメリット：

• 変更が一箇所で済む → ヒューマンエラーが減る
• デザイントークンを目視できる → チーム全体で統一感が出る
• JavaScriptからもアクセスできる → 動的な変更が可能
• スコープを指定できる → コンポーネント単位での上書きも簡単
• レスポンシブでも値を切り替えられる → メディアクエリとの相性が最高

実務的なカスタムプロパティの設計パターン

実際のプロジェクトで僕がよくやるのは、階層的に設計することです。
単に色や大きさを定義するだけじゃなく、その関係性を整理するんですね。

実務的な設計例：

:root {
  /* ブランドカラー（最上位） */
  --brand-primary: #2563eb;
  --brand-secondary: #64748b;
  --brand-danger: #dc2626;

  /* タイポグラフィ */
  --font-size-sm: 12px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;
}

こうすることで、複数のコンポーネントから同じ値を参照できます。
たとえば、ボタンと入力フィールド、カードコンポーネントなど、全部が統一された見た目になるんですよ。

コンポーネントレベルでの上書きも簡単：

.card--featured {
  --bg-primary: var(--brand-secondary);
  --text-primary: white;
}

この .card--featured の中だけ、色が変わります。
親のスタイルに影響しないし、めっちゃ管理しやすいんです。

ダークモード対応でさらに活躍する場面

ダークモード対応のとき、カスタムプロパティの真価が発揮されます。
僕が以前やってた方法は、ダークモードとライトモードで別々のCSSクラスを用意してたんですけど、めっちゃ冗長だったんですよ。

カスタムプロパティを使ったダークモード対応：

:root {
  --bg-primary: #ffffff;
  --text-primary: #1f2937;
  --border-color: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1f2937;
    --text-primary: #f3f4f6;
    --border-color: #374151;
  }
}

同じHTMLなのに、ユーザーの設定に合わせて自動で切り替わるんです。
めっちゃ優秀やん。

それに、ユーザーが手動で切り替えられるようにもできます。

// ボタンがクリックされたとき
document.documentElement.style.setProperty('--bg-primary', '#1f2937');
document.documentElement.style.setProperty('--text-primary', '#f3f4f6');

JavaScriptからカスタムプロパティを操作すれば、リアルタイムにスタイルが変わります。
これほんま便利です。

まとめ