デザインシステム
デザインシステムとは、デザインのスタイルに関する決まり事や、UIパーツの見本を集めた、デザイナーに向けたライブラリである。
デザインシステムを使ってデザインを進めることで、開発時間の短縮や、デザインの一貫性を保つことができる。
デザインシステム構築のメリット
自社のデザインシステムを構築することで、主に下記の3つのメリットがある。
- デザインの一貫性を保持できる
- デザインの品質を保持できる
- 開発の時間が短縮される
繰り返し使用可能なデザインパーツを予め定めることで、デザインにかける時間が短縮され、サービスをまたいでデザインの品質を保つことができる。
担当者の変更にデザインの質が左右されないことも大きな魅力である。
デザインシステムに含まれるもの
- スタイルガイド
- トーン&マナー、カラーパレットやフォントなど、視覚表現に関するルール。
- UIのコンポーネント集
- スタイルガイドを厳守したUIパーツのライブラリ。コピー可能なコードスニペットも併記されていることが多い。
- アイコン集
- スタイルガイドを厳守したアイコンライブラリ。
- パターンライブラリ
- コンポーネントをどのように組み合わせて使うのか、パターンの見本集。
デザインシステム構築理論
デザインシステムの構築理論としては、アトミックデザイン(Atomic Design)が有名である。 全てのUIパーツを原子とみなし、最小単位の原子であるUIコンポーネントを集めてページを作ってくという考え方で、ほぼ全てのデザインシステムに採用されている。
有名なデザインシステム
優れたデザインシステムとして、下記のものが有名である。
読み方
デザインシステム