PSDtoHUBSPOT News Blog

This Blog Template is created by www.psdtohubspot.com

Written by DMN事務局
on 4月 10, 2024
DMN Report #91

インターフェースのためのデザインシステムを超えて: デザインシステムのエコシステム
 
フルスタックデザインシステム:大規模組織のデザインシステムとサービスデザインの視点
 Screenshot_2024-03-07_at_15.16.49-removebg-preview

Marie Lu Vinh

テクノロジーを愛するデザイナー(前職:Frog、adidas等)

Beyond design systems for interfaces:
an ecosystem of design systems


 

デジタルの製品やサービスが成熟するにつれ、それらをサポートするツールや仕組みはますます複雑になっています。特に複数のプラットフォームで、複数の製品やサービスを扱う、大規模組織では顕著です。

私はデリバリーチームと協働するサービスデザイナーとしてデザインシステムのコンセプトが、プロダクトチームなどの水平方向へ、または製品やサービスのような垂直方向へ、どのようにスケールするかを理解し、定義することに興味を持っていました。この記事は、そのフレームワークを構築するための継続的な試みのひとつです。

・・・

一般的にデザインシステムについて語るときは、パターンや再利用可能なコンポーネント、コードスニペットのコレクションに焦点を当て、デジタル製品のユーザーインターフェースを構築するためのデザインシステムについて語ります。

 

デザインシステムはインターフェースのためにある:

 

・デザインシステムはユーザーインターフェースに関連するコンテンツに配慮する

・デザインシステムはユーザーインターフェースに関連するアクセシビリティに配慮する

・デザインシステムはユーザーインターフェースに関連する個人最適化に配慮する

・デザインシステムはユーザーインターフェースに関連する言語とトーンに配慮する

・デザインシステムはユーザーインターフェースに関連するブランに配慮する

・デザインシステムはユーザーインターフェースに関連するパフォーマンスに配慮する

・デザインシステムはユーザーインターフェースに関連するコード標準に配慮する

・デザインシステムはユーザーインターフェースに関連する国際化に配慮する

・デザインシステムはユーザーインターフェースに関連するペルソに配慮する

・デザインシステムはユーザーインターフェースに関連する◯◯に配慮する

 

ーBrad Frost, Design systems are for user interfaces, 15 Nov 2021

 

サービスのポートフォリオを持つブランドにとって、インターフェースのデザインシステムだけ配慮しても、まとまりのある調和のとれた体験を生み出すことはできません。

 

結局のところ、デジタルサービスのデザインが、個々の製品とのインタラクションを超えているように、デジタル製品のデザインは、インターフェースを超えて広がっているのです。

 

UIのパターンやコンポーネントだけでは、それらがどうしてそうなっているのか、なぜそのように機能し、そのような見た目をしているのか、背後にあるストーリーの全体像を完全に伝えることはできません。このことが、いわゆる一般的なデザインシステムに、インターフェース関連以外のコンテンツを含めたくなる理由のひとつでしょう。

 

“デザインシステムは多面的なレイヤーケーキであり、組織のレイヤーシステムの一部としても機能する” ―Brad Frost, 2021

 

インターフェースのためのデザインシステムが、サブシステムが相互に関係した複雑なシステムであることを理解するように、デザインシステム自体も大きな包括的なデザイン”メガ”システムの一部分に過ぎないことを理解することが重要です。もしインターフェースのためのデザインシステムが、”メガ”エコシステムの中の1つの要素に過ぎないとしたら、他には何があるでしょうか。

・・・

第1部 デザインシステムの位相を探る

より高次のデザインシステムを理解する試み

組織は大抵複雑です。様々な人が、それぞれの瞬間に、色々なことについて異なるレベルの専門知識を持って関わっています。そしてデジタルの製品やサービスを提供するとなると、多くの製品チームやデリバリーチームが関わるのが通常です。

 

各チームは同じ「インターフェースのためのデザインシステム」を使用しているかもしれませんが、製品が調和のとれた、首尾一貫した体験を保証するものではありません。すべての組織に、ユーザージャーニーやサービス体験を保証するための専門チームや、チームが効果的に使用できる、ユーザージャーニーの様々なコンポーネントの再利用性を確保するためのプロセスがあるわけではありません。チームメンバーやプロダクトマネージャーはしばしば個人で、機能・ジャーニー・体験を調和させようとしますが、複数の製品(顧客向け、社内向け)を持つ組織で、同じ「インターフェースのためのデザインシステム」に準拠しているにもかかわらず、製品ごとに体験が大きく異なることがあります。

 

