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