📘 Book Club ＃デザイン学習 #デザインシステム –Spotifyのデザイン・システム － Encoreについて…

💡デザイン・システムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。

大規模なデジタル・プロダクトをデザインする時や、チームでデザイン制作を行う場合にデザイン・システムを活用してデザイン制作を行うことがよくあります。






プロダクトやサービスの規模が大きくなってくると、多くの人がデザインに関わることによって、デザイナーによってデザインにバラつきが生まれてしまいます。デザイン・システムを導入することによって、全員がデザインシステムで定義されたパーツや色、スタイルを使用することができ、一貫したデザイン制作が可能となります。

色々な企業で、素晴らしいデザイン・システムが開発されていますが、今回は、Spotifyの新しいデザイン・システムEncoreの参考事例をご紹介していきたいと思います。

去年11月（2020年11月）に、Spotifyは新しいデザイン・システムのアプローチ、Encoreを紹介しました。Encoreは分散したチームによって管理されるデザイン・システムのです。Encoreを作成した動機、構造、および以前に開発したデザイン・システムとの違いについて解説されています。

Encore

Reimagining Design Systems at Spotifyを参照しています。

Reimagining Design Systems at Spotify

スタートアップした時のSpotifyのには、デザイン・システムはありませんでした。すべてをスクラッチから構築されていました。2009年にモバイル・アプリをリリースしたとき、標準や共有パターンはほとんどなく、Spotifyのエクスペリエンスは一貫性をなくしていました。

シグネチャー・ダーク

プラット・フォーム間でビジュアル・デザインを調整し続ける作業は2013年まで続きました。この作業は、多大な努力であり、大きな影響を及ぼしました。Spotifyは次にシグネチャー・ダーク・エクスペリエンスを導入しました。

GLUEの誕生

その後、2014年〜2015年にかけて、Spotifyのブランドおよびクリエイティブ・チームは、ブランド・アイデンティティを大幅に変化させました。新しいカラー・パレット、書体Circular、およびアプリを更新がありました。これを行うために、Spotifyを1回限りのプロジェクトのように扱うのではなく、GLUE（Global Language Unified Experience）というデザイン・システムを開発しました。

GLUEデザイン・システムは多くの点で活躍しましや。チームはSpotifyのルック・アンド・フィールを刷新させ、モバイルとデスクトップ全体で多くのコンポーネントを標準化し、少数のデザイナーから30人以上のフルタイムのエンジニア、またデザイナーチームに成長しました。しかし、そこに落とし穴がありました。

GLUEは単一、集中型のチームでした。これは一貫性にとって素晴らしいことであす。しかし、そこがSpotifyにとってボトルネックになりました。

どうして？

それは組織がどのように設立されるかにかかっています。Spotifyは「整合性のある自律性」を重視していました、チームが独自の意思決定を行えるようにします。しばらくすると、一元化されたデザイン・システム・チームを持つことは、この作業方法に適合しないことがわかりました。

2018年、Spotifyは成長を続け、急速に成長しました。
200人のデザイナー、2000人のエンジニア、45の異なるプラットフォームが存在しました。

次のSpotifyの野望は、リスナーがどこからでもSpotifyにアクセスできるようにすることです。モバイルとデスクトップ向けのデザインの時代は過ぎ去りました。今では、車、スマートウォッチ、スピーカー、さらにはスマート冷蔵庫のデザインも開発しています。これは一部、新しい会社の戦略であるユビキタスによるものでした。

💡ユビキタス：ユビキタス (英: ubiquitous) は、遍在（いつでもどこでも存在すること）をあらわす言葉です。

問題は、この時点でGLUEチームが解散し、GLUEデザイン・システムを積極的に推進している人がいないことでした。

Design Systems 2018

Spotifyは新しい方向に進み続けるために、時間節約また、効率向上の手助けをしてくれる新しいコンポーネント、パターン、ツールキット、およびデザイン・システムを必要にしていました。

社内のでザナーやエンジニアは、独自のデザイン・システムを自分たちで作成し出しました。たとえば、ニューヨークのチームは、Webのデザイン・システムであるTapeの開発を開始し、ストックホルムのチームは別のデザイン・システムを始めました。非常に分散化された「誰もが自分で作る」アプローチは持続可能ではありませんでした。ある時点で、多くの異なるデザイン・システムが存在していました。

この非常に分散化された「誰もが自分で作る」アプローチは持続可能ではありませんでした。ある時点で、多くの異なるデザイン・システムが存在していました。

