マーケットクエスト — 子供向け投資教育ボードゲーム

課題

2022年に日本で金融教育が義務化されましたが、多くの大人自身が投資を理解していません。教科書だけで子どもに株式・景気循環・リスクを教えるのは、面白くなく、効果的でもありません。

解決策

すごろく形式のブラウザゲームを開発しました。1980年〜2020年の日本経済史の実際の出来事に基づいて投資判断を行う体験型のゲームです。純粋なTypeScriptのgame-coreアーキテクチャにより、ゲームロジックとUIを完全に分離しています。

成果

marketquest-ten.vercel.appにPWAとしてデプロイ済み。Supabase認証、オンラインランキング、3言語対応(日本語・キッズモード・英語)を実装しています。

マーケットクエスト ゲーム画面

なぜこのプロジェクトを作ったのか

2022年4月、改訂された学習指導要領により、高等学校の家庭科で金融教育が必修化されました。次の世代に投資リテラシーを身につけさせるという目標は素晴らしいものです。

しかし、根本的な問題がありました。日本の大人の多くが、投資を理解していないのです。日本銀行の調査によれば、日本の家計金融資産の70%以上が現金・預金に集中しています(アメリカでは約13%)。親が知らないことを子どもに教えることはできません。そして教科書で「分散投資」や「リスクとリターンの関係」を説明しても、子どもの記憶には残りにくいのが現実です。

私はまったく別のアプローチで解決したいと考えました。投資の概念を「説明する」のではなく、体験させる。もし子どもが、バブル経済、失われた10年、リーマンショック、コロナショックを——30分のボードゲームの中で全て体験できたら?

これがマーケットクエストの出発点です。


10年の軌跡:アナログボードゲームからブラウザアプリへ

2015年:原型の構想

マーケットクエストは、ソフトウェアとして始まったわけではありません。2015年、私はアナログのすごろくを設計しました。サイコロを振って経済イベントに対応しながら、資産運用を学ぶボードゲームです。アイコンは手描き、ボードのレイアウトはスプレッドシートで設計し、現金・株式・債券・金・不動産といった各資産タイプのルールを書き出しました。

教育のコアアイデアは当時から変わっていません。プレイヤーは固定額の資金でスタートし、経済の時代ごとに区切られたボードを進み、好況・不況・分散投資・リスク管理を学ぶイベントに直面します。しかし、アナログのボードゲームには大きな限界がありました。動的な株価変動をシミュレートできず、複雑なルールの自動処理もできず、一つの教室を超えて子どもたちに届けることもできなかったのです。

2024年4月:デジタルプロトタイプ

2024年初頭、この構想のデジタル化に着手しました。この段階で複数の実験的なプロトタイプを開発しています。

  • 紙芝居プロトタイプ: 経済イベントを紙芝居のように見せるシンプルなHTML5。教育コンテンツの魅力を検証
  • カウンターゲーム: サイコロ、ポジション追跡、基本的なイベント発動を検証するシンプルなゲームループ
  • ニュースサイト+Phaser: Phaser 3でボードゲームを描画する初期実験。ニュースティッカー風のUI

並行して、リアルなゲームコンテンツを生成するPythonデータパイプラインを構築しました。

  • Wikipediaから1900年代〜現在までの歴史的イベントをスクレイピング
  • 1953年〜2022年のマクロ経済指標(日経平均、CPI、GDP成長率)を整理
  • 正規化された経済データをもとに株価の動きをシミュレーション
  • これらすべてのデータが、ゲームの歴史的正確性を支えるイベントシステムに反映されています

2024年11月〜12月:最終プロダクト

ゲームメカニクスの検証とリッチなデータセットを経て、モダンな技術スタックで本番バージョンを構築しました。最も重要なアーキテクチャ上の決定は、フレームワーク非依存のgame-coreを作ったことです。UIフレームワークに依存しない、純粋なTypeScriptモジュールとしてすべてのゲームロジックを実装しています。


ゲームの仕組み

ゲームボード

すごろくボード全体図

プレイヤーは100万円を持ってスタートし、12マスの円形ボードを進みます。1周が1年に相当します。ボードの構成は時代に応じて動的に変化します。好況期にはボーナスマスや配当マスが増え、不況期には倒産マスや税金マスが増えます。

プレイする時代は3段階から選べます。

  • ショート: 2011年〜2020年(10年間、約15分)
  • ミディアム: 2001年〜2020年(20年間、約25分)
  • ロング: 1980年〜2020年(41年間、約40分)

9種類のマス

マスの種類何が起きるか
ニュース実際の歴史的事件が表示される。景気が変動し、株価が動く。
配当保有株に応じた配当金を受け取る。
倒産保有銘柄の一つが紙くずに。教訓:分散投資が大切。
IPO新しい銘柄がアンロックされる。早期投資のチャンス。
ボーナス臨時収入(お年玉、ボーナスなど)。
税金資産に応じた税金を支払う。
チャンスランダムイベント。景気に応じて個別銘柄が急騰または暴落。
ニュースカットシーン:歴史的な出来事がゲーム内で再現される

