デザインシステム構築よくある悩み3選と解決方法
「良いデザインをサポートするための仕組み」であるデザインシステムは、プロダクト開発の現場において、デザイン・開発プロセスを効率化したり、ブランドの一貫性を保つのに有用です。
グッドパッチでは、クライアントワークとしてお客さまのデザインシステム構築支援に日々取り組んでいます。先日、プロジェクトで得られた知見を紹介するWebセミナー「お悩みにその場で回答 デザインシステムが組織にもたらす効果」を開催しました。
この記事では、セミナーの参加者や普段の業務でクライアントからいただいた質問を中心に、「デザインシステム構築にまつわるよくある悩み」を3つピックアップし、その解決方法をお伝えします。
悩み1. おすすめのデザインシステムの始め方は？
悩み：
デザインシステム構築は、コンポーネントライブラリやデザインガイドラインなど、アウトプットが多岐にわたります。公開されているデザインシステムの事例を見ると、同じようなものを作ることができるのかと尻込みしてしまいます。これからデザインシステムを作り始める企業は何から始めるべきなのでしょうか？
解決方法：段階的なアプローチを採用する
「調査→計画→構築→適用→拡張」というサイクルを回しましょう。
グッドパッチ社内では「デザインシステムは開発現場の組織課題から始まるもの」と考えています。そのため、現場のどこに・どんな課題があるのか、という調査から始めることをおすすめしています。
- 調査
エンジニアの課題・デザイナーの課題、様々なロールとロールの間の接続過程で生まれる課題について調査します。
- 計画・構築
調査が完了したら、特定した課題に対して打ち手を計画してみましょう。打ち手に合わせて、デザインシステムを構築していくことが大切です。
具体的なイメージを2つご紹介します。
＜パターン1＞
- 課題：デザイナー以外がワイヤーフレームやプロトタイプを構築する速度が遅く、仮説検証スピードが遅くなっている。
- 打ち手：PjM・PdMがワイヤーフレームやプロトタイプを構築する速度を向上させる。
- デザインシステムの構築方法：デザインツール上のコンポーネントライブラリを構築する。コンポーネントだけではなくインタフェースのテンプレートまで用意する。
＜パターン2＞
- 課題：フロントエンドエンジニアの開発速度が遅く、プロダクトのデリバリーに時間がかかっている。
- 打ち手：フロントエンドエンジニアの開発速度を向上させる。
- デザインシステムの構築方法：フロントエンド用のコンポーネントライブラリを構築する。あわせて、プロダクトに適用しやすい実装要件で構築したり、エンジニアにとって活用しやすいフォーマットや表現のガイドラインを用意する。
- 適用
作り手から使い手にデザインシステムをお渡しします。
このフェーズは、作り手が使い手に丸投げするとデザインシステムが使われずに頓挫するケースもあるため「悩み3.形骸化させないための、継続的な運用・更新のコツは？」にて詳しく解説します。
- 拡張
デザインシステム構築では、一度に全てを完璧に作り上げるのではなく、よく使われる1ページのコンポーネントやガイドラインから始め、徐々に拡張していくアプローチが重要です。
段階的なアプローチを採用しているひとつの例として、『小さく始めるデザインシステム』という書籍でも有名なSmartHRのデザインシステムを紹介します。Schema by Figma 2022 Tokyoでの発表内容で、SmartHRのデザインシステム拡充の歴史が述べられています。
2020年6月に、基礎要素（カラー・タイポグラフィ・アイコンなど）から公開を始め、2020年11月にSmartHRらしさをあらわす「デザイン原則」を追加、最終的に全コンポーネントが公開されたのは2021年8月と、すべての構築・公開に1年以上の時間を要していることがわかります。
“デザイン”のためじゃないデザインシステム – SmartHR _ Schema by Figma 2022 Tokyo
このように、「調査→計画→構築→適用→拡張」という5つのステップのサイクルを小さく回しながら、組織課題に合わせたデザインシステム構築を進めていきましょう。
悩み2. デザインシステムの効果はどのように測るの？
悩み：
デザインシステムの価値を組織全体に理解してもらい、賛同を得ることに難しさを感じています。デザインシステムを構築することで得られる効果を説得するために、その効果を定量化したり、定量化した事例があれば欲しいです。
解決方法①：自分の組織で効果を計測する
ここでは2つの手法をご紹介します。
- ベロシティチャート｜Jira
チームがどれだけの生産量を上げられたのか可視化する指標として「ベロシティ」という概念を活用します。デザインシステムの導入前後でベロシティの変動があったのかを算出することで、デザインシステムによる「開発効率効果への影響」を測定できます。 - ライブラリアナリティクス｜Figma
ライブラリアナリティクスを見ると、デザインシステムがFigma内でどれだけ活用されているかカバレッジを算出できたり、どのチームがどれだけデザインシステムを使っているか計算できたりします。これにより、組織への浸透具合を計測できます。
解決方法②：外部の実験事例を引用する
デザインシステム構築により得られる効果について、実験事例を2つ紹介します。
- デザイン工数の変化量を定量化する実験 by Figma
デザインシステムを使う場合・使わない場合のデザイン工数を比較する実験です。デザインシステムを使うことで、スクラッチでUIデザインをした場合よりも、34%も早く、UIデザインのタスクを終えられることが分かっています。
参照：Measuring the value of design systems｜Figma Blog
- 開発工数の変化量を定量化する実験 by Sparkbox
デザインシステムを使う場合・使わない場合の開発工数を比較する実験です。
デザインシステムを活用した方が、47%早く実装タスクを終えられることがわかっています。。
また、以下の副次効果も見られました。
・実装時にデザインファイルと実装アウトプットが一致する割合が向上
・アクセシビリティ要件を達成できる割合が向上
参照：The Value of Design Systems Study: Developer Efficiency …｜Sparkbox
- 追加採用と同等の効果も！！ by グッドパッチ
前述の2社の実験をベースに、デザインシステム構築が採用に与える影響も計算してみました。デザイナー5人・エンジニア30人の開発チームにデザインシステムを導入した場合、チームに15人のメンバーを追加することと同等の効果があると言えることがわかりました。
悩み3. 形骸化させないための、継続的な運用・更新のコツは？
悩み：
デザインシステムは一度作れば終わりではなく、継続的な運用と更新が必要なのは理解しているのですが、これには時間と労力がかかります。どのようなコツがありますか？
解決方法①：使い手からフィードバックを集める
使い手であるデザイナー・エンジニアから、Google Formsなどのアンケートツールを使って、デザインシステムの浸透度・使用感・改善点などのフィードバックを定期的に収集しましょう。生の声の収集は、グッドパッチから各社にデザインシステムを提供する際にも、特に気をつけている点です。
質問項目の例
・デザインシステムに対するエンゲージメント
（非認知層、認知層、理解層、利用層、運用層、啓蒙層）・デザインシステムの作り手への関心度
・デザインシステムを使う時の使用感・改善点
解決方法②：「ペアデザイン」でサポートする
デザインシステムを使い始める時、作り手が使い手に丸投げするとデザインシステムが使われずに頓挫してしまうケースもあります。グッドパッチでは、デザインシステムの作り手と使い手が一緒にコンポーネントを使ってデザイン作業を進める「ペアデザイン」を推奨しています。そうすることで、ガイドラインやコンポーネントの活用の仕方を使い手が理解でき、さらに使ってもらう中で得られたフィードバックをデザインシステムの改善に活用できるというメリットもあります。
解決方法③：非同期・同期の二刀流でリマインドする
非同期型（Slack等）・同期型（ミーティング等）のコミュニケーションツールを使い、「こんなデザインシステムの使い方がありますよ」、「このコンポーネントをアップデートしてみたので、使ってみてください」といったリマインドを地道に続けることも大切です。
解決方法④：デザインシステムの作り手を増やす
ありとあらゆるアプローチで、チームメンバーを巻き込み、デザインシステムの作り手を増やしてみましょう。とても小さなところからでも構いません。
例えば、デザインシステムの名前を決めるのを手伝ってもらう、デザインシステム座談会を開くなど、デザインシステムに対して当事者意識を持ったメンバーを少しずつ増やしていくことで、デザインシステムに愛着を持ち使ってくれる人も増えていくことでしょう。
解決方法⑤：定量的な効果を測定し、個人活動ではなく組織活動に昇華する
これが最も重要です。
デザインシステム構築の始まりは、組織内のある個人の孤独な活動になりがちです。
組織の上位レイヤーにもデザインシステムの効果を感じてもらうために、定量的な効果を示しましょう。組織で予算・時間をかけて注力する活動に昇華させることが、デザインシステムを組織で長く続けるコツになります。
※定量化の方法は「悩み2」を参照してください
最後に
デザインシステムの構築には、乗り越えるべき課題が多くありますが、お伝えした解決方法で、効果的なデザインシステムを構築・運用することが可能となるかもしれません。組織の課題調査から小さく始め、仲間を巻き込み組織全体で一丸となって取り組むことが、成功への鍵となります。
一方で、組織の中にいると客観的に課題を特定するのが難しいという声もいただきます。グッドパッチのデザインシステムの専門家が課題特定から伴走し、課題に合わせたデザインシステム構築プロセスの提案と定着支援を行う支援や、無料の動画講座も用意しています。
ぜひご活用ください！
- 資料ダウンロード：開発効率を変革する、デザインシステム構築サポート
- アーカイブ動画：お悩みにその場で回答 デザインシステムが組織にもたらす効果