どのようなユーザージャーニーが存在し、誰が所有し、どの程度再利用可能か把握するのは難しいかもしれませんが、それはしばしば、ジャーニーの重複につながります。チームは、他にどのようなジャーニーが存在するか知らないため、既存のジャーニーを再作成します。あるいは、特定のマイクロサービスをどのようにエンドユーザーに見せるかについての明確なガイダンスや、既存のユーザージャーニーを再利用することが適切かどうか判断するためのガイダンスを持っていないかもしれません。ジャーニーは通常デザインシステムの範囲外で、多くの場合パターンとみなされませんが、みなされるべきかもしれません。

 

このことは、インターフェースのデザインシステムの、初期の時代を思い出させませんか?チームがしばしば、すでに存在するものを考慮せずに、新しいUIコンポーネントを作成し、意図しない視覚的無秩序を生み出していた時代です。この似た状況は、デザイン能力が関係するさまざまなレベルで存在します。

 

これは新しい話ではありません。システムの一部に焦点を絞ったに過ぎません。これまで、「インターフェースのためのデザインシステム」は、デザインシステムの会話を支配してきましたが、それがすべてではありません。

 

・・・

 

さまざまなタイプのシステム

 

「インターフェースのためのデザインシステム」という概念は、入れ子状態になった、より大きなデザインシステムの存在を推測させます。

 

ここ数ヶ月の間、私は5つのレベルの(またはタイプの)デザインシステムというアイデアを考えてきました。

Screenshot 2024-03-07 at 15.21.45

さまざまなレベルのデザインシステムが、それぞれ次のレベルにつながっている「進行中」モデル

 

5つのレベル(「進行中」モデル):

  • レベル1:組織のデザインアプローチ あらゆるデザインシステムレベルを超える、包括的なデザイン関連ガイドラインです。

  • レベル2:ブランドのためのデザインシステム ブランドがどのように構想・設計・形成されるのか。ブランドのデザインシステムには、新しい(サブ)ブランドをどのように作成するかについてのコンポーネントやガイドラインが含まれるかもしれません。しかし、多くの場合、使用するブランドは1つだけです。デザインシステムは、ブランドのさまざまな表現や方向性、そして関連するすべてのガイドラインに焦点を当てます。ブランドは内部向けもあるし、外部向けもあります。

  • レベル3:サービスのためのデザインシステム 組織がサービスをどのようにデザインし、組織化するのか。サービスは、「認証/ログイン」などの機能的なマイクロサービスではなく、「オンライン食品配達プラットフォーム」などの、経済的/ビジネス的な意味での、大規模エンドツーエンドのサービスを指します。

  • レベル4:製品のためのデザインシステム 消費者向けか否かを問わず、組織が製品をどのようにデザインするのか。

  • レベル5:インターフェースのためのデザインシステム 組織がどのようにインターフェースを設計・構築するのか。2021年のBrad Frost氏の定義に基づく。これは、デジタルインターフェースだけでなく、サービスに物理的なタッチポイントが含まれている場合、別のチャネルやメディアである可能性もあります。

 

各レベルは次のレベルに影響を与え、資産/原則は継承されます。概念的には、高い階層(レベル1側※訳者補足)から低い階層(レベル5側※訳者補足)になるにつれて、スコープは狭くなり、デザインシステムの内容は特定され、具体的になります。

 

階層が高いほど、抽象度は高くなります。次のレベルでは、関連する資産/原則を継承し、それを特定のスコープに関連する他のマテリアルに変換します。多くの場合、さらなる詳細と要素が追加されます。階層が低いほど、設計システムの内容は具体的になります。

 

オブジェクト指向の考え方に詳しい人なら、抽象化とカプセル化の概念をデザインシステムのレベルの概念に適用することで、これらは似ていることがわかると思います。

 

各レベルにあてはまる可能性のあるもの、それらがどのように次のレベルに継承されるか、例を挙げてみます:


