デザインシステム
更新日:
プロダクトのデザインを一貫させるための「ルールブック＋部品箱」。原則(考え方)・[デザイントークン]・コンポーネント(部品) をひとまとめにしたもの。有名な例に Google の Material Design、Apple の Human Interface Guidelines がある。
なぜ必要か
- 画面が増えても見た目・操作感がバラバラにならない
- 毎回ゼロからデザインしなくてよいので開発が速い
- 生成AIに渡す「正解の見本」になる。AIは部分ごとに最適化しがちで全体の一貫性を失いやすいため、ルールを明文化しておく価値が大きい
実例: ジョブアンテナUI(https://ui.jobantenna.jp/)
転職・求人サービス向けに公開されているデザインシステム。構成は3層。
- ルール層 … 体験・基本原則・配色・形・余白・文字・画像・アクセシビリティ
- コンポーネント層 … 約60個。8カテゴリ
- アクション(ボタン等) / フォーム / データ表示 / ナビゲーション / オーバーレイ(モーダル等) / フィードバック(通知等) / チャット / レイアウト
- トークン層 … デザイントークン として実装された値
注目ポイント: AI時代のデザインシステム
- shadcn-ui のレジストリ形式で配布 → コマンド1つで自分のプロジェクトに部品を追加できる
- MCP サーバーを提供 → Claude などのAIエージェントが直接コンポーネントを検索・追加できる
- 設計原則を DESIGN.md として公開 → AIに読ませる前提のドキュメント
- 「人間が読むマニュアル」から「AIが読んで使える資産」へ変化している
初学者が自分で作るなら(最小構成)
いきなり大きなものは不要。プロジェクト内に次を用意するだけで効果がある。
DESIGN.md … 原則(例: 主要ボタンは1画面1つ、余白は8の倍数 など)
globals.css … 色・余白などのトークン
components/ui/ … shadcn/ui で追加した部品そして CLAUDE.md に「UIを作るときは DESIGN.md を読んでから」と書いておく。