一貫性を生み出す: Spotifyのデザインシステムが単なるプラットフォームの集合体ではない理由

2019年、Spotifyのリーダーたちが、ある大きな目標を発表しました。オーディオコンテンツを誰もがあらゆるデバイスで、同じように利用できるようにするというものです。社内のデザインチームはこのとき大きな課題に直面しました。Spotifyは現在、45種類のユニークなプラットフォームと、200ブランドに及ぶ2,000種類以上のデバイスで利用できます。つまり、リビングのテレビでお気に入りの曲を聴き、車の中でもそのまま続けて楽しみ、それを「集中」プレイリストでパソコンに取り込んで、仕事をしながら聴くことができるのです。

当社のデザインアプローチは、単にユビキタスな配信ということだけではなく、一貫性を持たせることも重視していました。どこでチャネルを合わせても、その体験ができるだけシームレスで結合性のあるものになるようにしたかったのです。お客様からもそのような要望が届いていました。Spotifyがメディアに関係なく、本質的に「Spotify」であると感じられるようにすることが、当社の一番の目標となりました。私はデザインシステムチームEncoreのデザインリーダーとして、エクスペリエンスの統一を維持するという難しい仕事に取り組むチームを率い、先頭に立って仕事をしてきました。コンポーネントは当社の戦略の中核であり、意見のヒアリングから実行に至るまでのすべての段階で、どのようにアプローチするかを繰り返し考えています。

以前: EncoreのConsumer Mobileシステムのボタンコンポーネント

相違点の顕在化: Encoreの誕生

当社が2019年にデザインシステム、Encoreを導入したとき、2つの主要セグメントに分けました。Encore Consumer Mobileは驚くほど柔軟で、モバイル中心のSpotifyのエクスペリエンスのためにデザインされていました。本質的には、成長と進化を続けるUIコンポーネントの膨大なカタログとして機能しました。一方、Encore Webは、より広範囲なウェブ製品に対応しています。当社は、配色や書体など、基本的なデザインの決定にはデザイントークンを採用しました。しかし、工程が進むにつれ、サブシステム間の共通性を高める必要があることを認識するようになりました。

以前: EncoreのWebシステムのボタンのコンポーネント

Encoreは2つのサブシステム(MobileとWeb)で構成されており、プラットフォームや製品間で一貫性を構築するために、デザイン決定の基盤を共有しています。

Spotifyが成長するにつれ、製品チームも、より洗練されたコンポーネントを求めるようになりました。2022年までには、振り子が柔軟性の方向に振れすぎていることが明らかになり、再調整が必要になりました。そこでEncore Mobile向けに再利用可能なコンポーネントを作ることだけを目的とした専門チームを結成しました。各種サブシステムについて、中核となる基本システムから放射状に広がり、それぞれがその中心から離れるほど専門化し、分岐していると考えるならば、この新しいサブシステムはEncore Consumer Mobileとその基本システムの間に存在します。そうすることで、最初の防衛ラインのようなものを作り出し、Encore Consumer Mobileがすべてのコンポーネントを自ら提供する必要性を軽減すると同時に、システムの残りの部分でより大きなプラットフォームの等価性を作り出します。Encore Webとのコラボレーションにより、当社はクロスプラットフォームのコンポーネントの開発を、後付けではなく、最初から開始しました。

クロスプラットフォームデザインの仕組み

クロスプラットフォームのコンポーネントを作る技術は、まったく新しいものではありませんでした。従来のプロセスは残したまま、リサーチに基づきデザインし、開発したものです。しかし、大きく変わったのはデザインフェーズでした。この新しい仕事のやり方では、1つのプラットフォームのためだけにデザインするのではなく、プラットフォームの間でデザインを同期させ、結合性を維持することが求められたのです。

同時に、各プラットフォームには独自の特徴があり、それに合わせたデザインが求められます。では、モバイル製品やテレビのエクスペリエンスと同じようなルック＆フィールのWebサイトを、品質を損なうことなく構築するにはどうすればいいのでしょうか?一般的には、Webデザインの専門家とモバイルデザインの専門家がそれぞれ存在し、両方を専門としている人は非常に稀です。それぞれが、各自の領域に合わせた知識を持っています。

まず全員が同じ部屋に集まり、徹底的なリサーチを行うことから始めます。iOS、Android、Webの各プラットフォームのチームが、各コンポーネントの込み入ったところを深く掘り下げます。各担当者が監査を実施し、それぞれの面に固有のものを図にします。デスクトップは面積が広い、テレビは視聴距離が違う、ウォッチはすべての情報を凝縮する必要がある、といった具合です。

ここから、私たちは集まって、命名規則、プラットフォームの仕様、アクセシビリティの要件についてコンテキストを共有し、何を構築すべきかについて足並みを揃えられるようにします。こうして見つけたことを集めて、コンポーネントのアウトラインと呼ぶものを作ります。アウトラインは、こうした決定事項を記録し、より詳細なデザインフェーズの基礎を築くものです。アウトラインには、用語集、コンポーネントの構造、サポートが必要なバリアントなどが含まれます。

