デザインシステムに興味がある方は、おそらく多くのサクセスストーリーに精通しているかと思います。デザインシステムを使うことで不整合と冗長性を排除でき、ユーザビリティ・テストや、ワークショップなどといったもっと重要なアクテビティに時間を使うことができます。これは大きな付加価値だと思われます。

しかし、デザインシステムの導入が失敗に終わることもしばしあります。デザインシステムはさまざまな分野の人々がチームとして協力する必要があり、成功するデザインシステムを作成することはとても困難です。またデザインシステムに問題が発生した場合は逆にプロジェクトに大量のリソースとエネルギーを費やしてしまう可能性も出てきてしまいます。

ただいま私の働いている会社のクリエーティブチームも常にデザインシステムの改善を目指しています。

私たちはclickupで作業を管理し、主にデザイナー、またエンジニアのフィードバックを主に受け入れるように心がけています。デザインシステムを確実に成功させるためにはいくつかの成功例、また失敗例を参考にすべきと考えたので、いくつかの考慮事項と、その成功を妨げる可能性のあるものについて調べてみました。

デザインシステムとは？

💡デザインシステムとは、デザインの概念、原則などをまとめたドキュメント、それらを具体的なデザインに落とし込むためのUIコンポーネントの管理ツールなど、さまざまな構成要素で成り立つ「仕組み」です。

例えばGoogle社は、デジタルプロダクト開発に活用できるデザインシステムとしてMaterial Designを一般に公開しています。Uber社も、アプリケーション構築のためのデザインシステムとしてBase Webを一般に公開しています。MicrosoftもFluent Design Systemフルーエント・デザイン・システムを一般に公開しています。フルーエント・デザイン・システムは2017年にマイクロソフトによって開発されたデザイン言語で、すべてのWindows10デバイスおよびプラットフォーム用にデザインされたソフトウェア内で使用されるデザインと相互作用のガイドラインを含むMicrosoft Design Languageの改良版となっています。

デザインシステムは、いくつかの個別のコンポーネントの集大成であり、次のいずれかまたはすべて（およびそれ以上）を含めることができます。

→ デザインツール（Figma、Sketch、XDなど）
→ スタイルガイドまたはビジュアル・パターン・ライブラリ
→コンポーネント・ライブラリ
→ コード使用ガイドラインとドキュメント
→ デザイン使用法のドキュメント
→ トーンオブボイスのガイドライン（読んだ人や聞いた人すべてに印象が残る話し方のことをトーンオブボイスと指します。）
→ アニメーション・ガイドライン

デザインシステムのパラドックス

デザインシステムは、より良く、より速く、よりまとまりのある製品を大規模に構築するために不可欠です。しかし、デザイナーにとってシステムに制限がるようで、改善を求める声が日々受け取られます。このようにシステムの維持にコストが高すぎると思われる場合、デザインシステムが崩壊する傾向があり、デザイナーは創造的に行き止まり感じてしまう可能性もあります。

チームワーク

デザインシステムを成功させるには、デザイナーとエンジニアリングの対等なパートナーシップが必要です。システムを視覚的および機能的に実行するには、デザイナーとエンジニアの両方がプロジェクトに参加、共有する必要があります。さまざまなスキルセットとチームワークと相互尊重が必要だと言われています。

またすべての垂直プロジェクトチームにまたがるデザインシステムのようなクロスファンクショナルなものには、組織のトップレベルとボトムレベルからのサポートが必要です。

つまり、デザインシステムの価値を確認し、その実装のためのリソースを提供し、全社的に使用することを提唱するには、プロジェクトマネージャーからVPまでのトップレベルのサポートが必要なのです。これは、リファクタリング作業のためにカレンダーに時間と労力を費やす必要があることを意味しています。

ボトムアップからのサポートは、すべてのレベルのデザイナーとエンジニアもこのシステムをサポートし、責任感を持って作業する必要があることを意味します。デザインシステムは組織の製品であり、誰もが自信を持ってそれに貢献できるようにするべきだと言われています。またデザインシステムが外部クライアントもサポートしている場合も含め、デザインシステムは、育まれ、成長するためにサポートと愛情を必要とします。また、随時投資することが必要です。

またデザイナーをシステムのユーザーと見なすのではなく、共有システムのコアコントリビューターとしての役割を取るべきだと思います。

インベストメント

デザインシステムを成功させるには、それにリソースを投資するための継続的な努力をする必要があります。

例えば、あなたが3ヶ月間積極的に運動し、３ヶ月後さまざまな結果を目にしたり感じたりします。ダイエットで痩せ、筋肉もでき、気持ちも晴れやかです。しかしその時点で運動をやめると、それらはゆっくりと消えていきます。しかし運動を続けると、初期投資よりも頻度が少なくても、完全に停止した場合よりもはるかに高い割合でフィットネスレベルを維持していることがわかります。

