デザインシステムの構築

デザインシステム — 大規模プロダクトを支える設計基盤

「デザインシステム」という言葉はよく聞くようになりましたが、実際に何を指すのか曖昧なまま使われることがあります。簡潔に言えば、デザインシステムとはUIを構築するための「ルールとコンポーネントの集合体」です。色・タイポグラフィ・スペーシングなどの基本ルール（デザイントークン）と、ボタン・カード・モーダルなどの再利用可能なコンポーネント群が体系化されたものです。このレッスンでは、Figmaを使ってゼロからデザインシステムを構築する方法を学びます。

デザインシステムの構造 — Atomic Design階層

---

デザイントークンとは何か

デザイントークンとは、デザインの最小単位の値に名前をつけたものです。たとえば #6366f1 という色の値に color.primary.500 という名前をつけることで、この色を使っているすべての箇所を一度で変更できるようになります。

デザイントークンの種類

カラートークン

スペーシングトークン

スペーシングは 4px を基本単位（ベースグリッド）として倍数で定義します。

💡 Figmaの「Variables」機能を使うと、デザイントークンをFigma内で定義し、コンポーネントに直接バインドできます。Variablesは無料プランでも使えますが、モード（ライト/ダークなど）の数やチームライブラリへの公開はプランによって制限があります。

---

Atomic Designによる階層設計

Brad Frost が提唱したAtomic Designは、UIを「原子→分子→有機体→テンプレート→ページ」の5階層で捉えるフレームワークです。Figmaのコンポーネント設計に非常に相性が良く、大規模プロダクトのコンポーネントライブラリ構築で広く採用されています。

Atoms（原子）— 分割できない最小単位

ボタン、入力フィールド、アイコン、ラベル、バッジなど、これ以上分割するとUIとして意味をなさなくなる要素です。Atomsはすべてのデザイントークンが適用された状態で定義します。

FigmaでのAtom作成ポイント:

• ◆必ずコンポーネント化（Ctrl+Alt+K）する
• ◆VariantsでState（Default/Hover/Disabled/Focus）を網羅する
• ◆Auto Layoutを使い、テキスト長が変わっても崩れない構造にする
• ◆Styles（Color / Text）をすべて適用済みにする

Molecules（分子）— Atomの組み合わせ

SearchBar（Input + Button）、FormField（Label + Input + ErrorText）、Card（Image + Title + Description + Button）のように、Atomをいくつか組み合わせて単一の目的を持つUIブロックです。

⚠️ Moleculeは「単一責任の原則」を守ることが重要です。1つのMoleculeに多くの機能を詰め込みすぎると、再利用性が失われます。「このコンポーネントは何をするものか」を一文で説明できる粒度を保ちましょう。

Organisms（有機体）— 機能単位のブロック

Header（Logo + Nav + Button）、HeroSection、ProductList、Footerなど、ページを構成する大きなUIブロックです。Organismsはページレイアウトに直接配置される単位です。

Templates / Pages — 画面全体

OrganismsをレイアウトしたTemplateに実際のコンテンツを入れたものがPageです。TemplateとPageをFigmaで分けて管理すると、デザインの骨格（Template）と実データが入った最終確認（Page）を明確に区別できます。

---

命名規則

コンポーネントライブラリが大きくなると、命名の一貫性がなければ目的のコンポーネントを見つけるのが困難になります。以下の命名規則を採用することを推奨します。

コンポーネント命名パターン

[カテゴリ] / [コンポーネント名] / [バリアント]

具体例:

• ◆Buttons / Primary / Default
• ◆Buttons / Primary / Hover
• ◆Buttons / Secondary / Disabled
• ◆Forms / Input / Default
• ◆Forms / Input / Error
• ◆Cards / ProductCard / Default
• ◆Navigation / Header / Desktop

カラースタイル命名パターン

[グループ] / [トーン] / [スケール]

具体例:

• ◆Primary / 500 （メインカラー）
• ◆Primary / 100 （薄いハイライト）
• ◆Neutral / 900 （テキスト）
• ◆Semantic / Success
• ◆Semantic / Error

💡 Figmaのコンポーネント名にスラッシュ（/）を使うと、Assetsパネルでフォルダ構造として表示されます。Buttons/Primary/Default と命名すると、AssetsパネルでButtons > Primary > Default という階層で整理されます。

---

コンポーネントライブラリの構築手順

手順1: トークンページの作成

Figmaファイルに「Tokens」という専用ページを作成し、すべてのカラー・テキスト・スペーシングの値をスタイルとして登録します。このページはコンポーネントを配置するページではなく、あくまでスタイル定義の拠点です。

手順2: Atomsページの作成

「Components / Atoms」ページを作成し、Button・Input・Icon・Label・Badgeなどの最小コンポーネントを構築します。各コンポーネントにVariantsを設定し、すべての状態（Default / Hover / Focused / Disabled / Error）を定義します。

手順3: Molecules / Organismsページの作成

「Components / Molecules」「Components / Organisms」のページにそれぞれ上位コンポーネントを構築します。Atomsのインスタンスを使って組み立てるため、Atomsが変更されると自動で上位にも反映されます。

手順4: ドキュメントページの作成

「Documentation」ページを作成し、各コンポーネントの使用ガイドラインを記載します。「いつ使うか」「いつ使わないか」「アクセシビリティ上の注意点」などを図と文章で説明します。Figmaは直接テキストを書けるため、デザインと同じファイル内にドキュメントを置けます。

---

ドキュメント化のベストプラクティス

優れたデザインシステムは、コンポーネントの数だけでなくドキュメントの質で差がつきます。

各コンポーネントのドキュメントに含める要素:

• ◆コンポーネントの概要と目的
• ◆Do（正しい使い方）/ Don't（避けるべき使い方）の対比
• ◆使用できるバリアント一覧
• ◆アクセシビリティ上の注意点（コントラスト比、フォーカス順序）
• ◆関連コンポーネントへのリンク

⚠️ デザインシステムは「作って終わり」ではありません。プロダクトが成長するにつれてコンポーネントを追加・修正し続ける必要があります。更新日やバージョン番号をドキュメントに記載する習慣をつけましょう。

---

🏋️実践ワーク

1. ◆新しいFigmaファイルを作成し、「Tokens」「Components」「Documentation」の3ページを作成してください。
2. ◆Tokensページに最低5色（Primary, Neutral×2, Success, Error）をColor Stylesとして登録してください。
3. ◆Buttonsコンポーネントを作成し、Primary / Secondary の2種類、Default / Hover / Disabled の3状態、合計6バリアントを定義してください。
4. ◆コンポーネント名を Buttons / Primary / Default 形式の命名規則で統一してください。
5. ◆Documentationページに「Buttonの使用ガイドライン」をFigmaのテキストとフレームを使って作成してください。

📝まとめ

デザインシステムはデザイントークンとコンポーネントライブラリを体系化したもので、Atomic Designの5階層（Atoms・Molecules・Organisms・Templates・Pages）で整理すると管理しやすくなります。スラッシュを使った命名規則でAssetsパネルを整理し、Documentationページで使い方を明記することで、チーム全体が安心して使えるシステムになります。次のレッスンでは、このデザインシステムをエンジニアに渡すためのDev Modeを詳しく学びます。