CSSの色を何度も書かない｜カスタムプロパティでデザイン変更を楽にする

Webサイトを制作していると、メインカラー、文字色、背景色、余白など、同じ値を何度もCSSへ書くことがあります。

制作中は問題なくても、クライアントから「青をもう少し暗くしたい」「ボタンの色をすべて変更したい」と依頼されると、複数のファイルや指定を探して修正しなければなりません。

一部を見落とせば、ページによって微妙に色が違う状態になります。

このような問題を減らすために利用できるのが、CSSのカスタムプロパティです。CSS変数と呼ばれることもあります。

今回は、カスタムプロパティの役割やメリット、実務で管理しやすくするための考え方を初心者向けに解説します。

カスタムプロパティとは

カスタムプロパティは、CSSで使用する値へ名前を付けて管理する仕組みです。

たとえば、サイトのメインカラーに「メインカラー」という名前を付け、ボタン、見出し、リンクなどから共通して参照できます。

色を変更したい場合は、基準となる値を一か所修正することで、その値を使用している部分へまとめて反映できます。

色だけでなく、次のような値も管理できます。

文字色

背景色

枠線の色

フォント

文字サイズ

行間

余白

角丸

影

要素の最大幅

アニメーションの時間

同じ役割の値を何度も直接記述するのではなく、名前を通して再利用するための仕組みです。

同じ色を直接書き続ける問題

小規模なサイトでは、同じカラーコードを複数箇所へ直接書いても、大きな問題に感じないかもしれません。

しかし、ページや部品が増えると、同じように見える色が少しずつ増えていきます。

たとえば、青色を調整するたびに別の数値を使うと、次のような状態になりがちです。

ヘッダーとボタンの青が少し違う

パソコンとスマートフォンで色が違う

通常時とマウスを重ねた状態の関係が不自然

過去に作ったページだけ古い色が残る

どの色が正式なメインカラーか分からない

デザイン上、意図的に色を使い分けることはあります。

問題になるのは、同じ役割の色が管理されないまま増えることです。

カスタムプロパティを使えば、サイト内で使用する色の基準を明確にできます。

値ではなく役割に名前を付ける

カスタムプロパティの名前を決めるときは、現在の見た目だけではなく、役割を表すことが重要です。

たとえば、「青色」「濃い青色」という名前は、色そのものを表しています。

分かりやすく見えますが、サイトのメインカラーを緑へ変更した場合、「青色」という名前なのに実際の値は緑という不自然な状態になります。

一方、次のような役割で名前を付ければ、デザイン変更後も使い続けやすくなります。

メインカラー

アクセントカラー

本文の文字色

見出しの文字色

薄い背景色

枠線の色

エラー表示の色

成功メッセージの色

「何色か」ではなく、「何のために使う値か」を名前にすると、別の担当者が見ても意図を理解しやすくなります。

色の数を増やしすぎない

カスタムプロパティを使っていても、似た色を大量に登録すると管理が複雑になります。

制作中に見た目だけで調整を続けると、薄いグレーや青色が何種類も作られることがあります。

それぞれに名前を付けても、使い分けの理由がなければ整理された状態とはいえません。

最初に、サイトで必要な色の役割を考えます。

一般的には、次のように分類できます。

ブランドを表すメインカラー

注目させるアクセントカラー

本文に使う基本の文字色

補足情報に使う薄い文字色

ページ全体の背景色

カードなどに使う背景色

区切りに使う枠線の色

エラーや注意を表す色

同じ役割で複数の色が必要になった場合は、本当に違いが必要なのかを確認します。

余白も共通化できる

カスタムプロパティは色だけに使うものではありません。

セクション間の余白、カード内の余白、要素同士の間隔なども共通化できます。

見た目だけで個別に調整すると、似た数値が増えやすくなります。

たとえば、ある場所では20、別の場所では22、その下では24というように、明確な理由のない差が生まれます。

