外部ベンダーとデザインシステム構築をするメリットと実際の運用イメージ

外部ベンダーとデザインシステム構築をするメリットと実際の運用イメージの記事サムネイル

デザインシステムというキーワードで調べて出てくるのは、内製でデザインシステムを進める比較的大きな企業の事例がほとんど。しかし、外部に構築を依頼して徐々に社内に浸透させていきたいと考えている方も多いのではないでしょうか?そんな方に向けて、この記事では外部に構築を頼むメリットと外部に依頼した場合の運用イメージをご紹介します。

デザインシステムの重要性

デザインシステムとは、企業やプロジェクトにおけるデジタルプロダクトのガイドラインやコンポーネント、ルールを体系的にまとめたものです。

デザインシステムとは何かを詳しく知りたい方はこちら
デザインシステムとは?内容や作り方、運用方法を解説します

その目的は実際のところ、組織によってさまざまですが、主に以下の効果を期待して導入されています。

  • 生産性と品質の向上:
    デザインシステムによって既存の要素を再利用できるので、いわゆる「車輪の再発明」を防止することができます。システムの運用も効率よくなり、管理にかかるコストも減らせます。
  • 一貫性のあるユーザー体験:
    一貫したユーザー体験を提供することで、使い勝手がよくなり、ユーザーの認知負荷が低減します。
  • スケーラビリティへの対応:
    プロダクトの増加やメンバーの入れ替わりにより、システム管理が煩雑化するものですが、デザインシステムの導入により、長期的にリソースの最適化と一定の品質の担保がしやすくなります。特に複数のプロダクトを持つ企業では、その効果が顕著に表れるでしょう。

このようにデザインシステムは、経営の視点から見てもさまざまなメリットがあります。単にデザイン要素を体系化したものではなく、組織全体のデザイン文化を育み、効率的な開発と質の高いユーザー体験を実現する大切な経営資産と考えることができます。

デザインシステムのビジネス的メリットについてはこちらの記事で詳しく解説しています。投資対効果の計算方法もご紹介していますので、あわせてご覧ください。
効率化とコスト削減を叶えるデザインシステムの力:企業が知っておくべきポイント

外部ベンダーとデザインシステム構築をするメリット

デザインシステムの構築は、立ち上げに時間やコストがかかる一方、企業にとっては慎重に進めるべき戦略的な取り組みになります。まずは、1人のデザイナーがコンポーネントの整理などから小さく始めるケースも考えられます。しかし、明確な目的が定まっているなら、専門的な知識や経験を持つ外部ベンダーと協力して進める方が目的達成に向けた近道になります。

また、もし社内で「何のために」「どこまでやるのか」といった基本的な部分の意見が定まっていないのであれば、ビジネス視点でのコンサルができる外部の専門家に相談すると、プロジェクトが成功する可能性が高まります。

外部ベンダーにデザインシステムの構築を依頼すると具体的にどのようなメリットがあるのか、詳しく見ていきましょう。

豊富な経験と知識を活用できる

外部ベンダーには、多くのプロジェクトで培った専門知識と幅広い経験があります。さまざまな業界のさまざまな課題感を持つ企業でデザインシステムを作ってきた実績を持っているので、よくある問題や失敗しがちなパターンをあらかじめ知っています。そのため、起こりそうな問題を回避しながら、プロジェクトをスムーズに進めることができます。

デザインシステムは会社の目的や規模、プロダクトの特徴によって形が大きく変わりますが、外部の専門家なら豊富な経験から、各企業に合う最適なデザインシステムの形を提案することができます。

リソース不足を補完できる

デザインシステムの構築は、本流のプロダクト開発業務とは別の、効率化のための基盤作りとして捉えられがちです。重要性を認識しながらも、リソース不足で進められないという企業も多いのではないでしょうか。

デザインシステム構築の初期段階では特にデザイナーの専門的なスキルが必要ですが、実際に形にして運用・管理していく段階ではエンジニアの関与も欠かせません。デザイナーの数が限られている企業にとって、外部ベンダーの協力は大きな支えとなります。協業する中で、企業全体のデザインリテラシーも高まるという副次的な効果も期待できます。

