MIXI デザイン本部 プロダクトデザイン室 エクスペリエンスデザイングループの髙木です。私は、2023年10月にリリースされた『FC東京公式アプリ』のUI/UXデザインに携わっています。
2024年8月には「スタジアムマップ」を大幅にリニューアルし、SNSでも「これはすごい！」「めちゃくちゃ便利」といった声が上がり、話題を呼びました。
今回は、このスタジアムマップのリニューアルをデザイナー視点で振り返りながら、どのように体験設計を行い、ユーザーに受け入れられる機能に磨き上げていったかをまとめたいと思います。
FC東京公式アプリ開発プロジェクトは、「試合以外の場でもクラブとサポーターをつなぐタッチポイントを生み出したい」というクラブの思いからスタートしました。
アプリを通じて、FC東京の有益な情報や便利な機能を提供することで、サポーターとの関係性をより強固にしていきたいという目標に向け、MIXIに開発の依頼をいただいた経緯があります。詳細な背景はこちらの記事にまとめられているのであわせてご覧ください。
以前は、FC東京に関する情報が複数の場所に分散していて、全体を把握したり試合観戦に必要な情報にアクセスするのが難しい状態にありました。
その課題を解決すべく、ファン・サポーターが必要な情報に円滑にアクセスできる情報設計や、ニーズに寄り添ったUXデザインをゼロから構築し、より便利で楽しいものに進化させることを目指しています。
具体的には、開発フェーズを3つに分け、段階的に改善を進めています。
今回取り組んだ「スタジアムマップのリニューアル」は、上図におけるPHASE2に該当する施策です。
2023年10月のリリース時点で、スタジアムマップ機能は実装されていましたが、まだ改善の余地がある状態でした。
そこで、スタジアム内でのナビゲーションの利便性を高め、試合観戦時の快適さを向上させることを目的に、リニューアルプロジェクトを開始しました。
一言に「マップ」と言っても、既存のマップアプリのUIを単に真似すれば良いわけではありません。
また、スタジアム観戦特有のニーズを反映する必要があると考えていましたが、私たちが考えていることに近しいと思える事例が見当たりませんでした。
つまり、参照できる事例がない中で、「どんな機能が最適か」をゼロベースで検討し、体験設計を進める必要があったのです。
ここからは、このような状況で、UI/UXデザイナーとしてどのようにスタジアムマップの体験設計およびUIデザインを行ったか、そのプロセスをまとめていきます。
はじめに行ったのは「体験構想を素早く可視化し、共通認識をつくりあげる」ことです。
キックオフの段階では、メンバーそれぞれの頭の中に一定の方向性はあるものの、具体的な機能やUIのイメージはまだ固まっていませんでした。
そこで、キックオフ後すぐに、想定できる範囲でワイヤーフレームを作成し、チーム内で具体的な議論をできる状態を目指しました。
この段階では、体験の肝となるマップ画面、会場内コンテンツの詳細画面の設計、およびマップへの導線であるトップ画面の再設計を行い、粗い形で可視化しています。
さらに、並行してスタジアムマップを利用するユーザーの体験の流れも設計していきました。
例えば、初めてスタジアム観戦をする方は、スタジアム内で「いつ・どこで・何があるのか」をほとんど知らない状態だと想定されます。知らないことが多くて不安に感じたり、当日にイベントやフードを十分に楽しめなかったりする可能性もあります。
こうした状況に対し、スタジアムマップ機能がどのように体験を向上させるのかを仮説として整理し、UIとあわせて組み立てていくことを意識していました。
テキストや口頭でのやり取りだけでは認識のズレが生まれやすいですが、体験の流れやワイヤーフレームを素早く可視化したことで、チーム内で具体的な機能やUIのアイデアを出しやすくなっていきました。
手を動かしてプロトタイプをつくることに加え、ファン・サポーターの気持ちを徹底的に理解することにも、泥臭くこだわりました。
私自身も、一人のファン・サポーターとして通常通りにチケットを購入し、友人と待ち合わせするなど、実際の利用者と同じ立場で体験を重ねました。
例えば、待ち合わせで「今、ハンバーガーショップの前にいるよ」と伝えたとしても、スタジアム内に複数のハンバーガーショップがある場合、合流するのが意外と難しいことに気づきました。
こうした実体験を通して感じた課題を、チーム全体で共有して議論を行い、並行してプロトタイプを更新していくことも、特に大切にしたプロセスの一つです。
全体像がある程度見えてきた段階からは、より詳細な機能の検討を進めました。
単に場所を分かりやすく表示するだけでなく、「観戦体験がより楽しく快適なもの」にするにはどうすればいいか。いわばスタジアムマップにおけるコア体験を形作るものは何かを明らかにしていくプロセスと言えます。
スタジアムマップで重要なポイントの一つは、「場所軸」と「時間軸」の二軸を基に体験設計を行うことでした。
当初のワイヤーフレームでは、主要なナビゲーションはマップを中心に構成していました。つまり、スタジアム内の「どこに何があるか（＝場所軸）」を最も優先度高くUIに反映した状態です。
しかし、チームでUIを改善していく過程で、観戦体験は場所軸だけでなく、時間軸も組み合わせた二軸で構成されるものではないかという気付きを得ました。
実際に観戦する際には、単に「どこに何があるか」を確認できれば良いわけではありません。
「いつキックオフするのか」「いつイベントが開催されるのか」など、当日のスケジュールを把握し、それに基づいて自分がどのように過ごすか計画できることも、観戦体験を充実させる上で大事な要素です。
このように考えると、スタジアムマップは、Google Mapのような場所情報のみにフォーカスを当てたマップアプリよりも、音楽フェス等で使用されるフェスアプリに近い性質を持つものだといえます。
そこで、スタジアムマップでは「マップ」と「タイムテーブル」を主要なオブジェクトとして並列に扱い、タブで切り替えられるUIが適切ではないかと考えました。
場所軸と時間軸を組み合わせて体験設計を行うという方針を基に、チーム内での提案を行った際の資料がこちらです。
結果として、リリース後にも高評価を得られており、「観戦体験がより楽しく快適なもの」になるための重要なアップデートの1つになったのではないかと感じています。
また、試合観戦当日に最大限楽しい時間を過ごせるよう、行きたい場所をブックマークできる機能をデザインしました。
スタジアム内では、さまざまなグルメやショップ、イベントが展開されます。事前に気になったスポットをリスト化しておき、当日にそのリストを見ながら行きたい場所を回って楽しめるような体験をつくりたいと考えました。
ボタン名として「保存する」も検討しましたが、チーム内で議論した結果、「行きたい」という文言に決まりました。
その理由は2つあります。1つ目は、ユーザーの瞬発的な感情をそのままUIに反映したいと考えたためです。さまざまなスポット情報を見て「ここに行きたい！」と思う気持ちを、直感的に反映できる名称が適していると判断しました。
2つ目は、仕様上の観点です。マップ上に掲載されるスポット情報のデータは、試合ごとに上書きされる仕様となっており、永続的な保存ができません。そのため、「保存する」ではなく「行きたい」のような単発的なニュアンスの表現がより適切であると考えました。
さらに、観戦体験における課題を解消し、より快適に感じてもらえるように、機能の拡充を行いました。
広いスタジアム内でも自分の座席を迷わずに見つけられる座席検索、各施設の位置情報を詳細に表示するナビゲーションの強化、家族や友人に気になるスポットを共有し、待ち合わせにも便利な現在の位置情報シェア機能が挙げられます。
新しい体験を構築するだけでなく、スタジアム内での場所の探しやすさや情報の見つけやすさといったベースとして求められる機能も拡充することで、体験全体のクオリティを高めることを目指しました。
主要な機能の設計が固まった段階で、細部の仕様を含めた精緻なデザインを作成していきました。
具体的には、Figmaのプロトタイプ機能を活用し、スタジアムマップ操作時のインタラクションなどを動く形で可視化しました。
この機能は、UI的には似ている他社サービスもありますが、体験としては別物であり、さらにメンバーごとにマップアプリの挙動に対する認識のズレがありました。そのため、動作イメージまで細かく可視化することで、チーム内での共通認識をより深めることができました。
さらに、全体の情報設計やコンポーネントの詳細な仕様を設計し、それらをデザインに反映していきました。
UIが固まった後は、リリースにあわせて公開するLPの制作を行いました。
リニューアルを機に、アプリの存在をより多くの方に知っていただき、既存ユーザーにも「使ってみたい」と思ってもらえることを目指しました。デザイン制作はFC東京公式アプリの別のデザイナー、実装はデザイン本部の他部署メンバーを中心に進め、私はデザイン監修を担当しました。
https://pr.app.fctokyo.co.jp/LP-2/
リリース後は、実際にスタジアムマップを利用したユーザーから高評価が得られています。
SNSでも「FC東京公式アプリがとても便利になった」「これは他のチームには真似できないレベル」「当日のイベントやタイムスケジュールが見られるのが便利」「アウェイから訪れる方にもおすすめしたい」など、多くのうれしいコメントをいただきました。
さらに、リリース後にはアプリ内での滞在時間やセッション数も増加しており、アプリ利用の活性化にも繋がっています。
大きな成果を上げられたプロジェクトとなりましたが、今後も取り組んでいきたいことは多くあります。観戦に来た際のペインは徐々に解消できてきていると思いますが、観戦をした後に「次の試合にも行きたくなるアプリ」を引き続き目指していきたいと考えています。
ここまで、『FC東京公式アプリ』 スタジアムマップの体験設計における試行錯誤をまとめてきました。
前例の少ない機能でありながら、体験構想を素早く可視化することでチーム内の共通認識を深め、コア体験を見定めてUIに反映していくプロセスを推進することができました。
さらに、この取り組みを通して得られた体験設計の知見は、私が所属するエクスペリエンスデザイングループが担当する他プロジェクトにも活かしていきたいと考えています。
実際に、『千葉ジェッツ公式アプリ』のフロアマップ機能のデザインには、FC東京公式アプリを通じて得た知見が活かされています。
エクスペリエンスデザイングループでは、MIXI全体で「体験づくり (UX)」のケイパビリティを強みとしていくことを役割として活動しています。
引き続き、『FC東京公式アプリ』をより魅力的なアプリへと成長させると同時に、これまで培ってきた知見を積極的に還元することで、MIXI全社に最高のユーザー体験を追求するためのUXのケイパビリティをさらに広げていきたいと考えています。