デザインシステムに一度投資したけれど、それを維持することを怠った場合、同じ状況に直面します。すぐに影響が見られますが、新しいデザインと同期しなくなるとその影響は薄れます。またパターンが古くなると、デザイナーも、またエンジニアはそれを使用しなくなります。デザインシステムには時間の経過に伴う小さな増分投資が全体として大きな利益につながります。

この点で、デザインシステムはその拡張性のためにプラットフォーム全体に大きな影響を与える可能性があり、アクセシビリティや頑丈なアーキテクチャなどに最初から投資することが非常に重要であることにも注意したいと思います。

これはMicrosoftで使われているTeamsのUI KITです。 Microsoftはこのファイルにチェンジログというページを設けています。

💡チェンジログは、プロジェクトに加えられた変更の記録です。 チェンジログには通常、新機能やバグ修正などの変更の記録が含まれます。

デザインシステムは修正や追加を重ね、有効性を確実にするためにそれらに取り組み続けることが大切です。

これを確実にする1つの方法は、専任のチームがこのデザインシステムに取り組み、チケットを管理し、会社の他の部分に浸透する更新をスタイリングすることが大切です。

レスポンシビリティ

デザインチーム、エンジニアリングチーム、またはデザイナーとエンジニアの両方で構成される新しいチームのいずれであっても、デザインシステムの所有者として機能するある種のチームがあれば関連性を維持する可能性が高くなります。

デザインシステムチームのレスポンシビリティ

→ システムをセットアップするのをサポート
→ コンポーネントのデザインと構築と開発
→ 全体的なUIの一貫性と順守を提唱
→ 展開計画の作成と更新システムの製品管理

これらは多くの役割であるため、可能であれば、少なくとも一部の時間は、このチームに複数の人を配置することが勧められています。

効果的な例が挙げられています。例えばデザインシステムに関わるチームはスロットを予約してセットアップを支援し、システムの使用に関する質問に答えるための営業時間を設けることです。例えばオープンなSlackチャネルを持つことは、この種のことだけでなく、バ​​グ、問題、アイデアを持ち出し、新しいリリースのような発表のためのチャネルになるのにも役立ちます。

コミュニケーション

デザインシステムに投資するためのリソースと計画ができたら、この人またはチームがデザイナーとエンジニアリングの間の架け橋として機能することが非常に重要です。ここでは継続的なコミュニケーションが非常に重要であり、コミュニケーションの方法はさらに重要です。

特にエンジニアは、通常、彼らは仕事で独自のツールを選択するようになります。 他のエンジニアがプロセスをどれだけ制御しているとしても、彼らは自分たちがインプットを持っているように感じる必要があります。

最終的には、一部の当事者が方向性と実行について最終決定を下す必要があります。バランスを取るのは難しいので、オープンなコミュニケーションチャネルを持ち、できるだけ早く透明性を保つことは良いスタートだと言われています。

バイイン

💡バイインとは、ゲームに参加するための必要最低チップ量のことを指します。 もしくは、ゲームに参加するにあたって、その量のチップを購入することもバイインと呼ばれます。 

エンジニアやデザイナー、また製品管理から賛同を得るためには、良好なコミュニケーションが非常に重要です。

デザインシステムの構築と維持は、驚くほど多くの人的作業です。

賛同を得るためには、デザインシステムをシンプルに保つこと、また機能していることを示す必要性があります。

→ チームがコンポーネントライブラリをどのように使用していて、何に苦労していたかを確認しましょう。ユーザーテストのようにしてみてもいいでしょう。
→ 将来の反復でそれを改善する方法について、後でユーザーフィードバックをもらいます。

まとめ

私の会社で使われているデザインシステムは現在社内全体で使用されています。新しいデザインシステムを成功させるために使用した以前の試みから多くのことを学びました。しかし、まだまだ改善したい点が多くあります。

デザインシステムを持つことは、特にそれが成長するにつれて、どんな製品にとっても本当に有益になります。効果的なシステムを構築するには、主に常にユーザーを念頭に置き、会社全体からサポートを得ることが重要です。

ポイントは早い段階で他の人を巻き込むことが大切で、頻繁にキャッチアップをすることが大切です。デザインシステムの構築には、時間と労力がかかります。デザインシステムを成功させるには、デザイナーとエンジニアリングの対等なパートナーシップが必要で、良いリレーションシップはデザインシステムを改善することができます。

まず、デザインシステムに名前をつけ、プロセスとチームを設定します。ある時点で、デザインシステムが大きくなりすぎると、プロセスを設定し、UXデザイナー、開発者、プロジェクトマネージャーの役​​割を分割して、より簡単に貢献できるようにしましょう。

参考資料

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。 主にデジタル・プロダクトの制作に携わっています。