また、デザインシステムが形骸化することなく価値を生み出し続けるには、構築段階だけでなく運用までサポートしてくれる外部パートナーを選ぶことが重要です。長期的な視点でのパートナーシップにより、デザインシステムを着実に成長させ、組織に根付かせることができます。

社内ステークホルダーへの説得力が高まる

デザインシステムの構築は、効果が出るまで時間がかかる長期的な取り組みです。そのため、社内のステークホルダーに目的と計画を丁寧に説明し、理解を得ることが大切です。しかし、デザインシステムの知見がない状態で手探りで進めると、机上の空論になりがちです。

ここで外部の専門家の力が役立ちます。多数の企業のデザインシステム構築に携わってきた外部ベンダーは、豊富な知識と実績を持っています。この経験に基づいた説明は、社内関係者に対して強い説得力を持ちます。具体的な事例や数値を用いて説明することで、デザインシステムの価値を明確に伝えることができます。

さらに、外部の専門家の視点は、社内だけでは気づきにくい課題や可能性を明らかにしてくれます。内部にいると考え方が固まりがちですが、客観的視点から見ると新たな発見があります。この専門家の洞察は、特に経営層にとって貴重な判断材料となり、デザインシステムの推進を後押ししてくれるでしょう。

デザインシステムの運用モデル

デザインシステムは初期構築に時間とコストがかかるうえに、社内への浸透が上手くいかず結果的に形骸化してしまうという問題もよく聞きます。そのため、「デザインシステムは作ってからが本当のスタート」と言われており、上手く運用するための仕組みと体制を整えることが重要です。

デザインシステムの分野で権威性があり、多くの実践的なベストプラクティスを残しているNathan Curtis氏が2015年に書いた記事によると、デザインシステムの運用の仕方は大きく3つに分けられるといいます。

  • 独立型モデル(Solitary)
    • 一人の担当者または小さなチームがデザインシステムを管理するモデル。外部のコンポーネントライブラリを、自チームのプロダクトのために活用し、それを他のチームにも共有するというのが典型的な例です。
    • メリット:デザインやフロントエンド開発のスキルやリソースが不足しているチームにとっては、既存のライブラリから始めることはコスト削減や品質の担保という面で大きな価値があります。
    • デメリット: 他のチームのニーズを反映しにくく、拡張性や柔軟性に欠けることがあります。独自のニーズを持つチームは、カスタマイズや拡張が必要になります。
  • 集権型モデル(Centralized)
    • デザインシステムを専門に担当するチームを設け、そのチームが全社的なデザインシステムの開発、維持、普及を行います。
    • メリット:デザインの一貫性を高く保ち、多くのプロダクトチームをサポートすることができます。
    • デメリット: 個々のプロダクトのコンテキストを理解しにくく、プロダクトチームの自律性を損なう可能性があります。
  • 連合型モデル(Federated)
    • 各プロダクトチームから代表者を集めたチームがデザインシステムの方向性を決定するモデル。
    • メリット: 各プロダクトのニーズを反映しやすく、幅広いプラットフォームやビジネスラインに対応できます。
    • デメリット: 意思決定に時間がかかり、参加者のコミットメントを維持するのが難しい場合があります。また、運用チームは兼務体制になるため、デザインシステムの開発や更新の進捗が遅れることがあります。

