デザイントークンの設計と管理

デザイントークンの設計と管理

はじめに

デザイントークンは、デザインシステムの最小構成単位です。色、フォントサイズ、余白、角丸、影、ブレークポイントなどの設計値に名前をつけて変数化することで、デザインとコードの間の「唯一の情報源（Single Source of Truth）」を確立します。

デザイントークンの階層構造

トークンは3つの階層で設計するのがベストプラクティスです。

• ◆グローバルトークン: 最も原始的な値の定義。blue-500: #3B82F6、spacing-4: 16pxのように色名や数値で命名
• ◆セマンティックトークン: 用途に基づいた命名。color-primary: blue-500、spacing-component-gap: spacing-4のように意味を付与
• ◆コンポーネントトークン: 特定のコンポーネント専用。button-bg-primary: color-primary、card-padding: spacing-6のようにスコープを限定

カラーシステムの設計

色の設計はデザインシステムで最も重要かつ複雑な領域です。

• ◆プライマリカラー: ブランドの主色。CTAボタン、リンク、強調表示に使用
• ◆セカンダリカラー: 補助色。プライマリと組み合わせてバリエーションを出す
• ◆ニュートラルカラー: グレースケール。テキスト、背景、ボーダーに使用。5〜10段階
• ◆セマンティックカラー: 意味を持つ色。success(緑)、warning(黄)、error(赤)、info(青)
• ◆ダークモード: ライトモードの色を反転させるだけでは不十分。コントラスト比の再調整が必要

タイポグラフィシステム

文字関連のトークン設計を学びます。

• ◆フォントファミリー: 本文用、見出し用、コード用の3種類を定義。日英混在サイトは各2種
• ◆フォントサイズスケール: 倍率スケール（1.125、1.25、1.333等）を選び、数段階を生成する
• ◆ラインハイト: 本文は1.5〜1.75、見出しは1.2〜1.3が一般的。フォントサイズに応じて調整
• ◆フォントウェイト: regular(400)、medium(500)、semibold(600)、bold(700)の4段階が標準的
• ◆レスポンシブ: モバイルとデスクトップでフォントサイズに差をつける。clamp()関数の活用

スペーシングシステム

余白の設計は画面全体の統一感を左右します。

• ◆ベースユニット: 4pxまたは8pxを基準単位とし、その倍数でスペーシングを定義する
• ◆スケール: 0, 1(4px), 2(8px), 3(12px), 4(16px), 6(24px), 8(32px), 12(48px), 16(64px)
• ◆コンポーネント内余白: ボタンやカードの内側のpadding。コンパクト/デフォルト/ゆったりの3段階
• ◆レイアウト余白: セクション間やページ余白。デバイスサイズに応じてレスポンシブに変化

トークンの配信と同期

デザインとコードの間でトークンを自動同期する仕組みを構築します。

• ◆Style Dictionary: Amazonが開発したオープンソースツール。JSONからCSS変数、SCSS、JS等を自動生成
• ◆Figma Variables: Figmaの変数機能でトークンを管理。REST APIで外部からアクセス可能
• ◆Tokens Studio: Figmaプラグイン。GitHubと連携してトークンの変更をPRとして自動作成
• ◆CI/CDパイプライン: トークン変更→ビルド→デプロイまでを自動化

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆自分のプロジェクトのカラーパレットを3階層トークンで設計してみましょう
• ◆4pxグリッドベースのスペーシングスケールを定義し、既存画面に適用してみましょう
• ◆FigmaのVariables機能でトークンを設定し、コンポーネントに適用してみましょう

📝まとめ

デザイントークンはデザインシステムの基盤であり、グローバル→セマンティック→コンポーネントの3階層で設計することで、管理性と柔軟性を両立できます。Style DictionaryやFigma Variablesを活用して、デザインとコードの同期を自動化しましょう。次の章では、コンポーネントライブラリの設計と構築を学びます。