デザイントークン入門

ブランドカラーを変更した際、スタイルシート全体に散らばったハードコードされた #3B82F6 を一つひとつ探し回り、1時間を費やした経験があるなら、デザイントークンが解決しようとしている問題をすでに理解していることでしょう。本記事では、デザイントークンとは何か、単なるCSS変数とどう違うのか、そしてフロントエンドのスタイリングワークフローでどのように使い始めればよいのかを解説します。

デザイントークンとは何か

デザイントークンとは、カラー、スペーシング、タイポグラフィ、ボーダー半径、シャドウといった、デザイン上の意思決定を表す、名前付きで再利用可能な値です。コンポーネントに直接 padding: 16px と書く代わりに、その値を保持する space-4 のようなトークンを参照します。

その本質において、デザイントークンは名前と値の組み合わせにすぎません。しかし方法論としては、それ以上の意味を持ちます。W3Cコミュニティグループとして共通仕様の策定を進めている Design Tokens Community Group (DTCG) では、デザイン上の意思決定を、異なる分野・ツール・技術間で共有できるよう、プラットフォームに依存しない形式で表現する方法だと説明しています。

このプラットフォーム非依存という点が重要です。同じトークン定義を、Web向けのCSSカスタムプロパティ、iOS向けのSwift定数、Android向けのXML値といった形に変換でき、すべてが単一の信頼できる情報源から生成されます。

一般的なデザイントークンのカテゴリ

ほとんどのデザインシステムでは、トークンを以下のカテゴリに分類しています。

• カラー — ブランドパレット、テキストカラー、背景色、ボーダー色
• スペーシング — パディング、マージン、ギャップの値
• タイポグラフィ — フォントファミリー、サイズ、ウェイト、行の高さ
• ボーダー半径 — コンポーネントの角丸
• シャドウ — エレベーションや奥行きの効果

プリミティブトークン vs. セマンティックトークン

この区別は、デザインシステムのトークンを扱う上で最も有用な概念のひとつです。

プリミティブトークン(ベーストークンまたはグローバルトークンとも呼ばれます)は、用途を含意しない生の値です。

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

セマンティックトークンはプリミティブを参照し、そこに意図を付加します。値そのものではなく、その値をどこで使うべきかを示します。

{
  "color-action-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "spacing-component-padding": { "$value": "{space-4}", "$type": "dimension" }
}

color-blue-500 を変更すれば、それを参照するすべてのセマンティックトークンが自動的に更新されます。これこそがこのシステムの真の強みです。

デザイントークン vs. CSS変数

CSS変数とデザイントークンは関連していますが、同じものではありません。

デザイントークンはソースです。CSS変数はしばしばその出力にあたります。Style Dictionary のようなツールは、トークン定義を受け取り、各プラットフォームが必要とする形式に変換してくれます。

シンプルな実例

DTCG形式のシンタックスで定義した小さなトークンセットを示します。

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "color-text-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

これらをStyle Dictionaryで処理すると、CSS出力は次のようになります。

:root {
  --color-blue-500: #3B82F6;
  --color-text-primary: var(--color-blue-500);
  --space-4: 16px;
}

これでコンポーネントは、ハードコードされた16進数値の代わりに var(--color-text-primary) を使うようになります。トークンを一度変更すれば、あらゆる場所が更新されます。

デザイン側では、Figmaの変数も同じプリミティブ→セマンティックのパターンに従っており、デザインとコードの整合性を保ちやすくしてくれます。

小さく始めて、意図的にスケールさせる

初日から完璧なトークンシステムを揃える必要はありません。まずはカラーとスペーシングのプリミティブから始め、パターンが見えてきたらセマンティック層を追加し、手作業がボトルネックになり始めた時点でツールを導入しましょう。

まとめ

デザイントークンは単にCSSを整理する手段ではなく、デザイナーと開発者の間の共通言語です。その言語がいったん整えば、プロダクト全体の一貫性は手作業で強制するものではなく、システムが自然に担保してくれるものへと変わります。

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..