大企業 が実践する デザインシステム のベストプラクティス8項目

大企業が実践する デザインシステム の ベストプラクティス 8項目

Whitespaceと共同で、数百人の技術者を対象とした「How to Overcome Challenges of Scaling a Design System ?(デザインシステムを拡張する際の課題を克服するには)」というウェビナーが開催し、DesignOpsとプロダクトデザインリーダーシップのエキスパートであるデイブ・マルーフ氏の司会で、多国籍企業2社から以下のスピーカーにご参加頂きました:

このウェビナーでは、メンテナンス、スケーリング、ガバナンスを含むデザインシステムにおいての2つの 大企業 の取り組みについて、興味深いインサイトが得られました。本記事ではウェビナーでの内容をまとめたものです。 大企業 におけるデザインシステムの活用方法や その ベストプラクティス をご紹介します。

UXPin Mergeで、デザインシステムの成熟と「信頼できる唯一の情報源(Single source of truth)」を達成しませんか。詳細とアクセス権の申請方法については、Mergeのページをぜひご覧ください。

 デザインシステム の利点

ウェビナーに入る前に、まずはデザインシステムの利点に着目したいと思います:

  • 一貫性および整合性の向上:デザインシステムは、統一されたビジュアルデザイン言語と機能を確立し、それによって製品およびプラットフォーム間で一貫したUX(ユーザーエクスペリエンス)が保証される。
  • 連携と連絡の強化:デザインシステムが「信頼できる唯一の情報源」として機能することによって、デザイナー、デベロッパー、ステークホルダーのチームワークが高まり、それによってハンドオフの効率化や、ミスコミュニケーションの減少が促される。
  • デザインおよび開発プロセスの迅速化::デザインシステム内の再利用可能なコンポーネントとガイドラインにより、チームのワークフローが速まり、それによって個々の要素のデザインやコーディングに費やされる時間が短縮される。
  • 拡張性および整備性:デザインシステムは適応性のために構築されており、それによってプロダクトチームは一貫性と使いやすさを保ちながら、製品の更新、拡張、整備がしやすくなっている。
  • より良いUXと製品品質:デザインシステムは、デザインに対する構造的なアプローチを提供することで、ユーザーのニーズと期待に応える洗練された高品質の UX の提供を支援する。

上記のメリットに関連する課題が組織でありますか?次のステップは、ビジネスケースの構築です。以下では、Sage社とWeir Groupのチームが、デザインシステムのための資金とリソースを確保する方法を見ていきます。

 デザインシステム のための資金・リソースの獲得と維持

大企業が実践するデザインシステムのベストプラクティス8項目 - リソースの獲得

1.Weir Groupにおける大規模な連携デザインチームのケース構築

多くのデザインチームが連携している 大企業 である Weir Group に勤めるライアン・ケイン氏は、デザインシステムによって実現される効率的な節約は、資金調達の説得材料になると主張しています。

さまざまなプロジェクト間で部品の再構築や再デザインを行う冗長性を回避することで、会社は大幅なリソース削減を実現できるのです。

また、ライアンは、コード化されたコンポーネントとデザインされたコンポーネントのレンズを通してこの「節約」を説明し、ローコードやノーコードのソリューションに依存するチームに対応するデザイン言語システムについて、より広い範囲で検討します。

この幅広いアプローチにより、開発手法に関わらず、全チームが時間短縮、一貫性、信頼、そして整合性のある製品体験のメリットを受けられるようになるのです。

Weir Groupの戦略は、構成上のニーズに合わせて ReactとReact Native のコンポーネントの軽量版を作成する点に魅力があります。またそれは、直接開発に携わってはいないけれど、購入および設定されたソリューションを使うチームにも、デザインシステムのメリットを広げています。

そして、大規模な組織では、SalesforceやSAPなどのシステムを含むさまざまな技術スタックがさらに複雑になり、適応性の高いデザインシステムの必要性がさらに高まります。

2.デイブ・マルーフ氏によるクリエイティブなアプローチ

デイブ・マルーフ氏は、Northwestern Mutual社における自身のチームが、デザインシステムの資金を獲得するための基礎的な議論として、アクセシビリティをどのように利用したかを説明しました。彼のチームは法務と連携し、組織はアクセシビリティをデザインシステムに組み込んで法域によっては罰金や訴訟の可能性がある規制上の課題を回避できることを実証しました。

彼の例では、デザインシステムやその他の UX のイニシアチブのケースを構築するには、チームが製品や業界の状況を総合的に評価する必要があることが示されています。

3.Sageの体験から学ぶ

Sage 社でのジュリアン・ヴァニエール氏の経験は少し異なります。彼のチームは、以前Intuit社でデザインシステムを構築したマネージャーからの経験・知識に基づいてデザインシステムを積極的に開始しました。各ステップを検証する必要はありませんでしたが、代わりに導入や実際の制約事項に焦点を当てました。

ヴァニエール氏のチームは、コンポーネントよりもパターンに焦点を当て、それが大きな違いを生むと見ています。Sage社のグローバルで多様な製品は、人事ソフトウェア、ERP(企業資源計画)、会計ソフトウェアなどへの注力を後押ししており、同社は完全な一貫性よりも、製品およびニーズに対応したシームレスなエクスペリエンスを目指しています。

デザインシステムのための資金とリソースを確保および維持の鍵は、組織固有の状況によって変わってくるのです。

コストや効率の削減、拡張性、多様な製品や地域にわたってシームレスな UX を提供する能力を実証することで、説得力のある事例を作ることができます。よりインクルーシブで包括的なデザインシステムのためには、パターンを超え思考や、より大きなデザイン言語の配慮が極めて重要です。

開発プロセスをより効率的に

大企業が実践するデザインシステムのベストプラクティス8項目 - 開発プロセス

