eBayがFigmaを使ってブランドとプロダクトのギャップを埋めた方法

eBayのデザインシニアディレクターであるTyler Moore氏は、デザインシステムの旅の始まりについてこう語ります。「小さな池に小石を投げるような感覚でした。その小さな波は時間が経つにつれ、誰もが乗りたくなる大きな波に変わったのです。」

その波はやがて、時代に迎え入れられることになります。2024年11月に発表されたeBayの新しいデザインシステム「Evo」(進化の略)は、約30年の歴史を持つマーケットプレイスのビジュアル言語を慎重に近代化したものです。その中心にある「eBay Playbook」は、アクセシビリティ、デザイン、コードをまとめた300ページ以上にわたるドキュメンテーションで、eBayの社内チームや代理店パートナーがEvoを効果的に活用する上で役立ちます。

ゼロからの再構築

Evoの誕生前、eBayのデザインシステムのドキュメンテーションは散在するFigmaファイルに存在し、各ステップで摩擦を生んでいました。eBayのブランド、デザインシステム、デザインテクノロジー、コンテンツを担当する部門横断のデザインチーム「OneExperienceチーム」でスタッフデザインテクノロジストを務めるCordelia McGee-Tubb氏はこう説明します。「重要な情報がさまざまな場所に埋もれている状態でした。デザイナーそれぞれがFigmaで独自のバージョンのドキュメントを持っていたことに加え、開発者も別のドキュメンテーションを保持しており、アクセシビリティガイドラインも全く別の場所に存在していました。」ドキュメンテーションを更新する際、デザイナーは静的なFigmaファイルを手動で更新し、各変更がアップロードされるたびにMcGee-Tubb氏のチームにチケットを提出していたのです。

OneExperienceチームは、既存のシステムにパッチを当てたり、外部の代理店に委託したりするのではなく、ドキュメンテーションパイプラインをゼロから見直し、デザイン、開発、画像および動画制作を含むすべてを社内で行うことを決定しました。eBayのスタッフプロダクトデザイナーであるRyan Tinsley氏は次のように説明します。「当時社内で利用していたプレイブックが新しい時代のeBayを表しているとは思えませんでした。外部の代理店と共同開発されたプレイブックで、その管理はデザインとはかけ離れたものだったのです。実際の業務と緊密に統合されたシステムが必要でした。」

すべてを集約

eBayのOneExperienceチームにとって、この新たなスタートは、コンテンツだけでなく、ドキュメンテーションが異なるオーディエンスにどのように貢献できるかを再考する機会となりました。ブランドと製品のガイダンスを別々の保存先に分けるのではなく、ブランド、デザインシステム、テクノロジーを一体化させた共有スペースを作りたいと考えていました。

同社の新たなPlaybookは、コンポーネントのステータス追跡を含む一元化された唯一の情報源となっており、その願いを叶えるものです。以前はFigmaでテーブルを手動更新することで情報を管理していましたが、情報がすぐに古くなることがネックでした。現在、同社のシステムはライブラリのメタデータを使用してリアルタイムでステータスを取得しています。

チームは、すべてのライブラリにわたってデザインシステムコンポーネントを追跡するため、内部コンポーネントステータスAPIを構築しました。このカスタムAPIは、公開されているFigmaコンポーネントライブラリ、ネイティブライブラリ、またはオープンソースのWebコンポーネントライブラリにおける各コンポーネントの可用性と実装されたバージョンを監視します。各ライブラリはコンポーネント名とバージョン(Figmaでコンポーネントの説明に含まれるメタデータ)を登録し、プラットフォーム間の実装状況の全体像を作成します。「当社の開発者の多くは、コンポーネントステータスAPIを使用して、各自が構築しているフレームワークにコンポーネントが存在するかどうか、Figmaのバージョンに対応しているかどうか、Playbookのドキュメンテーションが最新かどうかを確認しており、大きな効果につながっています」とMcGee-Tubb氏は説明しています。

自動化によるサイロの解消

Tinsley氏とMcGee-Tubb氏は、ドキュメンテーションの全面的な見直しを行う上でのエンジンとなるカスタムFigmaプラグインのデモンストレーションをZoomで行います。eBayのPlaybookに含まれるコンポーネント、ガイドライン、アクセシビリティに関する注意事項すべてがFigmaで開き、更新もFigmaで行われます。また、変更のリントチェック、検証、公開は、手動のコンテンツ管理システム(CMS)に触れることなく、同社のエクスポーターを通じてFigmaで行われます。以前は数日かかっていたことが、今では数分で実行できるのです。

Tinsley氏はこう説明します。「Figmaで更新を行えば、2分以内にPlaybookサイトで公開できます。迅速にイテレーションできることで、チームがドキュメンテーションに取り組む方法も変わりました。今ではドキュメンテーションを雑務ではなく、進化するワークフローの一部として見ています。」

チームはPlaybook専用にFigmaコンポーネントのツールキットを構築。このツールキットは、PlaybookのUIの構成要素を形成し、各ドキュメントページのコンテンツにWYSIWYGコンポーネントを提供するという2つの目的を果たします。デザインチームはDev Modeを活用することで、コンポーネントをインスペクトし、仕様に基づいて構築を行い、カスタムエクスポート用プラグインでFigmaプロパティが正しくマッピングされていることを確認しました。

