デザインシステムの作り方｜UIコンポーネント設計とスタイルガイドの実践ガイド

デザインシステムとは

デザインシステムとは、プロダクトのUI（ユーザーインターフェース）に一貫性をもたらすための「設計ルールと再利用可能なコンポーネントの集合体」です。

身近な例でいえば、Googleの「Material Design」やAppleの「Human Interface Guidelines」がデザインシステムです。ボタンの色、フォントサイズ、余白の取り方、エラーメッセージの表示方法——こうしたルールを体系化し、チーム全員が同じ基準でデザイン・開発できるようにします。

デザインシステムがない場合に起きること

• 画面ごとにデザインがバラバラ — 担当者によってボタンの形や色が違う
• 同じUIを何度も作り直す — 再利用できるコンポーネントがなく、毎回ゼロから開発
• デザインと実装の乖離 — デザイナーが作ったFigmaとエンジニアが実装したUIが異なる
• 改修時の影響範囲が読めない — ボタンのデザインを変えたいが、どこに影響するか分からない

デザインシステムの効果

• 開発速度の向上 — 再利用可能なコンポーネントで、新画面の開発が30〜50%短縮される事例も
• 品質の一貫性 — 誰が作っても同じ見た目・操作感になる
• オンボーディングの効率化 — 新メンバーがルールを参照してすぐに開発に参加できる
• デザイナーとエンジニアの共通言語 — 「あのボタン」が具体的にどれか、全員が分かる

デザインシステムの構成要素

①デザイントークン（Design Tokens）

デザインの最小単位となる値の定義です。色、フォント、余白、角丸、影（シャドウ）などをトークンとして名前を付けて管理します。

トークンの例

• color-primary: #2563EB（ブランドカラー）
• color-error: #DC2626（エラー色）
• font-size-body: 16px（本文のフォントサイズ）
• spacing-md: 16px（中程度の余白）
• border-radius-md: 8px（中程度の角丸）

トークンを使う最大のメリットは「一箇所変えれば全体に反映される」ことです。ブランドカラーを変更する場合、トークンの値を1箇所変えるだけで、全画面のボタンやリンクの色が統一的に変わります。

②UIコンポーネント

再利用可能なUIパーツです。ボタン、入力フォーム、カード、モーダル、ナビゲーションなど、画面を構成する部品を定義します。

コンポーネントは以下の3層に分けて考えるのが一般的です（Atomic Designの考え方）。

③パターン・テンプレート

コンポーネントを組み合わせた画面レイアウトの雛形です。

• ページテンプレート — 一覧画面、詳細画面、設定画面などの基本レイアウト
• UIパターン — 検索＋フィルタ、テーブル＋ページネーション、ステップフォームなど
• インタラクションパターン — ローディング表示、エラー表示、確認ダイアログの出し方

④ドキュメント・ガイドライン

• 使い方のルール — 各コンポーネントの用途・禁止事項・アクセシビリティ注意点
• コーディング規約 — CSS命名規則、コンポーネントのprops定義、ファイル構成
• ライティングガイド — ボタンラベル、エラーメッセージ、ヘルプテキストの書き方

UIコンポーネント設計の原則

原則①：単一責任

1つのコンポーネントは1つの役割だけを持つ。「何でもできるボタン」ではなく、「送信ボタン」「キャンセルボタン」「リンクボタン」を分けて定義します。

原則②：カスタマイズ可能性

コンポーネントは、props（パラメータ）で見た目や振る舞いを変更できるように設計します。たとえばボタンなら、variant（primary/secondary/danger）、size（sm/md/lg）、disabled（無効化）などのpropsを用意します。

原則③：アクセシビリティの組み込み

コンポーネントレベルでアクセシビリティを担保します。ボタンにはaria-label、フォームにはlabel紐付け、モーダルにはフォーカストラップ——これらをコンポーネント内に組み込めば、利用者が個別に対応する必要がなくなります。

原則④：ドキュメント駆動

コンポーネントを作ったら、必ず使い方のドキュメントを書く。「何に使うか」「どう使うか」「やってはいけないこと」を明記します。Storybookのようなツールを使えば、実際に動くデモとドキュメントを一体管理できます。

Figmaでデザインシステムを構築する

現在、デザインシステムの構築にはFigmaが最も広く使われています。

Figmaでの構築ステップ

1. カラーパレットの定義 — カラースタイルとして登録。Primary、Secondary、Neutral、Semantic（Success、Warning、Error）に分類
2. タイポグラフィの定義 — テキストスタイルとして登録。見出し（h1〜h4）、本文、キャプション、ラベルなど
3. スペーシングの定義 — 4px、8px、12px、16px、24px、32px、48pxなどの余白ルール
4. コンポーネントの作成 — Figmaの「コンポーネント」機能で再利用可能なパーツを作成。Variantsで状態管理（default、hover、active、disabled等）
5. ライブラリとして公開 — チーム内で共有し、全プロジェクトから参照可能にする

デザインからコードへの橋渡し

Figmaで定義したデザインシステムを、実装コードに反映する方法は以下のとおりです。

• デザイントークンの自動変換 — Style Dictionary、Tokens Studio for Figmaなどのツールで、FigmaのトークンをCSS変数やJavaScriptの定数に自動変換
• コンポーネントライブラリ — React、Vue等でFigmaのコンポーネントに対応するコードコンポーネントを実装
• Storybook — 実装したコンポーネントのカタログ。デザイナーも確認できるので、Figmaとの乖離を防げる

中小企業・小規模チームでの始め方

デザインシステムは大企業だけのものではありません。3〜5人のチームでも、スモールスタートで始められます。

最小構成のデザインシステム

1. カラー定義 — ブランドカラー＋グレースケール＋セマンティックカラーをCSS変数で定義
2. タイポグラフィ — フォント、サイズ、行間をCSSクラスとして統一
3. 基本コンポーネント5つ — ボタン、入力フォーム、カード、テーブル、モーダル
4. ドキュメント — READMEに使い方を記載（最初はMarkdownで十分）

既存のデザインシステムを活用する

ゼロから作るのが大変な場合、既存のデザインシステムをベースにカスタマイズする方法もあります。

• Tailwind CSS — ユーティリティクラスベース。カスタマイズ性が高い
• shadcn/ui — コピー＆ペーストで使えるReactコンポーネント集。自由にカスタマイズ可能
• Material UI（MUI） — GoogleのMaterial Designに準拠。Reactコンポーネント
• Ant Design — 業務システム向けのコンポーネントが充実。React/Vue対応

まとめ

• デザインシステムはUIの一貫性と開発効率を両立する仕組み。規模に関わらず導入メリットがある
• 構成要素はトークン・コンポーネント・パターン・ドキュメントの4層
• コンポーネント設計は単一責任・カスタマイズ可能・アクセシブルが原則
• Figmaで設計し、Style Dictionary＋Storybookでコードに橋渡し
• 小規模チームはスモールスタート。カラー＋タイポグラフィ＋基本5コンポーネントから
• Tailwind CSSやshadcn/uiをベースにすれば、ゼロから作る必要はない

デザインシステム構築やUI/UX設計のご相談は、お問い合わせからお気軽にどうぞ。FUNBREWでは、使いやすさと開発効率を両立するシステム設計をサポートしています。