デザインシステムのロードマップを作成する方法

  

デザインシステムの構築というのは、時間と費用のかかる作業です。 しかし、多くの組織に見られるように、メリットはコストをはるかに上回ります。 デザインシステムのロードマップにより、チームメンバーとステークホルダーは、デザインシステムの成熟度、目処、およびタイムラインをモニタリングできます。  

この記事では、着手したばかりでも、既存のデザインシステムを拡張したい場合でも、デザインシステムが与えるインパクトをステークホルダーに納得させ、その価値を高めて採用を促進させる方法についての見解を述べていきます。  

UXPinを使用すると、デザインシステムをゼロから構築することや、Merge機能を用いて既存のUIコンポーネントライブラリを同期するのが簡単にできます。 無料お試しを申し込んで、世界で最も先進的なコードベースのデザインツールを体験してみてください。  

デザインシステム のロードマップとは？

デザインシステムのロードマップは、タイムライン、タスク、目処、および成果物をグラフ化した高レベルの作業文書です。 製品ロードマップと同様に、チームメンバーとステークホルダーが着手と目処を視覚化して透明性を高め、予測を管理するためのタイムライン形式の戦略計画です。  

デザインシステムチーム（またはDesignOps）は、今後数か月の間に何が行われるかを誰でも確認できるように、ロードマップを通常四半期ごとに編成して発表します。  

典型的なデザインシステムのロードマップには、次のものが含まれます。

• 最近のリリース
• チームが現在取り組んでいること
• チームが次に取り組むこと
• 今後のリリース（6〜12か月前）

なぜロードマップが必要なのか？

チームとステークホルダーにとって、以下の目的によりデザインシステムのロードマップが必要になります。

• チームがデザインシステムの展開を計画して優先順位を付けることができます
• デザインシステムのロードマップにより、ステークホルダーは進捗状況を確認し、リリースのROIを測れます
• チームはロードマップを元に製品リリースを計画できます
• チームや部門間のコミュニケーションとコラボレーションを改善します
• 役割と責任を明確にします
• 一貫性を維持し、チームメンバーが同じ作業を繰り返すのを防ぎます

リリース計画とロードマップの違いは？

  ロードマップは、デザインシステムのリリース段階と目処についての概要を示す高レベルの全体像ですが、リリース計画は、各段階と目処を確実に達成するためにチームがやっていかなければいけない、特定の手順の詳細な所見です。  

  チームは、リリース計画の詳細や個々のタスクに必ずしも関心がないステークホルダーや顧客とやり取りをするのに、デザインシステムのロードマップを使います。  

デザインシステムのリリース計画は、リーダーが他のチームや部門と連携するのに最も有益です。  

各ドキュメントは、それぞれ特定の目的を持って作られているので、デザインシステムのロードマップには全てロードマップとリリース計画が必要です。 Productboardのこの記事では、リリース計画とロードマップの違いと、ロードマップを視覚化および管理するための便利なツールについてより詳しく説明しています。  

デザインシステム のロードマップの作り方

   以下は、デザインシステムのロードマップを作成する7つのステップの概要です。Nielsen Norman Groupのこの記事を、大まかなガイドとして使います。  

1. 目標の設定
2. 監査
3. 調査
4. ビルドの確定
5. 優先順位の設定
6. ビルド
7. 維持

ステップ１ー　目標の設定

最初のステップは、デザインシステムを構築し、ロードマップを作成する目的を確立することです。 ここで設定された目標は、プロセスを通してガイドし、後でデザインシステムのロードマップに優先順位を付けるのに役立ちます。  

ステップ２ー　監査

製品とユーザーインターフェースを監査して、各スタイル、要素、およびコンポーネントを一覧表示します。 この監査は、不整合やエラーを特定する絶好の機会です。  

監査は次の4つのカテゴリに分類できます

1. スタイル：色、フォント、サイズ、間隔など。
2. アセット：画像、動画、アイコン、ロゴ、その他の視覚的なデザイン要素
3. UIコンポーネント：ボタン、CTA、カード、フォーム、モーダル、パンくずリストなど。
4. インタラクション：アニメーション、マイクロインタラクション、その他のモーションアイテム

あくまでガイドラインとして使用してください。 組織では、デザインシステムの各部分に異なる名前またはカテゴリが使用されている場合があります。

ステップ３ー　調査

次に、デザインシステムのユーザー（UXデザイナー、製品チーム、エンジニア）にインタビューして、現在のワークフロー、問題点の特定、彼らがデザインシステムからどのようにメリットが得られるか（またはどのように既存のデザインシステムを改善させるか）を把握します。  

また、既存のアーティファクトのコピーを集めることもできます。

例：

• 以前のロードマップとデザインシステムのドキュメント
• デザインシステムガバナンスのドキュメント
• ユーザージャーニー
• IA　（情報アーキテクチャ）
• スタイルガイド
• バックログ（設計および開発）
• UX戦略
• UX監査

  作業が重複しないようにし、新しいデザインシステムのロードマップが現在の戦略、プロセスやプロトコルと確実に一致するようにするのが、これらのドキュメントを収集する目的です。  

ステップ４ー　ビルドの確定

監査と調査を使用して、構築する必要のあるデザインシステムの部分を明らかにします。 デザインシステムのパートを、監査で使用したカテゴリに分けます。  

EightShapesのネイサン・カーティス氏は、最初にホワイトボードと付箋を使って、5つのカテゴリの「構築する部分」を特定し、次に「今、もうすぐ、後で、待機」順に並べます。  

構築または修正する必要のあるデザインシステムの各部分を全て確定して一覧表示することが目標です。

