デザインシステム指標：デザインシステムの評価法

デザインシステムの構築と維持には時間とコストがかかりますが、デザインチームは、デザインシステムの価値をわかっています。しかしデザインシステムの価値を証明する指標を提示しなければ、経営陣やステークホルダーから賛同を得ることは難しいでしょう。ただ、デザイナーは以下のためにどのようにデザインシステムの指標を数値化するのでしょうか：

経営陣からリソースを確保するための賛同を得る
デザイナー，製品チーム，エンジニアリングチーム，その他のステークホルダーに，企業のデザインシステムおよびガバナンス手順を採用するよう促す

では、デザインシステムの利点と、経営陣、チーム、ステークホルダーに提示するための有意義な指標でどのようにデザインシステムの効果を測るのか見ていきましょう。

UXPinは、企業によるカスタムデザインシステムの構築、使用、保守をしやすくします。専用のサイドバーを使って、デザイナーはデザインシステムのコンポーネントライブラリから要素をドラッグし、ユーザーインターフェースをすばやく作成することができます。また、企業のデザインシステムガバナンスに従って制限を設けるために「アクセスできる人」と「編集できる人」を割り当てることができます。UXPinを使ったデザインシステムを作る準備はいいですか？14日間の無料トライアルにサインアップして、UXPinを使ったデザインの柔軟性と効率性を実感してください。

デザインシステムのメリット

デザインシステムのメリットは主に2つあります。

一貫性
効率性

ユーザビリティの問題を回避し、ブランドの一貫性を維持するには、デザインシステムが欠かせません。デザイナーは一人ひとり異なり、そのデザイン上の判断もそれぞれ異なるので、もしチームが自由に新しい要素やコンポーネントを作ることができれば、各イテレーションはチームや部署によって異なる外観になります。デザインシステムは、各チームメンバーが同じ要素やコンポーネントを使用し、一貫した美観と機能性を維持できるようにします。

この一貫性により、ユーザビリティテストが効率化され、全体的なユーザーエクスペリエンスが向上します。また、デザインシステムは効率を上げます。例えばデザイナーは、要素やコンポーネントをゼロから構築するのではなく、企業のデザインシステムから必要なものを取り出し、すぐにインターフェースの構築を始められます。

デザインチームは、一貫性と効率性によってエラーを最小限に抑えたり、生産性を上げて、最終的にROIと利益の向上につなげることができます。ただ、この出来栄えを測るには、正確なデザインシステムの指標をどのように集めればいいのでしょうか。

デザインシステム出来栄えの評価方法

デザインシステムの評価が必要な理由は2つあります：

新しいデザインシステムの採用：経営者やステークホルダーは通常、実現の可能性とメリットを見極めたいと考えているため。
デザインシステムの大幅な変更や更新の後：経営陣やステークホルダーは、その変更がコスト、効率、ユーザビリティ、アクセシビリティ、ワークフロー、デザインの引き継ぎにどのような影響を与えるかを知りたいと考えているため。

測定可能なKPIの作成

Devbridge社の情報満載のホワイトペーパーでは、クリストファー・ウィルキンソン氏が、「明確なKPIを設定して、組織内でのデザインシステムの有効性と採用を判断する」方法を大まかに説明しています。クリストファー氏は、測るべき3つの指標を主張しています。

チーム効率：組織のデザインシステムを使って、チームが新製品を作るのにかかる時間の測定
市場投入までのスピード ：チームがプロトタイプを作成し、テストするのにかかる時間の測定
コードへの影響：デベロッパーがリリースのたびにどれだけコードを変更したかの測定

まず、デザインシステムなしでこれらの指標を測って基準値を得、次にデザインシステムありでその影響を測ります。この3つの指標で以下ようなことが判断できます。

デザインシステムの有効性
新製品やユーザーインターフェースのプロトタイプの整合性
デザインシステムがワークフローに与える影響
デザインシステムによってエラー率やユーザビリティの問題が減少しているかどうか
デザインシステムによるアクセシビリティの向上
デザインシステムが引き継ぎに与える影響
デザインシステムにより、リリースのたびにコードが削減されるかどうか
デザインシステムが品質保証に与える影響

デザインシステムの出来栄えを測る定量的なデータとして、経営陣やステークホルダーに所見を提示することができます。

デザインシステムの価値の証明

Somoのジャック・ライネルト氏は、デザインシステムの価値を証明するための3ステップのプロセスを、詳細かつ情報満載の記事で概説しています。

確定：コンテキスト、目的、KPI、およびステークホルダーの理解
測定：定量的・定性的な調査やデータの利用
伝達：ステークホルダーにとって最も重要なデータの理解及び提示

ステップ1：確定

デザインシステムの価値を測る前に、以下の4つの要素を決めなければいけません：

コンテキスト：何がデザインシステムを必要とさせるのか、そしてそれが企業にどんな価値をもたらすのか
目的：デザインシステムの目的は何か、それが企業のミッションとどのように合致しているか、デザインシステムをすべてのチームが利用できるようにするにはどうするか
KPI：デザインシステムの出来栄えの評価法の明確化（アイデアについては、上記の「測定可能なKPIの作成」のセクションをお読みください）

ステークホルダー：ステークホルダーの目標の理解による、彼らにとって最も重要な指標の把握。CEO、CFO、CTOで、それぞれ異なる優先順位を持っていることの認識。各ステークホルダーにとって最も重要なデータの提示が目標

ステップ２：測定

デザインシステムの価値は、以下の2つの方法で測ることができます。

