こんにちは。
MIXI デザイン本部 デザイナーリレーショングループです。

2023年10月にリリースされた『FC東京公式アプリ』は、MIXIが培ってきたUI/UXの知見を存分に活かしたもので、多くのファン・サポーターから高い評価を得ています。

その後、2024年8月には「スタジアムマップ」が大幅にリニューアルされ、SNSでも「これはすごい！」「他のチームには真似できない」「めちゃくちゃ便利」といった声が上がり、話題を呼びました。

このアプリの開発を主導したのは、MIXIに新卒入社して3年目のデザイナーである髙木さんです。

彼は、チームメンバーと密に相談しながら、丁寧なコミュニケーションを通じて協力を得て、開発を進めました。


今回は、髙木さんが「スタジアムマップ」機能に込めたこだわりや、開発を通じて得た気づき、そして今後めざす方向性についてお話を伺いました。

開発担当への挑戦 ━━ きっかけは「やりたい！」の一言

━━『FC東京公式アプリ』の開発担当になった経緯を教えてください。

私が所属するデザイン本部にFC東京公式アプリの開発依頼があり、「ぜひやりたい！」と自ら手を挙げたことがきっかけです。
アプリ開発に上流工程から携われる貴重な機会だと感じました。

また、私自身スポーツが好きだったことも大きな理由の一つです。
「これは楽しそうだ、やるしかない！」という気持ちでチャレンジしました。 

━━もともとアプリ開発の経験はあったのでしょうか？

実は今回が初めての経験です。

私は2022年に新卒入社し、最初は『モンスト』のグラフィックデザインを担当していました。その後、グループ異動を経てUIデザイン業務に携わるようになりました。  

大きなチャレンジではありましたが、入社当初より上司から「職能や仕事を限定せず、さまざまな業務を経験してほしい」と言われていたこともあり、迷わず挑戦することができました。

気軽に、とは言い過ぎかもしれませんが、新しいことへの挑戦をポジティブに捉えられる環境だったことは大きかったです。  

━━そうだったんですね。
今回のプロジェクトのミッションを教えてください。

『FC東京公式アプリ』を、より便利で楽しいものに進化させることです。
以前は、情報がWEBやSNSなどさまざまな場所に散らばっていて、使いにくい部分がありました。

その課題を解決するため、ファン・サポーターが必要な情報にスムーズにアクセスできる情報設計や、ニーズに寄り添ったUXデザインをゼロから考え直し、事業部・チームのデザイナーと協力して作りあげました。  

具体的には、開発を3つのフェーズに分けて進めました。 

こうした段階的な取り組みによって、より多くのファン・サポーターにとって使いやすく愛されるアプリをめざしています。 

今回お話するのはフェーズ1～2の部分ですね。

ファン・サポーターの視点を理解する徹底した取り組み

━━注力した機能について教えてください。

2024年8月にリリースした「スタジアムマップ」機能に特に注力しました。

この機能は、スタジアム観戦をより楽しんでいただくために設計されており、当日のグルメ、ショップ、イベント情報をマップ上で確認できるようにしています。

また、チームでアイデアを出し合い、ユーザーの現在地を家族や友人と簡単にシェアできる機能を追加し、待ち合わせの利便性を高めました。

例えば、「スタジアムで友人となかなか出会えない」というファン・サポーターの悩みを、この機能で解決できるようにしました。

━━開発においてこだわったポイントは何ですか？

ファン・サポーターの気持ちを徹底的に理解することに「泥臭く」こだわりました。
そのために、スタジアムには何度も足を運びました。

これは仕事の調査としてだけではなく、一人のファン・サポーターとして通常通りチケットを購入し、友人と待ち合わせをするなど、実際の利用者と同じ立場で体験を重ねました。  

例えば、待ち合わせで「今、ハンバーガーショップの前にいるよ」と伝えたとしても、スタジアム内に複数のハンバーガーショップがある場合、合流するのが意外と難しいことに気づきました。

こうした体験を通じて感じた課題をプロダクトオーナーやアプリ担当者を含めチーム全体で共有し、具体的な機能として「スタジアムマップ」に落とし込んでいきました。 

━━ファン・サポーター心理をとことん理解しようとしたんですね。

その通りです。

これは「スタジアムマップ」機能に限らず、アプリ全体の開発において大切にしている姿勢です。
開発者側にいるだけでは、ファン・サポーターのリアルな気持ちは分からないと思います。  

特に私の場合、アプリ開発に関わるまでサッカー観戦の経験がほとんどありませんでした。
そのため、ファン・サポーターが何を大切にしているのか、何に喜びを感じるのかを正確に理解するためには、実際にファン・サポーターの視点に立つことが必要だと考えました。

