デザイントークンとは

読み：でざいんとーくん英語：Design tokens

更新日：2026年10月31日

ひとことで

デザイントークンとは、色や文字の大きさ、余白などのデザインの決めごとに名前をつけ、デザインツールやコードの間で共有できる形にしたもののことです。

ひとに説明するなら

「デザイントークンは、デザインの決めごとの一覧表。『メインの色はこれ』『見出しの大きさはこれ』を名前つきでまとめておくと、デザイナーもエンジニアも、同じ名前で同じ値を使える」

デザインの決めごとに、名前をつける

Web サイトやアプリには、たくさんの「決めごと」があります。メインの色、文字の色、見出しの大きさ、角の丸み、余白の幅……。デザイントークンは、それぞれに名前をつけて、ひとつの場所にまとめたものです。

よく JSON などのファイルにまとめられ、そこから CSS や、アプリ用のコードを自動でつくることもできます。

{
  "color-journey": {
    "sample-palette": {
      "1": { "$type": "color", "$value": "#2A2925" },
      "6": { "$type": "color", "$value": "#F6F4EF" },
      "roles": {
        "bg":     { "$type": "color", "$value": "#F6F4EF" },
        "text":   { "$type": "color", "$value": "#2A2925" },
        "accent": { "$type": "color", "$value": "#A6542F" }
      }
    }
  }
}
図1　色のデザイントークンの例（一部を省略）。$type が種類、$value が値です。COLOR JOURNEY のトークン JSON も、この形で書き出しています。

CSS 変数との違い

CSS 変数は、CSS の中だけで使う仕組みです。デザイントークンは、CSS に限らず、デザインツール、iPhone や Android のアプリなど、どこでも同じ値を使えるようにするための考え方です。

トークンを元にして CSS 変数をつくる、という関係になっていることがよくあります。

階層で考える

トークンは、階層に分けて考えると整理しやすくなります。まず「茶色の500」のような色そのものの一覧をつくり、次に「強調の色＝茶色の500」のように役割を割り当てます。

役割の段を一枚かませておくと、ブランドの色が変わったときも、割り当てを変えるだけで全体を差し替えられます。トークンの書き方を共通にする取り組みも、W3C のコミュニティグループで進められています。

よくある勘違い

勘違いデザイントークンは、大きな会社だけのもの

ほんとうは小さなサイトでも、色や余白の決めごとを一か所にまとめておくと、あとの修正がとても楽になります。

勘違いデザイントークンは、CSS 変数と同じ

ほんとうはCSS 変数は CSS の中の仕組み、トークンはツールやコードをまたいで値を共有するための考え方です。

COLOR JOURNEY で使うには

COLOR JOURNEY のパレットは、トークン JSON としてもダウンロードできます。6色が1〜6の番号のトークンとして入っていて、背景（bg）、文字（text）、アクセント（accent）、面（surface）の役割のトークンもついています。図1の書き方がそのまま使われています。

取り込めば、デザインツールとコードで、同じ色を同じ名前で共有できます。

参考になるパレット

Horizon Code

Algorithm Garden

Midnight Server

Silicon Sunset

クイズ

  1. デザイントークンで、名前をつけてまとめるものは？

    色や余白などのデザインの決めごと

    正解です。答えは「色や余白などのデザインの決めごと」。色、文字の大きさ、余白などの決めごとに名前をつけます。

    画像ファイル

    ちがいます。答えは「色や余白などのデザインの決めごと」。色、文字の大きさ、余白などの決めごとに名前をつけます。

    ユーザーの個人情報

    ちがいます。答えは「色や余白などのデザインの決めごと」。色、文字の大きさ、余白などの決めごとに名前をつけます。

  2. トークンを「役割」で割り当てておくと便利なのは？

    ブランドの色が変わったとき

    正解です。答えは「ブランドの色が変わったとき」。割り当てを変えるだけで、全体の色を差し替えられます。

    画像を圧縮したいとき

    ちがいます。答えは「ブランドの色が変わったとき」。割り当てを変えるだけで、全体の色を差し替えられます。

    文字数を数えたいとき

    ちがいます。答えは「ブランドの色が変わったとき」。割り当てを変えるだけで、全体の色を差し替えられます。

よくある質問

デザイントークンとは何ですか？

色や文字の大きさ、余白などのデザインの決めごとに名前をつけ、ツールやコードの間で共有できる形にしたものです。

デザイントークンと CSS 変数の違いは？

CSS 変数は CSS の中だけの仕組み、デザイントークンはツールやコードをまたいで値を共有する考え方です。

デザイントークンはどんな形式で書きますか？

JSON などのファイルにまとめることが多く、共通の書き方づくりも進められています。

関連する言葉