ロンドンマラソンの新しい体験をデザインするため TCS が採用した Adobe XD のワークフロー | アドビ UX 道場 #UXDojo

ここ数年、世界最大のマラソン大会は革新的なテクノロジーを活用し、チャリティのための募金機会の創出や、よりインクルーシブでパーソナライズされた体験の実現に取り組んできました。そして昨年は COVID-19 パンデミックの影響に対応するため、最先端の技術を駆使してマラソンのあり方をさらに進化させました。新しいマラソンは、伝統的なレースとバーチャルな参加者を融合させたハイブリッド型です。

IT サービスやコンサルティングの世界的企業であるタタ・コンサルタンシー・サービシズ（TCS）は、世界中の主要なマラソン大会に長年関わっており、ニューヨーク、シカゴ、ロンドン、アムステルダム、シンガポール、キャンベラ、ムンバイの大会スポンサーです。ムンバイに拠点を構える TCS Interactive チームは、2012 年から大会参加者と観客用のアプリをデザインしてきました。そして 2020 年も、来るべきロンドンマラソンに向けて、オフィシャルアプリの新しいデザインに取り組んでいました。

2020 年はオリンピックやウィンブルドンなどの主要なスポーツイベントの延期や中止が決定された年です。それでも一般の人々にマラソンに参加する機会を提供しようと決意した主催の London Marathon Events Ltd は、バーチャルマラソンの実施というコンセプトにたどり着きました。ロンドン中心部で開催される招待者限定のイベントと同日の午前 0 時 00 分〜午後 23 時 59 分 59 秒（BST）に、世界のどのコースでも 26.2 マイルを完走することにより参加するというアイデアです。これは、暫定ルートだったグリニッジからウェストミンスターでは大規模イベントの開催が不可能であると明らかになった後に決定されました。

その結果、ごく短期間でアプリ全体を再設計しなければならなくなりました。TCS Interactive チーム内ではメンバー間のシームレスで効率的なコラボレーションが必要とされ、それを可能にするべく Adobe XD が全面的に採用されました。XD を活用した新しいワークフローでは、素早くプロトタイプを作成し、それを主要なステークホルダーと簡単に共有できます。

マラソン大会アプリへの取り組み

マラソン大会は一年を通じてさまざまな時期に開催されます。そのため TCS Interactive は、たいてい複数のマラソン大会のアプリに同時に取り組んでいます。それぞれのアプリは、個々のレースの明確な個性を反映したものです。アプリ開発の最大の課題は、非常に厳しい納期の中で、既存のデザインを改良し、体験の新鮮さを維持し、参加者や観客のために新しい機能を導入することです。

当初、TCS 社内のチームはアプリデザインに Adobe Photoshop を使用していました。その頃は Android と iOS 用に必要なアセットを手作業で書き出してデベロッパーと共有するのにまる 1 週間かかっていました。クライアントにデザインを見せる際は、会議を開催して PC の画面を共有し、PDF ファイルを開いて機能やユーザーフローを説明していました。また、全員の認識を揃えるために、静的なスクリーンショットを共有していました。

Adobe XD を使った新しいワークフロー

TCS が XD を使い始めたきっかけは、ムンバイのデザインチームが 2017 年の Adobe Creative Jam で 1 位と 2 位を獲得したことです。それ以来、会社全体で、アプリを魅力的にするためのアニメーションやマイクロインタラクションを追加するといった機能を試すようになりました。2020 年のロンドン大会のために、限られた時間で史上初のバーチャルマラソンのアプリを 12 人ほどのデザイナーと開発者のチームが完成させるには、まさに XD が不可欠でした。ブレインストーミングから、情報アーキテクチャ、ワイヤーフレーム、インタラクティブなプロトタイプ、最終的な UI デザインの完成まで、プロセスのすべての段階で XD が使われました。

2020 年にバーチャルロンドンマラソン用のアプリを企画した際は、ランナー、観客、主催者、マーケティングチーム、デザイナー、開発者にインタビューをしました。アプリはリモートから参加するランナーが、すべてを行える場所である必要がありました。イベントへの登録、26.2 マイルのログ、ゴール地点での自撮り画像を投稿するなどの機能です。他にも、参加者はデジタルメダルや参加証明書を手に入れることができました。また、リモートの観客が求めるあらゆる情報を提供することもアプリに求められました。たとえば、近しい人への連絡、バーチャルマラソンの進行状況の確認、選択した目的への寄付、レース全体の結果の確認などです。有名な専門家による独自の音声コメント機能も組み込まれました。

