カスタムプロパティをマスターして、デザイン変更を効率化する｜現場で使える実践テクニック

#CSS #カスタムプロパティ #デザインシステム #メンテナンス性 #変数
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「カスタムプロパティ（CSS変数）をマスターして、デザイン変更を効率化する方法」について解説します。

カスタムプロパティとは何か、そして現場での悩み

カスタムプロパティ（CSS変数）をご存知ですか？
実は、僕も最初はこれの強力さに気づきませんでした。
昔は色やサイズを何度も同じ値で書いていて、デザイン変更があると大変やったんですよ。

例えば、プロジェクト全体で青色を使っているとします。
その青色が変わることになったら…カラーコード検索して、全ファイルで置換して…めっちゃ手間やん。
それに、置換ミスのリスクもありますしね。

ここで出番になるのが--で定義するカスタムプロパティです。
一度だけ定義して、後は参照するだけ。
変更も一箇所で済みます。

基本的な書き方はこんな感じです：

:root {
  --primary-color: #3b79b7;
  --spacing-base: 16px;
  --border-radius: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-base);
  border-radius: var(--border-radius);
}

ほんま簡単でしょ？
:rootに定義すればグローバルで使えます。

スコープを活用した実践的な使い分け

ただ、グローバルに全部定義するだけやったら、カスタムプロパティの良さを半分しか活かせていないんです。
スコープをうまく活用することで、もっと現場的で柔軟な設計ができるんですよ。

例えば、カードコンポーネントが複数あるとします。
各カードで色や余白が微妙に違うケースってありますよね。
そんな時は、コンポーネントごとにスコープを分けるといいですよ。

:root {
  --primary-color: #3b79b7;
  --spacing-base: 16px;
}

/* 通常のカード */
.card {
  --card-bg: #ffffff;
  --card-padding: var(--spacing-base);
  --card-border-color: #e0e0e0;
  
  background: var(--card-bg);
  padding: var(--card-padding);
  border: 1px solid var(--card-border-color);
}

/* 強調カード */
.card.featured {
  --card-bg: #f5f5f5;
  --card-padding: calc(var(--spacing-base) * 1.5);
  --card-border-color: var(--primary-color);
}

/* ダークモード時 */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #7db8e0;
  }
  
  .card {
    --card-bg: #1a1a1a;
    --card-border-color: #444;
  }
}

見てください、このアプローチでは何が起きているか。
基本色はグローバルで定義して、コンポーネントレベルではコンポーネント固有の値を上書きしています。
そうすることで、メンテナンス性も柔軟性も両立できるんです。

僕の現場でよく見るのは、こうしたスコープを無視してグローバルに何十個も定義してしまうケースです。
そうすると後で混乱するんですよ、どれがどこで使われているか。
適切なスコープ分けが大事なんですよ。

デザイントークンの一元管理で変更を楽にする

さらに進んだテクニックとして、デザイントークンの考え方を取り入れるといいですよ。
これは「色、サイズ、フォント、アニメーション…などの設計値を一箇所に集約する」という方法です。

大きなプロジェクトになると、色だけで20種類、サイズだけで10種類…みたいなことになります。
そういう時は、専用のファイルで管理するといいですよ。

/* tokens.css */
:root {
  /* Colors */
  --color-primary: #3b79b7;
  --color-primary-light: #5a9fd4;
  --color-primary-dark: #2a5a8a;
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  --font-size-sm: 12px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
}

こんな感じで一箇所に集約すると、デザイナーさんと「この青色を変えようか」という時に、めっちゃ対応が早くなります。
--color-primaryを変更するだけで、全ページに反映されるわけです。
これ、ほんまに時間短縮になりますよ。

JavaScriptとの連携で動的な変更を実現

カスタムプロパティの真骨頂は、JavaScriptと連携できるってことなんです。
これを知ると、できることの幅がぐっと広がりますよ。

例えば、ユーザーがボタンで「テーマを切り替える」みたいな機能。
昔は複雑なJavaScriptが必要でしたが、カスタムプロパティなら一行で済みます。

// HTMLの方

<button id="theme-toggle">テーマ切り替え</button>


// JavaScriptの方

const toggleButton = document.getElementById('theme-toggle');

let isDark = false;


toggleButton.addEventListener('click', () => {

  isDark = !isDark;


  if (isDark) {

    document.documentElement.style.setProperty('--primary-color', '#7db8e0');

    document.documentElement.style.setProperty('--bg-