2015年から毎年開催されてきた、モンスターストライク(以下、モンスト)の国内No.1チームを決めるeスポーツ大会「モンストグランプリ」。長らく愛されてきたこの大会は、2025年7月13日に行われたモンストグランプリ2025 ジャパンチャンピオンシップ 決勝大会をもって、その歴史に幕を下ろしました。

この大会には「ピックシステム」と呼ばれる独自の競技ルールがあり、その仕組みを実現するため、私たちは2017年の導入以来8年間、専用アプリケーションを試行錯誤を重ねながら開発・運用してきました。

モンストグランプリとピックシステムの概要

キャラクターが選ばれるたびに会場に響く歓声、真剣な表情を見せる選手たち、そして配信を見守る数万人の視聴者。その熱狂を支えてきたのが、このシステムです。

通常のWebサービス開発とはひと味違う、リアルイベントならではの体験。それらを支え続けたシステム開発の裏側をまとめたいと思います。

モンストグランプリは、4人1組のチームで参加し、モンスト国内No.1を決めるeスポーツ大会です。各チームは限られた時間の中で、ステージ攻略のスピードと戦略を競い合います。

大会独自の競技ルールである「ピックシステム」は、対戦前に両チームが交互にキャラクターを取り合う仕組みです。選手は専用のiPad端末を操作し、限られた選択肢の中から最適なキャラクターを見極めて選択します。その選択次第で試合展開が大きく左右するため、会場の観客や配信を見守る視聴者にとっても見どころとなる瞬間です。

モンストグランプリ2025 決勝戦での、ピックシステム利用中の風景(1:47:47〜 ) https://youtu.be/M9RLRSqsH2o?si=XXpgeBIeSwHy9MZR&t=6468

選手がiPadをタッチすると、瞬時に大型スクリーンにキャラクターが表示され、簡単な仕組みに見えますが、実際には以下のように複数のアプリケーションが連動しています。

ピックシステムを構成する5つのアプリケーション

詳細なシステム構成や開発の変遷については、別途こちらのnoteにも記載しているのであわせてご覧ください。

ピックシステムの開発は、私たちが所属する「デザイン本部 テクニカルデザイン室 エンジニアリングG」を中心に、「デジタルエンターテインメントオペレーションズ本部ファンマーケティング部」や「開発本部 CTO室 SREG」といった部署と連携しながら進めてきました。

エンジニアリングGは、モンストをはじめとする特設サイトの制作などを手がけ、フロントエンド技術とデザインを掛け合わせて、ユーザーサプライズを届けるアウトプットを担うチームです。

ピックシステムの開発体制と、デザイン本部 テクニカルデザイン室 エンジニアリングGの概要

私たちは、2017年の入社直後、前任の開発者から引き継ぎ、以降8年間にわたってピックシステムの開発・運用を担当してきました。

モンストを愛するトッププレイヤーが集い、日本一を決める年に一度の大舞台。オンライン視聴を含めれば数十万人が注目する大会です。そうした状況で用いられるシステムを構築する中で、これまでに経験したことのない難しさや、リアルイベントならではの面白さを数多く実感してきました。

ここからは、ピックシステムの開発・運用を8年間担ってきた立場から、リアルイベント向けシステムならではのポイントをいくつか紹介したいと思います。

リアルイベント用のシステムの特徴は、その良し悪しが場の盛り上がりに直結することです。参加者の反応がダイレクトに伝わってくるため、開発者としてもその場の熱量を肌で感じられる面白さがありました。

ピックシステムの見どころは、選手がキャラクターを選択する瞬間に会場の大型スクリーンへ映し出される迫力ある演出画面です。「選手たちが集まって戦略を練る様子」と、「選ばれたキャラクターを迫力ある演出で紹介する映像」をひとつの画面に融合させたものとなっています。

この画面自体は初期段階で型ができあがっていましたが、運用方法や見せ方については年々アップデートを重ねてきました。

例えば、2017年から運用を開始した初期のシステムは非常にシンプルで、「Entry」でキャラクターリストを設定し、「View」で画面に表示するだけという仕組みでした。

当日のオペレーションもアナログで、まずMCが「1体目のキャラクターは何にしますか?」と質問し、選手が口頭で「○○○をお願いします」と回答。裏方スタッフがその情報をキーボードで入力し、ようやく画面にキャラクターが登場する──という流れでした。

しかし、この方式では進行に遅れが発生し、手動入力によるミスも発生していました。

そこで2018年に大規模なシステム改修を行い、選手自らが専用端末を操作してキャラクターを選択できるように進化させました。これによって進行のテンポも上がり、リアルイベントならではの臨場感をより引き出せるようになりました。

システム改修により、さらに臨場感のある大会進行を可能に。また、長期的な運用・保守の効率化を見据えた技術スタックの再構築も実施。

また、キャラクターの魅せ方も重要なポイントでした。モンストグランプリでは、2,500体近いキャラクターを選択できるのですが、どのキャラクターが選ばれても迫力ある演出で表示できるようにする必要があります。

その中で課題となったのが、キャラクターの顔と名前の帯が重なってしまうケースです。

単に表示エリアを小さくすることも検討しましたが、「大型ビジョンでできるだけ大きくキャラクターを魅せたい」というデザイン面でのこだわりを優先しました。