6つの架空銘柄

各銘柄は異なる業種を代表し、リスク特性が異なります。

銘柄名業種リスク解放条件
ミンナノ・インデックス景気連動最初から
モグモグ・フーズ食品最初から
ビリビリ・エナジーエネルギー低〜中最初から
ロボロボ・ワークス製造・AI最初から
ピコピコ・ゲームズIT・ゲームIPOマスで解放
キラキラ・ファッションアパレルIPOマスで解放

インデックスファンドは意図的に最も変動が少なく、倒産しない設計です。これにより、「分散投資型のインデックス投資は初心者にとって安全」という教育メッセージを自然に伝えています。

配当金受け取りイベント

景気フェーズ

経済は「好景気」「普通」「不景気」の3つのフェーズを、実際の歴史的イベントに連動して循環します。好景気では株の急騰が起きやすく(70%の確率 vs 暴落30%)、不景気ではその比率が逆転します。子どもは直感的に、経済状況が投資の結果に影響することを学びます。


アーキテクチャ

game-core:フレームワーク非依存のゲームロジック

最も重要な設計判断は、ゲームロジックをUIから完全に分離したことです。

game-core/          (純粋TypeScript、依存ライブラリなし)
  types.ts          全ゲームエンティティの型定義
  engine.ts         ゲームステートマシン、ターン処理
  board.ts          時代別マス構成によるボード生成
  market.ts         株価計算、売買処理、ポートフォリオ管理
  events.ts         歴史イベントデータ、ランダムイベント生成

この分離により、ゲームロジックはブラウザでもサーバーでも、将来的なReact Nativeへの移植でも動作します。19件のユニットテストはすべて、ブラウザやUIフレームワークなしでgame-coreに対して直接実行できます。

描画レイヤー

  • Phaser 3: ボードの描画、サイコロアニメーション、コマの移動、カットシーン、効果音を担当
  • Next.js 14(App Router): アプリケーションのシェル、ルーティング、認証ページ、ランキング表示
  • Tailwind CSS: Phaser以外のすべてのUIコンポーネントのスタイリング

バックエンドサービス

  • Supabase: 認証(Google OAuth、メール/パスワード)、スコア保存、オンラインランキング
  • Prisma + SQLite: ニュースイベントやゲーム設定のローカルデータ管理

PWA対応

マーケットクエストはProgressive Web Appとして、サービスワーカーとmanifestを実装しています。iOS・Androidのホーム画面に追加でき、アプリのような体験を提供します。


チュートリアル画面

3言語対応

ゲームは3つの言語モードに対応しています。

モード対象特徴
日本語一般標準的な日本語テキスト
キッズモード7〜12歳ひらがな中心、やさしい言葉づかい
英語インターナショナル完全な英語ローカライゼーション

すべてのテキストはロケール辞書で管理されています。game-coreは翻訳キーのみを返し、UI層が選択された言語モードに応じてテキストを解決します。


MarketQuestで遊ぶ

MarketQuestは無料で公開中です。サイコロを振って、日本経済の歴史を旅しながら、資産をどこまで増やせるか挑戦してみてください。

MarketQuestをプレイ

学んだこと

ゲームデザインには容赦ない簡略化が必要

2015年のアナログ版では、株式・債券・不動産・金・預金・保険と、多くの投資先を用意していました。最終的なデジタル版では、投資先を6銘柄+不動産システムに絞りました。削った要素の一つ一つが、教育的価値を損なうことなく、ゲームの理解しやすさを向上させました。教育ゲームのデザインでは、網羅性よりも明快さが重要です。

ロジックとプレゼンテーションの分離

game-coreをUI非依存の純粋なTypeScriptライブラリとして構築したことは、このプロジェクトで最良のアーキテクチャ上の判断でした。これにより、テスト可能性・移植性・保守性が確保されました。開発の途中で40マスの蛇行ボードから12マスの円形ループに変更した際も、変更が必要だったのはboard.tsとengine.tsだけで、マーケットロジック、イベントシステム、すべてのUIコードはそのまま動作しました。

歴史データが教育を記憶に残す

子どもがリーマンショックを覚えるのは、誰かに説明されたからではありません。自分の仮想ポートフォリオが1ターンで30%下落したからです。抽象的な概念を実際の出来事に紐づけることで、記憶への定着が劇的に向上します。


開発プロセスの詳細

本プロジェクトの開発過程を、全3回の連載記事で詳しく解説しています。

テーマ
第1回:ボードゲームからブラウザへ原点の物語、2015年の構想、金融教育がなぜ重要か
第2回:ゲームエンジンの構築アーキテクチャの判断、game-coreの設計、Phaser 3との統合
第3回:データ・認証・デプロイPythonデータパイプライン、Supabase認証、PWA、3言語対応

この記事をシェア