Tinsley氏はこう説明します。「eBayのUI開発者は、Dev Modeを頻繁に使用してコンポーネントのスタイルをインスペクトし、それをコードに変換しています。コードスニペットとCode Connectを使用したコンポーネントのテストで有望な結果が見られたため、さらに深い統合を予定しています。」チームはまた、Figmaのバリアブルを参照してCSSのバリアブルを設定し、デザインと実装のギャップを埋めました。

McGee-Tubb氏は加えてこう語ります。「システムの全体像を確認できることと、複数の分野を統合できる性質は私にとって非常にインパクトの大きいものでした。これまでにない方法で、デザイン、エンジニアリング、アクセシビリティ、ドキュメンテーションを一体化できており、各チームはステークホルダーをより深く理解して、より一貫性のある製品を作成することができています。」

コードを通じて品質を向上

チームのこだわりは、スピードだけにとどまりません。そのカスタムリンティングシステムは、品質のセーフティネットであると同時に、品質向上のための跳躍台としても機能しています。McGee-Tubb氏はこう説明します。「当社のプラグインはファイル内のすべてのページをスキャンします。また、フレームの名前を使用して、サイトのパンくずリストとそれが属するタブを特定し、コンポーネントが正しく使用され、切り離されていないことを確認します。問題が見つかった場合は、エクスポート前にそれらにフラグを立てます。」

この自動化されたアプローチは、同社のアクセシビリティ要件に対する取り組みにおいて特に優れた効果を発揮しています。リンターはサイト全体の画像に対する代替テキストを追跡し、サイトのアクセシビリティを可能な限り確保します。これらの代替テキストは、CMSまで伝わるプロパティとして、Figmaコンポーネントに直接統合されます。

細部に宿る喜び

チームのドキュメンテーションに対する熱意は伝染するほどです。McGee-Tubb氏は笑いながらこう説明します。「当社のSlackチャンネルは文字通り『Playbook in the Weeds(必要以上に詳しいプレイブック)』と呼ばれています。本当に詳細にこだわり、深く掘り下げているからです。」同社では代替テキスト用に色分けされたシステムも開発しました。緑色のブロックは説明全文、黄色のハイライトは注意が必要な領域を示します。こういった小さな工夫によって、メンテナンスが単なる雑用から魅力的なパズルに変わるのです。

ドキュメンテーションに喜びをもたらすことで、eBayはチームが実際に使用し、貢献したいと思える希少なデザインシステムを作り上げました。「従業員が実際にこのシステムを使用していることがとても嬉しく、ワクワクしています」とTinsley氏は語ります。ボトルネックを排除し、ドキュメンテーションをデザインプロセスと同様に動的にすることで、OneExperienceチームはドキュメンテーションをこれまでの概念を覆す「楽しいもの」に変えました。

結果を定量化

Playbookを導入して以来、組織全体でのコンポーネントの使用が大幅に改善されました。Tinsley氏はこう語ります。「チームは更新されたシステムを活用し、最新のドキュメンテーションを参照することで、作業におけるビジュアル要素の質を向上させています。おかげで作業の開始時に役立つ強固な基盤が確立され、UX機能と全体的なレイアウトデザインの両方で確実に一貫性を保てます。」

他にもメリットがあります。Tinsley氏とMcGee-Tubb氏によると、デザインオフィスにおける通常の業務が、基本的なトラブルシューティングから、パターンや原則に関する深い議論へと進化したとのこと。Tinsley氏はこう説明します。「私たちのドキュメンテーションを参照することで、チームが作業の質を劇的に向上させるのを目の当たりにしてきました。Playbook導入前と比べて、現在の業務内容は雲泥の差です。従業員は常に何を参照すればよいか把握していますし、ベストプラクティスに沿ってブランドを示す方法も理解しています。」

システムによるインパクトやEvoおよびPlaybookがもたらした作業の高速化に関する定性的なデータは豊富にありますが、チームでは定量的なデータを追跡する方法を模索しています。McGee-Tubb氏はこう述べています。「Figmaの強化されたアナリティクス機能を楽しみにしています。システムの健全性と再利用性を示す貴重な定量的視点を提供してくれるでしょう。」

今後に向けて

独自の方法でドキュメンテーションを改善しようとしている組織にとって、eBayの経験は貴重な教訓となります。eBayのように、明確な目標を設定し、自動化に投資し、楽しくシステムを使うことに焦点を当てましょう。ドキュメンテーションがイライラから喜びに変われば、一貫性は自然に生まれます。

OneExperienceチームは、システムの規模を拡大しつつ、ツールの改良を続けています。McGee-Tubb氏はこう説明します。「私たちはの試みはまだ始まったばかり。チームは課題を1つ解決するたびに、他に改善できそうなことを教えてくれます。優れたツールにより優れたドキュメンテーションが可能になり、優れた製品につながる。まさに素晴らしい循環と言えるでしょう。」