UIデザイン

デザインシステムはどこまで導入すべき？　押さえておくべきポイントや費用対効果の考え方［1/3］

更新日 2024.10.4

#デザインシステム

デザインシステムはどこまで導入すべき？　押さえておくべきポイントや費用対効果の考え方［1/3］

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

近年、デジタルプロダクト開発において有用性が認知されつつあるデザインシステム。
いざ自分のチームに導入するにあたって、「どのように起案するのか？」「導入したはいいもののプロダクトチームでうまく浸透していかない」など、苦心したという話もよく耳にします。

そこで今回は、デザインシステムの導入に関して、具体的な例を交えながら3章に分けてご紹介します。
第1章では、デザインシステム導入・運用時に気をつけるべきポイントについて解説いたします。
第2章では、主にデザインシステムの段階とメリット、解決できる課題について解説します。（こちら）
第3章では、主にデザインシステム導入にあたっての費用対効果について解説いたします。（こちら）
是非最後までお付き合いいただければと思います。

デザインシステムの基礎知識や参考事例は以下の記事をご参照ください。

デザインシステムとは？作り方やデザインガイドラインとの違いまで分かりやすく解説！

https://blog.nijibox.jp/article/design_system

デザインシステムとは、プロダクト開発を進める上でのルールや利用できるツールがまとまった仕組みのことです。この記事では、デザインシステムの基礎知識からメリット...

デザイナーが選ぶ！参考にしたいデザインシステム事例10選

https://blog.nijibox.jp/article/designsystem_case

デジタルプロダクト開発において近年さまざまな企業や組織が注力しているデザインシステム。本記事では国内外で公開されているさまざまなデザインシステムの中から、ニ...

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

デザインから導入するデザインシステムの罠

デザインシステムの初期導入にあたり最も簡単で導入しやすい方法として、「デザイナーの作成するデザインの品質担保と作業効率化」のために、デザイナーが主導権を握りデザインツールの整備からデザインシステムの導入を推進する、という方法があります。

デザインツールの整備からデザインシステムの構築を始めることは、実装にデザインシステムを導入する場合と比較して低コストで導入を始められます。また、デザインシステムを構築する場合はデザインの根幹となる概念から定義し、システムを適用していくのが一般的です。

しかし、デザイナーだけでデザインシステムの導入を始める場合、ちょっとした罠に気をつける必要があります。
罠にハマってしまうと、デザインシステムの成長・拡張を阻害し、有用性を最大限生かすことができないということになりかねません。

まずは、注意すべき罠について解説します。

チームへの浸透がうまくいかないという罠

デザイナーによる、デザインツール上でのデザインシステムの構築のみに焦点を当てると、デザインシステムは「デザインの品質担保と作業効率化のためのもの」という側面が色濃く見えます。
故に、デザイナーの「業務改善」としてデザイナーだけで閉じてデザインシステムを構築していくことも可能なので、この構築方法は安易に着手しやすいとも言えます。

良くも悪くも、プロダクト開発のチーム内で課題感の共有、内容の合意やプロダクトとしてのROI※の検討を行わずに、デザイナーだけでデザインシステムの構築を推進することもできてしまうでしょう。
しかし、それらが十分に行われなかった結果、デザインシステムの有用性や拡張計画をチームが認識していない、デザインシステムがチームに浸透していないという状況が生まれてしまう場合があります。
※ROI： Return On Investment（投資に対してどれだけの利益を得られたのかを把握するための指標）

チームにとって「デザインシステムは、デザイナーの作成するデザインの品質担保と作業効率のためのもの」で構わない、と判断した場合は問題ありませんが、デザインシステムは成長させていくことが求められるものです。
価値・効果を最大化していきたいとき、デザインシステムがチームに浸透していない状況は好ましくありません。

デザインシステムは、デザイナーだけでなくチームの資産

デザインシステムの内容についてプロダクト開発チームでの協議や合意・共有がなかったのであれば、デザインシステムはあくまでデザイナーの資材になり、デザイナー以外の開発者にとってはそのデザインシステムは「デザイナー側の資材」という以上の意味を持てません。

とりわけ、モバイルアプリの開発などは、Material DesignやHuman Interface Guidelineといったプラットフォーム側から提供される高度なデザインシステムの思想を、実装上無視できないことがあります。
むしろ、運用管理の観点を踏まえるのであれば、デザイナーが自前で作成したデザインシステムより重要視されることも多いでしょう。

下手をすると、デザイナーが良かれと思って作ったデザインシステムは実装とは全く乖離しているもので、エンジニアにとっては技術的負債でしかないという状況に陥ります。
デザインシステム導入によってデザイン接続のコミュニケーションがスムーズになることも期待していたはずなのに、コミュニケーションコストが一向に下がらない感覚を覚えるデザイナーも多いのではないでしょうか。

デザインシステムをプロダクト開発チーム全体にとって有用なものへと成長させていくためには、プロダクト開発チーム内でしっかりと協議し、デザインシステムをチーム全体の資産として位置づけ、導入・運用を推進していくべきでしょう。

デザインシステムの導入にあたって押さえておくべき5つのポイント

2020年のSparkbox（Forge社）の調査に興味深い内容があります。

Is your design system creating technical debt?
In addition, 42% of in-house respondents felt that the way their design system was originally built created debt for the organization’s technical or design departments.

When we asked how building the design system created debt, the two top responses were both related to a planning failure:

Lack of planning (9 of 23 respondents)
Failure to understand the magnitude of a design system (8 of 23 respondents)

Takeaway: Planning supports success
If hindsight is truly 20/20, planning and developing a clear strategy early in a design system’s life could contribute to its long-term success.
－2020 Design Systems Survey / Sparkbox（Forge社）

調査では以下の結果を挙げています。