(引用:Team Models for Scaling a Design System | by Nathan Curtis | EightShapes | Medium

外部を含めた場合だと、実際には集権モデルと連合モデルのハイブリッドになるケースが多くなります。外部ベンダーはデザインシステムの運用を専門に扱うチームと協働で取り組みを進めつつ、実際のプロダクトに適用する場合には各担当者の意見を取り入れながらデザインシステムを育てていく動きになるからです。

デザインシステム運用のポイント

デザインシステムの運用における主な流れを説明します。

プロジェクトによっては、既存プロダクトのコンポーネントの整理など出来る範囲から小さく始めるケースもあるかと思います。あくまで基本的な流れとして参考にしてみてください。

導入までの細かいステップと構築段階においてつまづきやすいポイントについては、こちらの記事をご覧ください。
プロダクト開発の効率と一貫性を高める!デザインシステムの導入ステップと成功のポイント

基盤ができたら少しずつ拡張させる

ある程度デザインシステムの基盤構築が完了したら、プロダクト開発の進捗に合わせ、段階的にコンポーネントを追加していきます。

【拡張の一例】

  • プロダクト固有の複合コンポーネント
  • アクセシビリティ対応の強化
  • パフォーマンスの最適化
  • デザイントークンの拡充

開発チームからの要望を集め、優先順位をつけて実装していきます。新規プロダクトに適用する際は、開発過程で不足するコンポーネントやデザインルールを特定し、汎用性と自由度のバランスを調整します。

コンポーネントの汎用性を高めることで効率性は向上しますが、その分、デザインの自由度は制限されます。このトレードオフを慎重に検討し、最適なバランスを見つける必要があります。また、管理コストを抑えるために、プロダクト固有の要素は思い切って省いて、シンプルさを保つことも重要です。

デザイナーとエンジニアが協力して改善を進める

このプロセスでは、エンジニアが実際にコンポーネントを実装する中で直面する問題点や改善ポイントについて検討します。デザイナーとエンジニアが密に連携して、各コンポーネントの実装可能性と将来的な拡張性を細かくチェックしていきます。

よくある進め方としては、デザイナーが初期のコンポーネントデザインを作成し、それをエンジニアに提供します。エンジニアはこれを実装する過程で、「この部分は技術的に難しい」とか「こうすればもっと効率的になる」といった点を見つけて伝えます。デザイナーはその意見を聞いて修正し、再度エンジニアが実装を試みるというサイクルを繰り返しながら進めていきます。

適切なバージョンアップ管理

現場から改善すべきポイントとして意見が上がってきたら、それをデザインシステムに取り入れ、バージョンアップ管理を行います。成熟したデザインシステムなら、四半期ごとなど決まったタイミングで更新することもありますが、まだ発展途上の段階では、必要に応じてその都度バージョンアップしていきます。

【主要な更新項目】

  • デザイントークン
  • コンポーネント
    • 新規コンポーネントの追加
    • 既存コンポーネントの改善
    • アクセシビリティ対応
  • ドキュメント
    • 使用ガイドライン
    • 実装例
    • 変更履歴

バージョンアップは運用の効率化を継続的に高めるメンテナンスという側面でも重要ですが、ユーザー要求の変化や組織の成長に合わせて戦略的に進めていく必要もあります。

認知拡大と活用の促進

デザインシステムを運用する上で、社内に広く知ってもらい使ってもらう活動は非常に重要です。デザインの一貫性を保ち、効率を上げ、継続的に改善していくには、デザインシステムに関わる人が多いほど効果が大きくなります。せっかく作ったデザインシステムが「宝の持ち腐れ」にならないよう、計画的に社内に広めていく必要があります。

デザインシステムを使うデザイナーやエンジニアには、実際に使ってもらってその有用性を体感してもらうことが最も効果的です。一方、プロダクトマネージャーや経営層、直接プロダクト開発に関わらないメンバーに対しては、デザインシステムの価値を伝えるのが難しい場合があります。

この課題に対しては、外部の専門家の知見を活用するのが効果的です。外部の視点を取り入れることで、ステークホルダーに説得力のある説明ができるようになります。

デザインシステムの運用でよくある疑問(FAQ)

最後にデザインシステムの運用においてよくある疑問に答えていきたいと思います。

デザインシステムの導入効果を測るための具体的な方法を教えてください。

デザインシステムは、大きく分けて以下2つの側面から効果を計測することができます。

  • 開発効率の向上
    • コンポーネント開発時間の削減率:
      デザインシステム使用時と未使用時のコンポーネント開発時間を比較し、削減率を計測します。
    • デザインから実装までのリードタイム短縮:
      デザインシステム適用による実装までの時間短縮を計測し、その変化を確認します。
    • ベロシティチャート:
      Jiraなどのツールを用いて、デザインシステム導入前後のチームのベロシティ変化を比較します。これにより、チームの生産性を可視化できます。
  • 採用率と普及度
    • デザインシステム採用プロジェクト数:
      組織内でデザインシステムを採用しているプロジェクト数を管理します。各プロジェクトの効率化度合いを計算し、全体の工数削減を概算できます。
    • コンポーネントの使用率:
      Figmaのライブラリアナリティクスなどを使用して、デザインシステムのコンポーネント使用率を測定します。

これらの指標を定期的に測定し、効果を数字で示すことで、会社全体でデザインシステムへの理解と支持を得やすくなります。また、これらの数値は、システムを継続的に良くしていくための目安としても役立ちます。

デザインシステムを社内に定着させるために、どんなことから始めればいいですか?

デザインシステムの社内への定着は多くの企業が直面する課題ですが、効果的な方法がいくつか存在します。

まずは、デザインシステムの恩恵を受けやすい現場のデザイナーやエンジニアに実際に使ってもらって、その効果を体感してもらうことから始めてみましょう。たとえば、プロトタイプ作成時間の短縮効果などを示すことで、デザインシステムの価値を直接的に感じてもらえます。

実際に手を動かさないメンバーには、根気強く丁寧に説明することが大切です。「なぜデザインシステムが必要なのか」「何を目指しているのか」を共有し、「組織全体のデザイン品質が上がる」「開発がスピードアップする」といった長期的なメリットを強調すると理解が深まります。

さらに、関係者や上層部も巻き込んで定期的なミーティングや経営会議での進捗報告を続けることで、デザインシステムの価値を社内に広め、プロダクトマネージャーを含む社内メンバーの理解を深めることができるでしょう。

デザインシステム運用における作業を自動化したいのですが、どのように進めればいいですか?

自動化ができる部分はいくつかありますが、チームの負担が大きい作業から優先的に自動化を進めるのがいいでしょう。

  • デザインとコードの同期自動化
    FigmaのAPIやプラグインを活用してデザイントークンから自動でコードの書き出しが可能です。
  • テストの自動化
    Chromaticなどのビジュアルテストツールを使用して、デザインシステムコンポーネントの変更を自動的にテストし、QAプロセスを効率化します。これにより、エラーや不具合を早期に発見できます。
  • ドキュメンテーションの自動化
    Zeroheightなどのツールを利用して、デザインシステムのドキュメントを自動生成・管理します。これにより、常に最新の情報がチーム全体で共有され、一貫性が保たれます。

こういった自動化の方法を少しずつ取り入れていくと、チームの作業効率が向上し、人的ミスも減らすことができます。ただし、自動化の導入には初期投資が必要なため、コストと効果のバランスを考慮しながら進めることが重要です。長期的には、自動化で浮いた時間を構造設計やアイデアの発展など創造的なタスクに使えるようになり、デザインシステム自体の質も良くなっていきます。

デザインシステムの運用ツールについて詳しく知りたい方はこちら。
デザインシステムの連携・運用管理に使えるツール4選

まとめ

デザインシステムの構築と運用において、外部ベンダーを活用することは、専門知識と経験を取り入れつつ、効率的に進める有効な手段です。土台ができた後も、継続的に磨き上げたり、社内に広めたりする一連の流れを計画的に進めることが大切です。

自動化も取り入れながら、長期的な視点でデザインシステムを育てていくことで、組織全体のデザインに対する考え方や取り組み方が良くなり、ユーザーにとって使いやすい製品を生み出す会社の大切な財産になっていくでしょう。

アイスリーデザインは、デザイン原則の策定からコンポーネント設計、フロントエンド開発まで、デザインシステム構築と運用を総合的にサポートします。お客様のビジネスを深く理解し、ブランド力を高める一貫性のあるUIデザインを実現。内製化支援にも対応し、長期的なデザイン品質向上と開発効率の最適化を支援します。まずはお気軽にご相談ください。

アイスリーデザインのデザインシステム構築支援サービス

  • Contact

    お問い合わせ

    アプリやシステム開発、UIUX改善など、お客さまのビジネスを成功に導いたサポート実績が多数ございます。お気軽にお問い合わせください。

  • Download

    資料ダウンロード

    私たちのノウハウや業界別の事例など、提供するサービスについて詳細にまとめた資料になります。ぜひご一読ください。

  • Mail magazine

    メールマガジン

    UI/UXデザイン・システム内製化・DX推進についてのお役立ちメソッドや、限定イベントや最新事例などをお届けします。