Sassの変数を整理してテーマカラーを一元管理する方法

Webサイトの色を調整するとき、各コンポーネントにカラーコードを直接書いていると、修正箇所が増えて管理しにくくなります。ボタン、リンク、見出し、背景などで似た色を個別に指定すると、少しずつ色味がずれてしまうこともあります。

Sassの変数とカラーマップを使えば、テーマカラーを一か所に集約し、役割に応じた名前で呼び出せます。デザイン変更やダークモードへの対応もしやすくなるため、個人制作からチーム開発まで役立つ構成です。

直接指定を減らして役割で考える

まず整理したいのは、#3498dbのようなカラーコードを、スタイルシートのあちこちに直接書かないことです。色そのものではなく、「主要ボタン」「本文」「補助テキスト」「境界線」といった用途を基準に命名すると、コードを読んだときの意味が明確になります。

例えば、青色をブランドカラーとして使っていても、すべてを$blueと呼ぶ必要はありません。リンクには$color-link、ボタンには$color-actionのように役割名を付けると、後から配色を変更しても利用箇所を意識せずに済みます。デザインの意図をコードに残せる点も大きな利点です。

カラーマップでテーマの基礎を作る

色の定義は、abstracts/_colors.scssのような専用ファイルにまとめます。単純な変数だけでも使えますが、色数が増える場合はSassのマップにすると一覧性が高まります。

$palette: (
  brand: #2563eb,
  brand-dark: #1d4ed8,
  text: #1f2937,
  text-muted: #6b7280,
  surface: #ffffff,
  surface-subtle: #f3f4f6,
  border: #d1d5db,
  danger: #dc2626
);

@function color($name) {
  @return map-get($palette, $name);
}

各コンポーネントではcolor('text')やcolor('brand')のように呼び出せます。色を追加するときも定義ファイルだけを確認すればよく、ファイル全体からカラーコードを検索する手間を減らせます。

セマンティックカラーを分けて管理する

ブランドカラーと用途別カラーを同じ階層に置くと、規模が大きくなったときに意味が曖昧になります。原色に近い値をまとめる「パレット」と、実際の画面で使う「セマンティックカラー」を分けると、配色設計を保ちやすくなります。

たとえば$blue-600を直接ボタンに指定する代わりに、$color-actionへ割り当てます。ボタンの色を緑に変えることになっても、セマンティックカラーの定義だけを書き換えれば済みます。勉強会で実装方法を共有するときも、勉強会の記録のように設計意図を説明しやすくなります。

$base-colors: (
  blue-600: #2563eb,
  gray-900: #111827,
  gray-500: #6b7280
);

$theme-colors: (
  action: map-get($base-colors, blue-600),
  text: map-get($base-colors, gray-900),
  text-muted: map-get($base-colors, gray-500)
);

コンポーネントでは意味のある変数を使う

ボタンやカードのスタイルには、基礎パレットの値ではなく、用途を表す変数を使います。background-color: color('action')のように記述すれば、見た目を確認しなくても、その色が操作を促すためのものだと判断できます。

ホバー、フォーカス、無効状態などの派生色も、同じルールで管理しましょう。action-hoverやborder-focusのように状態を含めた名前にしておくと、アクセシビリティ対応やUI改善の際に調整箇所を見つけやすくなります。iPhoneアクセサリーの紹介ページなど、写真やレビューを中心にした画面でも、リンク色や背景色の一貫性を保てます。

複数テーマとCSS変数へ広げる

ライトテーマとダークテーマを切り替える場合は、Sassの値をCSSカスタムプロパティへ出力する方法が便利です。Sassはビルド時に値を決める仕組みですが、CSS変数ならブラウザ上でテーマを切り替えられます。

:root {
  --color-action: #{color('brand')};
  --color-text: #{color('text')};
  --color-surface: #{color('surface')};
}

[data-theme='dark'] {
  --color-action: #93c5fd;
  --color-text: #f9fafb;
  --color-surface: #111827;
}

Sassのマップは設計と生成に使い、実際のコンポーネントではvar(--color-action)を利用する形です。自分の制作環境を整える過程では、自分だけの開発環境のように、ビルド設定やファイル構成も含めて記録しておくと再利用しやすくなります。

色の定義を変更したら、通常状態だけでなくホバー、フォーカス、スマートフォン表示も確認します。コントラスト比が不足していないか、リンクと本文の区別がつくかをチェックし、必要なら色の明度を調整します。iPhone向けの画面を作る場合は、実機での見え方も確認すると安心です。ケース選びのような日常的なレビューを扱うページでも、iPhoneケースのレビューに合う読みやすい配色を意識できます。

テーマカラーを一元管理すると、変更に強いCSSと、意図が伝わるデザインシステムを作れます。まずは色定義を専用ファイルへ移し、役割名への置き換えから始めてみてください。使う色が増えたときも同じルールで追加し、快適に保守できるSass設計へ育てていきましょう。