デザインシステムとは何か | 1人design system advent calender 1日目
1日目は、まずデザインシステムとは何かを整理。
デザインシステムとは何か。いくつかの資料に目を通した上で、主要要素と考えるのは以下の点。
- プロダクトにおけるデザインのSingle Source of Truth
- 従来のスタイルガイドがプロダクトのコードベースの中でプロジェクトとして扱われていたのに対して、デザインシステムはそれ自体がプロダクト
- 他のプロダクトにデザインのエコシステムを提供するプロダクト
この点を踏まえて詳細。
共通言語 / Single Source of Truth
A DESIGN SYSTEM CONTAINS WHATEVER YOUR ORGANIZATION NEEDS TO COMMUNICATE DESIGN DECISIONS
“A design system is…”, still a bit complex yet slightly revised since last time… pic.twitter.com/d61ABO2H76
— Nathan Curtis (@nathanacurtis) 2017年6月1日
デザインシステムとは、UIキット、スタイルガイド、パターンライブラリ、Voice & Tone（どのように使用するべきかを示すガイダンス）、ブランドガイドラインなどによって構成されるもので、デザインをする or デザインについて議論する上での唯一の指針、組織全体におけるデザインの共通言語となるものを指す。
Design systems, style guides, pattern libraries. What the hell is the difference?
必ず上述のものを全て含まないといけないわけではなくて、組織によって最適な構成を選択すれば良い。Awesome Design Systemsにあるものを見ていくと（デザインシステムだけをリストにしてるわけじゃないけど）それぞれ構成要素が異なっている。
形はどうあれ、プロダクトにおけるデザインのSingle Source of Truthとして組織全体で共通認識が持てるようにするのがデザインシステム。
デザインシステムがあると何が良いのか
デザインシステムを導入することのメリットは以下3つあたりが考えられる。
- 一貫性
- Single Source of Truthとなるデザインシステムで一元管理されるので、一貫性のあるUIが実現しやすい
- 効率
- 複数のプロダクトで同じ問題に対して別々のアプローチをするのが非効率なのは当然で、デザインシステムをもって同じ問題に同じ解決策を提供していくということ
- 明瞭さ
- プロダクトに関わる誰もが、デザインの方針とか指針について言語化されたデザインシステムを通して把握できるので、その辺のコミュニケーションがとりやすくなる
スタイルガイドとどう違うのか
A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.
— Nathan Curtis (@nathanacurtis) 2015年10月21日
Unlike static style guides, design systems are dynamic. What does it mean? The style guide is an artifact, the design system is a process.
フロントエンドだとデザインシステムよりもスタイルガイドの方が聞き慣れた感じはする。
スタイルガイドは、デザインについてのデザイナーとエンジニア間での共通言語としてのドキュメントのことを指して、成果物だけで見るとデザインシステムとの差異がわかりづらいけど、考え方とか取り組み方に大きな違いがある。
そもそもデザインシステムを構成する要素のひとつにスタイルガイド自体入ってるけど、これまでのフロントエンドの取り組みとしてのスタイルガイドと、スタイルガイドも含めたプロダクトとしてのデザインシステムを比較して考えると、マインドセットに大きな違いがある。
スタイルガイドの場合、デザインに合わせてスタイルガイドを更新していく必要があるけど、更新が少しでも滞ると実際のデザインと相違が生まれてしまって、それを正とはできない状態ができてしまう。そうすると最早スタイルガイドを更新し続ける意味が薄れてしまって、さらにデザインとスタイルガイドを同期していくことが難しくなるという悪循環が生まれやすい。
この辺は、実際にスタイルガイドを運用した経験があると、デザイナーとエンジニア間の協業の難しさ、スタイルガイドを都度都度メンテナンスしていく辛さについて、人それぞれ思うところがあると思う。
一方でデザインシステムは、他のプロダクトにそのシステムを提供するエコシステムとして運用されるプロダクトなので、デザインとそれに対応するスタイルガイドが同期されてない状況というのは起こり得ないようになっているはず。 仮にそういう状況が起きていれば、そもそもプロダクトとして成り立ってないと言えそう。
そう考えると、プロダクトのコードベースの中でプロジェクトとして生きたスタイルガイドを作ることに苦労するのは当然で、1つのプロダクトとしてのデザインシステムの中で普通に生きたスタイルガイドを作れば自然と「living styleguide」になっていきそう。
デザインシステムはプロジェクトではなくプロダクト
A design system’s value is realized when products ship features using parts from the system.
A Design System isn’t a Project. It’s a Product, Serving Products.
デザインシステムは、他のプロダクトにそのシステムの部品を取り込んでもらうことで価値が出てくるもので、それ自体が何で構成されるかに関わらず、1つのプロジェクトとして作り切ったら終わりというものではない。
他のプロダクトと同じように、1度作り終わった後も運用し続けていくもので、プロダクトとして育てていくべきもの。 デザインシステムというプロダクトが他のプロダクトに価値を提供していくエコシステムとして機能していくべき。
2日目はデザインシステムを実際に作るときにどういったことものが必要になるのかを考える。
