デザインシステム

デザインシステムとは

デザインシステムは、UI コンポーネント (ボタン、フォーム、カード)、デザイントークン (色、フォント、スペーシング)、ガイドラインを体系化し、プロダクト全体で一貫した UI を実現する仕組みである。

構成要素

構成要素を以下にまとめる。

要素	説明	例
デザイントークン	色、フォント、スペーシングの定義	--color-primary: #3b82f6
コンポーネント	再利用可能な UI パーツ	Button, Input, Card
パターン	コンポーネントの組み合わせ	フォーム、ナビゲーション
ガイドライン	使い方のルール	ボタンの使い分け
ドキュメント	Storybook、使用例	コンポーネントカタログ

デザイントークン

デザイントークンの例を示す。

:root {
  /* 色 */
  --color-primary: #3b82f6;
  --color-error: #ef4444;
  --color-text: #1f2937;
  --color-bg: #ffffff;

  /* スペーシング */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  /* フォント */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;

  /* 角丸 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
}

コンポーネントの例

コンポーネントの例を示す。

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

function Button({ variant, size, children, ...props }: ButtonProps) {
  return (
    <button className={`btn btn-${variant} btn-${size}`} {...props}>
      {children}
    </button>
  );
}

有名なデザインシステム

有名なデザインシステムを以下にまとめる。

デザインシステム	企業
Material Design	Google
Human Interface Guidelines	Apple
Fluent	Microsoft
Carbon	IBM
Cloudscape	AWS

Storybook との連携

Storybook でコンポーネントカタログを作成し、デザイナーと開発者が同じ参照先を見る。

デザインシステムが必要なタイミング

デザインシステムが必要なタイミングを以下にまとめる。

必要になる場面	不要な場面
複数プロダクトで UI を統一	1 つの小さなプロジェクト
デザイナーと開発者の協業	個人開発
チームが 5 人以上	1〜2 人のチーム

全体像を把握するには関連書籍も有用。