なぜデザインシステムを作るのでしょうか？ よくある答えは、異なる製品・チーム間における一貫性を保つためです。また良く作られたデザインシステムは、認知的負荷を減らし、全体の開発スピードを早めることができます。しかし、これらの理由よりも大きな理由が１つあります。デザインシステムはユーザーを助けるからです。
Atlassianはデザインシステムの価値を理解しています。しかしデザインシステムがいかに強力なものかを自覚し、それを使いこなせるまでには何年もの実践が必要でした。
JiraのUI 2002
JiraのUI 2002
10年以上の歳月を経て、Atlassianのデザインは徐々に改良・洗練されていきました。そういった流れの中で、Atlassianは、2012年に最初の公式なデザインシステムを作成しました。当時の最優先の目的は、Atlassianのすべての製品で一貫性を確立することでした。最初の「デザインシステム」は、実際には従来的なスタイルガイドに近いものでした。
JiraのUI 2017
次の５年間で、Atlassianはデザインシステムの開発と調整を行い、有益な教訓を学びました。それは、デザインシステムは一貫性の維持だけにとどまらない効果があるということでした。2017年の最新バージョンでは、製品のインターフェイスからフリクションを減らすことに重点が置かれました。そして、デザインシステムを補完するUIライブラリー「Atlaskit」が追加され、デザインシステムの機能が定義されました。
Atlaskitでは、標準となるUIコンポーネントが定義されています。これによって、デザイナーは類似したパーツを使うことで一貫性を維持することができ、さらに用意された素晴らしいUIオプションを使うことでより良いデザインを作成できるようになりました。コンポーネントは実際のユーザーの好みに基づいて作られているため、コンポーネントの標準化によって各製品にかかるデザインの時間を短くできます。
さらに、「単にUIコンポーネントを伝える以上の効果がほかにもたくさんあります。」と説明します。
何年にもわたるデザインシステムの改良作業を通じて、Atlassianは多くを学びました。シニアUXデザイナーのAllard van Helbergen氏のご厚意により、UXPin’s Design Systems Virtual Summit 2018というイベントで彼らの学びをいくつか共有させてもらえました。このイベントでは他にもSalesforceやIBM、Airbnb、GE、Linkedin、Fjord、Zendesk、などのケーススタディを取り上げました。
Allard氏は２つのUIコンポーネントに特に焦点を当てました。それは、インラインダイアログとモーダルダイアログです。彼はデザインシステムのための４つの重要なアドバイスとその適用の仕方について話してくれました。ここからは、彼のプレゼンテーションを要約したものを紹介します。
学び１：製品とデザインシステムの相互関係
デザインシステムのもっとも理解しにくい点の１つが、コンポーネントが製品に完璧にフィットすることはないということです。デザインシステムと製品は協調関係にありますが、異なる役割があります。「ある時点では製品がデザインをリードするでしょう。またある時点では、デザインシステムがリードするでしょう。」
このある種の緊張関係と闘うのではなく、それを有効活用することがより賢いソリューションだとAtlassianは学びました。「すべてにフィットする」コンポーネントは存在しません。なので彼らは、コンポーネントをカスタマイズできるようにする必要がありました。デザインシステムにカスタマイズの余地を残すことにより、製品のニーズがどのようなものであってもコンポーネントを微調整できることに彼らは気づきました。
「デザインシステムにあるコンポーネントは不十分で、製品によっては必要なコンポーネントがないという問題がありました。そのため、その製品では独自のカスタマイズを行いました。」Allard氏は説明します。
この話のポイントを説明するために、Allard氏は事例を共有しました。比較するのは、デザインシステムにおけるインラインダイアログとモーダルダイアログと、製品に採用されたいくつかの最終的なバリエーションです。
修正はマイナーなもので、製品の一貫性を損なうものではありません。同時にその小さな変化が、デザインに新たな命を与えています。色の変更やイラスト、鼓動するドットの追加などが、製品側の要求による調整です。このように可能性をオープンにすることが重要なのです。
Atlassianでは、それぞれのユースケースによって、コンポーネントの作成・変更をある程度自由に行えるようになっています。これによりデザイナーは、異なるバリエーションを作成し、実験することができます。これよって、それぞれの製品ニーズを考慮しながら、オリジナルのデザインを改良する可能性がもたらされています。
デザインシステムがあらゆる製品のためのあらゆるニーズを考慮することは、単純に言って不可能です。あなた自身もそれを行うことはできません。製品をまたがった一貫性は、すべての製品に制限を課してしまいます。複数の製品を使うユーザーにとっては、同じデザインの繰り返しのように見えることは言うまでもありません。なので両方の領域を最大に活用するために、Atlassianはデザインシステム上にUIコンポーネントの基盤を提供しました。しかしまた、個々の製品が必要に応じて修正を加えるのに十分な柔軟性も与えています。
学び２：フィードバックを統合する
それぞれのコンポーネントを完璧にするのに、Atlassianはフィードバックを活用します。これには、ユーザーリサーチやユーサビリティテスト、ユーザー自身からの直接なコメントなどがあります。通常、個々の製品は、フィードバックを受けてプロトタイプを作り、実際に改善を行います。しかし、Atlassianでは、すべての製品からのフィードバックを最初に統合することを奨励しています。
１つ例を挙げると、すべての製品からのフィードバックを考察することにより、十分な多様性が生まれ、あらゆることに対応できるようになります。Allard氏が説明するには、「悪い決定が行われる可能性があった製品も中にはあります。また、作業のショートカットのためにこれを行わなかった製品もあるでしょう。なのでこれは、一時しのぎの対処を正確かつ確実なものへするためのものなのです。」
フィードバックを統合するもう１つの主な利点が、個々のコンポーネントは複数のシナリオによりストレステストされることです。そして、それらがどのように扱われるべきか、より正確な理解を獲得することができます。そして、これは広範囲なデータを得ることにつながり、１つの製品のフィードバック単独ではわからない改善点を明らかににします。
Atlassianではこの手法が２つの新しいコンポーネントの開発に役立てられています。どちらも、過去のイテレーションのフィードバックから生まれたものです。Spotlightは「インターフェイスを案内するためのガイド」であり、User Benefit Modalは「新しい体験が始まる手助けをし、体験のポイントについて教えてくれるものです。」
木だけを見るより、森全体を見ることで、Atlassianでは全体で見落とされていたいくつかのUI要素を特定し、それらを追加することができています。
学び３～
要約で語りすぎても良くないと思うので、Atlassianのデザインシステムついてより学ぶには、同社のシニアデザイナーが直接説明してくれる動画を見てください。
１時間ほどの動画では、４つの学びのポイントがカバーされています。さらに世界中のデザイナーからの質問が紹介されたあと、参考になるQ&Aもあります。エキスパートからの説明によって、以下のようなインサイトをたくさん発見できるでしょう。
- ユーザー体験をコンポーネントデザインに統合する方法
- 一連のコンポーネントを結合させることで、まとまりあるユーザーフローを作成する方法
- Atlassianでのケーススタディを含む、コンポーネントと同様の方法で体験を統合する方法
- デザインシステムを製品であるかのように作成すべき理由
- Atlassianで、どのデザインシステムのコンポーネントが優先されるべきかを見るために活用される「ロードマップの並列」について。そしてそのために彼らが製品ラインを評価する方法についての個人的な考察
- オンボーディングのためにAtlassianが考案した、「First Impression」のフレームワークに関する取引の詳細
- デザインシステムの作成・実行の現実的時間のフレーム
- デザインシステムを内部の他の部門へ紹介するための最善策と、彼らを参加させる方法
- デザインシステムの作成を始める方法についての、おすすめのフォローアップ用リソース
Allard氏のプレゼンの完全版は、下のビデオを参照してください。