あらかじめ次のような段階を用意すると、統一しやすくなります。

とても小さい余白

小さい余白

標準の余白

大きい余白

セクション用の余白

数値ではなく役割として選べるため、新しい部品を作るときも判断しやすくなります。

サイト全体の間隔を広げたい場合も、基準値を変更することで調整できます。

角丸や影もルール化する

カード、ボタン、フォームなどへ、それぞれ異なる角丸や影を設定すると、サイト全体の統一感が失われます。

デザインカンプを見ながら個別に数値を入力していると、わずかな違いが増えることがあります。

角丸であれば、小・中・大などの基準を作れます。

影についても、通常のカード、浮き上がっている部品、モーダルなど、用途ごとに共通の値を管理できます。

デザインの見た目は、色だけで決まるものではありません。

余白、角丸、影、文字サイズなどを含めて共通のルールを作ることで、ページを追加しても雰囲気を保ちやすくなります。

サイト全体で使う値と部品内だけで使う値を分ける

カスタムプロパティには、サイト全体で使用するものと、特定の部品だけで使用するものがあります。

メインカラーや本文色などは、多くのページから利用する共通の値です。

一方、特定のカード内だけで使う背景色や、そのボタン固有の高さなどは、サイト全体へ公開する必要がない場合があります。

すべての値を一か所へ集めると、一覧が長くなり、どこで使われているのか分かりにくくなります。

次のように分けて考えると整理しやすくなります。

サイト全体で使う基本値

レイアウトで使う値

文字に関する値

フォームで使う値

特定の部品内だけで使う値

使用範囲に合わせて定義することで、同じ名前が関係のない場所へ影響することも防ぎやすくなります。

ページごとにデザインを切り替えられる

同じ部品でも、ページやサイトによって色を変えたい場合があります。

たとえば、同じボタンの形を使いながら、通常ページでは青、採用ページでは緑、キャンペーンページではオレンジにするといったケースです。

カスタムプロパティを利用すると、ボタン自体のCSSを作り直さず、基準となる色だけを範囲ごとに変更できます。

同じ構造や動作を保ちながら、見た目だけを切り替えやすくなります。

複数ブランドのサイトや、関連会社ごとに色を変更するLPでも活用できます。

ただし、ページごとの上書きを増やしすぎると、どこで色が変わっているのか分かりにくくなります。

共通部分と変更部分を明確に分けることが大切です。

ダークモードにも活用できる

カスタムプロパティは、ダークモードのように複数の配色を切り替える場合にも役立ちます。

通常表示とダークモードで、各要素のCSSをすべて書き直す必要はありません。

背景色、文字色、枠線などの基準値を切り替えることで、それらを利用している部品の見た目も変更できます。

ただし、単純に白と黒を反転させればよいわけではありません。

画像、影、薄い文字、リンク、ボタンなどは、背景が変わっても十分に見えるか確認が必要です。

カスタムプロパティは切り替えを実装しやすくする仕組みであり、読みやすい配色を自動的に作るものではありません。

JavaScriptから変更することもできる

カスタムプロパティは、JavaScriptから値を変更することもできます。

そのため、利用者の操作に合わせてテーマカラーを変えたり、選択した設定を画面へ反映したりできます。

たとえば、次のような機能に利用できます。

テーマカラーの切り替え

文字サイズの変更

進捗に応じた表示

スライダーの位置に連動する装飾

利用者が選んだ色のプレビュー

管理画面の設定を反映したデザイン

JavaScriptで一つひとつの要素へ直接スタイルを設定するより、共通の値を変更する方が管理しやすい場合があります。

ただし、利用者の操作がなくても表示できる基本デザインはCSS側に用意し、JavaScriptが動かない場合にも読める状態を保つことが大切です。

WordPressの管理画面設定とも相性がよい

WordPressでは、管理画面からサイトカラーやデザイン設定を変更できるテーマがあります。

