そのデザインシステムは投資対効果をもたらしますか？
2022年現在、ユーザーインタフェースのデザインやその開発について語る上で「デザインシステム」はどのような組織においても話題に上がるトピックではないでしょうか。
かく言う私もデザインシステムに強い関心を持っており、業務にてデザインシステムの構築・維持に取り組んでいる他、過去には私が魅力的だと思うデザインシステムを紹介するブログ記事を執筆しました。
0. デザインシステムの導入における障壁
昨今はデザインシステムを構築した事例や構築の方法論の共有も盛んとなっており、その強い話題性が起因して新たなデザインシステムが続々と誕生しています。話題になっているから・便利だから・品質を上げてくれるから・ユーザー体験が向上するからなど、導入の理由は組織・プロダクトに応じて多岐に渡ると思います。
上記の理由に加え、デザインシステムを構築する前に立ち止まって考えたいポイントが「投資対効果」です。
プロダクトに応じてデザインシステムの規模は可変する物ですが、規模の大小に関わらず導入・構築・維持にはコストを要します。業務にてデザインシステムを構築する際には、たとえ有志による取り組みであったとしてもそこに作業者の存在があり、その作業者に対価が支払われる以上は利益をもたらさないと損失が発生します。そして「デザインシステムは作って終わりじゃない」という考え方があるように、デザインシステムは構築するだけではなくプロダクトの成長に応じて維持と改善を行う必要があることからも、継続的にコストを必要とする存在です。
そこで私を含めたデザインシステムの構築・維持に取り組んでいる全ての方に尋ねたいのが「そのデザインシステムは投資対効果をもたらしますか？」という問いです。
デザインシステム導入の初段階は構築に大幅な工数を要しますが、その一方でプロジェクトに対して十分に価値を発揮することができない期間が発生してしまいます。デザインシステムはこのコストであり続ける期間を通過し、損益分岐点を超えて利益をもたらす存在になるのでしょうか。
逸話の一つに、本来は未来への投資をした方が多くの利益を得られるのにその投資を疎かにしてコストを払い続ける様子を、「木こり」と「研ぐ必要があるボロボロの斧」の関係性に見立てた「木こりのジレンマ」という話があります。
今日、数多のデザイナーやエンジニアがデザインシステムを研いでいます。しかしデザインシステムは本当に研ぐべき斧のような存在なのでしょうか。
また、デザインシステムのもう一つの問題は、デザイナーにとっては魅力的な価値を持っているものの、往々にしてその価値が経営者には伝わりづらいという点です。
デザインシステムの有用性が証明されても経営者への訴求が不十分である場合は、予算承認が得られずに導入に向けて取り組むことそのものが困難となってしまうでしょう。そのため経営者にデザインシステムの価値を適切に共有して納得してもらうことは、デザインシステムを導入する上で避けて通ることはできません。
本記事では前述した「デザイナーにとってデザインシステムの価値を経営者に訴求することはなぜ困難であるのか」と「デザインシステムは本当に投資対効果をもたらすソリューションであるのか」の2点の問題を対象に私自身の実例や事例を交えて考察をします。
ReDesigner Design Data Book 2022を公開しました🎊
— ReDesigner (@ReDesigner_jp) November 10, 2022
今年も100社にご協力いただき、デザイン投資や採用トレンドについてまとめました！
🗨️9割がデザイン投資効果を実感
🗨️副業・フリーランスなど様々な雇用形態での働き方の受け入れが加速
ダウンロードはこちら👇https://t.co/36kYazOzyU pic.twitter.com/zbi6ugchL5
※2019年と比べるとデザインそのものへの投資額は増加の傾向にあり、デザインの投資に効果を感じている企業は33%増えています。(ReDesigner Design Data Book 2022より)
1. デザインシステムの価値訴求はなぜ難しいのか
はじめに、「デザイナーにとってデザインシステムの価値を経営者に訴求することはなぜ困難であるのか」という問題について考えてみましょう。
私たちが訴求している価値とは
デザインシステムの価値は既にあらゆる媒体にて発信されており、その多くには「一貫性の向上」「ユーザー体験の向上」「実装速度の安定化」といった項目が列挙されています。これらはデザインシステムを導入することによって間違いなく恩恵を受けられる要素です。一方でこれらは私たちの視点によって列挙したデザイナー本位の価値という側面もあります。
デザインシステムの価値訴求が困難な物となっている要因の一つには、私たちデザイナーがそのような価値を一方的に訴求しているという背景があります。私たちがデザインシステムを適切に導入するためには、経営者にとっての価値を彼らと同じ視点で伝える必要があります。
経営者にとっての価値とは
経営者は特に以下のようなポイントを注視している傾向にあります。
投資対効果 (ROI) を見込むことはできるのか
デザインシステムが存在しない場合と存在する場合のパフォーマンスに優位な差はあるか
デザインシステムという抽象的な存在に取り組むのではなく機能の追加や負債の解消などの具体的な課題に取り組む方が利益に繋がるのではないか
これらの観点に共通するのは「投資と効果の差」「デザインシステムが存在する場合としない場合のパフォーマンスの差」「プロダクトへの直接的なコミットとデザインシステムを用いた間接的なコミットのそれぞれの利益の差」など、2つの項目を比較した際の差分に対して視点が向けられているという点です。
そして経営者にとっての価値とは、デザインシステムが持つ優位性によって現在・将来の組織課題が解決できることにあります。
私たちの視点は普段からデザインシステムによって受けられる効果に対して向いてしまいますが、経営者に価値を訴求するためには「デザインシステムの優位性と組織課題を解決する手段としての親和性」について伝える必要があります。
2. デザインシステムは投資対効果をもたらすソリューションなのか
続いて、この記事の本題とも言える「デザインシステムは本当に投資対効果をもたらすソリューションであるのか」という問題について考えてみましょう。本章ではデザインシステムの優位性を示すために、前章にて提示した経営者が重きを置く以下の観点について考察を行います。
投資対効果 (ROI) を見込むことはできるのか
デザインシステムが存在しない場合と存在する場合のパフォーマンスに優位な差はあるか
デザインシステムという抽象的な存在に取り組むのではなく機能の追加や負債の解消などの具体的な課題に取り組む方が利益に繋がるのではないか
ケース1: 数値から効果を測る
まずはデザインシステム (コンポーネントの再利用) によってどれだけ作業効率が上がるのかについて検証します。作業効率の計算にはKnapsackが提供しているDesign System ROI Calculatorの公式を使用します。
・・・
削減された工数の計算式
デザインシステムを使わない純粋な工数
= (デザイン工数 + 開発工数 + 保守工数) * コンポーネントの適応回数
デザインシステムを使用した場合の工数
(デザインシステムの構築に要する工数も含む)
= (デザイン工数 + 開発工数 + 保守工数) + ((デザインのキャッチアップ工数 + 開発のキャッチアップ工数) * コンポーネントの適応回数)
デザインシステムによって削減された工数
= デザインシステムを使わない純粋な工数 - デザインシステムを使用した場合の工数
削減された工数の計算例
※数値はDesign System ROI Calculatorのサンプルを使用
デザインシステムを使わない純粋な工数: 4,200時間
= (デザイン: 40時間 + 開発: 80時間 + 保守: 20時間) * コンポーネントの適応回数: 30回
デザインシステムを使用した場合の工数: 620時間
(デザインシステムの構築に要する工数も含む)
= (デザイン: 60時間 + 開発: 120時間 + 保守: 80時間) + ((デザインのキャッチアップ: 4時間 + 開発のキャッチアップ: 12時間) * コンポーネントの適応回数: 30回)
デザインシステムによって削減された工数: 3,580時間 (85%)
= デザインシステムを使わない純粋な工数: 4,200時間 - デザインシステムを使用した場合の工数: 620時間
この算出例に基づくとデザインシステムによって3,580時間もの工数を削減できる可能性があることが分かります。パーセンテージに置き換えると従来の工数の85%もの時間に相当します。この数値だけでもデザインシステムに優位な効果があることを強く証明することができます。
続いて、削減することができた工数を元に「投資対効果 (ROI) 」も算出します。算出には同様にDesign System ROI Calculatorの公式を使用します。
・・・
投資対効果の計算式
投資対効果
= 従業員一人当たりの平均的なコスト * デザインシステムの利用者数 * 削減される予想工数 (%)
投資対効果の計算例
※年間の投資対効果を算出
投資対効果: 81,600,000円
= 従業員一人当たりの平均的なコスト: 9,600,000円 * デザインシステムの利用者数: 10人 * 削減される予想工数: 85%
この算出例に基づくとデザインシステムによって81,600,000円もの投資対効果が得られることが分かります。約8000万もの削減効果が存在する可能性があるということは、デザインシステムの有益性を更に証明してくれる材料になるのではないでしょうか。
また、これらはデザイン・開発・保守のみに焦点を当てた数値であることから、オンボーディング・QA・コミュニケーションなどのここには含まれていない項目の効果も含めるとよりデザインシステムがもたらす効果の大きさを実感することができるでしょう。
そしてデザインシステムの真の魅力とは、削減することができたコストを用いて本質的な課題に取り組むことでプロダクトを更にアップデートできることにあります。
さまざまな組織における削減されうる工数や投資対効果は本章にて紹介したDesign System ROI Calculatorを使用して簡単にシミュレートできます。算出した数値は経営者にデザインシステムの価値を示すための強力な材料になるため、ぜひ一度ご自身の組織にもたらす効果を測定してみると良いでしょう。
ケース2: Figmaの実験から効果を測る
ケース1では計算式を元にデザインシステムの効果を検証しました。ケース2ではFigmaが行った実験の事例を元にデザインシステムの有用性を考察します。
Figmaは「適切に維持されたデザインシステムがデザイナーの時間をどれだけ削減できるのか」を定量化するための実験を実施しました。実験は以下のプロセスで行われました。
被験者に2件のUIデザインのタスクを与える
タスクはいずれも同じ時間で終えられるものを用意
一方のタスクはデザインシステムを用いて実施し、もう一つのタスクは古いデザインデータを用いて実施する
被験者のバイアスを排除するためにタスクを行う順番は被験者ごとに入れ替える
各タスクを完了するのにかかった時間を測定する
実験の結果、被験者はデザインシステムを使用することで、デザインシステムを使えない場合よりも34%も早くタスクを終えられることがわかりました。
この実験結果を踏まえると、例えばデザインチームが7名で構成されており、デザインをするための工数が一人あたり一週間に20時間であるならばチームの総デザイン工数は140時間となります。そしてデザインシステムを使わずにデザインを行う場合の作業工数も単純に140時間分となります。
一方でデザインシステムを用いてデザインを行う場合は同じ140時間でも34%も多くの作業を遂行できるため、212時間相当の成果を生み出すことができます。これは毎週3.5人のデザイナーをチームに追加することと同等の効果があることを意味します。
この実験によってデザインシステムが存在しない場合と存在する場合におけるパフォーマンスに優位な差があることを示すことができます。また、デザインシステムはチームの生産性を向上させるためのソリューションとして効果的であることも同様に示すことができます。
ケース3: Sparkboxの実験から効果を測る
ケース3ではSparkboxが行った実験の事例を元にデザインシステムの有用性を考察します。
Sparkboxは「デザインシステムはより良いプロダクトをより速く実装するのに役立つ」という仮説を検証するための実験を実施しました。実験は以下のプロセスで行われました。
フォームのUIデザインを用意する
UIはIBMのCarbon Design Systemをベースに設計されています
8名のエンジニアが一方のフォームはデザインシステムを使用せずに実装し、もう一方のフォームはCarbon Design Systemを使用して実装を行う
フォームの実装に要した時間を比較する
実験の結果、被験者はデザインシステムを使用することで、デザインシステムを使えない場合よりも47%も早く実装を終えられることが分かりました。デザインシステムを使用しない場合の中央値は4.2 時間、デザインシステムを使用した場合の中央値は2時間でした。
デザインシステムを使用した場合の作業時間にはエンジニアがデザインシステムをキャッチアップする時間も含まれていることから、習熟度が向上して学習時間を排除できた場合には更にパフォーマンスが向上する余地があります。
また、8名のエンジニアのうちデザインシステムを使用しない場合にデザインファイルと一致するレイアウトを実装することができたのは1名だけだったことが分かりました。あわせて、5名のエンジニアがデザインシステムを使用することでデザインファイルとの一致度が高いレイアウトの実装をすることができるようになったことも分かりました。
加えてこの実験では5名のエンジニアが実装したフォームがデザインシステムを使用していない場合よりもアクセシビリティの評価値が同等かそれを上回ったことも判明しています。
この実験の結果からもデザインシステムが存在しない場合と存在する場合におけるパフォーマンスに優位な差があることを示すことができます。また、レイアウトに乖離が存在することやアクセシビリティが低いことは将来に渡って負債になりうる項目です。デザインシステムはそれらの項目の品質を補完し、負債を未然に解消してくれる存在であることをこの実験で示すことができます。
本章では3つのケースを用いて「投資と効果の差」「デザインシステムが存在する場合としない場合のパフォーマンスの差」「プロダクトへの直接的なコミットとデザインシステムを用いた間接的なコミットのそれぞれの利益の差」など、2つの項目を比較した際に優位な差が存在するかについて考察を行いました。
結果、下記のようにデザインシステムの優位性を定量的に示すことができたことからも、デザインシステムは投資対効果を持つソリューションであると言うことができるでしょう。
デザインシステムに投資対効果 (ROI) が存在すること
デザインシステムが存在しない場合と存在する場合のパフォーマンスに優位な差があること
機能の追加や負債の解消などの具体的な課題ではなくデザインシステムという抽象的な存在に取り組むことが将来的な利益をもたらすこと
これらの定量観点が含まれた優位性は経営者と同じ視点でデザインシステムについて語るための恰好の材料です。これらの価値を適切に訴求してデザインシステムを導入し、より本質的な課題に取り組むことができる環境をデザインしましょう。
デザインシステムは様々な理由で作られますが、UIを美しく保つためだけに作られることはほとんどありません。デザインシステムは少なくとも2つの領域にて価値を生み出すことができます。チームに対しては、より合理的で予測可能なプロセスを構築することでデザインとエンジニアリングの時間を短縮することができます。ユーザー体験に対しては、UIの一貫性と予測可能性を担保し、デザイナーやエンジニアがより高次のタスクに集中できるようにすることで、ユーザー体験全体の質を向上させることができます。
3. デザインシステムの導入のために私たちができること
最後に、本章ではデザインシステムを導入するための訴求活動にて取り組むべきポイントについて紹介します。
ステップ1: 課題の定義
デザインシステムに限らず、全ての取り組みは「課題」から始まります。どのような素晴らしいソリューションも組織における解決したい課題との親和性が薄いと無価値な物となってしまうためです。そのため、デザインシステムに取り組むためにまずは組織課題の発見と設定を行う必要があります。
WeWorkへジョイン時に最初に開いたアプリはSketchではなくGoogle Docsでした。まず課題を明確に言葉や文章で表現する必要がありました。具体的にです。どこが故障しているのか？自分だけでなく、チーム全体にとって最大の痛みはどこなのか？デザインシステムは孤立して存在するだけではなく、全員の課題を解決する必要があります。共通の痛みを見つけるのです。
課題は以下の2種類に分類できます。
発見型の課題
過去の事象と現在のあるべき姿との間のギャップを元に発見する課題
生産性に影響する
設定型の課題
現在の状態と未来のあるべき姿との間のギャップを元に設定する課題
付加価値に影響する
また、それぞれの課題の例は以下の通りです。
発見型の課題の例
UIごとの一貫性がない影響でテストやQAの効率が悪化している
アサイン歴が長いメンバーが離脱して生産性が低下した
設定型の課題の例
これからプロダクトが増えるため、デザイン・実装の工数が膨らむ
メンバーを増員する予定だが、オンボーディングやコミュニケーションコストが更に肥大化してしまう
デザインシステムはこの2種類の課題に対してアプローチを行う必要があります。課題を2種類に分類することで、まずは発見型の課題へ早急に取り組むことで生産性を向上させ、並行して設定型の課題に長期的に取り組むことで発生しうる課題を防ぎながら付加価値を付与することができるようになります。
ステップ2: 投資対効果の算出
前章の「ケース1: 数値から効果を測る」にて紹介した数式を活用しながら投資対効果を算出します。
もし算出時点で有志のメンバーによってデザインシステムが一部分でも構築されている場合は、現時点でのデザインシステムの採用数や既にどのくらいの効果を創出しているか算出すると良いでしょう。
デザインシステムがどのくらいのメンバーと製品に対して採用されているかという情報はデザインシステムの有用性や影響度を計測する上で非常に重要な指標です。価値訴求の際には投資対効果に加えて、デザインシステムを活用しているメンバーの人数やデザインシステムのカバレッジも提示しましょう。
ステップ3: ロードマップの策定
続いてデザインシステムが将来に渡ってどのように維持・運用をされながら組織へ効果をもたらすのかを示すためにロードマップとマイルストーンを策定します。
ロードマップでは、デザインシステムがどの時期にどのような状態を実現するのか (アウトカム) を可視化します。そのため、どれだけ高い解像度の状態目標を策定できるかが重要です。この「状態」とは「課題が解決されている様子」と言い換えることができます。このことから、ステップ1で紹介した2種類の課題が具体的に定義されていることもロードマップの策定に必要な要素です。
また、ロードマップには「デザインシステムの内容」を網羅的に記述しないことを意識します。原則・コンポーネント・デザイントークンなどのデザインシステムの内容はあくまでも「目指すべき状態を実現するための方法（How）」でしかありません。
特に現在の状態と未来のあるべき姿との間のギャップを元に設定する課題を解決するためには未来に発生しうるニーズを探索することから始める必要があるため、解決手段は決め打ちをするのではなく仮説検証を行いながら柔軟に変化させられる必要があります。
ステップ4: 導入のための訴求
最後にこれまでのステップにて用意した材料を用いて導入のために提案活動を行います。
課題
定量的な指標（ケーススタディとROI）
効果的な計画（ロードマップとマイルストーン）
定量的指標によって客観的にデザインシステムの優位性を提示しながら、デザインシステムが将来に渡ってどのようなマイルストーンで組織課題を解決して効果をもたらすのかについて示す必要があります。
これらの3つの観点が接続することで初めてデザインシステムの価値を証明することができます。
まとめ
本記事では「デザインシステムの価値を経営者に訴求することはなぜ困難であるのか」と「デザインシステムは本当に投資対効果をもたらすソリューションであるのか」の2点の問題に対する考察を行い、デザインシステムを組織に導入するための方法を紹介しました。
デザインシステムに関するトピックは依然として強い話題がありますが、これは一過性のあるムーブメントではありません。デザインシステムは組織課題を継続的に解決するための最適なソリューションであり、そこには明確な投資対効果が存在します。
現在はデザイナーが適切に価値を提示できていないが故にデザインシステムは多くのケースにおいてデザイナーやエンジニアに閉じた取り組みとなってしまっています。一方で私たちはデザインシステムの価値を様々なロールのメンバーと同じ視点・言葉で伝達することで、組織全体でデザインシステムに取り組む環境を創り出すことができます。
「木こりのジレンマ」の逸話で例えるならば、デザインシステムはチーム全員で研ぐべき斧であるのです。デザインシステムを研ぐことで生まれた効果によって私たちは更に本質的な価値に向き合うことができるようになります。
一方でデザインシステムの価値訴求をする行為自体には、組織の課題を直接的に解決する効果はありません。デザインシステムの価値は導入後に生まれる効果にこそ宿ります。
この記事がみなさんの組織へのデザインシステムの導入を後押しし、デザインシステムの効果によってみなさんがより本質的な課題に向き合えるようになることを願っています。
「そのデザインシステムは投資対効果をもたらしますか？」は Goodpatch Advent Calendar 2022 16日目の記事です。