デザイントークンとスタイルガイド、その違いがわかれば、デザインシステムが見えてくる

デザインシステムを作りたいけど、どこから始めればいいのかわからない——。 デザイントークンとスタイルガイド、似ているようで何が違うの？——。

そんな疑問をお持ちの方に向けて、デザインシステムの基礎となる「デザイントークン」と「スタイルガイド」の違いについて、わかりやすく解説していきます。

1. デザインシステムとは？
2. デザイントークンの基礎知識
- デザイントークンとは
- 主なデザイントークンの種類
3. スタイルガイドの役割
- スタイルガイドとは
- スタイルガイドの主な要素
4. 具体例で理解する違い
- ボタンの例
5. 実践での活用方法
- デザイントークンの作成ステップ
- スタイルガイドの作成ステップ
6. まとめ：デザインシステム構築への第一歩
- 始めるためのチェックリスト

1. デザインシステムとは？

デザインシステムは、製品やサービスのデザインを効率的に管理・運用するための仕組みです。

例えるなら、レゴブロックのような組み立て式のシステム。基本となるパーツ（デザイントークン）と、その組み立て方のルール（スタイルガイド）があることで、誰でも同じようなクオリティのものを作れるようになります。

2. デザイントークンの基礎知識

デザイントークンとは

デザイントークンは、デザインシステムの「最小単位」となる要素です。

例えば：

カラー：#0066CC
スペーシング：8px
フォントサイズ：16px

これらは、プログラミングでいう「変数」のような役割を果たします。

主なデザイントークンの種類

1.カラートークン

CSS

--color-primary: #0066CC;
--color-secondary: #FF6B6B;
--color-text: #333333;

2.スペーシングトークン

CSS

--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;

3.タイポグラフィトークン

CSS

--font-size-base: 16px;
--line-height-base: 1.5;
--font-family-primary: 'Helvetica Neue', sans-serif;

4.Effectsトークン

CSS

/* Shadow */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.14);

/* Opacity */
--opacity-disabled: 0.5;
--opacity-hover: 0.8;

/* Blur */
--blur-sm: blur(4px);
--blur-md: blur(8px);

5.ボーダートークン

CSS

/* Width */
--border-width-thin: 1px;
--border-width-medium: 2px;
--border-width-thick: 4px;

/* Radius */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 16px;
--border-radius-full: 9999px;

/* Style */
--border-style-solid: solid;
--border-style-dashed: dashed;

6.アニメーショントークン

CSS

/* Duration */
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;

/* Easing */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

7.ブレイクポイントトークン

CSS

/* Breakpoints */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;

8.サイズ/レイアウトトークン

CSS

/* Component sizes */
--size-icon-sm: 16px;
--size-icon-md: 24px;
--size-icon-lg: 32px;

/* Layout width */
--width-container: 1200px;
--width-content: 800px;
--width-sidebar: 300px;

/* Height */
--height-header: 60px;
--height-footer: 80px;
--height-input: 40px;

9.Zインデックストークン

CSS

/* Z-index layers */
--z-index-dropdown: 1000;
--z-index-sticky: 1100;
--z-index-modal: 1200;
--z-index-popover: 1300;
--z-index-tooltip: 1400;

10.Grid/Flexトークン

CSS

/* Grid */
--grid-columns: 12;
--grid-gap: 16px;

/* Flex */
--flex-gap-sm: 8px;
--flex-gap-md: 16px;
--flex-gap-lg: 24px;

11.フォーカス/アウトライントークン

CSS

/* Focus ring */
--focus-ring-width: 2px;
--focus-ring-color: rgba(0, 102, 204, 0.5);
--focus-ring-offset: 2px;

/* Outline */
--outline-width: 2px;
--outline-offset: 2px;

3. スタイルガイドの役割

スタイルガイドとは

スタイルガイドは、デザイントークンを「どのように使うか」を定めたルールブックです。

例えば：

見出しには「–font-size-xl」を使用する
ボタンの余白には「–spacing-md」を適用する
警告メッセージには「–color-warning」を使用する

スタイルガイドの主な要素

1.タイポグラフィルール

見出しの階層構造
本文のスタイル
リンクの装飾

2.カラーの使用規則

プライマリカラーの使用場面
アクセントカラーの活用方法
背景色との組み合わせ

3.スペーシングルール

コンポーネント間の間隔
段落や見出しの余白
グリッドシステムの使用方法

4. 具体例で理解する違い

ボタンの例

デザイントークン：

CSS

--color-primary: #0066CC;
--color-text-light: #FFFFFF;
--spacing-sm: 8px;
--spacing-md: 16px;
--border-radius-base: 4px;

スタイルガイド：「プライマリボタンでは、背景色に–color-primary、テキストに–color-text-light、余白に–spacing-smと–spacing-mdを使用します。角丸には–border-radius-baseを適用します。」

実装例：

CSS

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-base);
}