デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】

デザインシステムという言葉を聞いたことがあるだろうか。Googleの「Material Design」、Appleの「Human Interface Guidelines」、デジタル庁の「デザインシステムβ版」——名前は知っていても、「結局何なのか」「自分のプロジェクトにどう関係するのか」を明確に説明できるエンジニアは意外と少ない。

デザインシステムは「UIの設計図」ではない。「チーム全員が同じ言語でUIを語るための仕組み」だ。色の名前、ボタンの種類、余白の取り方——こうした設計の判断を属人的な感覚ではなく、共通のルールとして定義し、コードとドキュメントで共有する。それがデザインシステムの本質だ。

2026年現在、デザインシステムの重要性はさらに増している。Claude DesignのようなAIデザインツールが登場し、「コードベースからデザインシステムを自動構築する」時代になった。AIがUIを生成する時代だからこそ、デザインシステムという「仕様書」がなければ、毎回バラバラなUIが生成されてしまう。

この記事では、デザインシステムの基本概念から3層構造の実装、有名企業の事例、AI時代における変化まで——エンジニアがコードレベルで理解できる形で解説する。

デザインシステムとは — 「UIのルールブック」を理解する

デザインシステムとは、プロダクトのUI（ユーザーインターフェース）に一貫性を持たせるための、設計ルール・再利用可能なコンポーネント・ドキュメントの集合体だ。

もう少し具体的に言えば、以下の問いに対する「チーム共通の答え」を体系化したものがデザインシステムだ。

• プライマリカラーは #2563EB か #1D4ED8 か？
• ボタンの角丸は 4px か 8px か full-rounded か？
• 見出しのフォントサイズは 24px か 1.5rem か？
• エラーメッセージは赤いバナーで出すのか、インラインで出すのか？
• モーダルを閉じるボタンは右上か左上か？

こうした判断を個々のデザイナーやエンジニアが毎回考えていたら、UIは必ずバラバラになる。デザインシステムは、これらの判断を一度決めて、全員で共有する仕組みだ。

スタイルガイドとの違い

デザインシステムと混同されやすい概念を整理する。

スタイルガイドは「何色を使うか」。コンポーネントライブラリは「何を使うか」。デザインシステムは「なぜ、どう使うか」まで含む。

デザインシステムの3層構造

デザインシステムは一般に、以下の3層で構成される。この構造はデジタル庁からGoogleまで、規模を問わず共通している。

デザイントークンとは — UIの「変数」をコードで管理する

デザイントークンは、デザインシステムの最も基礎的な構成要素だ。「UI の設計値に名前をつけたもの」と理解すればよい。

なぜデザイントークンが必要か

デザイントークンがない世界を想像してみよう。