Screenshot 2024-03-07 at 15.23.17
 

  • レベル1(最も高い階層):組織にはビジョンとミッションがあり、そのうちいくつかは、その組織がどのように活動するのか(活動したいのか)実践や戦略として、デザインやデリバリーに対してどのような態度をとるか、といった包括的なアプローチを直接決定するかもしれません。

  • レベル2:組織のブランドはビジョンとミッションの要素を取り入れ、全体のブランディングに反映させます。ロゴ、タイポグラフィ、カラースキーム、ブランド戦略と原則、言語のトーン、ビジュアルアートディレクションなど、多くの場合、ブランド要素はトークンとなり、インターフェースのためのデザインシステムに継承されます。

  • レベル3:企業がどのように運営されているか、ブランド戦略と原則は何かということは、企業がどのようにサービスを運用して顧客に届けるかということに影響します。より高いレベルのガイドラインは、サービス原則を定義するためにさらに抽出されます。サービスレベルアグリーメント、顧客体験のプロミス、マルチチャネルサービスアプローチなど。

  • レベル4:組織のデジタル製品が従う具体的なガイドラインやアプローチ、ユーザージャーニーのパターンに影響を与える、具体的なデジタル製品の原則や戦略など。すべての情報は、上記レベルの要素とともに、サービス原則の影響を受けます。

  • レベル5(最も低い階層):最後にUIコンポーネントは、上位レベルでカプセル化された一連の決定を表現します。各コンポーネントのスタイル・使い方・根拠は他のレベルの「why」に基づきます。

 

もちろん現実はもっと混沌としており、通常はそれほど明確にならないものですが。

 

概念的には、各デザインシステムレベルは存在するかもしれませんが、別々のシステムとして作成されるかどうかは、チームや組織のニーズ次第です。組織によっては意味をなさないレベルもあるかもしれません。場合によっては、製品レベルとサービスレベルを組み合わせられるかもしれません。実際には、概念的なレイヤーを作成する方法で構築された、名目上のデザインシステムとなる可能性も大いにあります。組織によっては複数のブランド・サービス・製品・インターフェースがあります。組織ごとに状況が違うため、デザインシステムが異なるかたちになる可能性は十分にあります。

 

・・・

 

デザインシステムのエコシステム

 

ここまで紹介したデザインシステムは、一連の独立したシステムであり、互いに入れ子になっていたり、同じ平面に共存していますが、互いに影響し合っています。あるシステムが破壊されれば、別のシステムに多かれ少なかれ影響が及ぶかもしれません。あるいは破滅的な出来事によって、すべてのシステムが一度に破壊されるかもしれません。

 

このアイデアを説明するために、デザインシステムのエコシステムを、一連のレストラン、そのセットメニュー・レシピ・食材で想像してみます。

 

レストランは、それぞれ同じ組織、つまりフランチャイズに属しているとします。それらのレストランは共通の哲学・特定の価値観やビジョン・ブランド要素を共有しています。同じガイドラインや目標に基づき、それぞれのサービスを提供していますが、各レストランは、それぞれ異なる特徴を示します。例えば立地などの要因に基づき、異なるテーマや、特定のバリエーションを持っているかもしれません。

Screenshot 2024-03-07 at 15.24.50

各レストランには独自のブランドアイデンティティがあり、プレイブックを適用する方法があります。特徴的でありながら、全体の一部でもあります。

 

独自のブランドとガイドラインを持ち、ある程度独立して運営し、異なる価値観と原則を持っています。

 

各レストランが、異なる3コースのセットメニューを提供しているとします。同じ組織に属しているため、知識やレシピを共有しているかもしれません。各レストランのブランドやストーリーに合うように、多少のバリエーションはあるにせよ、ほとんど同じメニューが提供されているかもしれません。


Screenshot 2024-03-07 at 15.25.38

 

各レストランはピル型のメニューを提供していますが、それぞれのブランドに適したバリエーションもありえます

 

メニューは様々な料理で構成されています。ある料理が複数のレストランのメニューで提供されることもあれば特定のレストランのメニューでしか提供されないこともあります。同じメニューが繰り返される場合、他のメニューやレストランに合わせてバリエーションがつけられることもあります。それぞれの料理はどのように盛り付けられ、どのような見た目で、味で、香りで、どのように感じられ、どのようなインタラクションがあるのか、ということを考慮しながらデザインされ、食事体験の中でそれぞれの目的を持っています。

 

食材が組み合わされる(組み合わされない)ことで、複雑な食事やシンプルな食事が作られます。ちょうど、インターフェースがデザインシステムのコンポーネントを使って作られるのと同じように。

 

各システムは他のシステムに影響を与えます。あるレベルのシステムの本質が変われば、別のレベルのシステムにも影響を与えるかもしれません。これは内部の変化や外部の出来事によって引き起こされることもあります。レストランに例えるなら、食材の入手可能性が変化するような出来事です。料理は調和を保つため食材を適応させなければなりませんが、これは時に味の方向性や魅せ方を変えることを意味し、異なる客層をターゲットにするよう求められ、より大きな反応や変化を引き起こします。ブランドの方向性や戦略が変わるかもしれません。メニュー・料理・食材を、新しいガイドラインに適応させなければなりません。

 

