デザイントークン入門：JSONからCSSへのライブ変換付き
ホーム デザイントークン入門
デザイントークンを例で解説（JSON、CSS、Tailwind）| We.Inc
デザイントークンとは何か、W3Cコミュニティグループ形式のJSONでの書き方、トークンJSONをCSS変数とTailwind v4の@themeブロックに変換するライブコンバーターを解説します。
デザイントークンとは、color.primaryやspace.mdのように名前を付けたデザイン上の決定事項を、データとして保存したものです。これにより、すべてのプラットフォームが同じ値を読み取れます。Design Tokens Community Groupの形式では、$valueと$typeを使ってJSONで記述し、波かっこで別のトークンを参照できます。その後、各種ツールがそのJSONをCSS変数、Tailwindのテーマ、アプリのコードに変換します。
多くのチームが使うトークンの階層
ベース（プリミティブ） 生の値：色、サイズ、フォント セマンティック（エイリアス） ベーストークンを参照する役割 コンポーネント 1つのコンポーネントに限定された役割 多くの解説は定義だけで終わります。下のエディターにコミュニティグループ形式のトークンJSONを貼り付けるか編集すると、生成されるCSSカスタムプロパティとTailwind v4のテーマを入力しながらその場で確認することができます。エイリアスはvar()参照に解決されます。
左側のJSONを編集します。グループでは、中のすべてのトークンに対して$typeを一度だけ指定できます。 別のトークンを参照するには、そのドット区切りのパスを波かっこで囲みます。例：{color.blue-500}。 CSSタブでは:rootの変数を、Tailwindタブでは@themeブロックを確認できます。 出力をスタイルシートにコピーします。エディターの下にエラーメッセージが表示された場合は、先に修正してください。 セマンティックトークンは見た目（赤、暗い）ではなく役割（テキスト、サーフェス、警告）で名前を付けましょう。そうすればリブランド時に変更するのはベース階層だけで済みます。 コンポーネントでベーストークンを直接使わないようにしましょう。コンポーネントがセマンティックな名前を読むことで、ダークモードやテーマが裏側で値を差し替えられます。 トークンはバージョン管理下の1つのファイルにまとめ、各プラットフォーム向けの出力はすべてそこから生成しましょう。 ツールがファイルを認識できるよう、推奨される.tokensまたは.tokens.jsonの拡張子を使いましょう。 よくある質問
デザイントークンとは何ですか？
デザイントークンは、名前とデザイン上の値を組み合わせたものです。たとえばcolor.textがほぼ黒の色を保持します。コードとデザインファイルは名前を使うため、1か所で値を変えるだけで、それを参照するすべてのボタン、ページ、アプリが更新されます。
デザイントークンに標準の形式はありますか？
あります。W3CのDesign Tokens Community Groupは、2025年10月28日にFormat Module 2025.10を最終的なコミュニティグループレポートとして公開し、安定版と位置付けています。これはコミュニティグループのレポートであり、W3C勧告ではありません。
デザイントークンとCSS変数の違いは何ですか？
トークンはプラットフォームに依存しない元データです。CSSカスタムプロパティはその出力の1つにすぎません。同じトークンファイルからSwift、Android、JavaScriptの定数も生成でき、これはCSS変数だけでは実現できません。
デザイントークンはTailwind CSSとどう連携しますか？
Tailwind v4では、--color-primaryのようなテーマ変数を@themeの中で宣言します。Tailwindはそこからbg-primaryのようなユーティリティを作成し、同時に:root上の通常のCSS変数としても出力するため、トークンとユーティリティが常に同期します。
トークン形式では色をどう書きますか？
2025.10形式では、色の値はsrgbなどのcolorSpaceと、0から1までの成分の配列を持つオブジェクトで、アルファ値は任意です。このコンバーターは古いトークンファイルも貼り付けられるよう、単純な文字列も受け付けます。
チームがトークンを導入する理由
トークンがないと、ブランドの青はCSS、モバイルアプリ、デザインファイルの何百もの場所に貼り付けられた16進コードとして存在します。変更するには検索と置換が必要で、必ずどこかで漏れが出ます。 トークンがあれば、その青には1つの名前と1つの置き場所があります。デザイナーと開発者はcolor.primaryについて話し、ビルド処理が各プラットフォーム独自の形式に値を書き出します。 JSON形式の読み方
$valueを持つオブジェクトはすべてトークンで、それ以外のオブジェクトはグループです。ドル記号で始まるプロパティは形式によって予約されています：$value、$type、$description、$deprecated、$extensionsです。 仕様では、color、dimension、fontFamily、fontWeight、duration、cubicBezier、numberといった単純な型に加え、shadow、border、transition、typography、strokeStyle、gradientといった複合型が定義されています。寸法と時間の値は、数値と単位を持つオブジェクトです。 トークンから実際に動くテーマへ
小規模なサイトなら、トークンをCSSカスタムプロパティとして直接CSSに書いても構いません。複数のプラットフォームに展開する場合や、トークンを書き出せるツールでデザインする場合は、唯一の情報源を保つためにJSONからCSSを生成しましょう。 ダークモードは、セマンティックな値をもう1セット用意するだけです。ベースの色はそのままで、セマンティック層がダーク配色のメディアクエリやデータ属性の中で、各役割が参照するベースを切り替えます。 ダークテーマ付きのセマンティックトークン
セマンティックな値を差し替え、ベースの値はそのまま
カードは--surfaceと--textだけを読みます。ダーク用のブロックがこの2つの名前を再割り当てし、カード自身のルールを一切変えずに追従します。
複合トークン
コミュニティグループ形式のシャドウトークン
複合トークンは複数の値をまとめます。ここでは色自体がエイリアスで、オフセットには寸法オブジェクトを使っています。
トークンが見つかりません。トークンとは$valueプロパティを持つオブジェクトです。
まだ有効なJSONではありません：{message}
トークンJSONからCSSへのコンバーター
トークンファイルを編集すると、入力に合わせてCSS変数とTailwindのテーマが更新されます。最初のファイルは次のように変換されます：
トークンJSON
出力形式
CSS変数
Tailwind v4
コピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る