/* トークンなし: 同じ青が3種類のハードコード */
.header { background: #2563EB; }
.button { background: #2564EB; }  /* 微妙に違う */
.link   { color: #2563eb; }       /* 大文字小文字の違い */

デザイントークンがあれば、設計値は1箇所で管理され、全UIが自動的に統一される。

/* トークンあり: Single Source of Truth */
:root {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-text: #1A1A2E;
  --font-heading: 'Inter', sans-serif;
  --font-size-h2: 1.5rem;
  --spacing-md: 16px;
  --radius-md: 8px;
}

.header { background: var(--color-primary); }
.button { background: var(--color-primary); }
.link   { color: var(--color-primary); }

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

実務で使われるデザイントークンは、3つの抽象レベルに分かれる。

{
  "color": {
    "blue": {
      "500": { "value": "#2563EB" }
    },
    "primary": { "value": "{color.blue.500}" },
    "button": {
      "background": { "value": "{color.primary}" }
    }
  }
}

Primitiveだけでは「何に使うか」がわからない。Semanticレイヤーが「この色はプライマリ用途」と意味を与え、Componentレイヤーが「ボタンの背景はプライマリ」と具体的に紐づける。

Tailwind CSSでのトークン管理

フロントエンドの現場では、Tailwind CSSの設定ファイルがデザイントークンの役割を果たすケースが多い。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#2563EB',
      'primary-hover': '#1D4ED8',
      secondary: '#7C3AED',
      background: '#FAFAFA',
      text: '#1A1A2E',
      error: '#DC2626',
      success: '#16A34A',
    },
    fontFamily: {
      heading: ['Inter', 'Noto Sans JP', 'sans-serif'],
      body: ['Inter', 'Noto Sans JP', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace'],
    },
    spacing: {
      xs: '4px',
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '32px',
    },
    borderRadius: {
      sm: '4px',
      md: '8px',
      lg: '16px',
      full: '9999px',
    },
  },
}

このファイルが「デザイントークンの実装」そのものだ。bg-primary、text-error、rounded-md ——Tailwindのユーティリティクラスがトークンの参照になる。

コンポーネント — 再利用可能なUI部品の設計原則

デザイントークンが「素材」なら、コンポーネントは「部品」だ。トークンを使って構築された再利用可能なUI要素がコンポーネントにあたる。

コンポーネントの分類

コンポーネントはAtomic Design（Brad Frost提唱）の考え方で階層化されることが多い。

コンポーネントの実装パターン

デザインシステムのコンポーネントは、バリアント（variant）パターンで実装するのが標準的だ。

// Button コンポーネント（React + Tailwind）
type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
type ButtonSize = 'sm' | 'md' | 'lg';

const variantStyles: Record<ButtonVariant, string> = {
  primary: 'bg-primary text-white hover:bg-primary-hover',
  secondary: 'bg-gray-100 text-gray-800 hover:bg-gray-200',
  danger: 'bg-error text-white hover:bg-red-700',
  ghost: 'bg-transparent text-primary hover:bg-gray-50',
};

const sizeStyles: Record<ButtonSize, string> = {
  sm: 'px-3 py-1.5 text-sm rounded-sm',
  md: 'px-4 py-2 text-base rounded-md',
  lg: 'px-6 py-3 text-lg rounded-md',
};

export function Button({ variant = 'primary', size = 'md', children, ...props }) {
  return (
    <button className={`${variantStyles[variant]} ${sizeStyles[size]}`} {...props}>
      {children}
    </button>
  );
}

// 使用例
<Button variant="primary" size="md">保存する</Button>
<Button variant="danger" size="sm">削除</Button>
<Button variant="ghost">キャンセル</Button>

このパターンなら、デザイントークン（bg-primary）がコンポーネントに組み込まれ、使う側は variant を選ぶだけでブランドに準拠したUIが生成される。

有名事例 — 世界と日本のデザインシステムを比較する

デザインシステムの具体像を掴むには、実際の事例を見るのが一番だ。世界的に有名な事例と日本の事例を比較する。

デジタル庁デザインシステム（日本）

日本で最も注目すべきデザインシステムがデジタル庁のβ版（design.digital.go.jp）だ。

デジタル庁のデザインシステムの最大の特徴はアクセシビリティへの徹底だ。全てのサンプルコードにキーボード操作・スクリーンリーダー対応が組み込まれている。行政サービスは「全国民が使えなければならない」という制約があるため、アクセシビリティが最優先事項となっている。

また、デザイントークンをベースにしたTailwind CSSプラグインも公式提供しており、エンジニアがすぐに実装に取り込める点も実用的だ。

Google Material Design

Material Designは世界で最も普及したデザインシステムだ。2014年の初版から10年以上進化し続けている。

Material Designの強みはクロスプラットフォーム対応だ。Android、Web、Flutter——どの環境でも同じ設計言語が使える。一方で、Apple環境では「Androidっぽい」と感じるユーザーもおり、iOS向けにはApple HIG（Human Interface Guidelines）との使い分けが必要になる。

Shopify Polaris

ECプラットフォームShopifyのデザインシステム「Polaris」は、エンジニアフレンドリーな事例として参考になる。

Polarisの優れた点は、全コンポーネントに「Do（推奨）」と「Don’t（非推奨）」の具体例がドキュメントに含まれていること。「ボタンにはアクション動詞を使う（Do: 商品を追加 / Don’t: 送信）」のように、エンジニアが迷わない指針が用意されている。

IBM Carbon

IBMのCarbon Design Systemは、エンタープライズ向けの重厚な事例だ。

SmartHR Design（日本）

日本のSaaSスタートアップから生まれたデザインシステムとして、SmartHR Designは特筆すべき事例だ。

SmartHR Designが優れている点は、日本語環境に特化した設計判断が随所にある点だ。日本語フォントの行間、敬語・丁寧語のトーンガイドライン、多言語対応まで——日本のSaaS開発者にとって最も参考になるデザインシステムの一つだ。

事例比較まとめ

共通点は「全てオープンソースまたは無料公開」という点。デザインシステムは秘密にするものではなく、公開してエコシステム全体の品質を底上げするものだ。自分のプロジェクトでデザインシステムを作る際は、これらの事例をベースに始めるのが最も効率的だ。

AI時代のデザインシステム — Claude DesignとDESIGN.mdが変えるもの

2026年、デザインシステムの役割が大きく変わりつつある。AIがUIを生成する時代になり、デザインシステムは「人間が読むドキュメント」から「AIが参照する仕様書」としての性格を強めている。

Claude Designによる自動構築

Claude Designは、コードベースやFigmaファイルを読み込んでデザインシステムを自動構築する。手動でトークンを定義する時代から、AIが既存のコードから設計値を抽出する時代に移行しつつある。

【Claude Designのデザインシステム構築フロー】

1. GitHubリポジトリまたはローカルフォルダを接続
2. Claude Opus 4.7がコードを解析
3. カラーパレット・タイポグラフィ・コンポーネントを自動抽出
4. デザインシステムとして構造化
5. 以降のプロジェクトに自動適用

DESIGN.mdの登場

DESIGN.mdは、AIエージェント（Claude Code、Cursor等）がUIを生成する際に参照するMarkdown形式の仕様書だ。Figma TokensやStyle DictionaryがJSONベースでツール連携を前提としているのに対し、DESIGN.mdはプレーンテキストでLLMが直接読める。2026年4月にはGoogleがこのフォーマットを@google/design.md v0.1.0としてOSS公開し、仕様の標準化が加速した。

# DESIGN.md

## Color Tokens
| Token | Value | Usage |
|-------|-------|-------|
| primary | #2563EB | CTA buttons, links |
| secondary | #7C3AED | Accents, tags |
| background | #FAFAFA | Page background |
| text | #1A1A2E | Body text |
| error | #DC2626 | Error states |

## Typography
- Heading: Inter, 700, 1.5rem
- Body: Inter, 400, 1rem
- Code: JetBrains Mono, 400, 0.875rem

## Components
### Button
- Primary: bg-primary, text-white, rounded-md
- States: hover(darken 10%), disabled(opacity 50%)
- Min-width: 120px, padding: 8px 16px

このファイルをプロジェクトルートに置くだけで、Claude Codeは毎回一貫したUIを生成する。awesome-design-mdリポジトリには58ブランド分の実装例が公開されている。日本語UI向けにはawesome-design-md-jpが182サイト分のDESIGN.mdを和文タイポ拡張つきで提供している。

デザインシステムの未来

デザインシステムの本質——「チーム全員が同じ言語でUIを語る」——は変わらない。変わるのは「チーム」の定義だ。2026年のチームにはAIエージェントが含まれる。AIがデザインシステムを理解し、遵守できる形式で定義することが、これからの標準になっていく。

デザインシステムの始め方 — 小さく始めて育てる

最後に、自分のプロジェクトでデザインシステムを始めるための実践的なステップを示す。

ステップ1: 最小限のトークンを定義する

最初から完璧なシステムを作ろうとしない。まずはカラー・タイポグラフィ・スペーシングの3カテゴリだけ定義する。

:root {
  /* カラー */
  --color-primary: #2563EB;
  --color-text: #1A1A2E;
  --color-background: #FAFAFA;
  --color-error: #DC2626;

  /* タイポグラフィ */
  --font-sans: 'Inter', 'Noto Sans JP', sans-serif;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;

  /* スペーシング */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
}

ステップ2: DESIGN.mdに書き出す

定義したトークンをDESIGN.mdとしてリポジトリに配置する。AIエージェントが参照できるようになる。

ステップ3: 最も使うコンポーネントを3つ作る

全コンポーネントを最初から用意する必要はない。まずは以下の3つから。

• Button: Primary / Secondary / Danger の3バリアント
• Card: タイトル + 本文 + アクション
• Input: ラベル + 入力欄 + エラーメッセージ

ステップ4: ガイドラインは使いながら追加する

「こういうケースはどうする？」という疑問が出たときに、その都度ガイドラインを追加する。必要になるまで書かない。

ステップ5: Claude Designで加速する

ある程度コードが溜まったら、Claude Designにコードベースを接続してデザインシステムを自動構築してみる。手動で定義した内容とAIが抽出した内容を比較・統合することで、より堅牢なシステムに仕上がる。

参照ソース

• デジタル庁デザインシステムβ版
• デジタル庁デザインシステム — 政策ページ
• Material Design — Google
• Shopify Polaris
• IBM Carbon Design System
• Salesforce Lightning Design System
• SmartHR Design
• Style Dictionary — Amazon
• awesome-design-md — VoltAgent