GE’s Predix Design System

以下はJeff Crossmanさんの同名の記事を翻訳(一部縮約)したものです。

GEのデザインシステムは2012年にGE社内の多数の利用者と多様なデザインパターン(UIコンポーネントとインタラクションパターン)を支援するために作成された。これは世界に散在している40,000人のソフトウェアエンジニアが一貫性のあるソフトウェアを作れることを目標に10人のデザイナーで構成されたチームによって作られたものだった。dave croninの発表を見るとこのチームが直面した課題に関して知ることができる。

最初のデザインシステムは内部的には成功だったがそれには成長痛もあった。ボタンやテキストボックスなど、一般的なケースでは問題なかったけど、マッピングやデータヴィジュアライズなど、より複雑なニーズにも対応する必要があった。アプリケーション単位の修正や拡張の要求はデザインシステム本来の目的に反しており、非効率性を生み、かつ無駄な作業を必要とした。また「ただのパーツの集まり」だったデザインシステムは「翻訳」の余地をたくさん持っており結果的に多数の質問と追加のデザインディレクション提示の要求へとつながった。これでは埒が明かなく、新しいアプローチが必要となった。

「デザインシステムは一つのデザインガイドに沿ったUIコンポーネントの単純な集まりになってはいけない」

この学びを胸に、我らはGEの次のデザインシステムは学習と共有を強調するものにしようと思った。デザインシステムは一つのデザインガイドに沿ったUIコンポーネントの単純な集まりになってはいけない。デザインシステムにはデザインパターンが実製品にどのように適用されるかを見せる必要があって、また他のチームが独自のニーズに合わせてどのように拡張したかを示す文書が必要だ。新しいデザインシステムのゴールはプロダクトチームが新しい顧客のニーズにフォーカスできるようにして、また彼らが作り出したソリューションを会社の他のチームに共有できるようにすることになった。

アトミックデザインから始める

Brad Frostによって開拓されたAtomic Design methodologyはデザインパターンを階層的に組織する方法である。もっと基本的なレベル(Atoms)にはボタン、テキストボックス、ラベルなどの単純なデザインパターンがある。次のレベル(Molecules)にはボタンやテキストボックス、そしてラベルなどで構成される「メール登録フォーム」などがある。このように、上のレベルのものは下位レベルのより単純なデザインパターンの組み合わせによって作られる。

この手法には2つのメリットがある。先ず、「メール登録フォーム」のようなデザインパターンに対して記述する際にボタンやテキストボックスなど、それを構成する要素に対する記述を重複して行うことが避けられる。次に、「メール登録フォーム」はテキストボックスやラベルなど、下位レベルのデザインパターンが実際にどのように使われるかの例を示すことができる。アトミックデザインはデザインパターンがどう使われるかの理解を助けるし、デザインシステムのコンテンツの作成にも有効である。

GEにおけるアトミックデザイン

「Predix Design System」と命名されたGEの新しい「Predix industrial internet platform」はこの構造を使った最初のものだった。これはこの一つのプロダクトのためのものではなかった。GEのヘルスケア部門の全てのプロダクトカタログのための新しいデザインシステム作成にもこの構造を適用した。基本的にはBrad Frostが定義したアトミックデザインの分類を踏襲したが、名称はGEらしいものに変更した。我らの目的はアトミックデザインの基本を損傷せず、インターネットに存在する文書や動画などの貴重な情報を使って同僚たちがこの方法の有効性を学習できるようにすることだった。

アトミックデザインをエンタプライズ環境に適したものに翻訳しながら我らは2つの課題に直面した。それは我らのコンテキストにおける分類法とスケーラビリティに関する課題だった。

これから記述する内容はデザイナーの直感による内容よりは、実際にエンタプライズレベルのデザインシステムを作成する複数のイテレーションを経て得られた実践的な経験からのものである。

アトミックデザインの分類法に関する課題

