体験者に学ぶ、デザインシステムに着手するときに役立つ3つの教訓 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
デザインシステムには様々な人が関わります。そして互いの利害関係の調整は困難なものです。上司やチームメンバーから、デザインシステムに関わる作業に時間を割くことに対し、賛同を得るにはどうすればよいでしょうか？どのようにすれば皆にデザインシステムを使ってもらえるでしょうか？
幅広くプロジェクトに採用され、実際に現場で利用されなければ、デザインシステムの意味はありません。デザインと開発の機能が複数のチームや場所に分散しているような大規模で複雑な組織では、これは特に困難でしょう。
また、デザインシステムの開発を軌道に乗せるのは、非常に手ごわい面倒な作業になるかもしれません。デザインシステム専属のチームが編成されていないことや、コードを開発するリソースがチームに無いなどの理由から、制作しているのが「本物」のデザインシステムではないと感じて、「インポスター症候群（自分の達成を内面的に肯定できず、自分を詐欺師のように感じる）」を体験する人もいます。
デザインシステムへの着手には多くの方法があります。そこには唯一の正解も不正解もありません。行政機関、公営企業、および大規模なテクノロジー企業で、デザインシステムをゼロからつくり上げた体験についての話を、数名のデザイナーから伺いました。この記事では、その人たちが取ったアプローチと、その体験から学んだ教訓を紹介します。
教訓その1： コンテキストが要
デザインシステムに着手する際は、どのようなコンテキストで作業を進めることになるのかという点を考慮しましょう。官僚的で階層的な環境なのか、それともチームの合意をもって進められるのか？意思決定権を握っているのは誰か？その人に直接参画してもらう必要があるのか？デザインシステムへの支持を取り付けてくれるサポーターは誰か？といった事柄です。
エド・プランティンガがオランダ政府のデザインシステムを構想し始めたとき、彼はボトムアップアプローチの採用が重要であることを理解していました。政府には複数のデザインシステムが存在していましたが、個々の組織は、それらを一貫して適用するまでには至っていませんでした。「実際のところ、数年前にデザインシステムの取り組みを始めようと試みましたが、当時は、それを行うには少し早すぎたのだと思います。結局、ちゃんと定着しませんでした」
プランティンガは、数年前からオランダ政府と働いており、UXとIT関連の組織と強力なつながりを持っています。そのネットワークの中で、政府全体のためのデザインシステムのアイデアが浮上しました。オランダ政府はすでにスタイルガイドを採用していましたが、実際には組織全体で使用されてはいませんでした。「私たちはミートアップを開始して、政府全体から人を招待する取り組みを始めました。昨年、デザインシステムに関する2つの非公式セッションを開催したところ、各セッションに約60名が参加しました」
オランダ政府のWebサイトに使われるさまざまなボタンを示すインターフェイスインベントリ 出典: Victor Zuydweg
これらのセッションでは、最も重要な機能と、デザインシステムで解決したい課題を特定するために構成されたプロセスに従い、人々は作業を行いました。「ミートアップでは様々な意見が出されます。そのため、ミートアップで出たすべての提案を1か所にまとめ、それぞれの内容を検討し、その結果を分析しました。また、既存のデザインシステムを精査して、再利用できそうなものを探しました」
賛同を得るために彼らが行ったもうひとつのことは、様々な立場のステークホルダーから、デザインシステムの採用に関する確約を得ることでした。上層部からの支持の言葉を集めことが、人々がデザインシステムに賛同していることを示す証明として役立ったそうです。
インフォグラフィック 出典: アンドレア・ミカ
オープンでボトムアップ型の合意形成プロセスには時間がかかりましたが、デザインシステムへの取り組みにあらゆる人を参加させるためには有効でした。さらに、システムが提供されるようになったら使用するという人々の約束を記した公開書簡も、彼らは手に入れています。プランティンガはこれを振り返り、「オランダはあまり階層的な国ではないため、トップダウンでは物事を行うことが困難です。同意を得て進めるモデルは非常にオランダ人らしいアプローチであり、この文化的背景を考慮することが、プロジェクトを成功に導くには重要でした」と語っています。
教訓その2： できるところから始める
本物のデザインシステムに必要なものについて、あまり執着する必要はありません。一緒に作業を進める大規模なチームがなかったり、デザインシステムの開発やコードを提供してくれるエンジニアが最初から揃っていなくても、調査や監査、ドキュメンテーションの準備などから始められます。今日は、何に着手できるのか？誰が味方になってくれるのか？チームにもっとも役立つものは何か？自分たちで決められるものは何か？といったことを考えるのです。
コード化されたコンポーネントとコードリポジトリが含まれていない限り、デザインシステムとは呼べないという主張や発言がたくさんあります。仮にそのとおりだとして、それはコンポーネントの開発のリソースとサポートを集めるのに苦労しているチームの気持ちをくじくことになりかねません。
カナダポストのデザイナー達の場合、当初のエンジニアリングと開発のリソース不足を理由に、デザインシステム制作の進行を止めたりはしませんでした。プロジェクト開始時にメンバーであったダリア・シェペレンコは次のように話しています。「デザインチームは、非常に大きな要求を突き付けられていました。そこで、製品チームがより効率的に作業を進められるようにと、共通して使用されるパターンを体系化することを考えつきました。製品の比較を始めたとき、一般向けと社内向けのいくつかに、望ましいレベルの一貫性や、まとまりが欠けていることに気づきました」
プロジェクトリーダーとステークホルダーにとって、デザインシステムのような大規模プロジェクト専任のリソースとチームの時間の確保が困難であることは明らかでした。そこで彼らは、できることから始めるという、非常に賢明な決断を下すことになりました。「まず、自分たちがコントロールできること、すなわちデザイナーのための作業から始めました。共通するデザイン要素をすべて全部をまとめたデザインキットを作成し、デザイナー達がそれぞれのプロジェクトで使えるようにしました」
カナダポストのデザインキットには、テンプレートと各テンプレートで使用できるコンポーネントの使用例が含まれている。たとえば、このランディングページのテンプレートには、トップナビゲーション、マーケティングバナー、ブログコンポーネントなどが含まれている 出典: カナダポスト
デザインキットが注目され始めるまでにさほど時間はかかりませんでした。「あるチームのデザイナーが使い始めると、別のデザイナーも使い始め、雪だるま式に増えていきました」。さらに、デザインキットの利点も理解され始めました。「製品間の一貫性の実現に役立っただけでなく、納品までの時間を短縮することができました。これが製品オーナーの関心を得て、最終的に経営層から後押しを得るのに役立ったのです」。シェペレンコは、デザインスプリントにおいて、デザインキットがプロトタイプを迅速に作成するのに役立ったことから、ステークホルダーからの注目を集めたときのことも話してくれました。
それ以降、デザインシステムに必要なデジタルリソース構築のための資金と人員を得られるようになりました。当初はデザインとコンテンツが中心のシステムとして構築が始まりましたが、ロードマップの次の段階には、開発とコード化されたコンポーネントの構築が追加されました。
カナダポストのMercuryデザインシステムは、現在、リソース参照用に利用できるWebサイトが公開されている。コード化されたコンポーネントはロードマップに含まれている 出典: カナダポスト
シェペレンコはその後カナダポストを離れ、現在はShopifyのUXマネージャーを務めています。彼女は、コードリポジトリの必要性について、デザインシステムの重要な側面であると認めてはいますが、カナダポストのデザインシステムに取り組んで得た貴重な教訓は無視できないと言います。「最初から開発を行うことができなくても、デザインチームだけで始められることはたくさんあります。ドキュメント作成、再利用可能なデザインやUIキットを構築して製品デザイナーと共有、UIの監査などの調査、人々が直面している課題についての話し合いなどです」
教訓その3： 機能しているものを使用する
デザインパターンの文書化をどこから着手するかは、注意して選びましょう。特定の製品またはユーザー体験から始めることにはトレードオフがあります。また、対応しようとしているユースケースに求められるスピードへの考慮も必要です。そして、将来のデザインシステムの進化のために、ニーズに耳を傾けましょう。どの製品またはアプリケーションが実際にうまく機能しているのか、そこから何を抽出できるのか、自分たちのUXに存在する成功パターンとして知られているものは何か、といったことを考察しましょう。
Polaris適用前のShopifyのモバイル、Web、POS画面 出典: カイル・ピート
Shopify UXチームは、10週間でPolarisデザインシステムの最初のバージョンの構築を何もない所から完了する必要がありました。これは果敢な目標です。会社は全製品にまたがるShopifyのユーザー体験を文書化し、揃えることを目指していました。その上、チームは、構築される製品がデザインシステムを通じて輝くような学際的なアプローチに注力していました。すなわち、各コンポーネントの機能についての情報と、その背後にあるUXの根拠を含めるようにしていたのです。
この膨大なタスクを実行する際、チームは管理パネルから着手しました。管理パネルは、売り手がShopifyを使ってビジネスを運営するために使用するインターフェイスです。ジェセニア・ペレス・クルスは次のように述べています。「デザインシステムに着手する方法にはたくさんあります。そのひとつは、うまく機能している製品をもとにして、そこから取り出して抽象化したものをデザインシステムに取り入れることです。私たちはShopifyの管理機能の中核としてうまく機能していたものを採り上げ、そこから始めました」
Shopify Polarisは、堅牢なデザインシステムであり、デザインシステムの例として頻繁に引用されている。現在はバージョン4が公開中。Polarisの最初のバージョンはShopifyの管理機能の中核機能から始まった
このアプローチの利点は、詳細かつ丁寧に文書化されたデザインシステムを、非常に短い期間で構築できることです。2017年5月にPolarisが公開されると、たちまち多くのShopify開発パートナーの作業が大幅に簡略化されることとなりました。
Polaris実装後のShopifyのモバイル、Web、POSの画面。より統一感のある一貫したルックアンドフィールを確認できる 出典: カイル・ピート
ただし、このアプローチには欠点もあります。それは、デザインシステムが、管理パネルのユーザー体験に特有のものになるという点です。「他のチームもPolarisを使用するメリットを認識していましたが、その対象ユーザー、コンテキスト、そしてユーザーフローは、管理パネルが提供するバックオフィスの体験とは異なる点がありました」とジェセニアは説明します。「たとえば、明るい照明を使う小売店ではカラーパレットが機能しませんでした。また、顧客とのアイコンタクトを維持するためのより大きなボタンが必要になったかもしれません」
増え続けるユースケースとニーズに合うようPolarisを進化させるために、チームはメタ的なアプローチを採用しました。「Polarisの目標を、システムのためのシステムへの進化に設定しました。それは、Shopifyのための包括的なデザイン言語をつくるということです。これに含まれるものには、体験の原則、デザイン言語、およびグリッドやレイアウトなどの基本コンポーネントがあります」とジェセニアは共有してくれました。
これにより、それぞれのチームが独自に調整したシステムを構築できるようになります。たとえば、リテール向けPolarisや、マーケティング向けPolarisのような別バージョンです。「目標は、大元のPolarisシステムが提供するものとは異なるもの、または新しいものが必要となったチームが、意味のある分岐をできるようにすることでした」。機能しているものを採用することから始めたこのシステムは、高度に洗練されたデザインシステムへと進化を続けています。
初めの一歩が最も困難
以上の体験談からわかるように、デザインシステムにはそれぞれ誕生にまつわる固有の逸話があります。実際のところ、始め方には正解も不正解もありません。成功し、持続し、成熟したデザインシステムは多数ありますが、どれもプロジェクトを開始した地点や、取り組んできた角度は様々です。
最も難しいのは、どこから着手するかを見極めることです。正しいデザインシステムをつくり上げるには特定の要件が必要だと感じることもあるでしょう。その場合は、実際にコントロールできる範囲内にある作業項目を検討し、そこから着手しましょう。それがUIライブラリの構築であれば、そこから着手すればよいのです。また、最初のステップを検討する際は、組織の文化と意思決定の構造も考慮する価値があります。最後の事例の様に、すでに機能しているとわかっているUXやパターンを文書化することから始めることもできます。
結局のところ、デザインシステムに関して言えば、「必要は発明の母」がぴったりと当てはまります。
本シリーズのパート5は、「成功するデザインシステムの管理、メンテナンス、運営」を紹介します。
リサーチ、インタビュー、アンケートにご協力いただき、深い知識と経験を共有してくださった皆様に感謝の意を表したいと思います。デザインシステムの詳細については、アドビとIdeanの電子書籍「Hack the Design System」もご覧ください。
この記事はLessons from Brands Setting Up and Driving Adoption of Design Systems – Part 4（著者:Linn Vizard）の抄訳です