デザイントークンとは — CSS変数・Tailwind・SCSSでカラーシステムを設計する
デザイントークンは色・フォント・スペーシングなどのデザイン上の決定事項を名前付きの変数として管理する概念です。トークンを一元管理することでデザインシステムの一貫性を保ち、テーマの変更やダークモード対応が容易になります。
デザイントークンとハードコードの違い
ボタンの背景色を#3B82F6と直接書くのがハードコードで、--color-primary: #3B82F6 として変数に抽象化するのがトークン化です。ハードコードでは色を変える際に全ファイルを検索・置換する必要があります。トークンなら変数の値を一箇所変えるだけで全体に反映されます。
CSS変数でのカラートークン
:root { --color-primary: #3B82F6; --color-primary-hover: #2563EB; } のようにrootに定義し、color: var(--color-primary) で参照します。ダークモードは@media (prefers-color-scheme: dark) { :root { --color-primary: #60A5FA; } } で上書きできます。全コンポーネントが変数を参照するだけでテーマ切り替えが完成します。
Tailwindカスタムカラーへの転用
Color Token GeneratorはTailwind CSS形式での出力に対応しています。生成したパレットをtailwind.config.jsのtheme.extend.colorsにコピーするだけでprimary-500・primary-600などのカスタムクラスが使えるようになります。
JSON・SCSSトークンの活用
Color Token GeneratorはCSS変数・Tailwind設定・SCSS変数・JSONの4形式で出力できます。Style Dictionary・theo・token-transformerなどのデザイントークン変換ツールではJSONが入力として使えます。デザインツール（Figma）とコードの間でトークンを共有するワークフローに活用できます。