Frontend Academy · レッスン

Style Dictionaryによるデザイントークン

色、余白、タイポグラフィのトークンをJSONで定義し、Style DictionaryでCSS変数、JS定数、iOS/Android形式に変換します。

レッスン 2/414 ステップ

「Style Dictionaryによるデザイントークン」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

デザイントークンとは

デザイントークンは、デザインシステムで使用する名前付きの基本的な値です。色、余白、フォントサイズ、角丸、影などが該当します。これらが唯一の信頼できる情報源となり、すべてのコンポーネントはトークンからスタイルを導出します。

トークンが重要な理由

トークンによって、デザイン上の判断と実装を分離できます。color.primaryを青から緑に一度変更すれば、それを使用するすべてのコンポーネントが更新されます。また、Web、iOS、Androidで同じデザインを提供できます。

トークンの保存

トークンはJSONまたはYAMLに保存します。どのプラットフォームのツールでも利用できる中立的な形式です。最も一般的なのはJSONです。

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary（Amazon）は、デザイントークン向けのデファクトスタンダードのビルドツールです。トークンを読み込み、CSS変数、SCSS、JS定数、iOS Swift、Android XMLなど、複数の出力形式に変換します。

npm install -D style-dictionary

設定

入力トークンと出力先のプラットフォームを記述したstyle-dictionary.config.jsを作成します。

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

ビルドを実行する

CLIを実行して、すべてのプラットフォーム向けのファイルを生成します。

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

生成されるCSS出力

一貫した命名規則（名前空間付きのケバブケース）で定義されたCSS変数です。

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

生成されるJS出力

JS/TSコードで使用するJSオブジェクトです（Tailwind設定やCSS-in-JSなどに使用します）。

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

トークンの命名規則

リテラル名（color.blue-500）よりもセマンティックな名前（color.primary）を使用します。セマンティックトークンなら、名前を変更せずに値を変更できます。2層構成では、リテラルパレット（blue-500）からセマンティックなエイリアス（primary）へ対応付けます。

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

トークンによるテーマ設定

異なる入力を使って複数のプラットフォーム向けにビルドし、テーマ（ライト／ダーク）に対応します。名前は同じまま、値だけを変えられます。

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

トークンのカテゴリ

一般的なカテゴリには、color、spacing、typography（font-family、size、line-height、weight）、border（radius、width）、shadow、transition（duration、easing）、z-index、breakpointがあります。

トークン管理ツール

Style Dictionary以外にも、Tokens Studio（Figmaプラグイン）、Specify、Supernovaがあります。Figma上でデザイナーがトークンを管理し、コードベースと自動的に同期できます。

クイックチェック

Style Dictionaryでデザイントークンを使用する主なメリットは何ですか？

対話的なレッスンで答える

振り返り：デザイントークン

トークンは名前付きの基本的な値（色、余白、タイポグラフィ）であり、デザインシステムの唯一の信頼できる情報源です。JSONとして保存します。Style DictionaryでCSS変数、JS、iOS、Android向けに変換します。リテラル名（blue-500）よりセマンティックな命名（primary）を使用します。2層構成はパレットからセマンティックなエイリアスへ対応付けます。テーマは別々のビルドで実現します。Tokens Studioを使ってFigmaから同期できます。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「Style Dictionaryによるデザイントークン」レッスンは無料ですか？

はい。「Style Dictionaryによるデザイントークン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Style Dictionaryによるデザイントークン」で何を学びますか？

色、余白、タイポグラフィのトークンをJSONで定義し、Style DictionaryでCSS変数、JS定数、iOS/Android形式に変換します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Style Dictionaryによるデザイントークン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る