価値あるデザインシステムを構築するための7つのポイント
デジタルプロダクトやサービスが多様化し、複雑化する現代において、デザインの役割は、ビジネスの成長を牽引する戦略的な機能へと進化しています。
そのような状況下で、組織全体の効率的かつ高品質な「デザイン」を実現するための基盤として、「デザインシステム」がよく話題に上がります。
私の感想ですが、 2〜3年前と比較すると、事業会社のデザインシステム運用事例は、着実に多くなってきています。
デザインシステムは、UIコンポーネントライブラリやデザイン原則をまとめたもの、といった認識をお持ちの方もいるかもしれません。デザインシステムは単なるアセットの集合体ではありません。プロダクトに関わる全員が共通認識を持ち、効率的に、そしてより高い品質でデザイン・開発を進めるための「仕組み」そのものです。
しかし、「デザインシステムを導入したものの、うまく活用できていない」、「メンテナンスが滞り、形骸化してしまった」という声は今でも少なくありません。
投資したデザインシステムが“使えない”ものになってしまうのは、もったいないことですが、そうなる原因は、作る手前の課題認識や、デザインシステムを作ることはどういうことなのか、解像度の低さのために起きていることがほとんどです。
本記事では、SmartHRでのデザインシステム運用経験や、デザイナーとして支援した多数の企業での実践値をもとに、デザインシステムを"使える"ものにするために、重要な7つのポイントをまとめました。
1.デザインシステムの目的を明確にする
まず最初に、「何のためにデザインシステムを導入するのか？」という目的を明確にすることが最も重要です。目的が曖昧なまま導入を進めてしまうと、デザインシステムは方向性を見失い、結果として誰にも使われない、ただの飾り物になってしまう可能性があります。
目的を定める上で、以下の点を自問自答してみましょう。
なぜ今、デザインシステムが必要なのか？
現状の課題を洗い出し、デザインシステムで解決したい具体的な問題を明確にします。例えば、「デザインの一貫性の欠如」「開発効率の低下」「属人化による品質のばらつき」などが考えられます。
デザインシステムによって何を目指すのか？
組織として、デザインシステムを通じてどのような状態を実現したいのかを具体的に描きます。例えば、「デザインの一貫性を向上させ、ブランドイメージを強化する」「開発効率を向上させ、より多くの価値をユーザーに届ける」「誰でも一定の品質のデザイン・開発ができるようにする」などが考えられます。
誰のためのデザインシステムなのか？
デザインシステムの利用対象者（ターゲットユーザー）を明確にします。プロダクトを利用するエンドユーザー向けなのか、社内のデザイナー向けなのか、エンジニア向けなのか、あるいはその全てなのかによって、デザインシステムの方向性は大きく変わります。
デザインシステムは「製品を作るための製品 (Product for making products)」と言われています。つまり、デザインシステム自体も一つのプロダクトとして捉え、ユーザー視点を持って目的を定める必要があります。
例えば、社内のデザイナー向けのデザインシステムであれば、「デザイナーがより創造的な作業に集中できるように、反復的なタスクを減らす」、「デザインの品質と一貫性を担保し、手戻りを減らす」といった目的が考えられます。
目的を明確にすることで、デザインシステムの方向性が定まり、その後の具体的な設計や運用、そして効果測定まで、全てがスムーズに進むようになります。
💡あえて「作らない」選択肢も視野に
デザインシステムはあくまで手段であり、銀の弾丸ではありません。組織規模や運用体制、かかるコスト対して生まれるリターンをどう判断するかを組織で議論、検討した上で作ることをお勧めします。なぜなら、デザインシステムは上述の通り「製品を作るための製品」です。運用のために継続的に投資する必要があり、「良さそう」だからといって一から安易に作るべきものではありません。
2. よくあるパターンから学ぶ
目的を明確にすることと並んで重要なのが、よくあるパターンを知っておくことです。先人の失敗から学ぶことで、同じ轍を踏むことを避け、成功の確率を高めることができます。
経験上、デザインシステム導入における、うまくいかないパターンとしては、以下のようなものが挙げられます。
導入すること自体が目的化してしまう
「デザインシステムを導入した」という事実に満足してしまい、その後の活用やメンテナンスがおろそかになるパターンです。導入がゴールではなく、あくまでスタートであることを意識する必要があります。
開発スコープを見誤る
デザインシステムはプロダクトをはじめとして、コミュニケーション、ブランドシステムなども包含する、扱う対象が多いシステムですが、開発スコープや優先順位を見誤ると思わぬ時間を取られます。
完璧なものを目指してしまう
デザインシステムは製品のための製品であり、構築する上での考え方も全く同じで、最初から全てを網羅した完璧なデザインシステムを作ろうとすると、時間も労力もかかり、頓挫してしまう可能性が高いです。
まずは必要最低限の機能から始め、段階的に成長させていくアプローチが現実的です。
ドキュメントが整備されていない、または理解しにくい
デザインシステムは、ドキュメントがあって初めて機能します。コンポーネントの仕様やデザイン原則、利用方法などがきちんとドキュメント化されていないと、誰も使いこなすことができません。
更新が滞り、陳腐化してしまう
プロダクトは常に変化し続けるため、デザインシステムもそれに合わせて進化していく必要があります。しかし、更新が滞ってしまうと、デザインシステムは現状に合わなくなり、誰も使わなくなってしまいます。そして、日々運用、更新するユーザーを理解した環境を構築しなければ扱いにくいシステムになってしまいます。
組織体制が整っていない
デザインシステムの構築・運用には、デザイナー、エンジニア、そしてプロダクトオーナーなど、様々な役割の人が関わる必要があります。責任者や役割分担が曖昧なままだと、意思決定が遅れたり、連携がうまくいかなかったりして、プロジェクトが停滞してしまうことがあります。
これらの失敗パターンを反面教師として、「目的を見失わない」「完璧主義に陥らない」「ドキュメントを重視する」「継続的な更新体制を構築する」「適切な組織体制を構築する」といった対策を講じることが重要です。
なお、最近ではパターンやナレッジを知る上で、デザインシステムの知見が述べられた書籍やnoteがいくつも出ています。ぜひそちらも参考にしましょう。以下に参考となる書籍も挙げておきます。
3. 成果の指標を作る
デザインシステムの導入目的を達成できたかどうかを判断するためには、成果を測るための指標が必要です。 特に構築した後、指標がないままではデザインシステムの効果を評価できず、価値の立証や改善につなげることが難しくなってしまいます。
成果指標を設定する際には、定量的指標と定性的指標の両方をバランス良く取り入れることが重要です。
定量的指標の例
デザイン制作・開発スピードの向上
コンポーネントの再利用率、新規画面 Mockup 作成時間、Storybookなどのドキュメント整備率などを計測し、導入前後の数値を比較します。
デザイン・開発コストの削減
デザイン・開発に関わる人件費、外注費などを算出し、導入前後のコストを比較します。
品質の向上
UI の不整合件数、デザイントークン の利用数、アクセシビリティ準拠率などを計測し、品質改善を評価します。
定性的指標の例
デザイナーとエンジニア間のコミュニケーション円滑化
アンケートやインタビューを実施し、デザインシステム導入によるコミュニケーションの変化を評価します。
デザインの一貫性向上
複数プロダクトのデザインレビューを行い、デザインの一貫性が向上しているかを評価します。
利用者の満足度
デザインシステム利用者（デザイナー、エンジニアなど）にアンケートやインタビューを実施し、満足度を評価します。
これらの指標を参考に、自社のデザインシステムの目的に合った成果指標を設計しましょう。 指標は、定期的に計測し、公開することで、デザインシステムの改善サイクルを回し、組織全体で成果を意識する文化を醸成することができます。
4. 役割を定義する
デザインシステムを "使える" ものとして維持していくためには、組織体制が重要になります。 デザインシステムの構築、運用、改善には、様々なスキルを持つ人が関わるため、それぞれの役割を明確に定義し、責任分担を行う必要があります。例えば代表的な役割は以下のとおりです。
デザインシステムオーナー
デザインシステムの ビジョン策定、ロードマップ作成、KPI設定、成果の評価など
デザインシステムの優先順位決定、リソース配分、ステークホルダーとの連携など、プロダクト戦略とデザインシステムを整合させる役割を担います。
デザイナー（プロダクト・コミュニケーション）
ブランドガイドライン、UI コンポーネントのデザイン、デザイントークンの設計、デザイン原則の策定、UI 設計ガイドラインの作成、ドキュメント作成などを担当します。
フロントエンドエンジニア
UI コンポーネントの実装、Storybookなどのドキュメント作成、技術的なガイドラインの作成、パフォーマンス改善などを担当します。
上記は代表的な例ですが、自社の組織体制に合わせて役割を定義しましょう。
役割を明確にすることで、責任の所在が明確になり、意思決定がスムーズに進み、効率的なデザインシステム運用が可能になります。また、役割分担だけでなく、役割間の連携も重要です。 定期的なミーティングやSlackなどのコミュニケーションツールを活用し、情報共有や意見交換を密に行うことで、より強固な組織体制を構築することができます。
5. ユーザーニーズに焦点を当てる
デザインシステムはプロダクトであり、ユーザーに使われてこそ価値を発揮します。 そのため、デザインシステムを設計する際には、ユーザーニーズに焦点を当てることが非常に重要です。
例えばユーザーニーズを把握するために、以下のような方法が考えられます。
ユーザーインタビュー
デザイナーやエンジニアにインタビューを実施し、現状のデザイン・開発フローにおける課題や不満、デザインシステムに期待することなどをヒアリングします。
アンケート
デザイナーやエンジニアにアンケートを実施し、デザインシステムに対するニーズや要望を定量的に把握します。
ワークショップ
デザイナーやエンジニアを集めてワークショップを実施し、デザインシステムに関するアイデアや意見を出し合います。
利用状況の分析
既存のデザインシステムがある場合は、利用状況を分析し、ユーザーがどのような機能を利用しているか、どのような点に不満を感じているかなどを把握します。
あくまでこれらは手段の一つですが、収集したユーザーニーズを分析し、デザインシステムの要件定義に反映させます。 また、デザインシステム完成後も、継続的にユーザーからのフィードバックを収集し、改善を繰り返していくことが重要です。「ユーザーが使いたい、みたい情報は何か？」を常に問い続け、ユーザー視点を持ってデザインシステムを開発・運用していくことが、"使える"デザインシステムを作るための鍵となります。
6. 更新しやすい状態を作る
プロダクトは常に進化し続けるため、デザインシステムも継続的に更新していく必要があります。 しかし、更新が滞ってしまうと、デザインシステムは陳腐化し、使われなくなってしまいます。 デザインシステムを長く活用するためには、更新しやすい状態を作ることが重要です。
更新しやすい状態を作るための具体的な方法としては、以下のようなものが挙げられます。
バージョン管理
デザインシステムのコンポーネントやドキュメントをバージョン管理ツールで管理し、変更履歴を追跡できるようにします。
ドキュメントの自動化
ツールを活用し、UI コンポーネントのドキュメントを自動化 し、メンテナンス工数を削減します。昨今はAIによる
更新プロセスの簡易化
デザインシステムの更新プロセス（変更提案、レビュー、承認、リリースなど）を標準化し、スムーズな更新を実現します。
定期的なメンテナンス: 定期的にデザインシステムのメンテナンスを行い、不要なコンテンツの削除や更新、技術的な負債の解消などを行います。
こういった複数の方法を組み合わせることで、デザインシステムの更新サイクルを短く、負荷を最小限に抑え、常に最新の状態を維持することができます。 また、更新履歴を公開することで、ユーザーはデザインシステムの変更点を把握しやすくなり、安心して利用することができます。
7. 組織へ浸透させ、継続して取り組む
どんなに素晴らしいデザインシステムを構築しても、組織に浸透し、日常業務で活用されなければ意味がありません。 デザインシステムを組織に浸透させ、継続的に利用してもらうためには、地道な活動が不可欠です。
組織浸透のための具体的なアプローチとしては、以下のようなものが挙げられます。
事例 (ケーススタディ) の作成
デザインシステムを活用した事例を作成し、成功事例を組織内に啓蒙・浸透させます。事例は、具体的な成果を示すことで、デザインシステムの価値を組織内に訴求する効果的な手段となります。
勉強会やワークショップの開催
デザインシステムの使い方やメリットを組織内に説明するための勉強会やワークショップを定期的に開催してみましょう。特にデザイナー以外への啓蒙、エンジニアやプロダクトマネージャー、セールスなどへの啓蒙は、浸透を円滑にするためにお勧めです。
経営層のサポート
デザインシステムの重要性を経営層に理解してもらい、積極的なサポートを取り付けます。経営層からのサポートは、デザインシステムの予算確保や人員配置など、リソース面でのサポートに繋がり、組織全体を巻き込んだ浸透活動を進める上で不可欠です。
ニュースレターや社内ツールでの情報発信
デザインシステムの更新情報やイベント情報などをニュースレターや社内ポータルで定期的に発信し、デザインシステムに関する情報アクセスを容易にします。X（旧:Twitter）などのSNSツールでの発信でも良いでしょう。
これらのアプローチを粘り強く継続することで、デザインシステムは徐々に組織に浸透し、組織文化の一部として根付いていきます。 デザインシステムの浸透には時間がかかることを理解し、焦らず継続的に取り組む姿勢が重要です。
おわりに
本記事では、"使える"デザインシステムを実現するために必要な7つのポイントについて解説してきました。
デザインシステム構築に唯一の正解はありません。組織規模、プロダクト特性、チーム文化によって最適な形は異なります。
重要なのは、経験から学び、組織に合ったデザインシステムを継続的に進化させることです。 試行錯誤を重ね、小さな成功を積み上げながら、組織とプロダクトの成長を支える、真に価値あるデザインシステムを育てていきましょう。
デザインシステムに関するお悩み、ご相談
実際にデザインシステムを組織に根付かせ、効果を最大化していくには、多くの試行錯誤と組織ごとの状況に合わせたきめ細やかなアプローチが不可欠です。
もし、事業や案件でデザインシステムの導入や運用に関してお悩みをお持ちでしたら、ぜひ一度お気軽にXのDMまでご相談ください。
また、現在、MENTAプラットフォームにて、プロダクトデザイナーおよびUIデザイナーの方向けに、個別メンタリングも実験的に提供しております。デザインシステム構築に関する実践的なアドバイス、デザインとエンジニアリングの連携強化、チームビルディングなど、より具体的な課題解決に向けたサポートが可能です。