---

ニジボックスのUIデザインフローや案件事例をご紹介！

---

デザインシステムの導入に関して、具体的な例を交えながら3章に分けてご紹介。

前回は、「1.デザインシステムの段階とメリットを把握する」「2.プロダクト・チームが抱える課題を検討する」について解説いたしました。

今回の記事では、「3.デザインシステムの導入によるコストを検討する」「4.デザインシステムの導入による費用対効果（ROI）を算出する」「5.デザインシステム導入と運用を計画する」について解説します。

第1章、第2章は下記からご覧ください。

ポイント3.デザインシステムの導入によるコストを検討する

プロダクトの現状と、開発体制、それに対して導入するデザインシステムの段階によって、構築・導入コストは変わってきます。デザインシステムを段階的に導入するのであれば、それぞれの段階に対して、導入コストも段階的に検討すると良いでしょう。

コストの算出ですが、費用対効果の算出のために行います。正確な工数算出は実際に構築・適用することになった際に算出すれば良いので、まずはざっくり概算のコストを算出しましょう。

参考として、「1.デザインシステムの段階とメリットを把握する」の章に基づいておおよそのコスト感を考察してみます。

実際に構築にかかる工数や、必要とする詳細な要素・構成については、本記事では割愛させていただくことをご容赦ください。

①：最低限のデザインシステムの導入コスト

①の段階では、デザインツールを整備・構築するため、デザイナーのコストを多く必要とします。
既存プロダクトがある場合は、以下の作業コストが必要になります。

デザインコスト

• 現状デザインされているデザイン要素をデザインツール上で整理し体系化する

②：表層のデザインシステム、③：統制化されたデザインシステムの導入コスト

②と③とでコスト面は、ほぼ同義のため、まとめて考えます。

まず、デザインの上位概念の構築や、開発観点に応じたデザインシステム・デザインツールの調整のために、デザイナーのコストを必要とします。

また、デザインの上位概念に従った形へデザインを整備していくため、これらを実装にいかに反映するのか、反映するための実装コストを多く必要とします。

既存プロダクトがある場合は、以下の作業コストが必要になります。

デザインコスト

• デザイン上位概念の定義
• デザイン上位概念に従って、スタイル・コンポーネントの方針を定め、統一されていないデザイン要素の汎用性を加味した統廃合などの整理を行う
• 開発観点に応じたデザインシステム・ツールの調整

実装コスト

• デザインシステムに合わせた開発ツールの構築（スタイル・コンポーネントライブラリの構築）
• デザイン要素の統廃合に伴った実装の調整

この段階のデザインシステムでは、Storybook・UXPin・Zeroheightなどの、デザインシステムの管理ツールの導入も視野に入れて検討されます。

明確にデザインシステムをチーム共有の資産として確立していきます。

そのため、命名規則に至る細部までデザイナーとエンジニアとで協議して定義することや、デザインシステムのメンテナンスルールなども用意することを推奨します。
技術的負債を産まないためには、この段階からチーム内で協議を行う必要があることを強く認識しておくべきです。

補足

多くの既存プロダクト開発者にとっては、「デザイン要素の統廃合に伴った実装の調整」がネックとなります。
スタイルやコンポーネントの整備は、プロダクトデザインの根幹を洗い直す行為です。
プロダクトの規模が大きければ大きいほど影響範囲が広く、旧来の技術を用いているのであれば調整は容易ではありません。開発テストも必要かもしれません。
計画と費用対効果を見比べて、プロジェクトとして起案することを推奨します。

既存の画面に対してリプレイスせずに、新規に作成する画面・パーツ、ないしはエンハンス時に調整する画面・パーツに対して構築したデザインシステムを適用していく、という選択を取るケースもあります。理想ではない、苦渋の選択です。

施策案件ごとに見積もられる工数の中に、都度「デザインシステムに応じた調整をする」という工数を追加することになるため、目先では小分けにされた少ない工数でデザインシステムを導入しているように思えますが、トータルで見るとより長く多く工数を消費することになります。

④：プラットフォームで最適化されたデザインシステムの導入コスト

③まではデザインシステムの共有資産化までのプロセスになりますが、④からはプラットフォームで製品を提供する上で、さらなる体験の最適化を求めていくことになります。

プラットフォームの特性やベストプラクティス・ユーザー状況などのUXを加味し、デザインに適用することで、結果プラットフォームにおける開発実装が軽微になるという構図のため、デザイナーのコストを多く必要とします。

デザインコスト

