デザインシステム104: メトリクスを重要視する

データを見れば一目瞭然: Figmaのデータサイエンスチームは、デザインシステムにアクセスできるデザイナーは、システムにアクセスできないデザイナーに比べて34%速くタスクを完了していることを明らかにしました。これを具体的に例を挙げて考えてみましょう。、7人のプロダクトデザイナーからなるチームの場合、各デザイナーは、週に20時間の集中的なデザイン作業時間を確保しているということです。デザインシステムによって効率性が34％向上するということは、毎週3.5人のデザイナーをチームに追加するようなものです。Vanguardのような企業では、適切なシステムが整っている場合、デザインの更新速度は50%速くなりますが、こうした成果は時間とともに劇的に積み重なっていきます。

チームが最初にデザインシステムを構築する際は、コンポーネントとドキュメントの作成に集中しがちですが、導入と使用状況を測定することで、真のビジネスへの影響が明らかになります。Headspaceのような企業は、トークンとバリアブルを使用することで、%–30%シンプルなタスクで20倍の時間を節約し、複雑なプロジェクトでは最大50%の時間を節約しています。一方でSwiggyは、堅牢なトラッキングを実装した後に、機能の展開時間を半分に削減しました。これらのメトリクスは、一貫性、効率性、そしてスケーラビリティを向上させるための明確な道筋を示しています。

デザインシステム入門のパート4へようこそ。前回の記事をまだお読みになっていない方は、デザインシステムとは?、デザインシステムの構築方法、および導入を促進するドキュメンテントをご覧ください。

シグナルを読み取る

デザインシステムには、使用状況のメトリクス、導入率、一貫性スコアなど、さまざまなパフォーマンス指標があります。しかし、どの指標が自分の組織にとって最適なのでしょうか?コンポーネントが使用された回数や、デザイントークンが適用された回数などは、デザインシステムのどの部分が真に機能しているかを見極める手がかりになります。さらに、コンポーネントの再利用によって節約される貴重な時間も見逃せません。これは定量的に示すことができる利点であり、ステークホルダーやチームの双方から支持を勝ち取る大きな要素となります。

追跡を検討すべき主なメトリクスには以下が含まれます。

• ライブラリとコンポーネントの使用状況: どのコンポーネント、バリアブル、スタイルが最も頻繁に使用されているか、あるいはどれが使用されていないかを監視します。このデータは、改善の余地がある要素や、使用頻度の低い要素を廃止する機会を見極めるのに役立ちます。
• ドキュメントの効果的な活用: チームがドキュメントをどのように活用しているかを追跡します。よく閲覧されるページや頻繁に検索されるキーワードを分析することで、チームがどこに最もガイダンスを求めているかが明らかになります。
• 一貫性の測定: コンポーネントの切り離しやスタイルの上書きに見られる傾向を探しましょう。そうした傾向は、デザインシステムがチームのニーズに十分応えられていない領域を示している可能性があります。

athenahealthのシニアUXデザイナー、Veronica Agneにとって、コンポーネントの切り離し率は特に価値のあるインサイトを示しています。「組織内で誰かがコンポーネントを切り離しているのなら、その理由を知りたいのです」とVeronicaは言います。「理由は次の3つのいずれかです。バグがある、まだ実装されていない機能の拡張を求めている、あるいは私が予想していなかった方法で既存の要素を組み合わせている。私はそのすべての答えに関心があります。」

この手がかりを探る作業がついに実を結んだのは、最近Veronicaがあるコンテナコンポーネントの切り離しが増えていることに気づいたときでした。「自動レイアウトに少し問題があり、期待した通りに折り返されなかったことがありました。」「多くの人がそれを切り離しているのを見て、おそらくそれが原因だと気づきました。誰かが何が問題かを伝えてくれるのを待たずに、その問題に対応することができました。」Veronicaは、データサイエンスとアナリティクスの分野での経験を経て、現在はathenahealthのForgeデザインシステムの設計をリードしていますが、大規模に運用されるシステムの成功度を測るうえで、ユニークな視点を取り入れています。何百人ものデザイナー、開発者、プロダクトマネージャーがこのシステムを利用しており、毎月10万件に及ぶコンポーネントの挿入が行われています。

ツールと自動化を活用する

一貫性スコアやアクセシビリティへの準拠は、デザインシステムの健全性を示す重要なサインとなります。監視を定期的な点検ではなく、日常的なルーティンの一部として捉えることで、問題が深刻化する前に早期に察知できる可能性が高まります。自動化を取り入れることで、チームはデータ追跡の細かな作業に煩わされることなく、本来の強みであるデザインとイノベーションに集中できるようになります。プラグイン、ビルドスクリプト、テストフレームワークなどを活用すると、手作業のタスクは効率性と正確性へと置き換えられます。

2025年2月11日より、Figmaの更新されたライブラリアナリティクスでは、組織およびエンタープライズのお客様は、デザイン環境を離れなくても、その公開されたライブラリがどのように使用されているかについてより深いインサイトを得ることができます。チームは、既存のコンポーネント分析に加えて、バリアブルやスタイルの採用状況をFigma内で直接追跡できるようになりました。これにより、組織全体でのデザインシステムの使用状況をより簡単に理解できるようになります。ライブラリアナリティクスには以下が含まれます:

• コンポーネント: 使用パターンを監視し、チームが最も頻繁に使用している要素を特定します
• スタイル: ファイル全体で、色、種類、エフェクトスタイルがどのように実装されているかを追跡します
• バリアブル: トークンや動的プロパティがどのように活用されているかを把握します

新しいライブラリアナリティクスAPIでは、エンタープライズのお客様向けに、アナリティクスビューをカスタマイズするためのさらに柔軟なオプションが提供されます。チームは特定の期間にわたる使用パターンを確認したり、異なる種類のデータを組み合わせたり、デザインシステムのメトリクスを既存のツールやワークフローと統合したりできます。

データを実用化する

athenahealthでは、Veronicaと彼女のチームがFigmaの最新のライブラリアナリティクスの追加機能をいち早く試し、メトリクスから改善へと導くプロセスの一環として活用しています。「Figmaの最新のライブラリアナリティクスを使用して、コンポーネントがいつどのように切り離され、その理由は何かをより詳細に把握できるようになりました」とVeronicaは述べています。Veronicaのチームは、カスタムスクリプトを使用してAPIデータを詳細なレポートに変換し、コンポーネントの種類や予想される切り離し率などのコンテキストを追加し、それをTableauのダッシュボードで毎月視覚化してレビューしています。

このデータをもとに、次の3段階のプロセスを推進します。

1. 診断: 明らかな問題がないかコンポーネントを確認する
2. ユーザーへの働きかけ: チームと連携し、ニーズを把握する
3. 実装: 必要な改善に向けてチケットを作成する(Figmaまたはコードで)

「私たちは、デザインシステムに問題がないことを常に確認するよう努めています」とVeronicaは言います。「人々は、自分が抱えている問題をすべて報告しようとはしません。もし、問題が存在することを示す別のメトリクスがあれば、誰かから何かがおかしいと伝えてもらうまで待たなくても済むのです。」

Microsoftでも、デザインシステムのアナリティクスをフィードバックの一形態として活用しています。「MicrosoftではFluent Design Systemを使っているチームが非常に多く、すべてのチームから何がうまく機能していて、何がそうでないのかについてのフィードバックを必ずしも得られるわけではありません」と、以前Fluentのプリンシパルデザイナーを務めていたMicrosoftのDamien Aistropeは述べています。「だからこそ、このアナリティクスは、使用されていないコンポーネントを確認し、そのメンテナンスが必要ないと判断したり、また頻繁に切り離されているコンポーネントを見つけて、アップデートが必要かどうかを判断したりするのに役立っているのです。」

影響を測定するためのベストプラクティス

これからメトリクスの追跡を始めたい、あるいは改善したいと考えているチームに対して、Veronicaは「過去にさかのぼるアプローチ」を勧めています。「未来を見ようとする前に、まずは過去を振り返ってみてください。ライブラリアナリティクスを使えば、1年前にさかのぼって、すでに結果がわかっている期間に何が起きていたのかを検証できます。それはまるでモデル学習のようなもので、どのような要因がそうした結果につながったのかを検討し、それをもとに今後何に注目すべきかを特定することができます。

メトリクスを追跡することの利点は明らかですが、そのプロセスには課題も伴います。たとえば、データの品質を維持すること、ステークホルダーの理解と賛同を得ること、そして得られたインサイトを具体的な行動につなげることです。その他のベストプラクティスには以下が含まれます。

• 早期かつ頻繁な測定: メトリクスの追跡は、リリース後まで待たずに、今すぐ始めましょう。早期に測定することで、組織全体の問題となる前に、導入の障壁や改善の機会を特定することができます。
• ビジネス目標に合致した明確な目標を設定する: メトリクスを具体的な成果に結びつけます。導入を増やそうとしていますか?一貫性を向上させたいですか?デザイン負債を削減したいですか?目的によって、重視すべきメトリクスが変わってきます。
• 表面的な数値だけでなく、その背景にも目を向けること: 切り離し率が高いからといって、必ずしも悪いとは限りません。カスタマイズを前提に設計されたコンポーネントであれば、それが意図通りに機能している可能性もあります。背景は重要です。
• インサイトをステークホルダーと広く共有すること: メトリクスを共有することで、デザインシステムへの理解と支持を広げ、効率性と一貫性に対するその効果を明確に示しましょう。

ビジネスプランおよびエンタープライズプラン向けの、 Figmaのアップデートされたライブラリアナリティクスの詳細については、こちらをご覧ください。

拡張性を考慮した計画

デザインシステムの成熟に伴い、メトリクスに対するアプローチも進化させる必要があります。メトリクス戦略を定期的に見直すことで、現在の開発段階において本当に重要なものが追跡されているかどうかを確認できます。チームや製品ごとにデータをセグメント化することで、より詳細なインサイトを得ることができ、どこに追加のサポートやカスタマイズが必要かを把握する助けになります。

メトリクスはあくまで目的を達成するための手段であることを忘れないでください。メトリクスを使用することで、より効果的で広く導入できるデザインシステムを構築し、チームの効率性を高め、製品の一貫性を向上させることができます。これらの測定値を活用して改善の方向性を見極め、価値を示し、デザインシステムが組織の進化するニーズに引き続き対応できるようにしていきましょう。