アプリ概要

「今日の授業で何が起きるか？」を予測して生徒自身がビンゴカードを作成し、授業中にその予測を的中させることでボスを討伐する、リアルタイム参加型の教育ゲーミフィケーションアプリです。 生徒自身が授業内容を予習・予測してマスを埋めることで、授業への集中力を生み出します。

ターゲット

• メインユーザー（生徒）：普段の50分間の座学の授業（特に文系科目の暗記や単調な解説）にどうしても退屈さを感じ、ノートの端に落書きをしたり、タブレットやスマホを見てしまう中学生。
• サブユーザー（教員）：授業中に机に伏せたりスマホを触ってしまう生徒を「どうしても1人も置いていきたくない」という熱い想いがあるものの、具体的にどうアプローチすれば生徒が前を向いてくれるのか分からず、理想と現実のギャップに悩んでいる中学の先生。

ストーリー

なぜこのプロダクトを作ろうと思ったか

既存のICTツールは、プリントの配布や課題管理といった「先生の事務作業の効率化」には大きな手助けになっています。しかし、それらのツールを使って「勉強が苦手な生徒を退屈させない授業の仕掛け」を毎回ガチガチに作り込むのは、多忙な先生方にとって時間的にも精神的にも高いハードルです。

そこで、勉強が苦手な生徒でも「先生の口癖」や「簡単な単語」という楽しい入り口から自然と巻き込み、先生の「1人も置いていきたくない」という熱い理想を、わずか5分の準備で現実にするためにこのアプリを開発しました。

誰のどんな課題を解決したいか・どんな楽しさを届けたいか

生徒の「置いてきぼり」を無くし、授業の主役に：

• 「先生を見る・聞く」だけで全員が貢献できる： 先生の口癖や単語をマスにするだけでなく、マスを開こうとするとAIが生成した「授業の確認問題」が出現。正解しないとマスが開かないため、生徒は聞き漏らすまいと自然に先生の話に集中します。

先生はいつも通り授業をするだけでいい：

• 当日の授業冒頭で「6桁のコード」を黒板に表示するだけで、生徒は即座にゲームを開始。先生が無理にアプローチを練らなくても、授業の終わりには「誰も寝ていない、全員が先生の話を聞いて楽しんでいた」という、1人も置いていかない最高の教室環境を5分の準備で作り出します。

技術構成・アーキテクチャ図など

• フロントエンド： Next.js (App Router) + TypeScript
• UIフレームワーク： Tailwind CSS
• バックエンド・BaaS： Supabase (PostgreSQL, Auth, Realtime, RPC)
• AI連携： Google Gemini API (Next.js Route Handlers経由)
• インフラ・デプロイ： Vercel

遊びごころポイント

ターゲットに刺さる機能

• リアルタイムなボス討伐体験： 誰かがビンゴを達成すると、生徒全員のスマホ画面で、同時にボスのHPバーが削れます。「◯◯さんが××ダメージ！」といったログがリアルタイムに流れることで、教室全体が盛り上がります。

技術的遊び

• ai生成でビンゴカード自動生成
• Framer MotionやCSSフィルターを使ったダメージ演出
• Supabase Realtimeを使ったリアルタイム攻撃

アプリ画面(スクショや動画など)

クラスコード：689000

挑戦・成長したところ

MVP開発における「戦略的な機能の絞り込み」：

• 初期の要件定義では、トラップ問題など多くの機能を検討しましたが、リリーススピードとコア体験を優先し、それらをあえて「フェーズ2以降」に切り分けるという意思決定を行いました。議論の中で、「完璧なものを作る」ことよりも「ビンゴを埋めてボスを倒すという体験を最速で動くものにする」ことの重要性を学び、プロダクト開発における取捨選択の判断力を養いました。

チームワーク・チーム開発で工夫したところ

UXと技術的制約のトレードオフ判断：

• 「リアルタイムなボスバトルの一体感」と「授業への集中」という、一見矛盾する要素をどう共存させるかについて深く議論しました。結果として、最初は自己申告制のシンプルな実装から始め、段階的にAIを用いた自動化やクイズ要素を加えていくロードマップを描くことで、理想と現実のバランスを取る技術的なアプローチを実践しました。