デザインシステムを普及させるためには？

デザインシステムの採用と拡張は簡単ではありません。ステークホルダー、プロダクトマネージャー、開発チーム、デザイナーを説得し、デザインシステムの価値を伝えるために、組織全体から得なければなりません。

デザインシステムの構築は、最初の一歩にすぎません。デザインシステムが使われて最適な成熟度に到達するには、多くの時間と費用がかかります。 デザインシステムを伝えるということは、そのデザインシステムで、チームがより効率的で生産性が高く、複雑な課題に自由に取り組めるようになるということを証明しなければならないということです。

ExxonMobileがデザインシステム「Unity」を作成したとき、同社は10か月で50以上ものWebアプリを構築しました。 このように、デザインシステムがどのようにビジネス価値を生み出し、投資収益率（ROI）をもたらすかを実証することが目標です。

この記事では、デザインシステムをステークホルダーや投資家に売り込む際に役立つ実用的な情報・ヒントなど、組織の賛同を得るための方法についてご紹介します。

ゼロから始める・既存のデザインシステムを使用する場合でも、UXPinには、プラグインやエクステンションのない単一のプラットフォームを使用した、デザインシステムを構築、拡張、成熟させるためのソリューションがあります。 

なぜデザインシステムの普及が必要なのか？

多くのステークホルダーは、デザインシステムの構築と管理を、収益を生み出す製品のデザインと最適化から外れた、やたらコストのかかるものと見なしています。 彼らは、デザインシステムがどのようにROIを生成するかをわかっていません。

デザイナーには、他のデザインチーム、プロダクトマネージャー、およびエンジニアにデザインシステムを採用するよう説得するという壁も立ちはだかります。 Spotifyが2018年にデザインシステム「Encore」を構築したとき、彼らは「22種類のデザインシステムが浮遊していた」といいます。

したがって、デザイナーにとってデザインシステムの普及が必要な主な理由は2つです。

• ステークホルダーにとってのビジネス価値を証明する。
• デザイナー、プロダクトチーム、およびエンジニアの作業負荷を軽減および生産性の向上。

デザインシステムのバイインを取得において誰が責任を担うのか？

誰がデザインシステムのバイインで責任を担うのかは、組織とデザイン設計部門の構造によって異なります。 製品マネージャー、Webマネージャー、デザインリーダー、DesignOpsリーダー、またはスタートアップ会社の業務を受け持つUXデザイナーから任されることもあり得ます。

Eightshapesの創設者であるネイサン・カーティス氏は、3つのよくあるデザインチームの構造と、デザインシステムの拡大にどのように関与しているかを識別しています。

• 独立型チームモデル：一般的に、スタートアップの環境では、契約社員やフリーランサーと仕事をするUXデザイナーが一人いる。彼らは、一貫性を管理し、契約社員（および将来の社員）のオンボーディングを最小限に抑えるために、デザインシステムの必要性を説くこともある。
• 集権型チームモデル：中規模から大規模の組織で典型的なチーム構成で、集権化されたチームによって設計上の意思決定が行われる。複数の製品の設計決定を管理することが多い。
• 連合型チームモデル：米国上院の代表と同じように、さまざまなプラットフォームおよび製品ラインの設計者の部署が協力して、設定された期間、集合的に設計上の意思決定を行う企業構造。

ステークホルダーにデザインシステムを提案するタイミングは？

デザインシステムの構築が遅れるほど、そのデザインシステムの実行に時間と費用が掛かります。 問題は、AirbnbやSpotifyなどの多国籍企業を含むほとんどの組織が、これに気付くのが遅すぎるために、結局は多額の費用がかかってしまうということです。

Airbnbのデザイン担当副社長であるアレックス・シュライファー氏は、「単純なことです。まず製品の製造方法を導入しないことには、製品を導入することはできません。」 と述べています。