アトミックデザインの分類法を使った初期段階のデザインシステムのコンセプトを見た一部の同僚は混乱した。高校の化学の時間に学んだ用語をソフトウェアのデザインに関するウェブサイトで使っていたからだ。アトミックデザインのメタファーが有効でないのが明白だったので、新しい分類法を作る必要があった。

アトミックデザインの分類法を捨てたのは正しかった。結果としてウェブにあるアトミックデザインに関する多量の情報は使えなくなったけど、GEで本当に必要な、多数のプロダクトに適用可能な巨大なデザインシステムとしての階層区分ができるようになった。

アトミックデザインのコンセプトをスケールする

継承関係を逆転させる

Brad Frostはアトミックデザインを説明する際にアトムレベルから始めている。そしてアトムを組み合わせてモレキュラーを作ることを見せる。彼はもっとも抽象的なレベルから始めてもっとも具体的なレベルのウェブページまで説明する。Pattern Labもこの順に沿っている。我らはアトミックデザインをこの順で説明するのは階層構造を教えるには適しているがデザインシステムの適用するにはベストな方法ではないと思った。

我らのデザインシステムに対する重要な要件の一つは、デザインシステムが学習のリソースになることだった。デザイナーがこのデザインシステムのウェブサイトに来たら、単にどんなパターンがあるかを知るだけでなく、各パターンを正しく、かつ有効に適用する方法が学べることが目的だった。そのために、デザイナーにはコンテキストが必要だ。ここでコンテキストとは、与えられた課題と、ユーザーが求めること、そして各パターンがどのようにその解決に役立つかの情報である。このコンテキストはアトミックデザインのもっとも具体的なレイヤー、つまりページレイヤーか、アプリケーションのレベルに存在する。このレベルが、デザインシステムを使って課題解決を求めるデザイナー達を誘導するレベルだった。

分類法を拡張する

継承を逆転させる他にも、アプリケーションとプリンシプルという新しい2つの抽象化レベルを導入する必要があった。アプリケーションは該当アプリケーション内の各ページ構成に関するコンテキストして、プロダクト全体やビジネス側の情報を文書化する場所を提供する。プリンシプルは一般的なインタラクションパターン(アニメーションの使用ケース・使用方法、テキストの適切な省略方法など)を記述する場所としてアトムの下に設けられた。この2つのレベルはソースコードは持ってないが、デザイナーが新しいパターンを作成する際に認識し、従うべき基本的なパターンである。この2つのレベルの詳細に対しては後述する。

新しいデザインシステムの構造

GEのPredix Deisgn SystemとAtomic Designとのマッピング

アプリケーション

このレベルはデザインシステムへの入り口であり、デザインシステムを使って作成した多様なアプリケーションやプロダクトに対して記述する場所である。デザインシステムの事例としてみることもできる。各アプリケーション項目は該当アプリケーションの目的、問題領域、どのようにユーザーの要件を満たしているか、また独自の機能の構成など、それを理解するために必要なコンテキストの情報を含む。


フィーチャー

フィーチャーはユーザーのタスクを実行するか一つの問題を解決するために使うインタフェースのことだ。ユーザーや顧客に価値を提供する機能の集合であり、別にすごく魅力的なものである必要はない。ユーザーアカウント管理、権限管理などは脚光を浴びることはないけれども、企業システムの成功には欠かせない存在だし、堅牢性が必要で、他の多様なシステムでも再利用できるものだ。

フィーチャーはアトミックデザインのページに似ているものと言える。実際に、ページからフィーチャーに変更したのは最後に行った変更でもあった。この変更の理由は、一つのインタフェースで一つのユーザーストーリを完結することは企業システムでは結構稀なことだと知ったからだ。シングルページではなくフィーチャーをフォーカスすることで、ユーザーが一つのタスクを完了するためにアプリケーション内の画面をどのように利用するかに対するコンテキストの提供ができる。


テンプレート

テンプレートはデザイナーやデベロッパーには親のあるコンセプトであるはずだ。テンプレートはセクションのレイアウトや構造、インタフェースなどを文書化する。アトミックデザインではテンプレートはページ全体のレイアウトを示すものだった。我らはアトミックデザインのオーガニズムレベルを排除するためにテンプレートのロールを若干拡大した。

オーガニズムへの考慮

オーガニズムレベルを排除したのはアトミックデザインからの最も大きい変更である。しかし、我らはその方がアトミックデザインの階層構造を利用したコンテンツの作成と利用をより容易にすると思った。

テンプレート、オーガニズム、モレキュラーなどの明確な区分はデザインシステムの利用者からは分かり辛いものだ。ボタンやテキストボックスなどの簡単な要素はアトムと簡単に定義できるが、時系列のグラフなど、もっと複雑な要素の区分は曖昧で、その判断が難しい。

結果的に我らはオーガニズムレベルを排除し、その要素を上下の二つのレベルに分散することにした。ヘッダやフッターのようにレイアウトともっと強く関連があるものはテンプレートに、そしてデータビジュアライゼーションのようにもっと複雑なインタラクションを持つものはモレキュラーレベルに配置した。


コンポーネント

コンポーネントはアトミックデザインではモレキュラーと呼ばれるもので、比較的に複雑なユーザーインタフェースのパターンを含む。コンポーネントの例には検索フィルどやデータテーブル、範囲に対するピッカーなどがある。コンポーネントという用語を選んだ理由はそれが他の多くのデザインシステムでもよく使われているものだからだ。コンポーネントはデザイナーやデベロッパーが最もよく使うレイヤーであると思ったので、できるだけ身近な用語を選んだ。


ベーシック

アトミックデザインではアトムと呼ばれるもので、比較的にシンプルなデザインパターンを含む。ボタン、チェックボックス、リンクなど、HTMLのタグで表すユーザーインタフェースの要素がベーシックの基本的な候補である。アトムと同じく、ベーシックはそれ以上分解できない最も小さい要素である。ベシッくは基本的にはアトムと同じであるが、理論に該当する部分をプリンシプルという下位レイヤーとして別に分離した。


プリンシプル

その名が示す通り、プリンシプルはデザイナーが新しいデザインパターンを作る際に従うべきガイドラインである。プリンシプルはデザインシステムの基盤となるレイヤーであり、デザインシステムに対して予測可能な論理を提供する。プリンシプルの例は「ページングよりスクロールを使用する」、「長いテキストの省略方式」などである。プリンシプルは哲学的一貫性を提供するが、実際のコードは提供しない。


実践

Predix デザインシステムの最初の内部公開版にはPredixプラットホームデザインチームが作って文書化したデザインパターンだけでなく、Predixの上でプロダクトを作成した複数のチームから提供されたデザインパターンも含まれていた。複数のチームから提供されたデザインパターンによってデザインシステムのすべての階層のコンテンツを満たすことができた。プラットホームチームはデザインシステムの案内役としてプリンシプル、ベーシック、コンポーネント、テンプレートなどの基本的なデザインパターンを、プロダクトチームはより上位階層のパターンを提供した。

複数のチームから作成されたデザインパターンを含めることで我らの本来の目的であった、共有と再利用をどのように行うかを示すこともできた。チームは他のプロダクトで使われたデザインパターンをベースにして新しいデザインパターンを作成し、またそれをコミュニティに共有した。後悔から数ヶ月の反応を見る限り、GEのPredixコミュニティは新しいデザインパターンを情熱的に学習し、共有している。

デザインシステムを作って、また管理することはそれなりのボリュームのあるタスクである。Brad Frostのアトミックデザイン手法は階層的なデザインシステムの作成に必要なしっかりした基盤を提供している。我らのアトミックデザインの適用事例を共有することで、これに対する会話が活発になり、結果的にデザインコミュニティに貢献できることを期待する。

我らは今Predixと他のGEのデザインチームのためにデザインシステムのリソースをより拡大している。週単位の会議を通して作業の共有とフィードバックを得ながら、デザインシステムをより成長させている。我らが学んだことはまた共有する予定である。