意味解説
専門家向け解説
デザインシステムの構成要素の一つ。`#333333` のような色の実値に直接アクセスする代わりに、`brand`・`text-muted`・`border-focus` のような「用途を示す名前」を付けて管理する設計手法。色の実値が変わっても、トークン名を参照しているすべての箇所に変更が反映されるため、大規模なカラースキームの変更やダークモード対応が効率的になる。また、色そのものを定義する「グローバルトークン（blue-500等）」と、その用途を定義する「エイリアストークン（text-link等）」の2階層以上で設計する場合もある。要点は、色を「値」ではなく「意味」で扱うことで、デザインと実装の乖離を防げること。落とし穴は、実装時にグローバルトークンを直接コンポーネントに指定してしまい、意味ベースの管理ができなくなるケース（`text-link` や `brand` のように用途・役割を示す名前にすることが重要）。CSS変数（カスタムプロパティ）・Sass変数・デザインツールのスタイル機能などで実装される。 グローバルトークンはプリミティブトークン、ベーストークンとも言われ、エイリアストークンはセマンティックトークンなどの別名で呼ばれることもある。
クライアント向け説明
色に「名前」を付けて管理する仕組みです。たとえば「ブランドカラー」「エラーの色」といった名前で色を定義しておくと、「ブランドカラーを少し変えたい」という変更が生じた際に、サイト全体で使われているその色を一箇所の変更で統一的に更新できます。デザインと実装のルールを揃え、変更に強いサイトをつくるための、デザインシステムの基盤となる概念です。
監修
yoneco
Makoto Koizumi (Zoomin)
Rev.4