UXPinがデザインシステムのスペシャリストである、Superfriendlyのダン・モール氏に話を聞いたとき、どの規模の会社がデザインシステムから利益を得るのかを尋ねました。 ダン氏は、「私が特定できるような規模あるとは思いませんが、その会社の維持している、または維持しようとしているデジタル資産の数に左右されることだと思います。」と答えました。

デザインシステムがないと、ソフトウェア開発プロセスが徐々に遅くなり、ユーザーエクスペリエンスが低下します。 デザインを拡張するために設計者の雇用を増やすことはできません。 デザイナーが増えるのは「キッチンで調理する人」が増えるということであり、その結果、デザインプロセスに収拾がつかず、一貫性がなくなり、デザインにズレが生じます。

以下は、タイミングをみるためのチェック事項です：

• 製品開発のスピードに満足していますか？
• 自身のインターフェースは、同じデザインパターン、色、文字デザイン、およびその他のスタイルを共有していますか？
• KPIを満たす高品質の製品を提供するのに十分な時間は常にありますか？
• 部門のサイロは設計にどのように影響しますか？
• 余分な設計またはコードタスクにどのくらいの時間とお金をかけていますか？
• 設計や技術的負債の整理にどのくらいの時間とお金をかけていますか？

このような質問に答え、設計上の問題を浮き彫りにすることで、組織がデザインシステムを導入する時期だということを提案できるきっかけになります。

デザインシステムをどのように普及するか？

無料のツールキットであるデザインシステムの普及に、デザイナーからバイインを得るための実証済みのテンプレートがあります。 デザインシステムが解決する問題と、それがどのようにROIをもたらすかを特定するための内部リサーチが必要です。

以下は、プレゼンを準備し、デザインシステムを広めるための5つのステップです。

ステップ１ー　リサーチの実施

最初のステップは、リサーチを実施して、設計における社内の問題点を見つけることです。例えば、もしかしたら、UIキットやスタイルガイドの方が、より現実的で費用効果の高いソリューションかもしれません。

この方法は直感に反するように聞こえるかもしれませんが、ステークホルダーや他のチームメンバーからの抵抗や精査に直面する可能性が高いことを頭に入れておいてください。 あなたの目標は、難しい質問に備えるためにあらゆる可能性を確実に探っておくことです。

プロダクトマネージャー、デザインリーダー、カスタマーサポートマネージャー、エンジニア、およびその他のチームメンバーが直面している問題と課題を把握するために、リサーチには彼らへのインタビューも含まれるべきです。

• 手直し率は？
• デザインの引き渡しの問題は何ですか？
• ユーザビリティの問題に関連するサポートチケットはいくつありますか？ そして、ユーザーへの影響は何ですか？
• どのくらいの頻度で設計と開発にズレが生じますか？

この段階での目標は、デザインシステムが解決できる問題を特定し、ROIがプラスになるのを実現することです。 最も重要なことは、これらの社内の問題が顧客にどのような影響を与えるかということです。

ステップ2–調査に基づいてプレゼンの準備

デザインシステムを広めるテンプレートには、4つのセクションに40を超えるスライドがあり、デザインシステムを実施するための強力なプレゼンを作成するために必要なものがすべて含まれています。

以下がプレゼンに含まれます：

• ユースケースと調査からの事実による導入
• デザインシステムとは何か、そしてそれがどのように機能するかの概要
• ROIを計算して提示するためのテンプレート
• 次のステップのセクションと、設計システムの実施を計画する方法

また、デザインシステムの一貫性と整合性を維持するために、ガバナンスのシステムとデザインシステムチームが必要になります。 そうしないと、Spotifyのように、22のデザインシステムが世界中に広がってしまいます。

デザインシステムチームの規模は、会社と製品数によって異なります。 以下は、Superfriendlyが集権型チームモデルに推奨するデザインシステムチームの例です（上記の「誰がデザインシステムのバイインを得るために責任を担うのか？」をご参照ください）。

• プロダクトオーナー
• デザインマネージャー
• テクニカルディレクター
• シニアデザイナー
• シニアエンジニア
• シニアアナリスト
• コンテンツストラテジスト
• アソシエイトデザイナー
• アソシエイトエンジニア
• QA

規模が小さめの企業やスタートアップ企業では、これらの役割のうち2〜5つしか果たしていない場合があります。

ステップ3–味方を見つけてチームを教育する

ステークホルダーに提案する前に、チームメンバーの教育をすることが不可欠です。 プロジェクトの背後にいるチームメンバーが多いほど、ステークホルダーを説得できる可能性が高くなります。

Abstractのシニアプロダクトデザイナーであるジョーダン・スタニシア氏は、デザインシステムに対するあなたの情熱とビジョンを共有する他の部門から「味方」を見つけることを勧めています。 こういった味方の伝道者は、あらゆる部門がどのようにデザインシステムを使用するか、そしてそのチームメンバーにアピールするための最善の方法を教えてくれます。 SurveyMonkey、HubSpot、WeWorkの従業員はすべて、この戦略でチームメートの教育をしてきました。

このプロセス中で、ステークホルダーへのプレゼンを強化するためのより深い見識が得られるかもしれません。

ステップ４ー　ステークホルダーへのプレゼン

ステークホルダーへのプレゼンでは、次のことを提示することが重要です。

• デザインシステムが、これまで他社や競合他社にどのように役立ったか
• 自社が抱えている問題点、ペインポイント
• これらの非効率性から生じるコスト
• 顧客への影響
• チームメンバーからのフィードバック
• デザインシステムによる非効率性の低減・解消とそれに伴うROIの算出方法
• 会社特有の利点
• 提案するデザインシステムの構造の基本的な概要
• デザインシステムのチームとガバナンスの概要

無料のテンプレートであるデザインシステムの普及には、こういったポイントをステークホルダーに簡潔に提示するための余白スペースがあります。

ステップ5–継続的な伝導とアウトリーチ

デザインシステム自体のように、あなたがする伝導と教育は進化の途中です。なので、 デザインシステムチームは、引き続きチームメンバーと連携していなければいけません。

• 問題点の洗い出しと解決策
• インプット、提案、オーナーシップの奨励
• 更新、拡張およびベストプラクティスに関するチームへの教育

デザインシステムを拡張するにつれて、より多くの資金とリソースが必要になるので、デザインシステムをステークホルダーに継続的に伝道することが重要です。

• デザインシステムが非効率性をどのように改善したか実証
• チームメンバーからのフィードバック
• デザインシステムに関連するユーザーリサーチからのフィードバックの共有
• デザインシステムによるユーザビリティとアクセシビリティの改善方法
• ROI
• デザインシステムのロードマップと、将来の変更がビジネス価値をもたらす方法

UXPinを使用したデザインシステムの構築、拡張、および成熟

UXPinのデザインシステムの機能を使用して、最小限の投資でデザインシステムを始めてみませんか。 色、アセット、文字デザイン、コンポーネントを使用して、デザインシステムをゼロから設計してみましょう。 ドキュメントを使用してデザインシステムを管理し、新しいコンポーネントの権限を設定して、不正な変更を防ぐこともできます。

UXPinは、UXPi Mergeを使用した、拡張および成熟したデザインシステム向けのソリューションもあります。 マージを使用すると、リポジトリからデザインシステムをUXPinのデザインエディタに同期できます。 設計者は、完全に機能するコードコンポーネントを引き出して移動させるだけで、新しい製品やユーザーインターフェースを構築できるのです。

Mergeを使用すると、UXデザイナー、プロダクトチーム、およびエンジニアは皆まったく同じコードコンポーネントを使用するため、組織全体で信頼できる唯一の情報源が作成されます。

UXPinを使用してゼロからデザインシステムの構築を開始する無料トライアルにサインアップするか、成熟したデザインシステムについては、Mergeのページにアクセスして詳細をご覧ください。