メール・電話・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やコメントで教えていただけると励みになります。