ステップ５ー　優先順位の設定

  構築する必要のある部分を全部リストアップしたら、それに優先順位を付けて、デザインシステムのロードマップのタイムラインを作成します。  

   

ゼロからデザインシステムを構築する場合は、まずは基本的なスタイルと要素を優先します。 ブラッド・フロスト氏のアトミックデザインメソッドを使用して、デザインシステムを最小の部品とスケールに分けることをお勧めします。  

  既存のデザインシステムの場合、ユーザビリティとアクセシビリティの問題に関連する要素とコンポーネントを最優先します。  

ステップ６ー　ビルドとテスト

ロードマップができたら、設計者はデザインシステムの構築を始めます。 我々は、UXPinの開発と、40人以上の設計およびエンジニアリングのリーダーへのインタビューで得た経験に基づいて、デザインシステムを構築するためのステップバイステップガイドを作成しました。  

  12ステップのプロセスには、UIインベントリのカタログ化、組織の賛同の取得、デザインシステムチームの編成、デザインシステムガバナンスの確立、標準化、追加のリソースなどが含まれています。  

リリース前に、UXデザイナーは、使いやすさとアクセシビリティの基準を満たしているか、新しいコンポーネントをテストしなければいけません。 ガバナンスのシステムの実行によって、チームはリリース前に確実に正しいプロセスとプロトコルに従うことができます。  

設計者は、新しいデザインシステムコンポーネントのリリース前に正確なテストができるように、コードのような機能を備えた忠実度の高いプロトタイプを、UXPinを使って作成します。 高度なインタラクション、ステート、変数、およびエクスプレッションを使用して、最終製品のような見栄えと機能のプロトタイプを作成します。

ステップ７ー　維持

デザインシステムが完成することはありません。 デザインシステムは製品と共に進化し、設計と開発の間の信頼できる唯一の情報源に到達するまで、いくつかのデザインシステムの成熟の段階を経ます。  

デザインシステムのロードマップも、完成することはありません。 デザインチームは、組織とステークホルダーを最新の状態に保つために、少なくとも四半期に1回はロードマップを再検討し、改訂する必要があります。  

デザインシステム のロードマップを作成するための最善法7つ

１．部門の枠を超えたチームの構築　UXデザイナー、プロダクトマネージャー、エンジニアを含む部門の枠を超えたチームを構築して、デザインシステムのロードマップを作成および管理します。 クロスファンクショナルチームで、複数の部門からの設計システムの支持者を確保して賛同と使用の可能性を高めます。

２．問題の確定　デザインシステムとロードマップを使用して、解決しようとしている問題を明らかにします。 製品と組織には、それぞれに固有の問題と優先順位があります。 問題を明らかにすることで、どこから始めて、どのように目標に優先順位を付けるかがわかります。

３．目標と目処の設定　チームが目標を設定し、いつ各タスクを正しく完了したことを確認できるように、デザインシステムとロードマップの目標と目処を設定します。

４．フィードバックと貢献の奨励　組織全体、特にUXデザイナー、製品チーム、エンジニアからのフィードバックと貢献を奨励します。 このインプットにより、賛同が高まり、チームにデザインシステムの所有権が与えられます。

５．ソフトローンチの活用とプロジェクトのテスト　デザインシステムをリリースや拡張する前に、ソフトローンチを行い、社内チームとプロジェクトをテストして、早期の見解を得ます。 これらのソフトローンチにより、制御された環境の問題点を特定でき、それによって変更や修正の実行がしやすくなります。 ６．ツールを見つける　デザインシステムとロードマップの管理に役立つツールを見つけましょう。 正しいツールを使用すれば、ワークフローを最適化し、時間のかかる管理タスクを自動化できるため、デザインシステムのROIが向上します。

７．設計トークンと標準化された命名規則の実行　最初のコンポーネントの設計をこれから始めるという時でも、設計トークンと標準化された命名規則を実行します。 これらのデザイントークンで、デザインシステムを拡張するときに、まとまりと一貫性を維持しやすくなります。

UXPinを使用したデザインシステムの作成と拡張

UXPinは、組織がデザインシステムをゼロから構築したり、成熟のどの段階での既存のデザインシステムを管理したりするためのソリューションを提供します。  

ゼロからの構築

デザインシステムはUXPinで簡単に作成できます。 外部ツールやプラグインを使用せずに、1つのユーザーインターフェースからデザインシステムを構築、共有、管理、および拡張できます。  

各デザインシステムは、色、文字デザイン、アセット、コンポーネントの4つの部門で構成されています。 設計者は、ドキュメントの説明を含めたり、チームメンバーが不正な変更を加えないように権限を設定したりすることもできます。  

無料お試しを申し込んで、UXPinで初めてのデザインシステムコンポーネント構築がいかに簡単かを体験してみてください。  

デザインシステムの成熟度のためのUXPin Merge

  UXPin Mergeは、古いデザインシステムを備えた組織に最適なソリューションです。 Mergeを使用すると、コードコンポーネントをリポジトリからUXPinのエディターに同期できるため、UXデザイナーと製品チームは完全に機能するプロトタイプを作成できます。  

Mergeは、1つのデザインシステムを維持するだけでよいため、デザインと開発の間のギャップを埋めることにより、信頼できる唯一の情報源（Single Source of Truth）を作成しながら、多くのDesignOpsの課題を解決します。 リポジトリへの更新は、どれも自動的にエディターに同期され、UXPinは設計チームに変更を通知します。  

  Vue、Angular、Ember、Webコンポーネントなどの他の一般的なフロントエンドフレームワークのGit統合またはStorybookを使用してReactコンポーネントを同期できます。  

 UXPin Mergeの詳細を確認し、この強力なコードベースの設計テクノロジへのアクセスを申し込んでください。