DMN Report #91インターフェースのためのデザインシステムを超えて： デザインシステムのエコシステム

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

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

・・・

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

・・・

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

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

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

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

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

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

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

・・・

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

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

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

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

5つのレベル（「進行中」モデル）：

• レベル1：組織のデザインアプローチ　あらゆるデザインシステムレベルを超える、包括的なデザイン関連ガイドラインです。
  
  
• レベル2：ブランドのためのデザインシステム　ブランドがどのように構想・設計・形成されるのか。ブランドのデザインシステムには、新しい（サブ）ブランドをどのように作成するかについてのコンポーネントやガイドラインが含まれるかもしれません。しかし、多くの場合、使用するブランドは1つだけです。デザインシステムは、ブランドのさまざまな表現や方向性、そして関連するすべてのガイドラインに焦点を当てます。ブランドは内部向けもあるし、外部向けもあります。
  
  
• レベル3：サービスのためのデザインシステム　組織がサービスをどのようにデザインし、組織化するのか。サービスは、「認証／ログイン」などの機能的なマイクロサービスではなく、「オンライン食品配達プラットフォーム」などの、経済的／ビジネス的な意味での、大規模エンドツーエンドのサービスを指します。
  
  
• レベル4：製品のためのデザインシステム　消費者向けか否かを問わず、組織が製品をどのようにデザインするのか。
  
  
• レベル5：インターフェースのためのデザインシステム　組織がどのようにインターフェースを設計・構築するのか。2021年のBrad Frost氏の定義に基づく。これは、デジタルインターフェースだけでなく、サービスに物理的なタッチポイントが含まれている場合、別のチャネルやメディアである可能性もあります。

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

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

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

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

• レベル1（最も高い階層）：組織にはビジョンとミッションがあり、そのうちいくつかは、その組織がどのように活動するのか（活動したいのか）実践や戦略として、デザインやデリバリーに対してどのような態度をとるか、といった包括的なアプローチを直接決定するかもしれません。
  
  
• レベル2：組織のブランドはビジョンとミッションの要素を取り入れ、全体のブランディングに反映させます。ロゴ、タイポグラフィ、カラースキーム、ブランド戦略と原則、言語のトーン、ビジュアルアートディレクションなど、多くの場合、ブランド要素はトークンとなり、インターフェースのためのデザインシステムに継承されます。
  
  
• レベル3：企業がどのように運営されているか、ブランド戦略と原則は何かということは、企業がどのようにサービスを運用して顧客に届けるかということに影響します。より高いレベルのガイドラインは、サービス原則を定義するためにさらに抽出されます。サービスレベルアグリーメント、顧客体験のプロミス、マルチチャネルサービスアプローチなど。
  
  
• レベル4：組織のデジタル製品が従う具体的なガイドラインやアプローチ、ユーザージャーニーのパターンに影響を与える、具体的なデジタル製品の原則や戦略など。すべての情報は、上記レベルの要素とともに、サービス原則の影響を受けます。
  
  
• レベル5（最も低い階層）：最後にUIコンポーネントは、上位レベルでカプセル化された一連の決定を表現します。各コンポーネントのスタイル・使い方・根拠は他のレベルの「why」に基づきます。

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

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

・・・

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

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

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

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

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

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

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