このアプリは世界中のランナーが利用するため、理解しやすいことはもちろん、直感的なナビゲーションおよび一貫したデザイン言語の使用が必須でした。また、ロンドンマラソンは毎年恒例の世界最大規模のイベントでもあるため、マラソン開催日の 24 時間の枠を超えてユーザーとの接点を強化する方法も幅広く検討されました。

XD を使った新しいワークフローでは、開発者やステークホルダーに XD が生成したリンクを送り、リアルタイムでアセットを共有しながらレビューやコメントを行います。また、複数のユーザーが同じファイルで作業できるため、画面を見て変更を把握し、他の人が何をしているかを確認することもできます。

アプリの使いやすさと見た目の美しさのバランスが取れるまで、チームはプロトタイプの作成を繰り返し行いましたが、オフィスが閉鎖されていたため、作業はすべてリモートから行わなければなりませんでした。XD の共同編集機能に頼ることで互いの作業の連携と、リモートワークの効率化に成功しています。

XD のデザインシステムで時間を節約

TCS のチームはデザインシステムの導入にも取り組みました。その結果、大幅なプロジェクトの効率および生産性の向上が達成されました。一般的に使われる要素をテンプレート化しておけば、デザイナーはそれらを再作成する作業から解放されます。また、テンプレートはプロトタイプ構築の出発点としても利用できます。テンプレートをデザインするアプリに合わせて事前に調整しておいたことで、デザイナーがより自由にアイデアを試せるようになったこともデザインプロセスのスピードアップに貢献してしています。

デザインが完成したら、XD の機能を使ってデザインスペックを自動生成し、開発チームにリンクを共有します。つまり、フォント、色、配置、画像などを説明するために、新たなドキュメントの作成は行いません。この手順のおかげで、デザインシステムを管理するチームは、個々のプロジェクトの状況とすべての関係者の要望を把握したら、共有している XD ファイルにまとめて反映するだけで対応できます。

XD は、フィードバックも 1 つの場所に集められます。そのため、すべてのコメントを共同でレビューできるようになり、コミュニケーションが大幅に改善されました。XD が節約してくれた多くの時間は、クリエイティビティの向上、改善の余地がある機能の特定、体験をより豊かにするための施策の検討に使われました。アプリを最新のトレンドにマッチさせ、常に革新を目指す上で、これはチームが本当に必要としていたことでした。

2021 年: ハイブリッドマラソンという変革

世界最大規模のリモートマラソン大会となったロンドンマラソン 2020 のアプリが 30 日以内に完成したことは、新しいワークフローの成果です。もちろんアプリが提供する体験に妥協はしていません。公開後、アプリは 10 万回以上ダウンロードされ、平均ユーザー評価 4.5 を獲得しました。

2020 年のロンドン大会では、招待選手がセント・ジェームズ・パーク周辺に確保されたセキュリティゾーン内の周回コースで競争しました。また、アプリを通じて世界各地から合計 38,000 人のランナーが、自分で選んだコースを走ることでリモート参加しました。その反響は大きく、「24 時間以内に最も多くの参加者がリモートマラソンを走った」という公式ギネス世界記録や、UK Sport Industrys Awards 2020 の「The Best Virtual Event」などを受賞しています。この年のロンドンマラソンは、マラソンという競技に対する見方を見直すきっかけとなり、2021 年の新しいマラソンへの道を切り開きました。

2021 年に登場したマラソンの新しいモデルは、ランナーが現地、あるいはリモート参加を選べるハイブリッド型です。このモデルであれば世界のどこからでも参加できるため、大会に参加できる人数が大幅に増加します。リモート参加のランナーにとっては現地への移動にかかるコストがなくなり、マラソンの完走までに与えられる時間が長くなるためイベントがより身近になります。その一方で、会場周辺への影響も軽減されます。TCS Interactive は、このハイブリッドモデルをサポートする新しいアプリの開発に取り組みました。GPS をベースにした、現地で走るランナーのデータと、世界のどこかで走るランナーのデータの統合です。

10 月 3 日（日）に開催された 2021 ロンドンマラソンの目標は、とても大きなものでした。3 万 5 千人の現地ランナーと 2 万 3 千人のバーチャルランナーを集め、史上最も大きなマラソン大会にすることです。マラソン体験をさらに充実させるために、デジタル技術にはこれまで以上に大きな役割が期待されています。40 年の節目を過ぎた次のロンドンマラソン 2022 は、TCS がタイトルスポンサーを務め、ハイブリッドマラソンの新時代は続きます。

この記事は Tata Consultancy Services enriches the London Marathon experience with Adobe XD（著者: Rajashree Jathar）の抄訳です