デザイントークンとは？定義・階層構造・導入手順をコード付きで解説
色コードの直書き、フォントサイズのハードコーディング、余白の値がファイルごとにバラバラ ── UIの規模が大きくなるほど、こうしたスタイルの不整合は深刻な負債になります。デザイントークンは、この問題を「名前付きの値」で解決する仕組みです。 デザイントークンの定義 デザイントークンとは、色・フォント・余白・角丸・シャドウといったUI上の視覚的属性を、プラットフォームに依存しない形式で記述した「名前と値のペア」です。CSS変数やSassの変数と似ていますが、単なるコード上の定数ではなく、デザインツール・Web・iOS・Androidなど複数環境で共有できる点が異なります。 たとえば「ブランドカラーの青」を #0066CC というHEX値で覚えるのではなく、color.brand.primary という名前で管理します。値を変更する場合は1箇所を更新するだけで、全プラットフォームに反映されます。 変数との違い CSS変数（--color-primary: #0066CC;）やSass変数（$color-primary: #0066CC;）は特定の言語に紐づいています。デザイントークンはJSON形式で定義し、ビルドツールを通じてCSS・Swift・Kotlin・XMLなど任意の言語・フォーマットに変換できます。 { "color": { "brand": { "primary": { "$value": "#0066CC", "$type": "color", "$description": "ブランドのメインカラー" } } } } 上記はW3C Design Tokens Community Group（DTCG）が策定中のDesign Tokens Format Moduleに準拠した記法です。$valueで値を、$typeで型を、$descriptionで説明を記述します。 トークンの3階層構造 デザイントークンは通常、3つの抽象度に分けて管理します。用語は組織によって異なりますが、概念は共通しています。 第1層: グローバルトークン（プリミティブ） カラーパレットやフォントスケールなど、抽象度が最も低い「生の値」を格納する層です。コンテキストを持たず、値そのものを定義します。 { "color": { "blue": { "50": { "$value": "#E3F2FD", "$type": "color" }, "100": { "$value": "#BBDEFB", "$type": "color" }, "500": { "$value": "#2196F3", "$type": "color" }, "700": { "$value": "#1976D2", "$type": "color" }, "900": { "$value": "#0D47A1", "$type": "color" } }, "gray": { "100": { "$value": "#F5F5F5", "$type": "color" }, "300": { "$value": "#E0E0E0", "$type": "color" }, "700": { "$value": "#616161", "$type": "color" }, "900": { "$value": "#212121", "$type": "color" } } }, "font": { "size": { "xs": { "$value": "12px", "$type": "dimension" }, "sm": { "$value": "14px", "$type": "dimension" }, "md": { "$value": "16px", "$type": "dimension" }, "lg": { "$value": "20px", "$type": "dimension" }, "xl": { "$value": "24px", "$type": "dimension" }, "2xl": { "$value": "32px", "$type": "dimension" } } } } 第2層: セマンティックトークン（用途別） グローバルトークンを参照しながら、「何に使うか」という意味を付与する層です。エイリアス（別名参照）の仕組みで上の層とつなぎます。 { "color": { "text": { "default": { "$value": "{color.gray.900}", "$type": "color" }, "subtle": { "$value": "{color.gray.700}", "$type": "color" }, "inverse": { "$value": "#FFFFFF", "$type": "color" } }, "bg": { "surface": { "$value": "#FFFFFF", "$type": "color" }, "muted": { "$value": "{color.gray.100}", "$type": "color" }, "accent": { "$value": "{color.blue.500}", "$type": "color" } }, "border": { "default": { "$value": "{color.gray.300}", "$type": "color" }, "focus": { "$value": "{color.blue.700}", "$type": "color" } } }, "font": { "size": { "body": { "$value": "{font.size.md}", "$type": "dimension" }, "heading": { "$value": "{font.size.xl}", "$type": "dimension" }, "caption": { "$value": "{font.size.xs}", "$type": "dimension" } } } } {color.gray.900} のように波括弧で囲んだ表記がエイリアス参照です。DTCG仕様では、この参照構文によってトークン間の依存関係を宣言的に表現できます。 ...