メール・電話・SNS・求人サイト…あらゆる詐欺の"違和感"を見抜く無料ゲームを7つ作った話
はじめに
個人でセキュリティ教育サイト「やさしいサイバーセキュリティ」を運営しています。以前GPU8種×ハッシュ7種でパスワード解読時間を計算できるシミュレーターを紹介しましたが、今回は毛色を変えて「詐欺を見抜く力」を鍛える体験型ゲームシリーズです。
フィッシングメール・サポート詐欺・偽ショッピングサイト・ボイスフィッシング・闇バイト求人・SNS投資詐欺・BEC(ビジネスメール詐欺)——シーンごとに全7作、単一HTMLファイルで動く自己完結型のブラウザゲームとして無料公開しています。
こんな人に読んでほしい
- セキュリティ教育・研修の教材を探している方
- 家族や高齢の親にリテラシーを伝えたいが、座学だと聞いてもらえない方
- 「詐欺の手口を知識として知っている」と「実際に見抜ける」の差を埋めたい方
- 単一HTML完結のゲームUIの実装に興味があるエンジニアの方
シリーズ概要（全7作）
読み物ではなく「自分で証拠を探す捜査」を核にしたゲームです。
| # | タイトル | シーン | URL |
|---|---|---|---|
| 1 | メール探偵：フィッシング詐欺を見抜け！ | メール | phishing-detective |
| 2 | サポート詐欺バスター | 偽警告画面 | support-sagi-buster |
| 3 | 偽サイト鑑定士 | ECサイト | fake-site-kanteishi |
| 4 | ボイスフィッシング見破り訓練 | 電話 | voice-phishing-simulator |
| 5 | 闇バイト・求人詐欺見破り道場 | 求人 | yami-baito-buster |
| 6 | SNS投資＆ロマンス詐欺見破りシミュレータ | SNS/DM | sns-toushi-romance-buster |
| 7 | ビジネスメール詐欺（BEC）見破り訓練 | 法人メール | bec-mail-buster |
共通ルール：本物そっくりの画面（メール受信箱・警告ポップアップ・疑似ブラウザ・チャット画面など）の中から「違和感のある箇所」を自分でタップして証拠を集め、最後に「詐欺か本物か」を確信度付きで判定します。全作品に正規のケース（誤検知トラップ）も混ぜてあるので、「疑いすぎて正規のものまで詐欺扱いする」という逆方向の失敗も体験できます。
技術的なポイント
- 単一HTMLファイルで完全自己完結：外部ライブラリ・ビルド不要。ファイルを開くだけで動作し、WordPressにはiframeで埋め込んでいます
-
ランキングのLocalStorage実装：ニックネーム入力からの保存/表示は、保存時・表示時の両方で
esc()によるサニタイズを徹底（制御文字・ゼロ幅文字・Bidi制御文字の除去含む）。ユーザー入力をinnerHTMLに流し込む以上、ここを手薄にすると簡単にXSSの穴になります - モバイル対応：Pointer Eventsでピンチズーム、iOS Safariはフルスクリーン非対応なのでCSS疑似フルスクリーンに自動フォールバック
- 手口図鑑コレクション：解いた事件ごとに手口を図鑑形式でストックし、リプレイ性を持たせています
まとめ
7作まとめて一覧できるページも用意しています→やさしいサイバーセキュリティ｜セキュリティ体験シミュレーター＆ゲーム
すべて無料・会員登録不要です。ご自身の学習はもちろん、研修や家族への説明にもご自由にお使いください。フィードバックがあれば、Xやコメントで教えていただけると励みになります。