サービスや製品を提供する組織にとって、これは新しい規制や、市場原理かもしれません。ビジョンやブランド、サービス体験には影響しないかもしれませんが、提供するサービスの主要なユーザージャーニーやインターフェースに、大きな変化をもたらすかもしれません。

 

レストランの例えは完璧ではありませんが、私が言っているデザインシステムレベルの本質を明確にする一助になれば幸いです。私がこの例えを選んだのは、異なるレベルのシステムが、どのように絡み合っているのかを説明するためです。

 

現実に各レベルが目に見えて異なるスケールで動いているように、レベル間のヒエラルキーは、例のように明確ではないかもしれません。サービスはいくつかの製品を特徴としているかもしれませんが、製品もまた、いくつかのサービスを利用しているかもしれません。これについては改めて、詳しく説明します。

 

・・・

 

デザインシステムの接続

 

理想的には、各デザインシステムレベルは何らかのトークンシステムや参照方法によって、他のレベルの概念や要素を指し示すべきです。これは、ユーザー、コントリビューター、メンテナンス者が、決定がどこから来て、下流で何が影響を受けるのかを理解するのに役立つでしょう。また、プロセス間につながりを生み出し可視化することで、組織のグローバルなデザインシステムに対する共通理解を育むことができます。

 
Screenshot 2024-03-07 at 15.26.39

 

もちろんすべてをすべてにリンクさせることは、危険なラビット・ホール(超現実的な体験※訳者補足)になりかねません。あるものはあらゆる決定やコンテンツを参照し始めるかもしれませんが、チームが実験し反復し、革新する余地を失うほど、すべてが厳格であるべきではありません。

 

チームはドキュメンテーションのためにプロセスを追加せず、何がユーザーにとって適切か、何が最も価値をもたらすのかを、決定する必要があります。

機能的で持続可能なデザインシステムは、一般的に3つの部分から構成されます。

 

・アセット(パターン、コンポーネント、ライブラリ、コードスニペットなど)

自身とアセットに関するドキュメンテーション

(例:パターンや、関連する洞察をいつどのように使うか)

自身とアセットとドキュメントに関するプロセス

(例:パターンをいつどうやって更新するか)

 

複数レベルのデザインシステムの存在を確立するには、各システムを管理するチーム間で、意図的な合意と調整を行う必要があります。すべてを円滑に運営するために、デザインオペレーションがさらに重要になります。さもなくば物事は簡単に抜け落ち、デザインシステムは重複した作業を行い、スコープは重複し、利益よりも害をもたらすことになります。

 

組織内にデザインシステム専門チームがある場合、インターフェースのデザインシステムで上記のことを担当します。ブランドチームがブランディングガイドラインを担当し、それがブランドデザインシステムになることもあります。製品やサービスのデザインシステムは、専門チームの責任下に置かれるかもしれません。いずれにせよ、デザインシステムの採用やその拡張をサポートするためには、必要に応じて適度な独立性を保ちながら、様々な責任者間の調整が必要です。



先に述べたように、すべての組織に複数レベルのデザインシステムが必要なわけではありません。システムは生きて進化する構造体であり、チームや組織のニーズに応じて成長したり縮小したりします。ニュアンスや複雑さが増える前に、常に必要な最もシンプルな実装から始めることです。

 

デザインシステムは万能ではありません。各レベルがどのように次のレベルにつながるか、また、境界をどのように定義するかは、各組織の特殊性と、システムを作成して使い、維持するチームのニーズ次第です。物事のつながりを把握するためには、各デザインシステムの範囲と境界を理解する必要があります。

・・・

上記の考えは現在進行中のものです。大規模なサービスを形成するサービスデザイナーとして、また、デリバリーチーム内のUXデザイナーとして働いてきた私の経験に基づきます。何年もの間、私はサービスデザインパターンに取り組み、様々な組織でフリーランスとして働きながら、デザインシステムを立ち上げ、貢献する機会がありました。デザインオプスやナレッジマネジメントプラットフォームにも注力しました。これらの経験は、デザインシステムのフレームワークの側面・目的ごとにいかにニーズが異なるのか、どのように概念的なつながりが見えるかを、理解するのに役立ちました。

 

英語版参照元:

https://uxdesign.cc/beyond-design-systems-for-interfaces-an-megasystem-of-design-systems-4f87dd6d8df8

 

 

DMNでは、他にも様々なブログを「DMN Insight Blog」にて配信しております。
定期的に記事をご覧になられたい方は、ぜひご登録をお願いいたします!

「DMN Insight Blog」メールマガジン登録

You may also like: