デザインシステムとコンポーネントライブラリ

誰も更新しないデザインシステム

🔄 Quick Recall: 前のレッスンではAIでアクセシビリティ監査、ARIAラベル生成、WCAG準拠チェックを効率化した。今回はデザインシステムとコンポーネントライブラリ——プロダクトがスケールしても一貫性を維持する方法。

成長するプロダクトチームはいずれ同じ地点に達する：3人のデザイナーが微妙に異なるボタンスタイルを使い、新機能のカードコンポーネントが既存のものとほとんど同じだが少し違い、誰かが「デザインシステムはあるか？」と聞く。答えはたいてい「まあ一応。」

デザインシステムは皆が重要だと同意しつつ誰にもメンテナンスする時間がないものだ。初期構築は楽しい。プロダクトの進化に合わせて最新に保つ？そこが崩壊する部分。

AIがデザインシステムを構築してくれるわけではない。デザイン判断——どのコンポーネントを含め、どう見せ、どんなパターンに従うか——はあなたのもの。だがAIは多くのデザインシステムを殺す部分を処理できる：ドキュメンテーション、一貫性チェック、継続的メンテナンス。

機能するデザインシステムとは

AIワークフローの前に、使えるデザインシステムとお飾りの違いを確立しよう：

使えるデザインシステムは：

明確なトークン — 色、スペーシング、タイポグラフィ等の値が1か所に定義
ドキュメント化されたコンポーネント — 「ボタンがある」だけでなく「いつどのバリアントを使うか、なぜか」
使用ガイドライン — よくある誤用を防ぐDOs/DON’Tsの例
アクセシビリティ内蔵 — すべてのコンポーネントがデフォルトでWCAG AA準拠
メンテナンス計画 — 最新に保つ責任者がいる

デザインシステムが失敗するとき：

ドキュメンテーションが古いか不完全
デザイナーがコンポーネントを素早く見つけられない
実際に遭遇するエッジケースをカバーしていない
新コンポーネント追加に時間がかかりすぎ、その場限りのソリューションが作られる

AIがドキュメンテーションとメンテナンスの問題に直接対処する。

AIでトークンシステムを構築

デザイントークンは基盤。AIで体系的に考え抜く：

[プロダクトタイプ]のデザイントークンシステムを構築。

ブランドカラー：
- プライマリ：#2563EB
- セカンダリ：#7C3AED

完全なトークンシステムを構築してください：

1. カラートークン：
   各ブランドカラーのフルカラースケール（50〜950）
   セマンティックトークン：success, warning, error, info
   サーフェストークン：background, surface, elevated, overlay
   テキストトークン：primary, secondary, disabled, inverse
   ボーダートークン：default, strong, subtle

2. スペーシングトークン：
   8pxベースのスケール、0〜20ステップ
   意味のある命名（space-0〜space-20）

3. タイポグラフィトークン：
   フルイドタイプスケール：xs, sm, base, lg, xl, 2xl, 3xl, 4xl
   各サイズのline-heightとletter-spacing

4. ラディウストークン：
   noneからfull（ピル/サークル）まで

5. シャドウトークン：
   subtleからdramaticまで4レベル

6. モーショントークン：
   マイクロインタラクション用のdurationとeasing値

各トークンに名前、値、いつ使うかの1行説明。

✅ Quick Check: 現在のプロジェクトのCSSやデザインファイルを見てほしい。トークンシステムの一部でないハードコードされた色値はいくつある？各々が一貫性のリスク。AIで既存コードを監査し、ハードコード値をトークンにマッピングできる。

AIでコンポーネントをドキュメント化

コンポーネントドキュメンテーションがAIで最も時間を節約する場所。テンプレート：

このUIコンポーネントのドキュメントを作成：

コンポーネント：[名前]
目的：[何のためか]
バリアント：[バリアントリスト — primary, secondary, ghost等]
サイズ：[該当する場合 — sm, md, lg]

以下のセクションでドキュメントを生成：

## 概要
コンポーネントの説明と主要ユースケース（2〜3文）

## いつ使うか
- 適切なユースケースの箇条書き
- 具体的に：「フォーム送信のようなページの主要アクションに使用」

## いつ使わないか
- 不適切なユースケースの箇条書き
- 代替を提案：「ナビゲーションにはLinkコンポーネントを」

## バリアント
各バリアントについて：
- 名前と視覚的説明
- このバリアントを使う具体的な場面
- 例示コンテキスト

## プロパティ/設定
設定可能なプロパティのテーブル：
| プロパティ | 型 | デフォルト | 説明 |

## アクセシビリティ
- キーボードインタラクションパターン
- ARIA要件
- フォーカス管理の注記

## DOs / DON'Ts
正しい使用例3つ
間違った使用例3つ（理由の説明付き）

既存コンポーネントの一括ドキュメント化

ドキュメントがない既存コンポーネントがある場合、AIで一括処理：

デザインシステムの以下のコンポーネントに
ドキュメントが必要です。
各コンポーネントについて概要、いつ使うか、
いつ使わないか、主要バリアントを記述：

1. Avatar — ユーザープロフィール写真、イニシャルフォールバック
2. Badge — 要素に付くステータスインジケータ
3. Card — ヘッダー/ボディ/フッター付きコンテンツコンテナ
4. Chip — タグ、フィルター、選択の小さなラベル要素
5. Dialog — 確認やフォーム用のモーダルオーバーレイ
6. Dropdown — ボタンで開く選択メニュー
7. Input — ラベルとバリデーション付きテキスト入力
8. Toast — 自動非表示の一時的通知
9. Tooltip — ホバー/フォーカスで表示されるヘルプ
10. Skeleton — コンテンツレイアウトを模すローディングプレースホルダー

全エントリーで一貫した構造を使用。

1つのプロンプトで10コンポーネントのドキュメント。AIなしでは最低丸1日。AIなら1時間のレビューと改善。

デザイン一貫性の監査

プロダクトが成長すると不整合が忍び込む。AIで発見：

デザインシステムの一貫性を監査しています。
異なる画面で見つかったパターン：

ボタンスタイル：
- プライマリ青(#2563EB)、角丸、高さ40px
- プライマリ青(#2563EB)、角なし、高さ36px
- プライマリ青(#2B6CB0)、角丸、高さ40px
- アウトライン青、角丸、高さ40px
- ゴースト青、ボーダーなし、高さ40px

カードスタイル：
- 白背景、1pxボーダー、8px角丸、16pxパディング
- 白背景、シャドウ、12px角丸、24pxパディング
- 灰背景、ボーダーなし、8px角丸、16pxパディング
- 白背景、1pxボーダー、8px角丸、24pxパディング

分析してください：
1. どのバリエーションが意図的（異なるバリアント）か？
2. どれが意図しない不整合か？
3. 各コンポーネントの統合バリアントセットを推奨
4. 更新すべき既存インスタンスを特定

漠然とした「見た目が一貫してない」を具体的なアクションプランに変える。

コンポーネントバリアントの生成

コンポーネントの拡張が必要なとき、AIが体系的にバリアントを考える：

Cardコンポーネントの基本バリアント（白背景、
ボーダー、タイトル、ボディ、オプションフッター）があります。

以下のユースケース向けに拡張が必要：
1. ダッシュボード指標表示（数値、ラベル、トレンド）
2. チームメンバープロフィール（アバター、名前、役割）
3. 料金プラン比較（プラン名、価格、機能リスト、CTA）
4. コンテンツプレビュー（サムネイル、タイトル、抜粋）

各バリアントについて：
- レイアウト構造を記述
- 必須とオプションのプロパティ
- バリアント固有のアクセシビリティ考慮
- ベースカードとの共有要素
- Cardバリアントにすべきか別コンポーネントにすべきか推奨

最後のポイントが重要：カードに見えるものすべてがCardバリアントであるべきとは限らない。

Key Takeaways

デザインシステムは悪いデザインではなくドキュメンテーションの放置から失敗する
AIが多くのデザインシステムを殺すメンテナンス負荷を処理：ドキュメンテーション、一貫性監査、ガバナンス
デザイントークンは最初から包括的に：カラー、スペーシング、タイポグラフィ、ラディウス、シャドウ、モーション
コンポーネントドキュメントにはスクリーンショット以上が必要：使用ガイドライン、DOs/DON’Ts、アクセシビリティ注記
AIで既存コンポーネントの一括ドキュメント化とプロダクト横断の不整合監査
ガバナンスは軽量に——重いプロセスはスキップされる
「バリアントか新コンポーネントか？」は多くのチームが思う以上に重要な問い

Up Next: 最終レッスンのキャップストーン。リサーチからデザインシステムまで、学んだすべてを使ってUXデザインの総合実践。