定量的測定：企業全体のカバー率、ユーザー調査、ビジネスバリューが含まれます。デザインシステム導入の成功を測定するための基準値を必ず取得しましょう。ジャック・ライネルト氏も、デザインシステムのパフォーマンスの追跡のために、半年ごとにデータを再実行することを推奨しています。
定性的測定：経営陣やステークホルダーは、デザインシステムがチームに与える影響を理解しておきたいと思っており、また、色々な部門からのフィードバックは、定量的なデータを補完することができます。

効率と価値を定量化するためには、ベースライン（現在のデザイン方法）とデザインシステムの影響の比較が必要になります。以下は、定量的なデータを集めて比較したい指標です：

部品一点あたりのデザインにかかる平均時間
時間当たりの平均デザインコスト
デザインシステムを利用しているデザイナーの数
デザイナー一人あたりが一ヶ月に新規部品デザインに費やした時間
ひと月あたりのデザイン時間
月額費用

月間と年間両方の費用の見積もりを出しましょう。

ステップ3：伝達

デザインの成果やデザインシステムの価値を伝えることは、リソースの確保や企業全体への導入のための賛同を得るために重要です。それには、例えばデザインシステムでどのように時間と費用が抑えられるのかなど、デザインシステムでビジネス価値が生み出されることを証明しなければなりません。

デザインの成果やデザインシステムの価値を伝えることは、リソースの確保や企業全体への導入のための賛同を得るために重要です。それには、例えばデザインシステムでどのように時間と費用が抑えられるのかなど、デザインシステムでビジネス価値が生み出されることを証明しなければなりません。各部門の責任者がデザインシステムが自身のチームにどのような利益をもたらすのか分かるように、フィードバックを忘れずに提示しましょう。

例えば、CFOは時間とお金の節約が気になるかもしれませんし、CTOは市場投入までのスピードとコード行数の削減に対するデザインシステムの影響を知りたいと思うかもしれません。

デザインシステムのパフォーマンスを追跡し、経営陣やステークホルダーに定期的（通常2年に1回または四半期に1回）に報告するシステムを確立しましょう。また、デザインシステムのロードマップ、時間をかけて価値を最大化する計画、新しいツールや手順の実行に必要なリソースなど、詳細の説明もできます。 「デザインシステムの価値を証明する」については、Somoのブログポストをご覧ください。

また、1時間のウェビナーもありますので、こちらもご覧ください。

デザインシステムの価値を最大化するには

デザインシステムの導入は最初の一歩に過ぎません。デザインシステムを導入したら、その価値を最大化するための方法を模索しないといけません。

価値を最大化するためのツールの導入

多くの企業が経験する課題のひとつに、デザイナー、デベロッパー、プロダクトデザイナーのための信頼できる唯一の情報源（Single source of truth）をどのように管理するかということがあります。手作業を最小限に抑え、ツールとデザインシステムを同期させるには、どうすればよいのでしょうか。

PayPalは、従来のデザインアプローチからUXPin Mergeに切り替え、Microsoft Fluent Design SystemとGithubレポを同期させることで、この信頼できる唯一の情報源（Single source of truth）の課題を解決し、PayPalのDesignOpsのきっかけを作りました。

UXPin Mergeは、デザイナー、製品チーム、デベロッパーがまったく同じコンポーネントで作業できるように、コードコンポーネントとデザインエディタを同期させることができます。デザイナーと製品チームは、他のデザインシステムと同じように、これらのコンポーネントを使用してインターフェースを構築します。

UXPin Mergeに切り替えることで、PayPalの製品チームはデザイナーからのインプットを最小限に抑え、従来のデザインツールを使用していた時と比べてわずかな時間で新製品とインターフェースを構築できるようになりました。

実際、PayPalのプロダクトデザイナーは、デザイナーがアドバイスや指導を行いながら、新製品の90％を作り上げています。 UXPin Mergeのようなツールを見つけてデザインシステムを最適化することで、企業全体への導入を進めながら効果を発揮することができます。

効果的なガバナンス

ガバナンスは、デザインシステムを成功させ、長期的に一貫性を保つのにとても重要です。良いガバナンスがなければ、デザインシステムはすぐダメになり、最初に解決した以上の問題を引き起こす可能性があります。企業の規模にもよりますが、以下のようなデザインシステム標準の確立、維持のためにデザインチームを設けることが望ましいです。

新要素の導入方法
パターンの推進
パターンの見直しと適用
デザインシステムのアップデートの公開

これらの基準を設けることで、デザインシステムのその完全性、一貫性が維持され、製品や企業に継続的に価値をもたらすことができるようになるのです。

UXPinによるデザインシステムの作成と管理

UXPinでは、デザインエディタとは別の専用のデザインシステムダッシュボードから、企業の完全な制御を担うことができます。

ここでデザインシステムチームは、デザインシステムの作成、管理、更新を行うことができ、また、チームメンバーが勝手に変更できないように権限を設定することもでき、これによってガバナンスの標準と一貫性が維持されます。 UXPinには、4つのデザインシステムカテゴリーがあります。

カラー：プライマリー、セカンダリー、サクセスなど、デザインシステムに必要な数だけパレットを設定します
文字デザイン：エディターでこれらを設定した後、フォント、サイズ、ウェイトなどのテキストスタイルを表示することができます
アセット：ロゴなどのアセットをSVG形式でアップロードします
コンポーネント：トポグラフィーと同様に、コンポーネントを作成し、エディタで保存することができます

開発チームがデザインシステムの変更を実施するためのドキュメントを提供するのに、ディスクリプションを使いましょう。世界最先端のデザイン・プロトタイピング・テストツールで、企業のデザインシステムを改善してビジネス価値を生みだしましょう。14日間の無料トライアルにサインアップして、UXPinのパワーと汎用性をご体験ください。