世界最大級アイドルフェスで「NFT」。エンジニアが語る、オンラインシステム開発の裏側
Gaudiyは、2021年10月2日・3日に開催された「TOKYO IDOL FESTIVAL（以下、TIF）」にて、ブロックチェーン、NFT（※）を活用したファンコミュニティサービスの提供やオンラインチケットの販売等を実施し、アイドルファンの方々に新しいエンタメ体験をお届けしました。
今回は、その一大プロジェクトの立役者であるフロントエンドエンジニアのkodaiさんに、開発の裏側をインタビューしました。
鈴木皓大 | Kodai Suzuki @r34b26
大学在学中から独学で機械学習やブロックチェーンの技術を学び、2018年に大学休学と同時にGaudiyへ参画。フロントエンド全般に携わり、コミュニティサービスのアプリケーション開発をメインに担当している。2021年2QのMVP受賞。
※NFT（Non-Fungible Token）…唯一無二の「世界にひとつだけのデータ」の価値を生み出せる代替不可能なトークンのこと。
ほぼ初見のプロダクトで、いかにスムーズな体験を提供できるか
ーーはじめに、TIFの概要とプロジェクトの全体像について教えていただけますか？
TIFは、お台場で毎年開催されるフジテレビ主宰のアイドル・フェスティバルで、今年で12回目を迎えます。2019年には約9万人が来場するほどの大規模なフェスで、今年はオンライン視聴とオフライン会場のハイブリッド開催となりました。
Gaudiyは、そのオンライン体験の部分をソニー・ミュージックエンタテインメント社と一緒に提供することになり、今年の夏頃にプロジェクトのキックオフをして、約2ヶ月かけて開発しました。
ーー具体的に言うと、今回Gaudiyが提供したのはどういった体験になるのでしょうか？
大きく分けると4つで、オンラインチケットの購入、ファンコミュニティサービス「TIFコミュニティ」、当日のオンラインライブ視聴、オンラインサイン会での体験が、僕たちが開発・提供したものとしてあります。
このデジタルチケットやデジタルサインはNFTで発行されており、TIF共通のID基盤には分散型IDを活用するなど、ブロックチェーン技術が使われているのが特徴です。今後はそのNFTに、特典などの新しい価値を付与するといったことも考えています。
▼Gaudiyが開発した「TIFコミュニティ」
ーーさまざまな体験を裏側でつくっていたんですね。ちなみに、TIFはかなり大きな案件だったと思いますが、最初に話を聞いた時はどんな印象を持ちましたか？
これは個人的なことですが、2年前に一般の観客としてTIFに行ったことがあって。乃木坂46とか坂道グループは元々好きだったので、正直「オッ」て思いました（笑）。
ーー好きなものに仕事で関われるっていいですね（笑）。これまでも、Gaudiyでは週刊少年ジャンプの漫画「約束のネバーランド」をはじめとして複数のファンコミュニティサービスを開発してきましたが、今回はどのようなところが違っていたのでしょうか？
まずひとつは、純粋にユーザー数が多いことがあります。特にオンライン視聴は初めて開発する部分でしたが、数万のアクセスに耐え得る視聴基盤を開発する必要がありました。
また、ユーザーがプロダクトを触ってからすぐ本番当日を迎えるという点も、今までとは違っていましたね。従来のコミュニティでは、参加ユーザーは徐々にプロダクトの使い方に慣れていきますが、TIFではコミュニティ開設から本番まで1週間しかありませんでした。
また前日や当日に駆け込みでオンラインチケットを購入する方もいらっしゃるので、そうするとコミュニティに参加してすぐの状態で、オンライン視聴ページまで迷わずにたどり着く必要があるんですね。
ほぼ初見のプロダクトで、機能やできることを正しく認知して行動してもらえるかどうかが、TIFコミュニティの体験づくりにおいてとても重要でした。
ミッション別のチーム編成で、開発のクオリティを向上
ーー今回の開発体制についても教えてください。
TIFのプロジェクトに入る少し前から、ユーザー体験に直接関わる部分を実装するエクスペリエンスチームと、ユーザー体験の基盤をつくるプラットフォームチームの大きく2つに分かれています。共通のミッションをもつチーム編成で、エンジニア、デザイナー、プロダクトマネージャーなどの様々な職種がコラボレーションしています。
ーーTIFでいうと、それぞれどの部分を担当していましたか？
例えばプラットフォームチームは、チケットの決済や動画視聴の「基盤となる部分」を開発していました。エクスペリエンスチームでは、同じ機能でも、実際にユーザーさんがチケットを購入する、動画を視聴する、といった「体験に関わる部分」を実装しましたね。
ーーコロナ禍で完全フルリモートでしたが、大変ではなかったですか？
常時Slackのハドルを繋いでいたので、特にやりにくさは感じなかったです。それぞれチームのハドルに基本集まるようにしているので、ちょっと相談したい時は「〇〇さんいますか？ちょっとここ聞きたいんですけど…」みたいに気軽に話しかけていました。
チームの雰囲気として、お互いに「ここがよかった」「こういうところは変えていきたいね」といった指摘を率直にし合えますし、ちょっとモヤモヤしたことも提案ベースで話せばすぐ改善に動く感じなので、フルリモートでもコミュニケーションの支障はなかったですね。
良いユーザー体験をつくるため「デザイナーとの橋渡し」に注力
ーー今回、kodaiさん自身はどういった役割を担っていたのでしょうか？
基本的にGaudiyは階層のない組織なので、エクスペリエンスチームの方で、いちフロントエンドエンジニアとしてWebアプリケーションの実装を担当していました。
ただ個人的に特に意識していたのは、デザイナーとエンジニアの橋渡しですね。というのも、TIFはやはり「慣れていないプロダクトでもいかにスムーズな体験を提供できるか」が肝だったので、デザインとエンジニアリングを繋ぐことが大事で。
今までも「デザインを適切に実装するために、デザイナーとここを話しておこう」とか「体験の抜け漏れがないように実装できているかデザイナーと確認しよう」といったことを個人では気をつけていました。でもそれが属人的になっているところがあったので、他のメンバーも意識できるように促すような動き方をしていましたね。
ーー具体的には、どのような工夫をしていましたか？
まずは、デザインの成果物に対するエンジニアとしてのスタンスを揃えることから始めました。デザイナーが出したアウトプットは決定事項ではなく、調整すべきものだよねという共通認識の部分をNotionに書きました。
またワークフローとしても、デザインの成果物に対してエンジニアがレビューするという工程が入っていなかったので、それを取り入れたワークフローを共通化しました。
というのも、自分であればFigmaをみた時点で「ここの部分、体験の考慮足りてるかな？」と調整すべき箇所が見つかるような場合でも、それに気づかずに実装に入ってしまうメンバーもいて。実装が終わった段階で指摘が入り、手戻りが起こってしまうと開発の効率が良くないので、それを防ぐためにデザインレビューというフローを整えました。
さらに、レビュー時にデザイナーと抜け漏れなく会話できるような仕組みとして「エンジニアによるデザインレビューの観点」をまとめました。
▼実際のデザインレビューの観点（一部）
このドキュメントをベースに、メンバーと「こういう観点でデザイナーと会話した方がいいね」とコミュニケーションを取ることで、徐々にチームに浸透させていきましたね。
最後の詰めまで「全員で」プロダクトに向き合う組織文化
ーープロジェクトの中で、技術的に難しかったことはありますか？
エクスペリエンスチームで言うと、NFTのデジタルサインの配布などは新しいチャレンジでした。
アイドルの方に会場で書いていただいたサインを、NFTのデジタルトレカとして視聴画面からリアルタイムで受け取れる、という体験だったのですが、視聴している人が迷わず受け取れて、動画も楽しめるような体験として提供するのが難しかったです。
ーー私も実際に当日受け取りましたが、画面越しのサインをリアルタイムでもらえて、すごくおもしろい体験でした（笑）。本番を迎えるギリギリまで、少しでも体験を良くするために全員QAで詰めていたと思いますが、最後どのように体験に落とし込んでいったのでしょうか？
基本的には、QAで挙がった報告の中から優先順位をつけて、上から順に手をつけていく感じです。優先度としては、規約に抵触するもの、明らかにユーザーの体験を阻害するようなもの、人によって意見が好みがわかれるものに分類して、重要度の高いものを判別します。そして実装の工数を見積もった上で、時間的な制約がある中で総合的に最も良いユーザー体験を提供できるものはどれかで並び替えを行い、実装に着手していく形です。
イメージでいうと、ある機能のクオリティを100%に高めるよりも、別の機能を追加して70%のクオリティまで仕上げる方が全体としての体験がよくなることがあるんですね。この辺りは、コミュニティのデータやデザインリサーチをもとに意思決定していました。
ーーQAには総務や人事などのコーポレートメンバーも含めて本当に「全員」が参加していましたが、そのメリットは感じましたか？
そうですね。実装するまでにも、デザイナーがUIリサーチしたり、エンジニアも気になる体験があればフィードバックをしてはいますが、やはり自分で作っていると気づきにくい部分はあると思っていて。そういう見落としがちな部分を、ピュアな視点からみてくれるメンバーがいることで、気が付くことのできた改善点は実際にあったなと感じますね。
新しく、大きな課題にどんどん立ち向かっていく面白さ
ーーTIFでは全社MVPを受賞するほどの大活躍でしたが、改めてGaudiyへの入社経緯を教えていただけますか？
元々、早稲田にあるブロックチェーンの学生団体で友人と活動をしているうちに、すごくハマっていったんですよね。そんな中で、代表の石川さんが「ブロックチェーンやってて、ラジオ好き」という共通点から知人経由でTwitterのDMをくれて、そこからご飯に連れて行ってもらい、Gaudiyにエンジニアのインターンとして入って…気がついたら今に至る感じです（笑）。
ーーそういう出会いだったんですね（笑）。そこから3年と少しで、チームを引っ張るような存在になっていてすごい。自分自身を振り返ってみて、変化を感じるところはありますか？
最初の頃は、個人のスキルを高めるという部分に意識が向いていたのですが、そこに対してはまだ100%ではないにせよ7〜8割はできるようになってきたかなという感覚があって。そうなってきたときに、フロントエンドの開発やプロセスの改善、デザイナーとの会話などが、自分に偏っているかもと気づく余裕ができたことで、チーム全体としてその視点を入れていくという動きにシフトできてきたのかもしれません。
ーーなるほど。その成長の源泉というか、何がkodaiさんのモチベーションになっているのでしょうか？
難しいですね…エンタメもモチベかと言われればモチベなのですが、最初からGaudiyはその領域に注力していたわけではないので、大きな要素かと言われるとそうでもなくて。
それよりも僕は、創業初期のミッションであり、今も根幹の思想である「イノベーションの民主化」に向かって着実に進んでいる感じが好きなんです。どんどんフェーズが前に進んでいく中で、プロダクトとしても新しく、組織としても違う課題に当たっていく。そういう、解くべき課題がどんどん大きくなっていく感じがおもしろいのかもしれないですね。
もちろん、TIF当日の現場で坂道グループとか好きなアイドルを近くで見られたのは嬉しかったですし（笑）、ラジオとか他のエンタメコンテンツも好きなので、興味あるものを作れるのは楽しいですけどね。
ーー解くべき新しい課題がどんどん出てきて、しかも大きくなっていく感じは、Gaudiyの特徴かもしれないですね。
ですね。違う種類の大きな課題に定期的にあたっていく。それを解決するのは大変ですけど、新しいファン経済圏がどんどん生まれていくわけですよね。小さいコミュニティでも、そこのコミュニティにいる人にとってはそこが新しい世界みたいな感じじゃないですか。そういうのがどんどん生まれていくのは、作っていておもしろいなと思います。
次の大きな山を登るために、Gaudiyが乗り越えるべきもの
ーーTIFのプロジェクトを改めて振り返ってみて、開発チームが得られたものはなんだと思いますか？
今回、過去最大規模のプロジェクトではありましたが、全員でプロダクトに向き合って体験をつくりきったことで、ユーザーにもクライアントにもFandomな体験を提供することができたことはよかったなと思いますし、大きな案件をやりきった達成感があります。
実際の数値としても、TIFオンラインシステムのNPSはオフラインよりも高く、そのユニークユーザー数は3日間で約20万に達しましたが、無事に大きなトラブルなく終えることができました。
一方で、まだまだ改善できる部分はたくさんあるなと感じていて。例えば僕がデザインと開発の抜け漏れがないようなコミュニケーションのハブになっていたように、各所でそのような立ち回りができる人がいないと開発の質が担保できないような部分があるんですね。
そこを人で解決するのでなく、全員ができるようなナレッジ共有や仕組みづくりをしていかないと、今後チームが拡大したときに難しくなってしまう。
次のデカイ山を登りきるためにも、みんなでその改善を頑張っていきたいと思います。今後もワクワクする案件が控えているので、また新しい大きな課題に挑戦するのが今から楽しみです。（了）
（取材・文：@hanahanayaman）
インタビュイーに直接話を聞きたい方はこちら
他のメンバーのカジュアル面談はこちら
Gaudiyでは、エンジニア、デザイナー、PdMを中心に積極採用中です！
よければフォローお願いします🙏
・コーポレートサイト：https://hp.gaudiy.com/
・採用ページ：https://hp.gaudiy.com/recruit/
・公式Twitter：https://twitter.com/Gaudiy_Inc
・Wantedly：https://www.wantedly.com/companies/company_1054213
・YOUTRUST：https://youtrust.jp/companies/gaudiy