アナログなビンゴ大会が抱えていた課題

個別指導塾「コスモジュク」様では、毎年恒例のクリスマスパーティーでビンゴ大会を実施していました。
しかし、従来の完全アナログな進行にはいくつかの課題がありました。

抽選機で引いた番号を司会が読み上げ、別のスタッフがホワイトボードに手書きで番号を書き写すため、書き漏れや誤記が起こりやすい
会場が広く、ホワイトボードの文字が見えづらい位置にいる生徒や、聞き逃した生徒が「何番が出ているか」を把握しにくく、ビンゴの申告遅れやカードの確認ミスが多発していた
番号を引いてただ発表するだけの単調な進行で、参加者全体が一体となって盛り上がれるような演出効果が不足していた

こうした課題を解消し、イベントそのものの体験価値を高めるために、Next.jsとFirebaseを用いたリアルタイム・ビンゴシステムを開発しました。

全画面がリアルタイムに同期する仕組み

会場の大型プロジェクター、管理者の進行用端末、生徒のスマートフォンの3つのUIをNext.jsで構築しました。
すべての端末に対応する完全レスポンシブデザインです。

進行役が管理画面で「次の番号を抽選する」ボタンを押した瞬間、Firebase Realtime Databaseの数値がミリ秒単位で更新され、会場の大型スクリーンと全員のスマホ画面がほぼ同時に切り替わります。
ホワイトボードに書き写す作業は完全に不要になりました。

「ワクワク」を引き出す演出ギミック

フェイント演出

Framer Motionを用いたダイナミックな抽選ホイールが回り、一度数字が確定したかのように止まりかけた後、最後にもう一つ隣の番号へすべり込んで確定する「二段構え」のフェイント演出を実装しました。
「出たと思ったのに違った！」「惜しい！」といった歓声やどよめきが会場全体から沸き起こり、イベント感を作り出しています。

演出のオン/オフ切り替え

ビンゴ大会の序盤はリーチが少なくゲーム展開が遅いため、毎回長めの演出を流すとテンポが悪くなります。
管理画面から演出の有無をリアルタイムに切り替えられるようにし、リーチが増える中盤〜終盤にのみ演出をオンにする運用ができる設計にしました。

スマホから出た番号をすぐ確認できる

生徒の手元のスマートフォンからは、これまでに出た番号を「出た順」で確認できます。
さらに、ワンタップで「数字の小さい順（昇順）」に並び替えられるので、手元のビンゴカードの数字と簡単に見比べることができます。

この機能により、「何番が出たか分からない」「聞き逃した」といった確認漏れのトラブルは完全に解消されました。

出た番号を昇順に並び替えた確認画面	スマートフォンからの表示画面

導入後の声

塾生からは「スマホでいつでも出た番号を確認できるのがすごく見やすかった」「演出が面白くて最後までドキドキした！」と好評でした。

塾長からは「ホワイトボードに書き写す作業がなくなり、司会1人だけでイベントをスムーズに進行できた。トラブルもなくとにかく運営が楽だった」と、イベント運営の省力化に対する感謝の声をいただきました。

開発者自身にとっても、会場全体が自分の作ったシステムを見つめ、数字が確定する瞬間に一喜一憂している光景を目の当たりにし、技術がリアルな場所の体験価値を向上させる喜びを深く実感できたプロジェクトでした。