アドビのデザインシステムSpectrumが、全社的に受け入れらるまで | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

デザインシステムは、企業や組織にとってこの上なく有用なものです。全製品をまとめるストーリーを伝え、ユーザーには明確で一貫した使い心地を提供します。しかし、それを実践する手順の方はさほど明確でないこともしばしばです。特に大きな組織においては、デザインシステムに数多くのチームから相当量の協力を必要とします。そんなとき、どのようにして周囲を引き込めばよいのでしょう？

アドビが構築しているデザインシステムSpectrumについての概要は、先日公開した記事”大規模なデザイン管理への取り組み。アドビのデザインシステム「Spectrum」”をご参照ください。この記事では、会社全体にSpectrumの価値を認めさせる鍵となった手段について、その概要を紹介します。常に順調というわけにはいきませんでしたが、すべての関係者がデザインシステムの方向性に意見できる状態ができたことで、間違いなく良い状態になりました。

規模にはチームとして対応する

アドビは様々なプラットフォームにアプリやツールを提供しており、そのライブラリ群は膨大です。そして、その規模に対応するデザインシステムの構築は単純作業からは程遠いものです。そこで賢い働き方が重要になってきます。大規模というのは、単に多くの人々と働くという意味ではありません。できるだけ重複作業を減らして結果につなげることも重要になってきます。

これだけの規模に対応するには、デザイン、開発、管理の各チームを何か優れた手段でまとめ上げる必要があります。Spectrumチームが最も効果的と考えて実際に選択した手段を、以下に紹介します。

1. チームを超えた信頼を構築する

透明性と合意形成が鍵を握ります。すべての製品チームに売り込むために、まず、Spectrumチームとアドビの製品チームのデザイナーや開発者との、信頼関係の構築に着手しました。そのためには、可能な限り分かりやすくて包括的なデザインシステムを構築しなければなりませんでした。そこでSpectrumを規模に対応させるための準備として、単純かつ柔軟な分類を作成し（スタイル、要素、パターン、ガイドライン）、原則を定義し（合理的、人間的、還元的）、インクルージョンの適用対象を明確に設定し、高い品質を目標に掲げました。それは、プロセスが先に進んで、より多くのチームメンバーが関わるようになったときに効力を発揮しました。Spectrumに記述されるものは、以下のすべての項目を満たさなければなりません。

私たちのゴールは、アドビのすべての人々が自信を持ってSepctrumを使えるようにすることです。上の項目すべてを達成するために、各分野の専門家をチームに招き入れました。そうして、デザイナーや開発者がSpectorumを使い始めたとき、皆に同じように価値を持つ単一の資料を提供することができました。

信頼関係の構築の一部は、人々が必要とする情報を素早く提供できるようにすることです。そのため、Webサイトを作成し、Spectrumのコンテンツを閲覧したり操作できるようにしました。

信頼はWebサイトに情報を表示しただけでは形成されません。日々の行動にも影響されます。興味を最大化し、Spectrumによる変化を受け入れてもらいやすくするために、以下のステップを実行しました。

2. 規模に対応できる実装方法を実現する

デザインの変数が単一リソースから派生していない場合、実装はたちまち不整合な状態になります。

何故テキストのスタイルがこんなに沢山あるのかと疑問に思ったことはないでしょうか？それはあっという間に起きるのです。もし人手だけに頼って規模を拡大しようとすれば、その先に待つのは混乱でしょう。もし、常に唯一の情報元の値と結び付けられていれば、様々な実装にもデザインの意図が一貫して反映されます。このことが、個別の要件を持った複数の製品チームに、デザインシステムとしてのSpectrumを売り込みやすくしました。

私たちは、Spectrum DNAと呼んでいる、デザイン関連の変数を集めたリポジトリを構築しました。このリポジトリはSpectrumチームのデザイナと開発者によって管理され、デザインの視覚的な属性を定義した値が収集されています。色や文字スタイルやマージンなど、データとして表現可能なすべてのデザイン要素が管理されています。

ひとつ例を紹介しましょう。古典的なボタン要素です。

ボタンが画面に表示されるとき、そのボタンはいくつかの変数の組み合わせからできています。枠線の太さ、ラベルに使うフォントなどはすべて値として表現することができます。これらはデザイントークンと呼ばれることもあります。、

これらの変数がリポジトリに抽象化されていれば、様々な実装方法（例えば、React、Objective-C、UWP）でも一貫した方法でボタンを構築できます。何か変数に変更があれば、一箇所を変えれば、すべての場所にその変更を反映できます。

複製は断片化につながります。アドビは複雑なフレームワークをいくつも抱えながら開発を行っていますが、私たちは、デザインに必要なデータの重複を可能な限り減らすことを目指しました。つまり、デザインシステムに書かれた原則を効果的に伝え、可能な限り望ましい状態で展開されるよう努力したのです。

3. 貢献に力を与える

信頼構築のための基準の設定と、大規模実装に対応するためのツールは、新しい解決すべき課題を生み出しました。今では、その複雑さを緩和し本質を把握してはいますが、今後Spectrumが成長するにはさらに多くの作業が必要です。

この任務は私たちだけでは達成できません。デザインシステムの拡張には他のチームからの知見やクリエイティブな活力が必要です。そして、Stectrumを公正でごまかしの無いものにするには外からの視点が必要です。外部からの貢献を活かすことができれば、Spectrumを全社的に拡張するのにも役立つでしょう。

管理よりコミュニティーを大切にす

– ネイサン・カーティス、デザインシステムの原則

Spectrumを外部に開いたプロジェクトにする最初の試みは、Spectrum Precursorsという名前で今年の初めに始まりました。このプロジェクトは、新しいパターンを表現する場所の構築を目的とし、メインのSpectrumサイトの横に専用のWebサイトを用意しました。このサイトでは、アドビの各製品チームが自分たちのパターンを披露したり、他のチームが提供したパターンを閲覧できます。

Spectrum Precursorsサイトに掲載されたアイテムは、Spectrumのすべての基準を満たすものではありませんが、デザイナーがプロジェクトで使用することは認められています。すべてのプラットフォームで使用できないかもしれませんし、情報が不足しているかもしれません。しかし、Spectrumの基本ルールは満たしています。

究極の目的は、Precursorsだけでなく、「正式な」デザインパターンにみんなが貢献できるようにすることです。Precursorsはその第一歩です。社内で生まれたアイデアを捉えるための入り口を拡張し、アドビのすべてのデザイナーが他の人々の考えを見れる場所です。

以上が、Spectrumの成功を目指した主要なステップです。デザインシステムを広範囲に受け入れてもらうことはもちろん、様々なチームの知恵や能力を借りて、Spectrumを可能な限り賢く効率的に構築しようと努力しています。

この記事はImplementing Spectrum: How Adobe is Coming Together to Build a New Design System（著者:The Spectrum Design Team）の抄訳です