• 1つのプラットフォームを前提とした各画面・パーツへのベストプラクティス・使用規則の採用、ないしは構築

実装コスト

• デザインシステムに合わせた開発ツールの調整

iOSであればHuman Interface Guidelines、AndroidであればMaterial Designをデザインシステムに採用するか、それらを部分的に採用するか、自前で全てを用意するのかを検討し、プロダクトで実現したいデザインと融合させるコストが必要になるイメージです。

⑤：クロスプラットフォームで最適化されたデザインシステムの導入コスト

プラットフォームごとに固有の要求や思想があり、それらが異なる中でプラットフォームを横断しても問題ないデザインシステムが必要になるため、この段階のデザインシステムを自前で構築することはデザイナーにとってもエンジニアにとっても非常に困難な道のりになります。

導入コストを低くするのであれば、Material Designなどのパッケージ化されたデザインシステムの導入が推奨されます。

デザインコスト

• 各画面・パーツがそれぞれのプラットフォーム上で、どのようなUI UXとして機能するのかの定義、もしくはクロスプラットフォームに対応したデザインシステムの採用

実装コスト

• クロスプラットフォーム開発のフレームワーク・開発ツールの採用
• 既存のプロダクトがあるのであれば、リプレイスコスト

実装を先行して、クロスプラットフォーム開発のフレームワーク・開発ツールにリプレイスすることも可能です。プロダクトによっては大きな費用対効果を見込めるケースもあるでしょう。

一方で、デザイナー側のデザイン資材が④以前の段階である場合、デザイン側がクロスプラットフォームに対応していないのでデザインと実装の衝突が頻繁に発生するようになります。

ポイント4.デザインシステムの導入による費用対効果（ROI）を算出する

最終的に費用対効果を算出することで、デザインシステムはどこまで導入・運用すべきなのかが明らかになります。また、決裁者の承認を得てPJとして起案し、能動的な職種間の連携を得てスムーズに推進していく手助けにもなるでしょう。

費用対効果（ROI）の計算方法は、
＝利益金額÷投資金額×100（％）
ですので、
デザインシステムの費用対効果（ROI）は
＝ [デザインシステム導入によって期待できる利益（効果）] ÷ [導入に必要なコスト]×100（％）となります。

デザインシステム導入によって期待できる利益（効果）に関しては、大きく以下の2点を絡めて検討します。

• 削減される作業コスト
• プロダクトの品質が向上することで得られる利益

それぞれ、例を挙げながら解説します。

削減される作業コスト

Figma社の調査やSparkbox（Forge社）の調査などを参照できる他、Knapsack社が提唱するDesign System ROI Calculatoを参考にした考え方もご紹介します。

Design System ROI Calculatoでは、作業コストの算出に、コンポーネントの適用回数を用いています。
こちらを参考にしたとき、計算方法は以下になります。
※全くデザインシステムを使用しない状態と導入した状態での計算方法になります。

削減される作業コスト（期待できる利益）

＝ [A：デザインシステムを使わない場合の作業工数] － [B：デザインシステムを使った場合の作業工数] 

• A：デザインシステムを使わない場合の作業工数
  ＝ [コンポーネントの単純な構築工数※1] × [コンポーネント表示回数※2]
  
  ※1 コンポーネントを構築するのにかかる単純な工数（デザイン設計工数＋実装工数＋メンテナンス工数）
  ※2 コンポーネントがプロダクト上で幾つ表示されているか

• B：デザインシステムを使った場合の作業工数
  ＝ [再利用可能なコンポーネントの新規実装工数※1] ＋（ [コンポーネントを再利用する際にかかる実装工数※2] × [コンポーネント再利用回数※3] ）
  
  ※1 デザインシステムの構築工数＋デザインシステムに従った再利用可能なコンポーネントを構築するのにかかる工数（デザイン設計工数＋実装工数＋メンテナンス工数）
  ※2 デザインシステムに従った再利用可能なコンポーネントを用いて実装したときにかかる工数（デザイン設計工数＋実装工数＋メンテナンス工数）
  ※3 コンポーネントがプロダクト上で幾つ表示されているか

計算例（あるコンポーネント1つあたり）

• A：デザインシステムを使わない場合の作業工数 ＝ 240時間（8時間×30回）
  • コンポーネントを構築するのにかかる単純な工数：8時間（デザイン：2時間 ＋ 実装：4時間 ＋ メンテナンス：2時間）
  • コンポーネント表示回数：30回

