Wi-Fiルーター、スマートフォン、学校の端末、病院の予約システム。
身近な機器とセキュリティの話を結び付けられるように、家や街を歩きながら学ぶブラウザー向けの3D教材を作りました。
機器に近づくと学習ノートが切り替わる探索と、証拠を集めて怪しい案内を調べる事件ミッションがあります。
この記事では、遊び方と、Three.js・React・TypeScriptを使った実装の工夫を紹介します。画面の内容は2026年10月21日の確認時点です。
家の中から、学校・病院・街へ
公開画面では、モデルの読み込み後に76の学習地点が表示されます。家庭のPCや家電に加えて、学校、病院、駅前・商店街にも移動できます。
| 場所 | 学習対象の例 |
|---|---|
| 家 | PC、Wi-Fiルーター、スマートフォン、家電、防犯機器 |
| 学校 | 学習端末、校務用の機器、家庭への連絡に関わる仕組み |
| 病院 | 受付PC、予約端末、電子カルテ端末、院内ネットワーク |
| 駅前・商店街 | 公衆Wi-Fiなど、外出先で利用する機器やサービス |
PCではWASDで移動し、ドラッグで見回します。読むときはEscで歩行を止められます。
「まずは、この3つから」にあるPC・Wi-Fiルーター・スマートフォンのボタンから、対象のそばへ直接移動することもできます。すべての機器から選ぶ一覧や、学校・病院などへの移動ボタンも用意しました。
歩いて見つける楽しさを残しつつ、操作が難しい場合も学習内容へ進める構成です。
1. 機器を見ると、リスクと対策がつながる
対象に近づいてその方向を見ると、学習ノートに次の内容が表示されます。
- 機器の名前と役割
- 想定されるサイバー犯罪・被害
- なぜ危険なのか
- 自分でできる対策
たとえば、Wi-Fiルーターでは、管理画面への不正アクセス、DNS設定の不正変更、攻撃の踏み台化を取り上げています。対策欄には、管理者パスワードや更新、不要な外部管理、ネットワークの分離についての説明があります。
専門用語の一覧を読むだけでなく、家の中のどの機器に関係する話なのかを確かめながら読むための画面です。
なお、表示は一般的なリスクを説明する教材です。実際の機器を調査して弱点を検出しているわけではなく、機能や設定方法も製品によって異なります。
2. 病院ミッションでは、案内を別の情報源と照合する
探索とは別に、「消えた予約と、偽の復旧案内」という事件ミッションがあります。画面上の目安は約5分です。
舞台は、予約システムが停止した架空の病院。来院者のもとに、予約復旧をかたるSMSが届きます。
プレイヤーは次の順に進みます。
- 届いた案内と、事件の状況を知る
- 予約端末・受付・いつもの公式アプリから証拠を集める
- 事件の流れをカードで並べる
- 情報を入力してしまった場合の対応を選ぶ
- 行動の違いと、生活で使う習慣を振り返る
このミッションでは、SMSの見た目だけで正解を当てるのではなく、届いた案内とは別の経路で情報を確認する行動を扱います。
また、情報を渡さなかった場合だけでなく、渡してしまった場合の対応も考えられます。振り返りでは、公式経路で確認した場合と、情報を入力した場合の流れを比較できます。
SMSのリンクをそのまま信用せず、公式アプリなどから確認する考え方は、IPAの偽ショートメッセージに関する注意喚起でも説明されています。
通知、サイト、医療情報は架空です。教材内の偽サイト表示は学習用で、実在する攻撃サイトには誘導しません。実際のパスワードやカード番号を入力する必要もありません。
3. 3Dの描画と、教材のデータを分ける
実装は、大きく次の役割に分けています。
| 役割 | 実装 |
|---|---|
| 空間の表示・移動 | Three.js、3Dモデル、衝突判定 |
| 学習ノート・操作画面 | React・TypeScript |
| 機器ごとの説明 | JSONデータ |
| 事件の進行・判定 | UIから分離した状態遷移の関数 |
3DモデルはBlenderで制作・調整し、GLBとして読み込みます。読み込みにはThree.jsのGLTFLoaderを使っています。Three.js公式ドキュメント
機器の文章はモデルへ直接埋め込まず、IDを使ってJSONと対応付けます。説明用に項目を抜粋すると、次のような構造です。文章は例示用に簡略化しています。
{
"id": "router",
"name": "Wi-Fiルーター・ホームゲートウェイ",
"anchorName": "Info_Router",
"visitName": "Visit_Router",
"radius": 2.4,
"description": "家中の機器をつなぐネットワークの中心。",
"crimes": ["管理画面への不正アクセス"],
"whyDangerous": "管理者認証が破られると、通信先の設定などに影響する場合があります。",
"countermeasures": ["管理者パスワードと更新状況を確認する。"]
}
Info側は説明対象の位置、Visit側はボタンで移動するときの立ち位置です。見せたい場所と、プレイヤーを置く場所を分けることで、機器の中に移動してしまうような配置を避けやすくなります。
また、表示用の建物とは別に、GLBのCollisionオブジェクトから衝突判定用のOctreeを構築します。見た目と、歩ける範囲の役割を分けています。
4. 近くにあるだけでは、説明を切り替えない
説明対象を選ぶとき、距離だけを使うと、壁の向こうや別の階の機器が選ばれる可能性があります。
そこで、近接判定には次の条件を組み合わせています。
- 同じ階にいるか
- 機器ごとの案内半径に入っているか
- 視線がおおむね機器の方向を向いているか
- プレイヤーと対象の間に壁がないか
候補が複数ある場合は、距離と視線の向きから優先する対象を選びます。
判定結果はコールバックでReact側へ渡します。3D側で近くの機器を決め、React側で説明欄を更新する、という受け渡しです。
さらに、現在の機器IDが変わったときに通知することで、同じ説明を表示している間、毎フレームReactの状態を更新し続けることを避けています。
5. ミッションは、状態遷移として管理する
病院ミッションの段階は、TypeScriptで次のように定義しています。
type MissionStage =
| 'intro'
| 'investigate'
| 'timeline'
| 'response'
| 'complete';
「調査を始める」「証拠を追加する」「事件の順序を確認する」などの操作をアクションとして渡し、現在の状態とアクションから次の状態を決めます。
たとえば、調査段階では3つの証拠が揃うまで次へ進めません。現地で確認する証拠は、対象の機器のそばにいるかも判定します。事件の並べ替えや対応選択では、条件を満たしたときに次の段階へ進めます。
この判定をReactの表示処理から分けると、3D画面全体を動かさなくても、入力した状態と返ってくる状態を確認しやすくなります。
また、ミッションを開くと探索を一時停止します。説明や選択肢を読んでいる間にプレイヤーが歩き続けないよう、探索と読解の操作を切り替えています。
6. 途中保存は、復元時の検証まで含める
病院ミッションの進行は、ブラウザーのlocalStorageへ保存します。保存するのは段階、集めた証拠、選択したカード、試行回数などの進行情報です。
保存データを復元するときは、JSONを読めることだけでなく、次の点も確認します。
- 対応するデータ形式のバージョンか
- 存在する段階・証拠・選択肢のIDか
- 証拠の収集状況と、進んだ段階が矛盾していないか
不正な形式や矛盾がある場合は、新しいミッションの状態へ戻します。保存が使えないブラウザーでは、そのことを表示し、画面を開いている間は続けられるようにしています。
この検証は、壊れた進行データからの復帰のためのものです。オンライン試験の不正防止や、学習者本人の認証を目的にした仕組みではありません。
教材としての範囲も、画面で伝える
街の機器を順に巡るガイドは、出来事の関係を考えるための想定教材です。機器に近づいただけで感染したり、訪問した順に攻撃が自動で成功したりするわけではありません。
特に、病院のシステム停止と偽SMSについては、停止の原因とSMSの送り主が同じだとは限らないことも表示しています。障害の発生と、その混乱につけ込む詐欺を分けて考えるためです。
また、「発見76地点」は探索の進み具合です。76地点を見つけたことだけで、知識の定着や安全な行動が身に付いたと判定するものではありません。学習効果の測定は、実装した機能とは別に検証する必要があります。
実際に使う場合は、最初にルーターやスマートフォンなど身近な機器を1つ選び、表示された対策を読んでから、自分の生活では何を確認するか話してみる使い方ができます。
短い流れを体験したい場合は、画面上部の「事件ミッション」から病院の調査へ進めます。探索したい場合は、「まずは、この3つから」の移動ボタンを入口にしてください。