デザインシステムの構築について
デザインシステムの基本構成について
“デザインシステムはプロジェクトではなくプロダクトである。”
Nathan Curtis – EightShapes
デザインシステム構築における具体的な成果物
デザインシステムの構築、デザインや開発における成果物をはじめとし、運用におけるガイドラインも含めたエコシステムの構築することを指しています。
具体的な成果物としては、以下のような内容があげられます。
- デザインシステム
- スタイルガイド
- UIライブラリ（デザイン・コード）
- 開発環境
- テストフロー
デザインシステム
デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。
スタイルガイド
デザインシステムの別のサブクラスで、静的なドキュメントにデザインシステム自体を説明したもの。たとえば、製品の見た目や雰囲気、UIパターンの使用例、正しいタイポグラフィの大きさなどを記載する。
UIライブラリ（デザイン・コード）
デザインシステムのサブクラスで、組織全体で使用するデザインパターンの集まり。
開発環境
プロトタイピングとプロダクト全体のメンテナンスを可能にするため、ビルド環境、リンティング、パフォーマンス改善ツールなどといった開発環境を汎用化して提供する。
テストフロー
コードベースのUIライブラリのためのテストフロー(さまざまなスクリーンサイズ、ブラウザ、OSなど)
取り組むチームをつくる
必要となる専門分野
各組織の目標により必要となる項目が異なりますが、効果的なデザインシステムの構築に必要となる専門分野として下記があげられます。
デザイナー
デザインシステムで使用する各視覚要素をつくる。
フロントエンド開発者
効率的なコードでモジュールをつくる。
アクセシビリティーエキスパート
アクセシビリティ標準に準拠したシステムの品質を提供する。
コンテンツストラテジスト
システム全体を通じてのボイスやトーンをもったコンテンツをつくる。
リサーチャー
カスタマーニーズの理解をサポートする。
パフォーマンスエキスパート
各デバイスの違いなど、あらゆる環境におけるシステムの快適なパフォーマンスを実現する人。
プロダクトマネージャー
カスタマーニーズに沿ったシステムの提供を管理する人。
リーダー
経営層含む意思決定者をはじめとし、組織全体にシステムの考え、その重要性を啓蒙する人。
基本概念と目的をチームで共有する
デザインシステムの目的を共有する
チーム内はもちろんのこと組織全体で、デザインシステムがどういったものであり、それが組織にとってどのような有用性をもたらすのかという理解を得ることは、中長期的にプロジェクトを円滑にするという点において重要となります。
デザインシステムの基本概念を定義する
デザインシステムの基本概念を定義し、チームにおける指針となる考えを明文化します。
これにより、チームでの協業の中で起こり得る摩擦や混乱を引き起こすもととなる主観的、または曖昧な考えをできるだけ取り除くことができます。
以下は、GoogleのMaterial Designから参照したデザインコンセプトの例です。
- 統一的である
- 依存せずに独立している
- 再利用性ができる
- アクセシブルである
- 堅牢である
ロードマップを考える
デザインシステム構築の各ステップ を定義する
リリースまでの道のりにおいて、着手すべき項目とそのステップを明確化し、プロジェクト全体を各ステップ別に定義します。
デザインシステムの専門家であるNathan Curtisは、デザインシステムを構築する上での各マイルストーンを次のように５つのステップに分けて説明しています。
- Discover
- Design Build
- Doc
- Publish
また、下記の図のように、各ステップにおける内容は順番通りが必ずしも最適というわけではなく、ある程度並走した形でそれぞれの項目を進行させることで、各項目における調整や検証を行います。
取り組むべき項目をリストアップし、優先順位づけする
チームと基本概念・目的やプロジェクト全体のロードマップの認識合わせができたら、次に取り組むべき項目(ガイドライン、デザイン、開発)をできるだけ具体的に書き出し、優先度づけを行いましょう。
以下はポストイットなどで、各項目のリストアップと整理を行っている様子の例です。
各マイルストーン上での策定項目の具体化とスケジュールの設定
デザインシステムで取り扱う項目は広範かつ多岐にわたるため、事前に全てのタスクを徹底的に割り出すことは困難かもしれません。現実的なケースとして、２週間、または１カ月単位で達成するマイルストーンを設定することがあげられます。
その上で、プロジェクト全体のマイルストーンを設定しすすめることの重要性は以下です。
- 取り組まれる内容が必要となる価値を生み出していること
- 取り組むべき優先順位の明確化すること
- 安心し、信頼のできるペース感をもてること
デザインする
デザインコンセプトをもとにデザインガイドをまとめる
デザインコンセプトをもとに、デザインにおけるルールをデザインガイドをまとめます。
UIライブラリやIconライブラリを作成する
作成したデザインガイドをもとに、Adobe XDやSketchといったデザインツールで、ユーザーが必要とする機能性、そして多岐にわたるプロダクトラインでの汎用性を考えたUIライブラリとIconライブを作成します。
開発する
仕様設計とコード規約にもとづきに開発環境を実装する
デザインシステムの設計、開発上のコード規約などが決まった段階で、開発環境の実装をはじめます。仕様設計ははじめの段階で正確に決まっているに越したことはありませんが、まずはチームで使える最小限のツールを用意する、という考えでもよいとおもいます。
また、はじめに設計を複雑にしすぎてしまうと、後に変更が必要となる際の工数も大きくなるといったことも起こり得ます。
UIライブラリを実装する
開発環境が出来上がってきた段階で、デザインされたUIライブラリの実装を行います。
決められたコード規約にもとづき、汎用的でメンテナンスがしやすいように各UIを実装します。
最適化のためのツールとテストフローの導入する
上記のUIライブラリが出来上がってきた段階で、開発環境に各UIライブラリのパフォーマンスの最適化ツールやテストツールを導入し、デザインシステムで提供するコードの品質向上を計ります。
まとめ
今回はデザインシステムを構築するプロセスの全体像をご紹介しました。
実際の構築にあたっては、上記の内容以外にもデザインシステムの影響のある各部署や経営層を含む意思決定者への提案であったり、チームアップ、デザインや実装以外に割く時間と工数も考えられるかとおもいます。
具体的なデザインや開発方法のアプローチに関しては、その他の記事でより詳細にご紹介していきたいとおもいます。
参考文献
A Design System isn’t a Project. It’s a Product, Serving Products.
Why Design Systems Fail ◆ 24 ways
Design Systems Handbook – DesignBetter
デザインシステムとは何か | 1人design system advent calender 1日目 – development log
The Minimum Viable Design System – Marcin Treder – Medium
Design System Features, Step-by-Step – EightShapes – Medium