防災グッズで72時間を乗り切る防災ゲーム「そなえ72h」を作りました
この記事は2026年に公開された記録です。製品・サービスの情報は現在と異なる場合があります。
はじめに
スマホのブラウザで遊べる防災ゲーム「そなえ72h」を作り、公開しました。
大きな災害のあと、支援が届くまでの72時間を、限られた予算で選んだ防災グッズだけで乗り切れるかを試すシミュレーションです。登録は不要で、1回は数分で遊べます。
防災グッズは「何を、どれだけ」そろえればよいのかが分かりにくい買い物です。リストを読むだけでは実感がわかないので、実際に選んで、72時間を過ごしてみて、足りなかった物が分かることをねらいました。
どんなゲームか
遊び方は4つのステップです。
- 条件が決まる：季節・発生時刻・住まい・家族構成が決まります。組み合わせは336通りです。
- 防災グッズを選ぶ：家族の人数に合わせたゲーム内の予算で、水・食料・トイレ・明かりなど30種類から選びます。
- 災害が来る：大地震、台風・豪雨、大雪・寒波、猛暑の大停電、富士山の噴火の5つのうち、どれが来るかは選び終えるまで分かりません。
- 72時間を見届ける：6時間ごとに出来事が起き、ときどき行動を選びます。
水分・食事・体温・衛生・気力の5つのゲージがあり、水分か体温が尽きると「限界」です。ゲームでは、その場で暮らし続けられなくなり、点滴や救急搬送などの治療が必要になった状態を「限界」としています。
迷ったときのために、「基本の4つ（水・食料・トイレ・明かり）」を家族の人数に合わせてまとめて入れるボタンもあります。
こだわったところ
何の災害が来るか分からない
地震を前提に備えると、夏の停電では暑さに、冬の大雪では寒さに困ります。災害を選ぶ前に明かさないことで、「何が来ても困らない備え」を考えるようにしています。
数字は公的な資料と過去の災害から
ゲームの数字のうち、備蓄の目安と停電・断水の続き方は、自治体の資料や過去の災害の記録をもとにしています。たとえば次のような数字です。
- 飲み水は1人1日3L、トイレは1人1日5回（新宿区、杉並区などの備蓄の目安）
- 熊本地震では、約7割の人が発災から6時間以内にトイレに行きたくなった（千葉市の資料）
- 台風で電気が戻るのは、24時間で32%、48時間で50%、72時間で63%（房総半島台風の停電の推移、経済産業省の資料）
一方で、どの災害が来るか、浸水や避難になる確率などはゲーム用の設定です。どの数字が実データで、どれが仮の設定かは、サイトの下にある「数値の根拠を見る」にすべて出典付きで載せています。実際の備えは、お住まいの自治体の情報とハザードマップで確認してください。
毎回ちがう
家にすでにある物や、お店で品切れの品が毎回変わります。また、日付ごとに全員が同じ条件で遊べる「今日の条件」があり、同じ日に遊んだ人どうしで結果を比べられます。
結果をシェアする仕組み
結果画面では「うちの家族は◯時間もった」「足りなかったのは◯◯」を大きく出し、画像の結果カードを作ります。
シェアしたリンクを開いた人は、同じ条件で挑戦できます。ただし、何の災害だったかは投稿文にも画像にも出さず、伏せたままにしています。相手も同じように、何が来るか分からない状態で備えを選べるようにするためです。
リンクのプレビュー画像には、送った人の結果が出ます。
受け取った人が遊び終えると、結果画面に「相手の記録を超えた／届かなかった」が出ます。XとLINEの両方に送れるようにしました。
作り方
技術的な構成は次のとおりです。
| 部分 | 使ったもの |
|---|---|
| サイト | Astro（静的サイト） |
| ゲーム本体 | 素のJavaScript（シミュレーションは画面に依存しないコードに分離） |
| 配信 | Cloudflare Workers（静的ファイル＋小さなWorker） |
| 結果カード | ブラウザのCanvasで描画 |
| プレビュー画像 | @napi-rs/canvas で結果ごとに78枚を事前に生成 |
| キャラクター | ChatGPTで生成した画像 |
いくつか工夫した点です。
- 挑戦状リンクのプレビュー：
/s/<条件コード>/<結果コード>のURLにアクセスがあると、WorkerがHTMLRewriterでページのタイトルとOGP画像を書き換えます。ゲームのシミュレーションと同じコードをWorkerでも読み込んでいるので、リンクの条件からタイトルの文言を作れます。 - プレビュー画像は事前生成：結果は「1〜72時間でもった」「乗り切った（ランクS〜C）」など78通りしかないので、アクセスのたびに画像を作らず、あらかじめ全部作っておきました。
- フォントは自前で配信：外部へのリクエストを減らすため、フォントもサイトから配信しています。
- 計測はCookieなし：遊ばれた回数などを数える仕組みは、Cookieや個人を特定する情報を使わない形にしています。
おわりに
「防災グッズ、何から買えばいいんだろう」と思ったときに、まず1回遊んでみてもらえるとうれしいです。家族や友だちに挑戦状を送って、結果を比べてみてください。
なお、そなえ72hの結果画面には、足りなかった防災グッズのAmazonへのリンクがあります。これはAmazonアソシエイトのリンク（PR）で、購入があると運営者に紹介料が入ります。