デザインシステムの成熟度〜デザインシステムを改善する方法〜
この記事では、デザインシステムの成熟に向けたロードマップと、目標をより早く達成するためにプロセスを最適化する方法をわかりやすくご説明します。
ShopifyのPolarisやIBMのCarbon、AppleのiOSやGoogleのMaterial、SalesforceのLightningのような業界をリードするシステムと同じくらい、我々のデザインシステムは、こういった企業が成功を収めるために従った成熟度モデルを実現しなくても、よくできていて包括的です。
UXPinでは、組織のデザインシステムをデザインツール内に保存および管理できます。 結束と一貫性を維持するために、デザインシステムのガバナンスに合わせてアクセス許可を設定できます。 無料トライアルにサインアップして、次のデザインプロジェクトのためにUXPinを体験してみてください。
デザインシステムの重要性
一握りのデザイナーしかいないようなスタートアップ環境では、デベロッパーが製品の一貫性を維持するのは比較的簡単です。 しかし、製品が進化し、チームが成長するにつれて、デザインシステムの重要性が増します。 複数のデザインチームがデザインの引き継ぎ段階に到達し、それぞれがデザインシステムのコンポーネントを独自に解釈している場合、製品の機能は一貫性に欠けてしまいます。
そうなると、デベロッパーは常にゼロからコーディングしなければいけなくなり、ユーザーは不満を募らせてイライラしたり、製品を完全に使わなくなってしまう可能性があります。 デザインシステムがあることで、UXデザイナーや製品チーム、およびエンジニアは共通認識を保つことができ、一貫性を維持しながらインターフェースをより速く構築できるのです。
特に製品が進化するにつれて、デザイナーは完全性と一貫性を維持するためにデザインシステムのガバナンス手順に従わなければいけません。 そのための目標は、デザインシステムが拡張可能なビルディングブロックを提供するため、デザイナーとエンジニアがコーディングをほとんど全く行わずに製品を立ち上げることができる段階に達することです。
その目標を達成するということは、組織は、成長するための柔軟性を促進するデザインシステム成熟度モデルに従わなければならないということです。
デザインシステムの成熟度の段階
世界中の組織がデザインシステム成熟度モデルをいくつか使用していますが、我々はIressのモデルが消化、複製、拡張がしやすいことがわかりました。
デザインシステムのプロダクトオーナーであり、Iressのプロダクトデザインの地域責任者であるニック・エリオット氏は、NSW州政府のデザインシステムプロダクトマネージャーであるTJ Harropからこのモデルのヒントを得ました。 これは、デザインシステムの成熟を達成するために必要な手順の概要を示す4段階のプロセスです。
- 第1ステージ–スタイルガイド
- 第2ステージ–HTMLとCSS
- 第3ステージ–デザインおよびコード化されたコンポーネント
- 第4ステージ–完全統合
特筆すべきは、Iressがステージ1から4に到達するのに8年かかった点です。デザインシステムの開発は短距離走ではなく、長距離走でなのです。
第１ステージ- スタイルガイド
第1ステージの場合、組織にはデザインシステムがありませんが、共通のアセットがいくつか設定されている可能性があります。 ほとんどのスタートアップ企業はこの段階にいると思いますが、多くの確立された組織もまたステージ1にいます！ デザインシステムの成熟度のこの初期段階で、チームは製品アセットをデザインし、ブランドの一貫性を開発します。このアセットは、デザイナーがアセットを作成する際に使用するPDFスタイルガイドに保存されます。 
こういったスタイルガイドはある程度の一貫性がありますが、デザイナーは多くの場合、独自のバージョンのデザインシステムをデザインツールに保存しています。 デザインシステムの複数の解釈によるズレや不整合があるため、デザインの引き継ぎはしばしば収拾がつかなくなります。
第1ステージのもう1つの問題は、PDFスタイルガイドが拡張性に乏しいということです。少なくとも正確性や一貫性はありません。 スタイルガイドの新しいバージョンをリリースする場合、デザイナーは変更に注意し、アセットを手動で更新する必要があります。 より多くの手間がかかることになり、市場投入までの時間が長引いてしまいます。
組織がこれらのデザインの問題に悩まされていたら、今こそスケーラブルなデザインシステムを開発するための戦略を実行するときです。
第2ステージ - HTMLとCSS
第2ステージでは、デザインシステムコンポーネントがHTMLとCSSのスニペットに確定されます。 これがよくなっているとはいえ、デザインシステムは、デザイナーやエンジニアがインターフェースを構築するために取得できるビルディングブロックではなく、ガイドラインであることに変わりはないのです。
解釈は自由なので、デザインのズレとエラーが依然として定期的に発生するということも言えます。 HTMLとCSSスニペットも定期的な更新が必要です。つまり、DesignOpsとDevOpsは、デザインシステムを手動で同期するために絶えず通信しなければならないということです。
第3ステージ - デザインとコード化されたコンポーネント
多くの企業が第3ステージでいつまでも滞っています。 組織にはデザインシステムがあり、パターンライブラリとコンポーネントを更新する前にガバナンス手順を踏みます。 デザインシステムは完全に文書化されており、オンボーディングを合理化し、エラーを減らします。 
組織には通常、デザインシステムの維持と更新を行う専任のチームがありますが、DesignOpsとDevOpsは、信頼できる唯一の情報源を維持するための共同作業が不可欠です。 これにより一貫性が向上しますが、このプロセスはコストがかかる上に非効率的です。
それでも、デザイナーはデザインシステムコンポーネントを使用してインターフェースを構築できるため、プロトタイピングとテストはずっと速いです。 それによって、デザイナーとエンジニアには必要なコンポーネントがあるため、市場投入までの時間を大幅に短縮できます。
第4ステージ - 完全統合
完全に統合されたデザインシステムにより、デザイナーとエンジニアは信頼できる唯一の情報源で作業します。 新しいデジタル製品を構築するために、デザインのズレもなく、コーディングも必要ないと言っていいくらいです。 デザインシステムは自動的に同期されるため、製品チーム、UXデザイナー、エンジニアは常に同じコンポーネントを使用します。 一貫性はもはや問題ではなく、チームメンバーは、デザインやコードの問題の修正よりも、より多くの時間をかけてユーザーの調査とユーザーエクスペリエンスの向上に取り組めます。 チームは隙間なく製品のデザインやローンチができ、デベロッパーはコピー＆ペーストするだけなので、引き継ぎ中のコミュニケーションは最小限で済みます。 多くの組織にとって、このデザインシステム成熟度モデルの第4ステージは、ありえない夢のように思えるかもしれません。
しかし、実際は、多くの苦痛は避けられるし、第4ステージに進んでデザインシステムの目標を思ったよりも早く達成できるのです！
UXPinMergeで第4ステージへ
ツールとソリューションのレビューに12か月かけた後、ニックとIressのチームはUXPin Mergeと出会いました。 UXPin Mergeでリポジトリのコードコンポーネントをデザインエディタと同期できるため、デザイナーとエンジニアはまったく同じデザインシステムで作業できます。 
UXPinMergeのコードベースのソリューションを使用すると、第2・第3ステージを飛び越えて、多くの組織が耐えなければならない苦痛を味わうことなくデザインシステムの成熟に到達できます。 UXPin Mergeを使用すると、デザインシステムの成熟度モデルは2段階の反復プロセスになります。
- 第1ステージ - コンポーネントのデザイン：UXPinを使用して、製品の要素とコンポーネントをデザインします。エンジニアは、スペックモードを使用して、コンポーネントをコーディングするための自動生成されたスタイルガイドを作成できます。デザイナーは、すべてのチームメンバーが同じパーツにアクセスできるように、どんなコンポーネントも共有デザインシステムに保存することができます。
- 第2ステージ – UXPinMergeとの完全統合：製品の第一弾がリリースされると、デザイナーが完全に機能するコードコンポーネントを使用して新しい機能を構築できるように、エンジニアはコンポーネントをレポジトリに保存します。 デザインシステムの更新が必要であれば、第1ステージに戻って繰り返します。
UXPinのコードベースのデザインで、デザインシステムの目標をより早く達成し、プロトタイピングをより高いレベルにしましょう。 14日間のトライアルにサインアップして、次のデザインプロジェクトのためにUXPinの機能を体験してみてください。
