CSS トークンの収集：ばらついたスタイルを整理する

CSS トークンの収集は、デザイン主導の気まぐれや、美しさのための美学ではありません。これは、視覚的な意思決定を正規化し、フロントエンドの運用コストを削減することを目的としたエンジニアリング手法です。

この記事では次の内容について説明します。

• CSS トークンと値の収集の違い
• 実際のプロジェクトに現れる値の例
• 集計から見つけられる問題
• 監査で収集を自動化する理由

CSS トークンが実際に何を意味するか

デザイントークンは、色や余白などの設計上の判断に名前を付けたものです。繰り返し現れる CSS の値を集めると候補を見つけられますが、反復しているだけでトークンになるわけではありません。収集する値の例は次のとおりです。

• 色 (#0d6efd、 rgb(13,110,253))
• フォントサイズ (14px、 1rem)
• 行の高さ
• 間隔 (8px、 16px、 24px)
• 角丸の半径
• シャドウ、Z インデックス値など

EC サイトを想定した説明用の例です。

.button-primary {
	background: #005bff;
	border-radius: 6px;
}

.checkout-button {
	background-color: #005bff;
	border-radius: 8px;
}

背景色は同じですが、角丸の半径は異なります。値を共通化する前に、この違いが意図したデザインかを確認してください。

トークン収集によって明らかになった典型的な問題

1. 偽りの多様性

SaaS の監査を想定した説明用の例として、次の値が見つかったとします。

• 27 のユニークなブルーの色合い
• そのうち 19 個は 1 ～ 3 RGB 単位で異なります

これは次のような典型的な症状です。

• Figma からの手作業によるコピー
• チーム間で共有されていないデザインルール
• 蓄積した技術的負債

2. 統一されていない余白

管理インターフェイスの例:

margin-bottom: 12px;
margin-bottom: 14px;
margin-bottom: 16px;
margin-bottom: 18px;

問題は「どの間隔が正しいか」ではありません。 本当の質問は なぜ全部で4つもあるのか。

トークンを収集すると、次のことが可能になります。

• 値の分布を可視化する
• 似た値のグループを見つける
• 4 ポイントや 8 ポイントなど、適したスケールを選ぶ

3. タイポグラフィーの漂流

別の説明用の例として、企業ポータルに次の値があるとします。

• 11種類のフォントサイズ
• 7 つの行の高さの値
• 本文の 5 つのフォントの太さ

用途で整理すると、三つの文字スタイルの役割にまとめられるかもしれません。ほかの値を統合する前に、実際の使われ方を確認します。

CSS トークン収集の技術的な仕組み

機械的なレベルでは、プロセスは簡単です。

1. ページをロードします。
2. すべての CSS (インラインおよび外部) を収集します。
3. 宣言を解析します。
4. カテゴリごとに値を集計します。

• 色
• フォントサイズ
• 間隔
• 角丸の半径

5. 出現頻度を計算します。

JSON 出力の例:

{
	"colors": {
		"#005bff": 143,
		"#ffffff": 98,
		"#f5f7fa": 34
	},
	"spacing": {
		"8px": 76,
		"16px": 112,
		"24px": 41
	}
}

この集計は調査の根拠になります。ただし、出現頻度だけで値の意味や変更の優先度は決まりません。

手動アプローチが拡張できない理由

初期段階では、ルールを口頭で共有できるかもしれません。しかし、次のような状況では、

• 5 人以上の開発者。
• 並列機能ブランチ。
• 複数のデザインソース。

口頭の合意だけを維持するのが難しくなります。

自動トークン収集を使用しないと、次のことが起こります。

• 信頼できる現実のスナップショットが欠けている。
• リファクタリングの影響を測定できない。
• 回帰を制御できなくなります。

説明用のシナリオ：開発を止めずにデザインを整理する

約 120 ページのマーケティングサイトを想定します。以下の数値は移行の進め方を示す例であり、確認済みの顧客成果や予測ではありません。

前:

• 4,000 以上の CSS ルール
• 32色
• 19種類のフォントサイズ

実行された手順:

1. 主要ページの値を収集する。
2. 出現頻度で並べる。
3. 基本となるトークンを定義する。
4. 全面改修せず、段階的に移行する。

移行後の例：

• 基本色は 9 色
• 文字スタイルのトークンは 6 個
• CSS のサイズは 18% 減少
• A/B テスト中の見た目の不具合が減少

パフォーマンスが向上する場所

CSS トークンはデザインだけを意味するものではありません。

• 重複した宣言をまとめると CSS を小さくできる場合がある
• 値の共有で保守しやすくなる
• ルールの整理でカスケードの競合を減らせる場合がある
• gzip/Brotli、カバレッジ、クリティカル CSS への効果は測定が必要

トークンの収集だけでページが速くなるわけではありません。実際にコードを変更した後で、転送量と読み込み時間を比較してください。

これを監査の問題として扱う理由

milten.io での CSS トークンの収集は次のとおりです。

• 現状を把握するための診断
• 見えにくいスタイルの構造を明らかにする手段
• 標準化やデザインシステム、フロントエンドの保守性改善に向けた出発点

候補をトークンとして整理しにくい場合は、デザインルールと例外を調べましょう。それだけでデザインシステムが存在しないとは判断できません。

概要

管理ロジックに還元すると次のようになります。

• CSS の値を収集する＝現状の棚卸し
• 出現頻度を調べる＝調査対象を選ぶ材料
• 自動化する＝継続して比較しやすくする

これは無視して構いません。ただし、すべての再設計は次のことから始まります。 「スタイルを慎重に微調整しましょう」 — そして、さらなる混乱の層で終わります。

プロジェクトで実際に使われている値を集め、根拠のある変更を選び、その効果を測定しましょう。