Spotifyには、便利で統一されたデザイン・システムを本当に必要としていましたが、GLUEのような一元化されたチームはおそらく機能しないことはわかっていました。そこで、2018年に、会社のデザイン・システムを作成するための新しい取り組みを開始しました。今回は、プロダクト体験の1つをデザインするのと同じように、デザイン・システムをデザインを作り出そうと考えていました。彼らには完全に真っ白の状態から始めないで、もともとあったリソースを統合、統一し、アクセス可能で、協調的で、一貫したビジョンに基づいていると感じられるシステムを作成したいと考えていました。

最も重要なことは、Spotifyの自律性の文化に適合するシステムが必要でした。複数のプラット・フォームやユースケースにまたがって拡張できるシステムです。

Encoreの誕生

Encoreは、チームが美しく、スケーラブルなSpotifyアプリを構築するために必要なすべてを備えたデザイン・システムのデザイン・システムです。

Encore内にはいくつかのデザイン・システムがあり、それぞれが会社の異なるチームによって管理されています。これらのチームはさまざまなシステムを維持していますが、Spotifyでプロダクトを構築する人は誰でも貢献できるようになっています。

フレームワークは新し区なっていますが、実際は以前のデザイン・システムに取り入れられた多くの優れた機能を再利用しています。

以前は、多くのデザイン・システムが存在しました。現在、まだ複数のシステムがありますが、それらはすべて接続されており、同じ傘下にあります。

Encoreファンデーション

センターには、Encoreファンデーションがあります。ここには、色、タイプ・スタイル、モーション、スペース、およびアクセシビリティのガイドラインなどがあります。また、デザイン・トークンというデザイン・システムが存在する場所でもあります。これらは統一感を出すために、誰もが使用する必要があるものです-Encore Foundationの使用は、すべてのSpotifyプロダクトの最小・基準です。

Encoreウェブ

次は、EncoreWebです。ボタン、ダイアログ、フォームコントロールなど、一般的なWebデザイン・システムに見られるすべてのものを提供します。これらのコンポーネントは、WebアプリからWebサイト、デスクトップ・クライアント、さらには冷蔵庫のアプリまで、Web技術を使用して構築されたあらゆるもので使用できます。
Encore Webには、Webベースのプラットフォーム用の共有リソースがありますが、Foundationのすべてのものも含まれています。コンポーネントはトークンを使用して構築され、Foundationで定義されたパターンとガイドラインに従います。したがって、システムはスタンドアロンのものではなく、接続されています。




Encoreモバイル

これはまだ定義中です。EncoreWebと同様に、複数のモバイル・アプリ間で共有される共通コンポーネントの場所であると想定しています。

ローカル・デザイン・システム

しかし、それだけではありません。この次のレイヤーでは、Encoreには「ローカル・デザイン・システム」と呼ばれるものも含まれています。ローカル・システムは、特定のプロダクトまたは対象者に合わせて調整されたデザイン要素を保持する場所です。

現在、2つのローカル・システムがありますが、これが最終的なセットではないと思います。Encoreを使用すると、必要に応じてローカル・システムを追加できます。たとえば、将来的には、SpotifyKidsなどのスタンド・アロン・アプリ用のローカルシステムを追加する可能性があります。

Spotifyの視覚言語とプロダクト戦略が進化するにつれて、デザイン・システムも変更する必要があることがわかりました。既存しているデザイン・システムが万能ではないことがあります。会社のニーズに合わせて調整する必要があります。

おそらく私たちにとって最大の教訓は、企業文化を理解し、それに適応することがいかに重要であるかということでした。デザインシステムが機能するためには、会社の特性を受け入れる必要があります。

私たちの会社は、今までデザイン・システムにあまり触れる機会が多くありませんでしたが、チームが大きくなるにつれて、その必要性を考えさせられるようになりました。今回はSpotifyのフレームワークを習う良い機会になりました。私も単一のシステムやチームを持つよりも、複数の分散したチームによって管理されるデザインシステムのファミリーを持つ方が良いと思いました。

デザインシステムを導入しようと考えているのであれば、何かしらの目的を表すことが必要だと思いました。デザイン制作の効率を向上させたい、一貫したデザイン制作をしたい、またデザイン・プロセスを一貫させたいなどです。また、チームでデザイン・システムの必要性について共通認識を持っておくことも重要です。それからデザイン・システムは一度作ったら完成ではなく、変更があった時はデザイン・システムをアップデートして、常に最新の内容になっている状態を維持し続ける必要があると思いました。

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

メルボルンを拠点にビジュアル・デザイナー、UXスペシャリストとして働いています。 主にデジタル・プロダクトの制作に携わっています。