デザインシステムにおけるUXデザイナーの役割 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
「デザインシステムはペットのようなものです。一匹欲しいと思うだけなら簡単ですが、実際に飼うとなれば大きな責任がのしかかります」と、デザイン戦略のリードを務めるアプルヴ・レイは言います。
「デザインシステムができ上がって間もないころは、それほど時間をとられずに、いろいろ試してみたり、コンポーネントを追加して新しい技を増やして楽しむことができます。ところが、デザインシステムが成熟して成長するにつれ、どんどん必要な時間が増えてきます。何かうまくいかないことがあれば、すべて担当者の責任です。成長した後も無邪気な瞳の子犬のように可愛く見えるかもしれません。しかし、それを育てたデザイナーが関わって決定してきたことに対して、ずっと責任を持ち続けならないということは覚えておくべきです」
デザインシステムの構築と維持に注力する組織が増え続けている時代に、どうすればデザイナーは責任ある「ペットの飼い主」であり続けられるでしょうか？デザインシステムは、本来、大勢の協力が必要な取り組みで、デザイナーはその一部です。では、その中でデザイナーに求められる役割は何でしょうか？
デザインシステムを成功に導くガイドラインを提供するため、デザインシステムの経験を持つ12人のデザイナーを調査し、さまざまな専門家に話を伺いました。この記事では、そこから学んだデザインシステムにおけるデザイナーの役割を紹介します。
デザイナーの役割の進化
デザインシステムは、専属チームの一員としてのデザイナーに、文字通り「新しい専門的な役割」をつくり出しています。Shopify、Airbnb、Salesforceといった企業は、デザインシステム担当デザイナーの採用に投資をしています。また、リソースに限りがあって専属のチームを設置できない組織でも、デザインシステムに取り組み推進する役割がデザイナーに与えられています。
Airbnbのデザイン言語システムパートナーシップミーティングには、組織内のデザイナーが参加して、フィードバックと体系的な思考をデザインシステムチームと共有する 出典: Airbnb
一部の人々は、デザインシステムが普及することによってデザイナーの創造性が縛られ、役割が縮小されるのではないかと恐れています。この懸念から想定される最悪のシナリオは、定義済みのブロックやコンポーネントからページやインタラクションなどのインターフェイス要素を組み合わせるだけの存在にデザイナーがなるというものです。
しかし、理想通りであれば、デザインシステムによってデザイナーは戦略的な問題の解決に労力を使えるようになり、困難で独特なユースケースやパターンに対するクリエイティビティを発揮できるようになります。また、デザインシステムは、進化の方向性を示し、重複した作業を減らすこともできます。
Googleでプラットフォームデザインマネージャーを務めるギャビン・ハーヴィーは、今後、デザインシステムが自動化されて、デザイナーの役割の一部が変わることになると予測しています。
「デザインシステムが興味深いのは、まさにその部分です。デザインシステムは、ソフトウェアをデザインする方法に革命的な変化が訪れる予兆だと思います。ソフトウェアの構築プロセスは、部品を組み合わせるだけの作業のように単純なものではありません。必要なコンポーネントを考えることはもちろん、その先にあるユーザビリティやタスクフロー、そしてインタラクションがどのようにユーザーを成功に導けるかを考える役割としてデザイナーは必要です」
デザインシステムに取り組むために必要なスキル
デザインシステムの完全な自動化はまだ現実味のある話ではないとしても、デザインシステムへの取り組みによる、デザイナーに求められるスキルと日常的な作業の変化を感じているデザイナーは大勢います。デザインシステムが広く受け入れられつつある状況において、どのようなスキルがデザイナーに必要なのでしょうか？デザインシステムを専門とするチームが登場しているときに、そこで働きたいデザイナーはどのようなスキルを身に付けておくべきなのでしょう。
私たちの調査では、何人かが、デザインシステムの初期に関わることと、成熟したデザインシステムの管理者であることの違いを強調していました。初期段階のシステムでは、コンポーネントやドキュメンテーションの作成を中心とした制作作業がデザイナーの仕事の中心になる傾向がありますが、時がたつにつれて、デザインシステムの継続的な発展と進化を支える役割に変わるのです。
デザインシステムの成熟度次第で必要なスキルレベルは変わるとしても、調査したデザイナー達は、以下のスキルすべてが重要であると強調しています。
協業する力
デザインシステムを単独で構築することはできません。チームとして取り組むために、デザイナーに求められるのは協調性です。それがあれば、開発者と協業してデザインシステムを明確に文書化することができますし、製品マネージャーと協業して、ユーザーのニーズの理解に基づき、デザインシステムを進化させるためのロードマップに貢献することもできます。
UXデザイナーのヴィヴィアン・チュンは、『チーム指向のアプローチ』が重要だとして、次のように述べています。「他のデザイナーや開発者、マーケティング部門などと協力して共にデザインできる力が必要です。さまざまな部門の人たちをできるだけ早期に巻き込むことが重要で、それによって彼らのニーズを理解して、それを早い段階でデザインシステムに組み込むことができれれば、デザインシステムの存続と採用の確率は高まります」
忍耐と情熱
デザインシステムのような複雑なプロジェクトには、長期戦への投資と、困難な時にもプロジェクトを継続する意欲が必要です。調査では、プロジェクトを前に進めるために不可欠なスキルとして、粘り強さ、忍耐力、そして個人的な情熱に関する話題が繰り返し述べられていました。Sensibillでプロダクトデザイナーを務めるリサ・グオは、「デザインシステムは気弱な人向けではない」と語っています。
体系的な思考
デザインシステムでは、戦略的かつ体系的な思考力がさまざまなレベルで求められます。たとえばブランドに関しては、デザイナーはコンポーネントやUIを全体的なブランドの方向性に合ったテーマに揃えることになります。その際、ウィジェット、色、ホワイトスペース、タイポグラフィのスタイルなど、UIのあらゆる側面が考慮されていなければなりません。また、デザインシステムの全体像を見て、潜在的なユースケースや進化の方向を予測しながら、デザインシステムが組織にどのように役立つのかを考える能力も必要です。
YouTubeでデザインディレクターを務めるクリス・ベティグは、デザインシステムには「今目の前にある問題にとらわれず、1つの機能やプロジェクトの先にある、それよりもずっと大きな体系に目を向ける」能力の重要さについて述べています。
開発とコードに対する理解
デザインと開発の両方のスキルを持っていると、デザインシステムに大いに役立ちます。少なくとも、役立つデザイナーになるには、開発者と信頼と尊敬に基づく関係を築き、彼らと効率的にコラボレーションできなければなりません。
デザインシステムに関する自身の体験を書籍にまとめたデザイナーのアンドリュー・コールドウェルは、ハイブリッドなスキルセットはデザインシステムのプロジェクトにおける秘密の武器になると言います。「開発者の言葉を話せれば、できることがずっと多くなります。また、開発者のように体系的に考えられることも大切です。たとえば、使用するフォントの数に厳しくあることです」
プロジェクトとプロダクトの管理
デザインシステムが目的を達成するための手段であることを忘れ、構築することだけに気を取られてしまうという状況は決して珍しくありません。プロジェクト管理およびプロダクト管理のスキルがそこでは役立ちます。「デザインシステムが解決する問題を理解できる」「管理可能で明確な計画に作業を分割できる」「リサーチを有効活用できる」といった能力は、今回調査したデザイナーたち全員が、デザインシステムの作業に役立てていたことです。
「解決しようとしている問題が何であるかをしっかりと理解し、デザイン自体が目的になったり、デザイナーだけを相手にしたデザインにならないよう配慮することが非常に重要です。また、判断を下す際には確実なビジネスケースの検証を行い、人々から否定的な反応を得ても彼らの側に立たなければなりません」とベティグは述べています。
デザインシステムに関連するデザイナーの日常的なタスク
デザインシステムに関するデザイナーの日常業務はさまざまです。お馴染みのタスクもあれば、ある程度の専門性を要するタスクもあります。そして、デザインシステムの成熟度によって、特定の種類の活動に費やす時間の割合は変わります。
一方、チーム構成やデザインシステムの成熟度に関わらず、調査で何度も指摘されたいくつかの主要な活動がありました。
インフォグラフィック 出典: Andreea Mica
コンポーネントのデザイン
これは当然のことですが、調査した全てのデザイナーが自身の役割として言及したのがコンポーネントのデザインです。デザインシステムに携わるデザイナーは、ボタン、フォームフィールド、ラジオボタンなどのコンポーネントの視覚的なスタイルやレイアウト、インタラクションモデルの定義をしばしば行うことになります。Airbnbでシニアプロダクトデザイナーを務めるアダム・グリン＝フィネガン曰く、彼の役割は「デザインシステムの構築、作業範囲の決定、新しいコンポーネントの作成に精力的に取り組むこと」です。
ドキュメントの作成
デザインシステムのドキュメント作成は、コンポーネントの作成に関連して行われる作業です。ドキュメントには、コンポーネントについての記述の他にも、デザイン原則、アクセシビリティガイドライン、UIの動的な状態、インタラクションなどの情報も含まれることがあります。コンポーネントの作成課程で行われた決定について文書化することの重要性を強調する人もいました。
スージン・チャは、プロダクトデザイナーの役割の一部として、コンポーネントの定義、使用方法、コンポーネントのルール、アクセシビリティ、UIの状態、スタイルガイドなどを文書に記載する作業に時間を費やしています。
デザインシステムの提唱
デザインシステムのプロジェクトにおけるデザイナーの役割には、デザインシステムに対する支持を集めたり、その価値を実証するというやや面倒な対人的な側面があります。これはコンポーネントやインタラクションモデルの作成とは分野の違う作業です。チームメンバーにプレゼンテーションやデモを行いそれとなくデザインシステムの使用を促したり、UX/UIデザイナー兼UIデベロッパーのサミュエル・ユンが言うように、「デザインシステムによる影響やそのメリットに関して、クライアントや関係者に伝達する」作業などが含まれます。
構築と管理における開発者とのコラボレーション
デザインシステムには、構築と管理の両方の場面でデザイナーとデベロッパーの緊密なコラボレーションが必要です。コラボレーション無しに、命名規則の定義を共同で行ったり、デザインアセットとコードが互いに最新であることを確認し合うことはできません。
これはチャのもうひとつの役割です。「スプリントごとに、デザインシステムのどの項目をコンポーネントとして構築できるのか開発者と協議し、再利用できる部分、コンポーネント化する価値のあるもの、名前の付け方といったことを共に判断します。開発者がコンポーネントを作成したらreactJSのコードを確認し（命名規則とデザイントークンが正しく使われていることを確認するため）、ブラウザでUIの表現をチェックします」
デザインシステムの管理
デザインシステムが進化するにつれ管理責任がデザイナーに課されることがあります。たとえば、ほかのチームからのインプットを精査したり、文書化に関する受付係や、デザインファイルの所有者を担当することになるかもしれません。また、デザインシステムの利用者にサポートやガイドを提供することもあるかもしれません。
この記事の冒頭でデザインシステムをペットに例えたレイは、彼の最後の仕事が「デザインシステムの管理作業を支援し、どの新しいパターンをデザインシステムに追加するのかを決定するデザインシステム管理チームの一員であること」だったと述べています。
簡単ではありませんが、やりがいがあります！
デザインシステムにはさまざまな課題が伴います。
プロジェクトのために周りから賛同を得て、正しい管理プロセスを確立するには相当な努力が必要です。また、それに要する時間とリソースも膨大で、ただでさえ高いデザイナーの負荷はさらに増加します。そして、デザインシステムを管理するチームは、デザインシステムの厳格さと一貫性を保ちながら、柔軟性と進化を受け入れる姿勢との適切なバランスを常に探り続けます。
これらの課題や、デザイナーに求められるスキルセットの幅広さ、さらにはデザイナーの役割の変化の不確かさという問題があるにも関わらず、デザインシステムの潜在的な力をポジティブに捉え、刺激を受け取るデザイナーは大勢います。デザインシステムを構築するプロジェクトからは、チームの団結、二度手間や単純作業の削減、ブランド体験のアクセシビリティと一貫性の改善など、多くの利点が期待できます。
Wealthsimpleでシニアプロダクトデザイナーを務めるエリック・アカオカは、これを実際に体験しました。「デザインシステムの管理がうまくいっていれば、再利用可能なコンポーネントの活用により、デザインと開発プロセスの両方を大幅にスピードアップできます。デザイナーから開発者への引継ぎは非常に簡単になり、場合によっては忠実度の低いワイヤフレーム作成を省略することも可能です」
さらに重要な点は、デザイナーの取り組みが組織全体に影響を及ぼしていく様子を確認できることです。サミュエルは、「プラットフォーム全体に自分の作業が採用されていく様子を見ると達成感を感じます。開発者にもデザイナーにも影響を与えていることを目の当たりにできるのです！開発者はページ作成をより素早く簡単に行えるようになり、デザイナーにはボタンのサイズに悩む代わりに、本当に重大なデザインの問題に時間を費やせるようになります」と話しています。
本シリーズのパート3は、「デザインシステムにアクセシビリティを組み込む方法」を紹介します。
リサーチ、インタビュー、アンケートにご協力いただき、深い知識と経験を共有してくださった皆様に感謝の意を表したいと思います。デザインシステムの詳細については、アドビとIdeanの電子書籍「Hack the Design System」もご覧ください。
この記事はThe UX Designer’s Role in Design Systems – Part 2（著者:Linn Vizard）の抄訳です