デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。
これら３つのコンセプトには繋がりはあれども、決して同じものではありません。
この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。
デザインシステムの定義
まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。
- デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだもの。
- パターンライブラリ―デザインシステムの下位概念であり、企業内で一貫して使われるデザインパターンのセット。
- スタイルガイド―デザインシステムのもう１つの下位概念。デザインシステムそのものを記述した、静的なドキュメント。製品の見た目や雰囲気、UIパターンの使用事例、正しいタイポグラフィのスケールなど。
肝心なこととして、パターンライブラリ（Sketch内のシンボルやアセットのまとまりなど）とスタイルガイドは、デザインステムの一部分にすぎません。
どのように繋がっているか
デザインシステムという概念について、まず広い視点から考えます。
もっとも広く言うと、デザインシステムとは、チームが一貫した製品を作るのに役立つ共通の用語や原則、ツールを持つ、生きた存在です。Nathan Curtis氏が言うように、「デザインシステムとはプロジェクトではなく、製品を提供するための製品」です。
もっとも優れた事例の１つとして、Shopifyのデザインシステム「Polaris」があります。ホームページ上に、すべてのコアセクションが分割されています。
- 製品の原則―すべての製品の裏にある目的や本質とは何でしょうか？
- 文章のコンテンツ―製品のインターフェイスのコピーは、どのような見た目、雰囲気であるべきでしょうか？
- ビジュアルの性質―製品の「肌」にあたる部分は、どのような見た目、雰囲気であるべきでしょうか？
- コンポーネント―どのデバイスでも一貫した製品を構築するためのUIパターンやコードコンポーネントとはどんなものでしょうか？
Shopifyのデザインシステム「Polaris」
この場合、Polarisとは製品の原則、文章のコンテンツ、ビジュアルの性質、コンポーネントを含む、完全なデザインシステムのことです。スタイルガイドとは、単にPolarisのWebサイトにある静的なドキュメントであり、デザインシステムの使い方を解説するものです。パターンライブラリは、Polarisのデザインシステムにある「コンポーネント」の一部です。
３つの概念の違いは微妙ですが、これらは製品開発の改善を目指す上で重要であり、決して混同してはいけません。ドキュメントにはメンテナンスが必要なので、スタイルガイドはすぐ最新化されます。一方、パターンライブラリには、一貫した実装のためのインストラクションと原則が不足しています。
デザインシステムは、すべてのものを繋ぐのです。
デザインシステムの作成
これらの用語の意味と、どのように機能し合っているのかについて理解できたところで、デザインシステムをどのように作成するか、簡単に見ていきましょう。ここでは私たちの50ページの電子書籍『Creating a Design System: The 100-Point Process Checklist』から、関連する作業段階を簡単に要約して紹介します。
- UIの一覧表を作成する：まず、現在のインターフェイスで使われているデザインパターンすべてを書き出してリストアップし、矛盾している部分を記録しましょう。
- 組織のサポートを得る：発見したことをチーム全員に示し、デザイン用語を統一させることが有効であると説明しましょう。Evangelizing Design Systems templatesの記事で説明したように、不必要な作業に浪費されているデザインや開発の時間と、製品に統一性をもたせることで改善できるNPSスコアの程度を見積もってください。
- デザインの原則を確立する：方法を体系化しましょう。この段階から、デザインシステムのためのスタイルガイドの作成にとりかかり始めます。
- カラーパレットを作成する：私たちがUIの一覧表を作成したときには、統一する必要がある、116色もの異なる灰色を使っていることがわかりました。パレットを作成して、パレットの名称を決めましょう。
- タイポグラフィのスケールを設定する：既存のスタイルに合わせてスケールを最適化しましょう。または、黄金比やメジャーセカンド（８：９）を使って、調和したスケールを構築してもいいかもしれません。スケールを決めるとき、フォントサイズだけでなく、太さや行の高さ、その他のプロパティも忘れずに設定しましょう。
- アイコンライブラリとその他のスタイルを実装する：UI一覧表からどのアイコンをデザインシステムに組み込むかを決定しましょう。そのあとその実装を標準化します。
- 最初のパターンを作成し始する：この段階の作業に終わりはありません。パターンは常に製品の真実を反映するものであり、同時に、近い将来の進歩した製品の状態も反映したものであるべきです。
まとめ
この記事では、デザインシステムとスタイルガイド、パターンライブラリという言葉を定義して、階層構造にまとめました。そして、デザインシステムの作り方を簡単に説明しました。
より段階的にデザインシステムの構築方法を学びたい人は、50ページの電子書籍『Creating a Design System: The 100-Point Process Checklist』をダウンロードしてください。アドバイスはすべて、UXPinのCEO、Marcin Treder氏の内部デザインシステムの構築経験に基づくものです。