━━苦労した点は何ですか？

参照する事例がなかったことです。

他のクラブチームのアプリを見ても、ここまで機能的なマップを提供している例は見当たらず、「どういう機能が最適か」という部分から考える必要がありました。

開発会議で意見を出し合い、最適だと考えられる機能アイデアをまとめ、少しずつ理想の形を作り上げてきました。

しかし、さらに難しかったのは、そのアイデアをFC東京や関係者に具体的にイメージしてもらうことでした。

━━どのように解決したのでしょうか？ 

デザイナーとしての強みを活かし、具体的なデザインを示すことで解決しました。

方向性が完全に決まってからデザインを始めるのではなく、初期段階から「こういうイメージを想定している」と仮デザインを見せて認識を揃えることを重視しました。  

例えば、作業途中であってもワイヤーフレームやUIデザインのプロトタイプを見せたり、Figmaを活用してアプリと同等の動きが再現できるものを作成し、実際に触れてもらったりもしました。  

この方法によって、新しい議論が生まれるケースもあれば、「これなら良いね」とメンバーに納得してもらえることもありました。

デザインの完成を一度の会議で仕上げるのではなく、何度か再構築を繰り返し、コミュニケーションを重ねることで、プロジェクト全体がスムーズに進行したと思います。 

ファン・サポーターの高評価が自信に！

━━大幅リニューアルを経て、どのような手応えを感じていますか？

ファン・サポーターの皆さまから高い評価をいただけたことが、大きな自信につながりました。
喜んでいただき、積極的に使っていただいていることが何よりうれしかったです。

SNSでも「FC東京公式アプリがとても便利になった」「これは他のチームには真似できないレベル」「当日のイベントやタイムスケジュールが見られるのが便利」「アウェイから訪れる方にもおすすめしたい」など、多くのうれしいコメントをいただきました。

さらに、Jリーグの共通会員IDサービス「JリーグID」との連携率が向上した点も、大きな成果だと感じています。

━━依頼元であるFC東京からの評価はどうですか？

リニューアル後も「こういった機能を追加したい」「こんな取り組みはどうだろう」と、新たな提案を次々といただいています。

これにより、信頼されるパートナーとして認めていただけたのではないかと感じています。

━━今後の課題や改善点を挙げるとすると何ですか？

『FC東京』のメインカラーである青と赤の配色バランスについては、アプリ内の視認性の向上を目的に、現在も試行錯誤を繰り返しており、ルールの再検討が必要だと感じています。

ただ、これらの点は非常に前向きに捉えています。

改善の余地があるということは、まだまだアプリをより便利で快適にできる可能性があるということです。

━━『FC東京公式アプリ』の開発を通じて、デザイナーとして成長を感じた点は何ですか？

まず、人に相談するようになったことです。

これまでは「自分の仕事は自分で解決しなければ」という意識が強く、抱え込みがちでした。
また、デザインについても、途中段階で見せることに抵抗を感じていました。

しかし、相談することで新しい視点から意見を得られ、一人で進めるより圧倒的に良い成果が出ることを実感しました。

今回は仕様が複雑だったこともあり、早い段階で上司や先輩に意見を仰ぎ、完成度の高いアプリを作ることができました。

また、「当事者意識」を強く持てたことも大きな成長点です。
このアプリは自分が作っている、という意識を持ち続けることで、トラブルが起きてもすべてを“自分事”として捉え、解決に向けた選択肢を積極的に探せたと思います。

「もっと便利な機能を作りたい」「もっとファン・サポーターに喜んでほしい」という想いを最大限に高めることができました。

━━人に頼ることと、責任感のバランスが大切なんですね。

その通りです。
ただ一人で全てをやるのではなく、とはいえ他人任せにするわけでもない。

責任感を持ちながら、周囲の力を頼ることの大切さを学びました。

━━最後に、これから取り組みたいことを教えてください。

一言で言えば、「次の試合にも行きたくなるアプリ」をめざしたいです。

例えば、試合観戦後の高揚感をシェアできる機能があれば、ファン・サポーター同士で大いに盛り上がると思います。

また、まだ観戦したことのない友人を気軽に誘える機能があれば、新たなファン層を広げられる可能性もあります。

アプリをきっかけに「サッカー観戦に行ってみたい！」と思ってもらえたら、本当にうれしいですね。

MIXIで働きたい！そんな仲間を募集しています

MIXIではコミュニケーションを一緒につくる仲間を募集しています。
くわしくはリクルートページをご確認ください。

MIXI デザイン本部のショーリールもぜひご覧ください！

FC東京のこちらも記事も合わせてどうぞ！