【デザイントークン】
デザイントークン とは？
最終更新:
💡 色やサイズに名前を付けて、デザインと実装で共有する
色・文字サイズ・余白などのデザイン上の決定を、名前と値の組として表すもの。デザインと実装で共有し、対応するツールでCSSやアプリ向けの値へ変換できる。値を変えた結果を反映するには、参照・変換・配布の仕組みも必要。
📌 このページのポイント
ひよこ CSS変数とは違うの？
ペンギン先生 ひよこ 階層構造ってどういうこと？
ペンギン先生 たとえば色の値をblue-500、用途をcolor-primary、ボタン用をbutton-backgroundとして参照をつなぐ設計があるよ。原始値・意味・部品という分け方は設計例で、必ず3階層にするルールではないんだ。
ひよこ 色を1か所変えれば全部変わる？
ペンギン先生 その値を参照している箇所には反映できるよ。ただし、直接書いた色まで自動で変わるわけではない。トークンを各環境へ変換し、アプリへ配布・適用する仕組みも必要なんだ。
ひよこ ダークモードにも使える？
ペンギン先生 使えるよ。背景や文字などの用途ごとに、テーマに応じた値を用意する。参照先を切り替えて、画面がその値を使うようにするんだ。値の定義だけで切り替えの実装や見やすさの確認まで済むわけではないよ。
ひよこ 標準フォーマットはまだ策定中？
ペンギン先生 DTCGは2025.10版のFormat Moduleを公開しているよ。JSONでトークンを交換する仕様だけど、W3Cの標準や勧告ではないと明記されている。Style Dictionaryなどを使う際も、形式や型への対応を確認するんだ。
まとめ：ざっくりこれだけ覚えればOK！
「デザイントークン」って出てきたら「色やサイズの設定値に名前を付けて共有するもの」と思えばだいたいOK！
📖 おまけ：英語の意味
「Design Token」 ＝ デザインの名前付き設定値
💬 デザイン上の決定を、人が読める名前と値で表すものだよ。プログラミングの変数のように、同じ値をいろいろな場所から参照して使えるんだ。