ジュリアン・ヴァニエール氏は、Sage社がどのように デザインシステム の取り組みを構成しているかについてのインサイトを示し、アクセシビリティを重視することの重要性を強調しています。そして彼のチームは、5人の UX/UIデザイナーとアクセシビリティデザイナーを中心に、さまざまな役割で構成されています。

ジュリアンは、アクセシビリティへの取り組みを推進し、それがデザインシステムに新たな一面を加えています。また彼は、チームにアクセシビリティデザイナーがいることが、製品が全ユーザーにとってアクセスできるものであるのを保証するのに非常に重要であると述べています。このアクセシビリティは、地域やユーザーのニーズに関係なく、シームレスなUXの実現に不可欠なのです。

4.デベロッパーは、デザイン決めよりも構築に集中したい

ジュリアンによると、Sage社のデベロッパーは機能の構築に最も関心があり、通常はアクセシビリティの修正やデザインの決定には時間をかけたくないようです。デベロッパーのこのような傾向から、そういったことを効率的に処理できるデザインシステムチームへに対してのコストを正当に充てがうことができ、このように責任を分離することで、デベロッパーは自分たちの得意分野である機能構築に集中することができるようになります。

また、彼のチームは、各チーム内に「アクセシビリティチャンピオン」というアプローチを採用しました。この「アクセシビリティチャンピオン」というのは、その知識と専門性を活かして組織の他のメンバーを指導し、アクセシビリティのために全員が何をしなければならないかを明らかにする人のことを言います。

5.デベロッパーが開発に集中できる デザインシステム とは?

デザインシステムは、ガイドラインやコンポーネントを提供することで、デザインの決定やアクセシビリティよりも機能の構築に集中したいという開発チームの要望を促進することができ、その統一されたデザイン言語で、開発プロセスは効率化され、様々なプロジェクトや製品間の一貫性は保証されます

また、Sage社のアクセシビリティ・チャンピオンのような役割を担うことで、アクセシビリティのようなデザイン上の考慮事項に関する知識や専門知識をデザインチームに効率的に分散させることができ、より集中的で効率的な開発プロセスが実現され、デザイン専任チームによる費用対効果が強化されます。

厳しい状況における、いい仕事の維持

大企業が実践するデザインシステムのベストプラクティス8項目 - 維持

 Weir Groupは、企業機能がその上にある各事業から成る「連携構造」になっており、各事業では同じデザイン言語が使われますが、戦略や予算については個々に委ねられています。

また、デザイン言語は企業レベルで管理されますが、ライアンは、デザイン言語を本当に「所有」している人はおらず、それはそのコミュニティ全体が責任を担っていると強調しています。

6.多くのデザイン組織が直面する課題

企業レベルでのいわゆる「オーナーシップ」の理論的根拠は、責任を過剰に背負わないような専用のリソースを持つことにあります。多くの企業では、デザインチームは、製品やプロジェクトにデザインを提供すると同時に、デザイン言語の維持および成長という二重の負担を負うことが多く、リソースがひっ迫すると、必然的にデザイン言語の維持は優先されなくなってしまいます。

次回のウェビナーにぜひご参加くださいStrategies for Building a Resilient DesignOps Practice無料ウェビナーのご案内: 復旧力のあるDesignOpsプラクティス構築の戦略).

7.責任の分散および共有

この優先順位の低下を補うために、ライアンのチームは「デザイン作業」と「デザインシステムの維持」を分けており、実践的なデザイン作業は連携した事業者が行い、デザインシステムの維持や成長は中央のデザインシステムチームが管理するようになっています。

このように責任を分担することで、組織のデザインチームは製品やデザインプロジェクトに集中でき、コーポレートチームはデザインシステムの成熟度メンテナンスの管理が確実にできるのです。

8. デザインシステム は決して完成されたものではない

 Weir Groupは、そのガバナンスのために「貢献モデル」を採用しており、「デザインシステムは進化するものであり、決して完成されたものであってはならない」と認識しています。

また、連携する企業のデザインチームには、ライブラリでは対応できない新たなユースケースに基づいて、新しいコンポーネントをデザインし開発する権限が与えられており、各チームは、そのようなコンポーネントを UXPin Mergeを通じて、GitHubのリリースと同様に中央のライブラリに還元します。

このアプローチには以下のように複数の利点があります:

  • チームが単独の中央ライブラリに貢献できるようにすることで、作業の重複がなくなる。
  • 共有リソースに貢献するビジネス全体で力を発揮するチームと共に、すべてを統括する企業機能によって効率性が促進される。
  • リソースが限られている場合でも、デザインシステムの維持と成長が保証される。

UXPin Mergeによる デザインシステム の構築、拡張、成熟、および配布

Weir Groupでは、連携するデザインチームのための「信頼できる唯一の情報源(Single source of truth)」として UXPin Merge が使われています。ライアン・ケイン氏のチームは、UXPin Merge のバージョン管理機能を利用して、組織全体に変更を同期しており、従来のDesignOpsチームにとって複雑なタスクが、UXPin Merge によって完全に自動化されました。

UXPin Mergeによって、重複がなくなり、権限のあるチームが単独の中央ライブラリ(デザインシステムのレポジトリ)に貢献し、企業機能がそれを管理および維持することで効率化が実現されました。」 – The Weir Groupの UXデザイン責任者、ライアン・ケイン氏。

デザインプロジェクトのデザイン、プロトタイプ作成、テストに複数のデザインツールを使っていますか?デザインシステムの変更の同期や更新でDesignOpsに苦労していませんか?

UXPin Merge で、「信頼できる唯一の情報源(Single source of truth)」を作成し、時間のかかるタスクを自動化しませんか。詳細やアクセスのリクエストは Merge のページでぜひご確認ください。

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you