デザイン組織の中にエンジニアがいるからこそ発揮できる強みとして、デザイン的な妥協をするのではなく仕組みそのものを工夫し、QAチームの力を借りながら効率的に全チェックを行える体制を整えました。(チェック効率化のため、Viewアプリケーション単体でキャラクターを連続表示できるデバッグモードを新たに追加するアプローチをとっています)

このような改善を繰り返す中で、回を重ねるごとにその規模や注目度を増していったモンストグランプリの体験を、システムの側面から支えることができました。

一方で、私たちが特に重視していたのは「システムの安定性」です。リアル空間での臨場感が求められる大会において、進行が滞ることなく進むよう、確実にシステムが動く状態を担保することが重要でした。

ピックシステムは物理的なハードや端末の制御も絡む仕組みであり、さらに数年にわたって継続的に運用していく必要があります。そのため、安定性を高めるためのアップデートには毎年力を注いできました。

その中でも大きな改善の一つが「システムのオフライン対応(Socket Serverのローカル化)」です。モンストグランプリは全国各地で予選が行われますが、会場環境によってはネットワークが不安定で、システムが正常に稼働しなかったり、読み込みの遅延によってキャラクター演出がスムーズに表示されないといった問題が発生することがありました。

これを解決するため、従来はインターネットを経由していた通信を、大会会場のローカルネットワーク内で完結させる仕組みへと変更しました。結果として多くの不具合が解消され、よりスムーズな大会進行を実現することができました。

また、長年にわたりシステム運用をしていると、使用技術が古くなり、そのままでは運用が難しくなる局面に直面することもあります。

ピックシステムでは Controller アプリに React Native を用いていましたが、iOS のアップデートのたびにメンテナンスが必要となり、開発チームに大きな負担がかかっていました。さらに、社内端末の更新に伴い強制的に iOS がアップデートされることで、開発環境の互換性維持も難しくなっていました。

そこで、当時社内で採用事例が増えていた Next.js の知見を活かし、ネイティブアプリから PWA への技術移行を実施しました。これにより、それまでと同等以上の体験を維持しつつ、安定性の向上と開発負担の軽減を両立することができました。

これらの取り組みは表からは見えにくいものですが、盤石な土台となるシステムの安定性を築いてきたことで、大会当日の盛り上がりを最大限に支えることができたと思います。

モンストグランプリの大会運営には、外部の協力会社をはじめ、多くの方々が関わっています。

選手やオペレーションに携わるスタッフ、開発陣など、さまざまな立場の人が現場で迷わずシステムを使えること、そして問題が発生した際に即座に対応できる準備を整えておくことが重要です。

私たちは毎年の大会運営を通じて寄せられた運営面でのフィードバックを丁寧に回収し、改善を積み重ねてきました。具体的には、以下のような取り組みを行ってきました。

  • Windows端末やMac端末など多様な環境が混在する中で、現場担当者が迷わないよう機材のセットアップを実施

  • 現場スタッフ向け利用マニュアル作成に伴う、ピックシステム仕様ドキュメントの整備

  • 不具合が発生した際に原因を即座に追えるよう、ログを確認できる管理画面を開発

  • 選手によるキャラクター選択結果を大会事務局のSlackチャンネルへ自動通知する仕組みを開発

入社直後から8年間にわたって携わってきた、ピックシステムの開発。初期段階の運用から始まり、数々の困難を乗り越えながら、着実にシステムを成長させてきました。

会場に集まる数万人の観客、配信を見守る数十万人の視聴者。その前でミスが許されない緊張感に包まれる一方、選手がキャラクターをピックするたびに会場に響き渡る歓声。その瞬間を支えるシステムの開発は、通常のWebサービスでは味わえない、貴重で濃密な経験でした。

【決勝大会ドキュメンタリー】モンストグランプリ2025の裏側 モンストグランプリの雰囲気が伝わる映像になっていると思いますので、ぜひご覧ください。

余談ですが、筆者の1人である佐々木は、大のモンスト好きです。MIXIに転職した理由も、大好きなモンストに貢献したいという思いからでした。入社後から、モンストグランプリを支えるシステム開発に携われたことは非常にありがたく、やりがいも強く感じていました。

改めて、モンストグランプリを楽しんでくださったファンの方々や、運営メンバーに感謝したいと思います。本当にありがとうございました。

私たちはエンジニアとして、システム開発の側面からモンストグランプリを支えてきましたが、システムはあくまで体験全体を構成するひとつのピースです。

モンストを愛するトッププレイヤーや観客・視聴者、大会運営を担う企画、デザイン、QA、インフラといったメンバー。それぞれの熱意が重なり合い、モンストグランプリは形作られてきました。

その中で私たちは、システムを通して、ユーザーサプライズをいかに豊かなものにできるかという視点を大切にしてきました。

モンストグランプリは2025年でその歴史に幕を下ろしましたが、この8年間で培った技術やノウハウは、今後もさまざまなプロジェクトで活かせると考えています。

例えばMIXIでは、「千葉ジェッツ」のホームアリーナでの試合における「BOOSTER’S CAM」や、モンスターストライクをはじめとするゲームの世界を全身で感じられる未体験ライブエンターテイメントショー「DREAMDAZE」での会場演出など、デザインと技術の専門性をかけ合わせ、オフラインの体験をより豊かにする挑戦を続けています。

これからも、私たちなりのアプローチで、MIXIのパーパスである『豊かなコミュニケーションを広げ、世界を幸せな驚きで包む。』の実現に向けて取り組んでいきたいと思います。

このデザイン組織をもっと知る