• B：デザインシステムを使った場合の作業工数 ＝ 175時間（13時間 ＋ （5.4時間 × 30回））
  • 再利用可能なコンポーネントの新規実装工数：13時間（デザインシステムの構築：5時間＋コンポーネント構築：8時間（デザイン：2時間 ＋ 実装：4時間 ＋ メンテナンス：2時間））
  • コンポーネントを再利用する際にかかる実装工数：5.4時間（デザイン：1.3時間 ＋ 実装：2.1時間 ＋ メンテナンス：2時間）※1
  • コンポーネント再利用回数：30回

※1 Figma社の調査やSparkbox（Forge社）の調査を参考に、コンポーネントを構築するのにかかる単純な工数に対して、デザイン工数は－34％、実装を－47％で計算。

削減される作業コスト（期待できる利益）＝65時間（A：240時間 － B：175時間）

あるコンポーネント1つあたりのデザインシステム導入の費用対効果（ROI）：500％（45.5万円 ÷ 9.1万円 × 100（％））
効果：45.5万円（65時間 ×（人月単価70万円 ÷ 月作業時間100時間））
投資：9.1万円（13時間 ×（人月単価70万円 ÷ 月作業時間100時間））
※全くデザインシステムを使用しない場合と導入した場合の計算

プロダクトの品質が向上することで得られる利益

コスト削減だけではなく、デザインシステムの導入によってプロダクトの品質に関する課題が解決される場合の費用対効果も合わせて検討することができます。

例えば、プロダクトのデザインが旧来の設計になっており、デファクトスタンダードなUIを用いている競合サービスより劣位にあることが課題とします。

プラットフォームに最適化されたデザインシステムの構築によって、製品内での体験が学習しやすく使い勝手が良い体験に統一され、加えてコードが整理されることによる読み込みスピードの向上で、コンバージョン率が1％→2％に改善した場合、利用者数10,000人（月）、客単価平均10,000円であれば、年間1,200万円の売上増を見込めることとなります。

仮に5人の開発者がデザインシステムの導入・リプレイスを推進し、人月単価100万円、12カ月記者ハンドブックよりかかるとしたときの投資6,000万円に対し、年間1,200万円の利益増に、開発コストが47％削減された場合に年間2,820万円のコスト削減を加味すると、約15カ月で投資回収できるというような計算になります。

ポイント5.デザインシステム導入と運用を計画する

• プロダクト・チームの課題
• 導入コスト
• 費用対効果

これらを突き合わせて、導入すべきデザインシステムの段階を見定めます。
デザインシステムによってどんな課題を解決したいのか、どんな効果を期待しているのか、を明確にし、導入計画を立てることで、チーム共通認識を持って進めていくことができるのです。

具体的なデザインシステムの構築においては、適用される範囲が広い要素から定義していくことを意識して、タスクを計画すると良いでしょう。

例えば、Material Designにおけるデザイン言語・思想は、プラットフォーム上の製品全てに適用される（ことを期待して作られている）要素です。
デザインの上位概念に含まれるブランドアイデンティティなどは製品デザイン全てに適用される要素で、カラーなどのスタイルは、全てのUIに適用される要素です。
各コンポーネントのベストプラクティスはそれぞれのコンポーネントに反映される要素で、各コンポーネントはそれぞれの画面に部分的に適用される要素です。

適用される範囲が広い要素から順に構築するように計画することで、デザインシステムの体系はより強固に統一の取れたシステムに成長します。

まとめ

デザインシステムがチームの負債とならないよう、計画を立てることが重要だと述べてきましたが、導入初期から壮大なデザインシステムを作り上げていくことはコストやリスクが存在するため、これを推奨するものではありません。

デザインシステムは、段階を追って徐々に構築し、運用・拡張していくことが一般的です。

その中で、特定の職種の資材としてではなく、ゆくゆくはデザインシステムをチームの共通資産として価値を最大化していくために、計画を立てることが重要なのです。

本記事では、デザインシステムの導入における考え方やポイントについて述べさせていただきました。
デザインシステムは成長させていくことが求められます。どのように運用していくかに関しても検討していく必要があります。

本記事が皆さまのデザインシステム導入・運用の手助けとなれば幸いです。

また、ニジボックスが執筆した、デザインシステムに関する書籍が技術評論社より2024年10月2日に発売されました！
デザインシステムの具体的な要素や運用方法・作り方など、さらに詳しく知りたい方はぜひ読んでみてください。
技術評論社、株式会社ニジボックス 著（2024）『つくって、みなおす、デザインシステム——現場での合意形成から設計、運用まで』

また、ニジボックスではサイト制作や開発における、情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も行っております。

下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください。