デザインシステムを使用することによって、デザインチームのワークフローを改善し、知識を再利用し、一貫性を向上させることが可能になる、とStefan Ivanov氏は言う。より早く失敗することで反復サイクルをスピードアップすると同時に、製品設計の初期段階において、ユーザのフィードバック収集により多くの時間を費やすことにより、製品市場のスイートスポットにはるかに早くフィットすることが可能になる。
InfragisticsのシニアUXアーキテクトであるIvanov氏は、ACE Conference 2019で、デザインシステムの目的と、Indigo.Designを開発した際の自らの経験について講演した。デザインシステムは、開発をスクラッチから始めるためのツールと思われがちだが、必ずしもそうではない。唯一の真実の源(single source of truth)のみならず、最終的には、確実な知識転移やコラボレーションの促進、デザイナから開発者への作業移管の容易化などの目的において、確立された手段をデザイナに提供する。
Ivanov氏の説明によれば、デザインシステムは、チーム内のコミュニケーションとコラボレーションをサポートするのである。 "当社のデザインチームは大陸をまたいでいますが、常に同じ部屋に座っているかのように、物事を機能させるように努力してきました"、と氏は言う。さらに氏は、地理的条件以外に、理解のギャップによって境界線が引かれる場合が少なくない、とも述べている。数ステップしか離れていない開発者に対してさえ、十分なアイデアを明確に伝えて、製品チーム全体が同じ土俵に乗ることが困難な場合もあるのだ。
講演で氏は、Indigo.Designを開発した際の自身の経験について語った。チームにデザインシステムを導入したことが、問題のあるUXや設計プラクティスを識別し、チーム自身の内部プロセスを改善する上で有益であった、と氏は言う。
例えば、製品の仕様が軌道を外れて、必要な品質要件を満足するために必要なコラボレーションができず、サイロに陥ることは珍しくない。デザインシステムへの取り組みは、この点において、まず全体像を見て、それに私たちのプロセスを適応させ、それらをユーザの本当の必要性と十分のすり合わせる上で有効なのだ。
これらのツーリングは、その上に独自のデザインシステムを積み上げることで、デザインシステムを普遍的なものにする、とIvanov氏は述べている。さらに、プロトタイプとコードが完全に一致した、適切なコードを生成することによって、デザイナから開発者への引き継ぎも不要になる。
Indigo.Designの開発を通じて、氏らは、お互いをもっとよく理解するためには、同じボキャブラリを使うことが重要であることを理解した。"役割やツールに関係なく、デザインとは、アイデアを現実のものにするプロセスであることが分かりました"、とIvanov氏は述べている。
デザインシステムの使用と構築について、Stefan Ivanov氏に話を聞いた。
InfoQ: デザインシステムは、どのように、チームのコミュニケーションとコラボレーションをサポートできるのでしょう？
Stefan Ivanov: デザインシステムの成功を評価する上で、私たちが重視したのは、それがユーザリサーチャやインターフェースデザイナと、開発者との間のコミュニケーションとコラボレーションをどの程度改善できるか、ということでした。多くの企業においてそうであるように、この質問に対する答は、私たちにとって非常に重要でした。
UI Kitとリッチなプロトタイピングエクスペリエンスを統合することは、私のような者にとっては明らかに必要ですが、ユーザビリティテストの実施を可能にするというメリットもあります。これにより、ラピッドプロトタイピングが可能になって、何時間も要するミーティングが不要になると同時に、イテレーション間の変更とフィードバックが、誰にとっても透過的なものになります。
デザインが安定すれば、特にプロトタイプが実行可能コードの生成と統合されている場合には、簡易なミーティングで開発に取り掛かることができます。これによって、デザイナと開発者の間のやり取りを削減できると同時に、適切なコミュニケーションの欠如が原因で、憶測による作業が発生するリスクも回避することができます。
UI KitおよびUIコンポーネントライブラリが一貫したスタイルと動作を備えることで、欠陥の数も少なくなります。これらが頻繁なミーティングに勝っていることは、誰もが知るところです。デザインシステムの成功が、さまざまな役割間のギャップをいかに埋めるかで判断できると考えるのは、このような理由からです。何が最善かを話し合いで決めるのではなく、実際に行うことによって、生産性の向上が実現できるのです。
InfoQ: デザインシステムを構築する上で、どのようなアプローチを採用したのですか？それはなぜでしょう？
Ivanov: まず何よりも、デザインシステムは、製品開発ライフサイクルにおけるさまざまな役割をどの程度サポートできるか、という疑問に対して、明確な答を与えられなければなりません。見て楽しく、機能的なデザインを、デザイナがどれほど簡単に作ることができるのか？ユーザリサーチャは、レイアウトや画面の流れをどのように検証できるのか？ビジュアルアーティストは、ブランドの定義や適用をどれほど簡単にできるのか？そして一番大事なのは、これらの概念を、どれほど正確かつ迅速に、実際に動作するコードに変換できるのか？
デザインシステムの導入について検討を始めたとき、私たちは、他の人たちはどうしているのか、私たちの最終目標は何か、という2点に注目しました。他の人たちの経験からは、UIキットを分割して整理する方法を教えられました。Atomic Designアプローチを採用して、3つに分割されてはいるが、相互に関連したライブラリを開発したのです。私たちが目指した最終結果は、製品チームが完成したアプリを短時間でデザインし、構築できるようにすることでした。これを達成するために、私たちのチームは、市販品と企業用の100以上のアプリ、Webとモバイルの数十のデザインパターンを検討しました。使用法によってそれらを分類し、その構築に使用されている構成要素を分析したのです。最初のアイデアを収集して整理するまでのこの作業に、数か月を要したのですが、初期段階で全体像を把握することできたことは、重点を正しく設定する上で役に立ちました。
すべてのデザインシステムにおける低レベルの基礎のひとつは、スタイルや他のブランド要素がどのように定義されて適用されるか、という点です。変更を正しく適用することで、デザイン全体に深く一貫した影響を与えられるように、色と文字体裁にはレイヤスタイルの組み合わせを使用することにしました。さらに、私たちの手持ちのデザインツールの大部分がプラグイン方式のエコシステムを提供していることから、これを活用して、ほんの数クリックでブランド保証を提供できるようにしました。
デザインシステムのもうひとつの基本は、その要素を構成するのがいかに簡単か、という点です。例えばinput要素を詳細に調べた時、どのスタイルがサポートされているのか？明暗のバリアントをサポートするのか？状態やレイアウトを設定したり、テキストや背景の色を微調整したりすることは可能か？主要なデザイン環境の大部分でサポートされている概念である"シンボル"は、それを実現する手段を提供するものですが、デザインシステムのユーザにどの程度のフレキシビリティを提供するかを判断する責任は、私たちにあります。
InfoQ: デザインシステムを使うことで、何を学びましたか？
Ivanov: デザインシステムを使った経験から、私たちが多くの場合、自分たち自身で境界を設定していることと、それを越えていないことが分かりました。ユーザーリサーチャや開発者の役割は、無視されることが少なくありません。彼らの手元にあるのがUI Kitだけであり、デザイナと開発者とのギャップが依然として大きいことが、権限を付与するよりも、制限する方向に働くからです。
真のデザインシステムのアプローチは、これとは違います。共通のボキャブラリを確立することによって、製品開発のライフサイクルにおけるあらゆる役割のワークフローを強化する必要があるのです。私たちが狭い視野にとらわれて、大局を見ることを忘れている時こそ、このようなことを強く主張して、コミュニケーションとコラボレーションを促進することが必要なのです。