大規模なデザイン管理への取り組み。アドビのデザインシステム「Spectrum」 | アドビUX道場 #UXDojo

連載

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

デザインシステムは、今やごく一般的に利用されるようになりました。そして、組織が大きければ大きいほど、その規模に対応してデザイン管理を行うのは困難です。アドビでは「Spectrum」というデザインシステムを設計し、この課題に取り組もうとしています。その過程でこれまでに得た主要な知見と学びを、この記事では共有したいと考えています。

デザインシステムとは何か？それをどう構築するのか？といった話題を解説する記事は、いまや世に溢れています。しかし、大きくて複雑なエコシステムにおける適用方法の知見の共有はまだ不十分な状態です。そこで、この記事を皮切りに、同様の課題を抱える組織の役に立つように、Spectrumについて情報共有を始めます。

アドビがデザインシステムを構築したプロセスは、先ごろ開催されたSan Francisco Design Systems Coalitionで披露しました。そこでは、大規模な設計に特有の課題と、その克服のためにアドビがデザイン、エンジニアリング、プロダクトマネジメント、プログラムマネジメントといった職種の横断によって取り組んでいることを伝えました。Spectrumを成功裏に実現するために私たちが採用した方法論については後ほどご紹介します。まずは、大規模な組織が、デザインを見直す際に直面する課題とその解決法についてお話しましょう。

アドビの製品エコシステム

アドビブランドのエコシステム

アドビは、100以上の膨大な、それぞれがブランディングされた製品とサービスを擁します。その殆んどはCreative Cloud（クリエイティブおよびデザインツール）、Document Cloud（AcrobatおよびPDFソフトウェア）、Experience Cloud（マーケティングおよび穴利ティクス）という3つのビジネス領域に属します。

— ソニヤ ヘルナンデス「Designing Adobe’s Evolving Brand System」

アドビは、100以上のブランディングされたプロダクトを市場に提供し、それぞれの製品がデスクトップからモバイルまで複数のプラットフォームに展開されています。そうした製品の多くが長い歴史を持ち、100万単位の（時には億単位の）環境にインストールされています。技術的な側面の話をすると、主要なすべてのプラットフォーム（UWP、macOS、Android、iOSなど）に対し、数十の地域言語バージョンを、複数のフレームワークを組み合わせながら開発しています。

これらの製品を利用するユーザーは多岐にわたります。個人クリエイター（初心者から専門家まで）、デザインスタジオ、文書管理サービス、マーケティングチームなどです。こうした多様性にも関わらず、すべての製品はますます統合されつつあるエコシステムの一部です。Spectrumの役割のひとつは、これらすべてをとりまとめることです。

多様なユーザーニーズ：Adobe XD、Scan、Experience Manager

アドビの製品で簡素と言えるものはほとんどありません。アドビはプロフェッショナルのための強力なツールを提供してきました。とはいえ、ユーザーがその複雑さすべてをそのまま受け入れるべきということにはなりません。

製品をを学びやすく、使いやすくするための努力は常になされています。そして、Spectrumはアドビがその目的を達成するための欠かせないツールです。一方、強力な機能は今後も多くのアドビ製品の長所であり続けることでしょう。この相反する課題を無視したり、回避することはできません。アドビのデザインシステムが成功するには、この課題に正面から取り組む必要があります。

Spectrumは製品が持つ強力な機能はそのままに、ユーザーインターフェイス（UI）と製品自体の利用体験をシンプルにすることを意図して設計されています。さらに、様々なアプリケーション、ユーザー、プラットフォームを横断して、一貫性と明瞭性を達成するためのフレームワークでもあります。

規模がもたらすインパクト

どんなアプリケーションを選んでも、数十の画面やパネル、数百から数千のアイコンやカーソルの状態、そして、通知やヘルプや新機能紹介のようなさまざまなメッセージを含んでいます。こうした多様な要素すべてに渡り機能する標準的なパターンを確立する作業はとても困難なものです。

Adobe Illustratorの多様なダイアログボックス

そして、そうした製品がひとつだけではないのです。すべての製品を考慮するなら、その複雑性は指数関数的に増大します。規模の拡大による課題は明らかです。ここで1つの単純な例として、基本のボタン要素を考えてみましょう。この単純な要素でも、大規模なデザインシステムにでは信じられないほど複雑になるのです。

すべてのアドビ製品の基本的な要求仕様を満たし、一貫して使えるボタンには、種類と状態がいくつ必要でしょうか？本記事執筆時では、1,080種類がデザインシステムに含まれています。

まず、ボタン要素には9つのバリエーションがあります。それぞれのボタンが5つの状態を持ち、アドビが標準的に提供する4つのカラーテーマに対応する必要があります。これを組み合わせると180通りになります。さらに6つのプラットフォームをサポートしなければなりません。UWP、macOS、Android、デスクトップブラウザ、モバイルブラウザ対応をかけ合わせると、以下のようなものが出来上がります。

ボタンUIキット

つまり、Spectrumに関わるデザイナーと開発者は、これらすべての組み合わせの最後のひとつまで、観察し、デザインし、検証し、すべての利用シナリオにおいて一貫した動作が得られるようにしなければならないことを意味します。そして、Spectrumを利用する人達に、明確で容易に使える形にパッケージし、配布する必要があります。ステッカーシートのようにすべてを一面に並べるアプローチでは、この規模での利用は困難です。

膨大な選択肢から1つを選択

Spectrumの最大の課題のひとつは、こうした複雑さを簡素で使いやすい成果物として提供することです。実際は1,080ものバリエーションが存在したとしても、デザイナーとエンジニアは必要なボタンを1つ選んで使うだけという状態が、Spectrumのゴールです。

Spectrumに用いた戦略

アドビの大規模で多様なエコシステムは、いくつもの課題を提示します。その解決のために、以下のような多面的な戦略を用いています。

アドビで大規模な課題の解決に取り組む過程で、貴重な学びを得ることができました。ビジュアル言語がどのように設計されたか、協業をどのように行ったのか、そうした問題を解決するためにどのような仕組みを作り上げたのかなど、今後も、Spectrumチームが直面した個別の課題や、そこからの学びを共有したいと考えています。

この記事はIntroducing Spectrum: How Adobe Is Building a Design System at Scale Spectrum（著者:The Spectrum Design Team）の抄訳です