マルチブランド （複数のブランド）を持つ場合の デザインシステム の始め方
デジタル製品をゼロから開発するには、多くのリソースが必要ですが、 マルチブランド デザインシステムで 、一旦構築したものを複製し、カスタマイズすることができ、それによって何千時間ものデザイン・開発時間の削減が実現します。
このような デザインシステム の一元化は、組織が異なるブランド間でコストを共有し、新製品を市場に投入するためのフレームワークをより早く提供することができるということになります。
革新的なMergeテクノロジーを使ってコンポーネントライブラリをUXPinのデザインエディタと同期させ、デザインおよび開発全体にわたる『信頼できる唯一の情報源（Single source of truth）』を作成しませんか。Mergeのページで詳細とアクセス権のリクエストについてぜひご覧ください。
マルチブランドと１つ（単体）ブランドでの デザインシステム の違い
一言で言えば、「柔軟性」です。マルチブランド・デザインシステムは柔軟性に最適化されており、製品チームは既存のコンポーネントライブラリを活用して別のブランド向けの製品を開発することができます。
それに対し、企業は、柔軟性を制限する原則や制約を中心に、モノブランドのデザインシステムを構築しています。このような制限を設けることで、デザイナーは高い品質と一貫性でプロジェクトを確実に遂行することができます。
デザイントークンによる変化の促進
大抵のマルチブランド・デザインシステムでは、トークンのプロパティを変更するだけで、色、タイポグラフィー、 コーナー半径、スペーシングなど、ブランド要件に応じたグローバルなスタイル変更を簡単に行えるようにデザイントークンが使われています。
このように、マルチブランド・デザインシステムは、変更を簡単にするために構築された、テーマ性のあるオープンソースのコンポーネントライブラリと多くの類似点があり、基本的に、適応可能なコードベース、デザイン言語、ブランドガイドラインを備えたテンプレートまたはツールキットです。
以下より事例紹介をしていきます。
例1: Forge – Harry’s
デザイントークンの使用は、マルチブランド・デザインシステムの１つの側面であり、組織は、コンポーネントライブラリをカスタマイズできるようにしなければいけません。パーソナルケアブランドのHarry’sは、ブラッド・フロスト氏のアトミックデザイン（またはレイヤー化）のアプローチを用いて、マルチブランド・コンポーネントライブラリである Forge を構築しました。
Forgeには以下の２つの層が使われています：
ベース層（またはサブコンポーネント）：”これ以上分解できない柔軟な基本コンポーネント“。製品チームは、おそらくデザイントークンを通して、このような基本コンポーネントのスタイリング プロパティのみを変更する。
複雑層（「第二のレイヤー」）：”具体的かつ意見に基づいた方法で配置した複数のベースコンポーネント“
Harry’sでは、コンポーネントを「層」で構成することで、製品チームがブランドに依存しない層を維持しながら、ブランド固有の層を入れ替えてユーザー・インターフェースをカスタマイズできるようなマルチブランドのコンポーネント・ライブラリを構築しました。
また、Forgeの層によるコンポーネント構造は、各ブランドがレゴブロックのようにサブコンポーネントを使って新製品のデザインシステムを構築することができるため、柔軟性に富んでいます。
「Forgeを使えば、ブランドはサブコンポーネントを自由に組み合わせて、コンポーネントライブラリに変更を加えることなく、ユーザーに合わせたソリューションを作ることができます。」− Harry’s シニアソフトウェアエンジニア、メイ・カポッツィ氏
Forgeのデザインシステムガバナンスには、プロダクトマネージャーが新しいパターンを推進するための選択肢が以下のように４つあります：
- 既存のオプションA：カスタムコンポーネントの構築
- 既存のオプション B：既存のコードベースからコンポーネントの再利用の試み
- 新しいオプション C： Forge のベース コンポーネントからの「新しい」コンポーネントの組み立て
- 新規オプション D： 既存の Forge コンポーネントの使用
例2: フォルクスワーゲン「GroupUI・エンタープライズ」
フォルクスワーゲンの『GroupUI』は、約１５以上のブランドに対応するマルチブランド・デザインシステムです。２０２２年にInto Design Systemsとのウェビナーを収録した時点では、VW、Skoda、Audi、Porche、Man、Scania、RIOなど、Volkswagen系ブランドの一部しか GroupUI を採用していませんでした。
テク系企業とは異なり、フォルクスワーゲンには物理的な（タンジブル）製品とデジタル製品など、多くのデザイン層があります。
「たとえば、車載 HMI、Web アプリケーション、アプリ、および一部の内部 VR/AR アプリケーションの調和などの、1 つのブランド内でのタッチポイントの【縦の調和】、それから技術の【横の調和】という２つのことを両立させなければいけません。」- フォルクスワーゲンAG、ユーザーエクスペリエンスリードグループIT、トーステン・ヤンコフスキー氏。
フォルクスワーゲンは、各ブランドの中に複数のタッチポイントレイヤーを以下のように設けています：
- Web 技術
- ネイティブアプリケーション
- AR・VRのドライバーシステム
- 車載 UI
GroupUIは Web 技術 にフォーカスしていますが、あらゆるタッチポイントで一貫したUX を実現すべく、各ブランドのバーチカルとの可能な限りの連携が必要です。
例えば、顧客がブランドのWebサイトから車両を購入する場合、UXとUI は、ウェブサイトからメールマーケティング、車載用ユーザーインターフェースまで一貫してないといけません。
GroupUIのマルチブランドにおけるデザインシステムの原則
あらゆる業種やタッチポイントで一貫したブランド体験を維持しながら、このような柔軟性とカスタマイズ性を実現するために、GroupUI は次のような一連の「包括的原則」を開発しました。
GroupUIの「 ” 〜よりも—– ” の包括的原則」で、共通の目標に向かって交錯する以下の３本柱を通して、グループ導くことができます：
- 柔軟性
- 連携
- 透明性
硬直性より柔軟性：GroupUIはフレームワークにとらわれません。つまり、ブランドはその目的や目標に最も適したReact、Angular、Vueなどのフレームワークを採用することができます。その実現には、GroupUIのコアコンポーネントライブラリは、Webコンポーネントを使い、トークンベースで、Snowflakeを促進します。
ステークホルダー重視よりもグローバルな連携： GroupUIは、単一のブランドやステークホルダーよりもグループのニーズを優先させることで、「共通の目標としての継続的な進化」を目指しており、このジェネリック戦略が信頼を高めています。GroupUIのチームは、ブランド別ではなくジェネリックの導入を促進するために、普及と配布に継続的に取り組んでいます。
複雑なドキュメントよりも透明性：GroupUIでは、課題やデザインソリューションに一元化したバックログが使われます。この一元化により、ブランドが共に学び、進化するためのエコシステムが促進されるとともに、各ブランド内の縦割り、グループ全体の横割りのサイロが解消されます。
マルチブランドデザインシステムと「通常」のデザインシステム
GroupUI はフォルクスワーゲンの内部調査を利用して、マルチブランドと通常のデザインシステムを比較し、”マルチブランド・デザインシステムはコストを共有し、真の共同開発を実現する “ということがわかりました。
マルチブランドと通常のデザインシステムを比較したところ、４つの主要なメトリクスで以下のような驚くべき結果が得られました：
- ２５％安くて速いUI のデザイン作業
- 開発の効率と効果の３０%上昇
- 将来の管理コストの３０%削減
- 市場投入までの時間が３〜４倍短縮
マルチブランドデザインシステム構築のための３つのヒント
少ないツールで採用を促進
デザインツールを最小限にすることが、マルチブランド・デザインシステム構築の第一歩です！ツールが増えるということは、デザインシステム・チームが複数のプラットフォームを維持しないといけないということになりますからね。
News UK が The Times、The Sun、Virgin Radio、The Sunday Timesなどのマルチブランドのデザインシステムを構築した際、デザインシステム部門責任者のニック・ドーマン氏は、複数のツールの使用は “バラバラなソリューション “になることに気づきました。DS チームは各プラットフォームの変更を体系的に更新および検証する必要があったため、単純な変更の実装には数日または数週間かかりました。
News UKは画像ベースのデザインツールを選択し、デザインの統一を図りましたが、それでも以下の２つのデザインシステムの維持が必要でした：
- デザイン用 – 画像ベースのUIキット
- 開発用 – コンポーネントライブラリ
UXPin Mergeは、マルチブランド・デザインシステムに対応した、はるかに優れたデザインツールソリューションであり、レポジトリにホストされているコンポーネントライブラリをUXPinのデザインエディタに同期させ、デザイナーとエンジニアが同じUI要素を使用できるようにします。レポジトリが更新されると自動的にUXPinに同期され、デザインチームに変更が通知されるため、デザインおよび開発全体で『信頼できる唯一の情報源（Single source of truth）が作成されるのです。
フレームワークを問わないデザインシステム
フォルクスワーゲンから学んだように、フレームワークにとらわれないデザインシステムで、ブランドはそのニーズに最も適した技術スタックを使うことができます。GroupUIは、フォルクスワーゲンのブランドで使われている３つのフレームワークである【Web Components/HTML】、【Angular】、【React】をサポートしており、ブランドは、ガイドラインやドキュメントを含む一元化されたStorybookを通じて、このコンポーネントのプレビューができます。
Forgeと同様、GroupUIのデザインシステムは、チームがニーズに合わせてコンポーネントを構築できるように「層」で構成されており、各コンポーネントやネストされたコンポーネントのプロパティは、ブランドのテーマによって確定されます。
デザイナーは、UXPin Mergeによってフレームワークに依存しないデザインシステムの恩恵を受けることもできます。MergeのStorybook統合により、デザインチームはStorybookと互換性のあるフレームワークをUXPinのデザインエディターと同期することができ、UIキットの作成が不要になります。
デザインハンドオフの際には、エンジニアがフレームワークのパッケージをインストールして適切なテーマを適用し、UXPinがレンダリングしたコンポーネントの変更をコピーして、フロントエンドの開発を完了させます。
マルチブランド デザインシステムの将来性
アトミックデザインの方法論の採用は、マルチブランド・デザインシステムの将来にわたる維持にはとてもいい戦略であり、フォルクスワーゲン、Harry’s、NewsUKは、アトミックデザインの原則を適用して、柔軟でテーマ性のあるデザインシステムを構築しました。
このアイデアは、決して変更されないコアコンポーネントやビルディングブロックのベース層の作成であり、エンジニアは、そのコアコンポーネントをテーマ別のマスターコンポーネントの中にネストし、デザイントークンを使ってブランド
このフォルクスワーゲンの例では、タブパターンが２つ示されています。１つはポルシェ用で、もう１つはフォルクスワーゲン用です。タブのパターンとネストされたコンポーネントが同じであることに注目してください：各ブランドで変わるのはテーマのプロパティのみですね。
このアトミックの手法でコンポーネントやパターンを構築すると、マルチブランド・デザインシステムを拡張しやすくなる一方、各ブランドに個別のデザインシステム拡張のためのフレームワークを提供します。
UXPin Mergeでマルチブランドのためのデザインシステムを構築しよう
マルチブランド・デザインシステムは、デザインシステムチームが考慮しなければならないことがたくさんある、複雑な物であり、デザインシステムチームは、ワークフローを簡素化し、ツールを減らし、時間のかかる作業を最小限にする方法を見つけなないといけません。
News UKで見たように、複数のツールを使うと、複数のプラットフォームの更新・維持が、デザインシステムチームへの大きな負担となります。
UXPin Mergeは、デザイン、プロトタイプ、テストのための単一のソリューションをデザイナーに提供することで、このデザインツールの課題を解決します。プラグインや拡張機能は不要で、デザインチームに必要なものはすべて内蔵されています。
Mergeには、デザインと開発を同期させ、従来の画像ベースのデザインツールでは実現不可能だった、すべてのブランドにおける『信頼できる唯一の情報源（Single source of truth）』を作成するというさらなる利点もあります。
UXPinの【パターン】を使うと、デザインチームは、マルチブランド・デザインシステムからビルディングブロックを組み合わせて、コンポーネントライブラリの新しいパターンを進めることができます。UXPin の【パターン】は、コンポーネントバリアントの複数保存にも便利なので、デザイナーはプロトタイプ中に要素をドラッグ＆ドロップして正しいソリューションをすばやく見つけることができ、時間の節約になります！
マルチブランドを1つのコンポーネントで統合し、デザインと開発を同期させましょう。詳しくはMergeのページをぜひご覧ください。