たとえば、ボタンのコンポーネントを見てみましょう。Encoreが黎明期にあったとき、ボタンはプラットフォームにより大きく異なっていました。サイズのフレームワーク、インタラクション、パディングが異なり、フォントサイズの増分も異なっていました。しかし、厳密なコラボレーションを通じて、プライマリ、セカンダリ、ターシャリという統一した階層を開発しました。また、何度も繰り返し使ってきたサイズフレームワークとネーミング構造も定義し、変数で実装できるようにしました。現在、Encoreの統一されたボタンは、さまざまなサイズ、カスタムのフォーカス状態(プラットフォーム依存)、さらに使用ガイドラインまで揃えています。

なぜクロスプラットフォームなのか?

私たちは、完全な一貫性と個々のプラットフォームの独立性の中間の道として、結合性の追求を考えています。また、クロスプラットフォームの視点からデザインシステムを決定することで、次のような重要な利点があることもわかりました。

結合性

このアプローチに従うことで、プラットフォーム間でSpotifyの本質を共有することができます。ニュアンスの違いは確かにありますが、コアとなるエクスペリエンスはそのままです。

効率性

共通の基盤から始めることで、時間を節約できます。車輪を発明し直す代わりに、プラットフォームチームが固有の要件に基づいてカスタマイズできるのです。加えて、再利用可能なフレームワークの構築も進んでいます。たとえばクロスプラットフォームのネーミングシステムは、今や当社のデザインアプローチの定番となっています。

拡張性

このようなシステムがあることで、ブランドの発展や新しいパートナーとの統合など、高まるニーズに簡単に適応できます。クロスプラットフォームレベルでアップデートが行われ、その後サブシステムへと流れ出ていくからです。

新たな課題

もちろん、この道のりにハードルがないわけではありません。複数のチームが同じページを見ながら複数のプラットフォームを管理するには、次のような複雑性に関連した課題があります。

プロジェクトの複雑性の増大

確かに、一度に1つのプラットフォームに集中する方がシンプルです。複数のプラットフォームでは、多くの要件や制限を把握しなければならず、厄介なことになる可能性があります。Encoreの役割は、製品チームや顧客に複雑さを与えることなく、こうした苦痛を吸収することです。当社ではコンポーネントごとにプロジェクトリーダーを決め、そのリーダーが必要に応じてプラットフォームの専門知識を持つデザインパートナーやエンジニアリングのパートナーから意見を得ることで、これをよりシンプルにしています。

依存関係の増加

複数のチーム間でデザインと構築のフェーズを調整する場合、リリーススケジュール、ロードマップ、タイミングにばらつきがあると、さまざまな問題が発生します。当社では、アクティブなプロジェクトの数を制限し、社内のコミュニケーションを積極的に行うことで、この問題を改善しました。

しかしこのような小さなトラブルは、ユーザーに結合性とわかりやすさを届けるためには、ほんの小さな代償でしかないのです。

コラボレーションについて

Spotifyのように広範で没入感のあるデザインシステムを構築するための複雑な編成において、クロスプラットフォームは大きな成果の一面に過ぎません。クロスファンクションも同様に重要です。当社のシステムは、幅広いプラットフォームときめ細かいファンクションを兼ね備えているとも言えるかもしれません。

Spotifyでは、このクロスファンクショナルな相乗効果は単なる副産物ではなく、意図的なものです。Encoreの構築におけるあらゆるステップは、努力の結集のパワーを証明するものでした。結合性のある統合型のユーザーエクスペリエンスを構築するチームにとって、クロスファンクショナルなコラボレーションは願望ではなく、マストなものなのです。

一貫性を追求する上で、私たちの目的は明確でした。「デザインに統一を、思考に多様性を」。これは、定期的な同期、ブレーンストーミングセッション、フィードバックループを意味します。また、個々の孤立状態を打破し、集団的な考え方を受け入れることも意味していました。命名規則に関するコンテキストの共有から、コンポーネントの構造に関する議論まで、こうしたディスカッションからは素晴らしいアイデアとソリューションが数多く生まれました。

結局、TVスクリーンからモバイルデバイスまで、シームレスなSpotifyエクスペリエンスは、一貫したデザインの産物というだけではありません。各部門が互いを尊重し、全体は部分の総和よりも大きいと心から信じ、数え切れないほどの時間をかけたクロスファンクションによるチームワークの結果なのです。

一貫性が大切

よりクロスプラットフォームな視点からデザインすることで、EncoreはSpotifyのエクスペリエンスを、プラットフォーム特有のインタラクションやディテールを保ちつつ、まとまりと一貫性のあるものにすることができました。Spotifyのデザイナーは、スクリーンサイズや入力タイプの違いを考慮するなど、独自のプラットフォームに最適化しつつ、Encoreにも沿ったものにしています。

プラットフォームをまたぐデザインシステムを推進するチームに向けて、「一貫性が大切」ということを強調したいと思います。デザインにおいて譲れない大切なものを定義することで、その一貫性を高めるだけでなく、チーム内の創造性に火をつけ、斬新な発想を可能にします。

Encoreの仕事はまだまだ終わりません。基礎をしっかりと固めた上で、新たなクロスプラットフォームコンポーネントを展開し続け、そうすることでシステムの守備範囲を広げています。次の予定ですか? クロスファンクショナルなコンポーネントの最善例を紹介することなど、私たちが学んだことから誰もがより多くの恩恵を受けられるよう、貢献プロセスを構築することです。当社の今後の展開について、ご質問やご興味がおありですか? TwitterやInstagramでのお問い合わせやフォローをお待ちしています。

デザインシステムに関するその他の記事については、DesignSystems.comをご覧ください。