破綻しないデザインシステムを支えるトークン設計

デザインが崩れるのは、たいてい才能の問題ではありません。色や余白や書体の「決め」が、あちこちにバラバラに散らばっているからです。デザイントークンは、その決めを一箇所に集め、名前を与えて共有する仕組みです。うまく設計すれば、規模が大きくなっても破綻しません。

トークンは三層で考える

いきなり全部を変数にすると、かえって管理できなくなります。役割ごとに層を分けるのが定石です。

1. プリミティブ — 生の値。blue-600 のような色そのもの。
2. セマンティック — 意味づけ。color-action のように用途で呼ぶ。
3. コンポーネント — 部品専用。ボタンやカードが参照する値。

UI 側はセマンティックだけを参照させ、生の値を直接触らせない。これがスケールの肝です。

名前が設計を決める

トークンの価値の大半は、命名で決まります。gray-3 ではなく color-border-subtle のように、用途がわかる名前をつける。名前が意味を語れば、迷わず正しいトークンを選べます。

良いトークンは、正しい選択を一番簡単な選択にする。

一箇所を変えれば、全体が変わる

トークンが行き渡っていれば、ブランドカラーの微調整も、ダークテーマの追加も、値を一箇所変えるだけで全画面に伝わります。個別の修正を追いかける必要はありません。

運用まで含めて設計する

トークンは作って終わりではなく、使われ続けてはじめて意味を持ちます。定義をデザインツールとコードで同期し、部品側での参照を徹底する。この先の運用はコンポーネントライブラリの運用で具体的に扱います。生成メディアのトーン管理とも地続きです（AI生成メディア）。