#189
UI設計パターン
#189でざいんしすてむ
デザインシステム
別名・表記:Design SystemAtomic Design
UIXHERO Definition
「プロダクトを作るためのプロダクト」。単なるドキュメント（スタイルガイド）ではなく、実際に使えるコード（Reactコンポーネントなど）とセットで運用されるエコシステム。
概要
Atomic Design（アトミックデザイン）などの手法を用いて、UIを最小単位（Atom）から組み合わせて構築する思想が一般的。 スタイルガイドが「ルールブック」なら、デザインシステムは「ルールブック ＋ レゴブロックのセット」である。
UXでの活用
- 一貫性（Consistency）: どの画面、どのデバイスでも同じ操作感を提供することで、ユーザーは迷わず操作できる。
- 開発スピード: 既存のコンポーネントを組み合わせるだけで画面が作れるため、プロトタイピングや実装が高速化し、その分「ユーザー体験の検討」に時間を使えるようになる。
💡 使いどころ
複数のプロダクトを持つ企業や、長期的に運用・改善を続ける大規模なサービスにおいて、開発速度と品質を両立させたい時。
⚠️ 注意点・誤用
作ることが目的（ゴール）になりがち。作ってからがスタートであり、使われなければ意味がない。メンテナンスコストも高い。
具体例
- Google Material Design
- Apple Human Interface Guidelines
- Uber Base Web