管理画面で選んだ色をカスタムプロパティへ反映すれば、複数の部品へ同じ設定を適用できます。

たとえば、クライアントが管理画面からメインカラーを変更すると、次のような部分へまとめて反映できます。

ボタン

リンク

見出しの装飾

アイコン

フォームの枠線

背景のアクセント

マウスを重ねたときの表示

ただし、自由に色を選べるようにすると、文字が読みにくい組み合わせになる可能性があります。

変更できる範囲を限定したり、事前に用意した配色から選べるようにしたりする方法も検討します。

Figmaのデザインルールと合わせる

制作前にFigmaで色や文字、余白のスタイルを整理している場合は、CSSのカスタムプロパティと対応させると管理しやすくなります。

デザイン上のメインカラーと、実装上のメインカラーが同じ名前と役割を持っていれば、修正内容を共有しやすくなります。

たとえば、デザイナーから「主要なボタンの色を変更する」と指示されたときも、どの値を変更すればよいか判断しやすくなります。

反対に、FigmaとCSSで名称や分類が異なると、同じ色を指しているのか確認が必要になります。

デザインデータのルールをそのまま機械的に移す必要はありませんが、役割の対応をそろえておくことが重要です。

名前を細かくしすぎると使いにくくなる

カスタムプロパティは便利ですが、すべての数値へ名前を付ければよいわけではありません。

一度しか使わない小さな調整まで登録すると、定義が大量に増えます。

名前を見ても用途が分からず、結局使用場所を検索しなければならない状態になります。

共通化するか迷った場合は、次の点を確認します。

複数箇所で使用するか

サイト全体で統一したい値か

将来まとめて変更する可能性があるか

デザイン上の明確な役割があるか

名前を見て用途を理解できるか

再利用や一括変更のメリットがある値を中心に登録すると、管理しやすくなります。

値を変更したときの影響範囲を確認する

一か所の変更を複数の部品へ反映できることは、カスタムプロパティの大きなメリットです。

しかし、同じ値を多くの場所で共有しているほど、変更の影響も広くなります。

ボタンの色だけを変えるつもりでメインカラーを変更した結果、見出し、リンク、アイコン、フォームまで変わる可能性があります。

変更前には、その値がどこで使用されているかを検索します。

変更後は、トップページだけでなく、次のような場所も確認します。

下層ページ

投稿ページ

お問い合わせフォーム

マウスを重ねた状態

エラーメッセージ

スマートフォン表示

WordPressの一覧ページ

404ページ

外部プラグインの部品

まとめて変更できるからこそ、影響範囲を把握する必要があります。

カスタムプロパティを導入するときの流れ

既存サイトへカスタムプロパティを導入する場合は、すべてを一度に置き換える必要はありません。

次の順番で進めると整理しやすくなります。

現在使用している色や余白を調べる

同じ役割の値をまとめる

メインカラーや文字色など重要な値から名前を付ける

共通部品から置き換える

ページ固有の値と共通値を分ける

不要になった重複指定を削除する

パソコンとスマートフォンで確認する

命名ルールを簡単に記録する

最初から完璧な設計を目指すより、変更頻度が高い部分から整理する方が実務へ取り入れやすくなります。

まとめ

CSSのカスタムプロパティは、色、余白、文字サイズ、角丸などの値へ名前を付け、複数の場所から再利用するための仕組みです。

同じ値を何度も直接記述する状態を減らせるため、デザインの統一や修正作業がしやすくなります。

名前を付けるときは、現在の色や数値ではなく、メインカラー、本文色、標準余白などの役割を表すことが重要です。

ただし、すべての値を登録したり、似た値を大量に作ったりすると、かえって管理が複雑になります。

よく使う値、まとめて変更したい値、サイト全体で統一したい値から整理する。

この考え方を取り入れることで、クライアントからの色変更やページ追加にも対応しやすく、長く保守できるCSSを作れるようになります。