デザイントークン 01 基礎(なぜ・何・3層構造)
更新日:
デザイントークンとは
「デザインの最小単位」(色・余白・文字サイズなど)を、技術やプラットフォームに依存しない形で名前付きで保存したもの。
× コードに直書き: color: #FFC306; padding: 13px;
○ トークンで参照: color: var(--primary); padding: var(--space-4);なぜ必要か
| 問題(トークンなし) | 解決(トークンあり) |
|---|---|
| ブランドカラー変更で何百か所を修正 | 1か所変えれば全体に反映 |
似た色・中途半端な余白が増殖(#333 #343434 #2f2f2f…) | 決められた選択肢からしか選ばない → 一貫性 |
| デザイナーとエンジニアで言葉が違う | 「primary」「space-4」で会話できる |
| Web・iOS・Android で見た目がズレる | 1つの定義から各プラットフォーム用コードを生成 |
| ダークモード対応が大変 | 同じ名前で値だけ切り替え |
| AI が毎回違う色・余白を使う | 「トークンだけ使って」と指示できる |
3層構造(最重要)
| 層 | 例 | 意味 | 誰が使う |
|---|---|---|---|
| プリミティブ(基本値 / Option) | blue-500 = #2563EB、space-4 = 16px | 使える値のパレット。意味は持たない | トークンの定義者だけ |
| セマンティック(役割 / Decision) | primary = {blue-500}、text-muted = {gray-500} | 何に使うか。プリミティブを参照 | 画面・部品を作る人(普段はここ) |
| コンポーネント | button-bg = {primary}、card-padding = {space-4} | 特定部品専用 | 部品の実装者 |
blue-500(#2563EB) ← primary ← button-bg
プリミティブ セマンティック コンポーネント- ブランド変更:
primaryの参照先をgreen-600に変えるだけ - ダークモード:
primaryの値をモードごとに変えるだけ(部品は触らない) - 画面を作る時は「青」ではなく「主要アクション」と考える
- 小規模ならコンポーネント層は省略してよい(プリミティブ+セマンティックで十分)
トークンにするもの
| カテゴリ | 例 |
|---|---|
| 色 | 背景、文字、枠線、ブランド、状態(成功・警告・エラー・情報) |
| 余白(spacing) | 4, 8, 12, 16, 24, 32, 48, 64 ... |
| タイポグラフィ | フォント、サイズ、太さ、行間、字間 |
| 角丸(radius) | sm, md, lg, full |
| 影(elevation) | カード、モーダル、ドロップダウン |
| 動き(motion) | 時間(150ms/300ms)、イージング |
| 画面幅(breakpoints) | sm 640 / md 768 / lg 1024 |
| その他 | 重なり順(z-index)、不透明度、枠線の太さ、アイコンサイズ |
デザインシステムとの関係
- デザインシステム = 原則 + トークン + コンポーネント + ドキュメント
- トークンはその「土台」。部品はトークンを使って作られる → デザインシステム