見抜け！詐欺メール（Phish or Real）
本物か、フィッシングか。15秒で判定するトレーニング
メール・SMS を1通ずつ見て「本物」か「フィッシング」かを15秒で判定するブラウザゲームです。判定のあとに、本文のどこが危険のサイン（または本物と判断できる根拠）だったかをハイライト付きで解説します。中小企業の社員研修の冒頭5分や、個人の練習に使うことを想定しています。
登場する企業・団体・ドメインはすべて架空です。リンクは押しても移動しません。
特徴
- 業種を選んで出題：製造業・建設／不動産・医療／介護・小売／飲食・その他（個人）から選ぶと、その業種でありがちな手口（取引先を装った振込先変更など）と、業種共通の手口（宅配・税金・銀行を装う SMS など）を混ぜて10問出題します。
- 「調べる」操作：メールは最初、表示名だけが見えます。表示名やリンクを押すと実際のアドレス・URL が見えますが、1回ごとに残り時間が2秒減ります。実際のメールと同じように「確かめる手間」を体験できます。
- 根拠つきの解説：本文の該当箇所に枠と番号を付け、番号付きのメモで「なぜ危ないか／なぜ本物と言えるか」を説明します。似せたドメイン（例
anzu-shokuhin.co.jp と anzu-syokuhin.co.jp）は上下に並べ、違う文字を強調します。
- 結果と弱点：正答率・見逃し率・誤検知率・時間切れ数・調べた割合、見逃しが多かった手口の上位2つ、今後の注意（決まったルールで出し分け）、正誤一覧を表示します。一覧の各行から解説を読み返せます。
- 一時停止とやめる：出題中・解説中に一時停止できます（上部のボタン、判定ボタンの帯の ⏸、
Esc）。一時停止中はタイマーを止め、時間を止めたまま読めないようにメールを隠します。「やめる」では確認のうえ、ここまでの結果を見るか、スタート画面に戻るかを選べます。途中でやめた記録はベストスコアに反映しません。
- 報告用画面：研修の報告に貼るための要約画面。印刷・PDF 保存に対応しています（氏名欄やベストスコアは載せません）。
- アクセシビリティ：幅375px のスマートフォンで崩れない、キーボードだけで遊べる（← / A＝本物、→ / L＝フィッシング、Enter / Space＝次へ、Esc＝一時停止／再開）、正誤を色だけでなく ✓ / ✗ と文字で示す、ダークモード・動きを減らす設定・透明度を減らす設定に対応。
- デザイン：落ち着いた青〜青緑系の、半透明・すりガラス調です。背景は CSS のグラデーションだけで作り、外部の画像・フォントは使いません。すりガラスはスタート・結果のカード、出題画面の上部の表示、画面下の判定ボタン・「次へ」の帯だけに使い、メールの本文・ハイライト・解説は不透明な面に置いて読みやすさを優先しています。文字のコントラスト比は、半透明の色を背景の最も不利な色に重ねた色で 4.5:1 以上になるよう確かめています。透明度を減らす設定では不透明に、印刷では白背景・黒文字に切り替えます。
安全への配慮
- 実在の企業・ブランド・官公庁の名前は使いません。使用禁止語リスト（
data/denylist.json）に対する照合を、データ検証で全文に対して行っています。
- リンクは
<a href> にせず、どこにも遷移しません。外部の画像・スクリプト・フォントも読み込みません（実行時の外部通信はゼロ）。
- ID・パスワード・カード番号などの入力欄は作っていません。判定はボタンだけです。
- 電話番号は
00-0000-0000 型のダミーだけです（これもデータ検証で確認）。
- 実在のフィッシングメールの文面はコピーせず、手口の構造だけを参考にしています。
- 配信時のセキュリティ用のヘッダーを
vercel.json で設定しています。
- Content-Security-Policy：
default-src 'none' を基本に、同じサイトの JS・CSS・画像だけを許可しています（script-src 'self'、style-src 'self'、img-src 'self'）。外部への通信（connect-src 'none'）、フォームの送信先（form-action 'none'）、<base> の変更（base-uri 'none'）、ほかのサイトへの埋め込み（frame-ancestors 'none'）は禁止です。ビルドの結果にインラインのスクリプト・<style> はないため、'unsafe-inline' は使っていません。
- X-Content-Type-Options: nosniff、Referrer-Policy: no-referrer、X-Frame-Options: DENY、Permissions-Policy（カメラ・マイク・位置情報・決済などを無効化）。
- スモークテストでは
vite preview にも同じヘッダーを付け（vite.config.ts が vercel.json を読み込む）、全画面の操作中に CSP の違反が1件も出ないことと、外部への fetch が実際に止められることを確かめています。
技術スタック
- Vite + TypeScript（フレームワークなし）、Vitest、Ajv（JSON Schema draft-07）
- 静的ビルド（
dist/）。サーバー処理・ログイン・実行時の AI 呼び出しはありません
- Node.js 20 以上
開発
npm install
npm run dev # 開発サーバー
npm run check # 品質ゲート：データ検証 → 型チェック → テスト → ビルド
| コマンド | 内容 |
|---|
npm run validate | 問題データの検証（JSON Schema ＋ 意味検証12ルール） |
npm run typecheck | tsc --noEmit |
npm run test | Vitest（242件） |
npm run build | vite build |
npm run smoke | ビルドした画面を headless Chrome で操作するスモークテスト（118項目。Chrome / Chromium が必要。CHROME_PATH で指定可） |
npm run harness-report | logs/harness-events.jsonl をフック別に集計した表を出す |
data/ 問題（22問）・語彙・指標・業種・使用禁止語の JSON
schemas/ JSON Schema（データ構造の正）
scripts/ データ検証・スモークテスト・ハーネス集計
src/engine DOM に依存しない純粋関数（出題・描画・採点・指標・解説の配置など）
src/ui 画面描画
tests/ Vitest
docs/ tasks.md（作業の状態）、ai-dev-log.md（開発ログ）
.claude/ フック・レビュー用サブエージェント・スキル（ハーネス）
🤖 開発プロセス：AIエージェントを「管理して」作る
このアプリは、Claude Code に実装を任せつつ、エージェントが自分で品質を確かめ、間違いに気づいて直す仕組み（ハーネス）を先に作ってから開発しました。
AIにコードを書かせること自体よりも、「AIの出力をどう検証し、どこで人間が判断するか」を設計することに重点を置いています。
1. ハーネスエンジニアリング：エージェントが働く環境を設計する
| 仕組み | 内容 |
|---|
仕様書兼作業契約（CLAUDE.md） | 仕様・データ構造・安全ルール・禁止事項・完了の定義を明文化。エージェントはここを基準に動く |
| 決定的な検証器 | JSON Schema＋意味検証（正解ラベルと本文の手口が一致しているか、実在企業名が混ざっていないか、ハイライトの範囲が重なっていないか等、12ルール）。検証器自体も、ルールごとの違反データでテスト |
| フック（自動実行） | データ編集のたびに検証／コミット前に全チェック／未完了のまま終わろうとしたら全チェック |
| 作成者と審査者の分離 | 問題を作るエージェントとは別に、読み取り専用のレビュー用サブエージェント（問題内容・UX）を用意 |
2. ループエンジニアリング：「作る→検証→直す」を止め方まで設計する
-
各タスクは「テストを先に書く → 実装前に失敗を確かめる → 実装 → npm run check → 失敗なら修正」のループで進行。
-
停止条件を明示：同じ原因で3回直せなければ止まって人間に報告。Stopフックも同一セッション3回で人間に引き継ぐ（無限ループ防止）。
-
実績（logs/harness-events.jsonl を npm run harness-report で集計。2026-10-18、vercel.json の追加のコミット前の122件）：
| フック | pass | fail | blocked | handoff | 計 |
|---|
| post-edit-validate | 62 | 11 | 0 | 0 | 73 |
| pre-commit-gate | 42 | 0 | 0 | 0 | 42 |
| stop-gate | 7 | 0 | 0 | 0 | 7 |
- データ検証フックが編集直後にエラーを返した回数：11回。内訳は、検証器を先に作りデータファイルがまだない段階のもの5回、動作確認のためにわざと違反（実在しうる電話番号）を入れたもの1回、検証ルールを強めた直後に、既存データの不整合と、その修正途中の状態を検知したもの3回、本文を書き換えてハイライトの対象がずれた途中状態を検知したもの2回。
- コミット前ゲートが失敗コミットを阻止した回数：0回 ／ 未完了のままの終了を阻止した回数：0回 ／ 人間に引き継いだ回数：0回。エージェントがコミット前に
npm run check を実行して通していたため、ゲートが止める場面はありませんでした（ゲートは最後の安全網という位置づけです）。
3. ハーネスで見つからなかったもの・ハーネスの穴
自動の検証だけでは足りなかった点も、開発ログ（docs/ai-dev-log.md）に記録しています。
- スモークテストで見つかった不具合：CSS の指定が
hidden 属性を上書きし、「調べる」前から実際のアドレスが見えていた（答えが見える状態）。型チェック・単体テストでは検出できず、ブラウザで実際の描画を確かめるスモークテストを作り直して見つけました。
- 人間のテストプレイで見つかった改善：作者が iPhone の実機で遊んだところ、似せたドメインと正規のドメインの違いが分からず混乱した。自動テストとレビュー用エージェントでは見つからなかったため、ドメインを上下に並べて違う文字を強調する表示を追加しました。
- ハーネスの穴：データ検証フックはエディタ系のツールでの編集にしか反応しないため、エージェントがシェルのコマンドでファイルを書き換えると発火しませんでした（実際に数回発生）。また、テスト先行の「実装前に失敗を確かめる」手順が2回飛ばされました。どちらも
CLAUDE.md に作業ルールとして明文化し、以後はそのルールで作業しています。
4. コンテキストエンジニアリング：会話に頼らず状態を外に置く
- 作業の状態は
docs/tasks.md と git に置き、フェーズごとに会話をリセットしても続きから再開できる構成に。
- 開発の経緯は
docs/ai-dev-log.md にタスクごとに記録（このREADMEの記述の根拠）。
5. 人間とAIの役割分担
| AI（Claude Code）が担当 | 人間（作者）が担当 |
|---|
| 実装・テスト作成・問題文の下書き・セルフレビュー | 仕様とハーネスの設計、問題文の最終承認、業種と手口の選定、実機での確認、デプロイ |
レビュー用サブエージェントは、問題データのレビュー（question-reviewer）をデータを作るタスクのたびに、UI のレビュー（ux-reviewer）をフェーズの区切り・デザインのリニューアル・一時停止機能の追加のあとに計5回実行し、指摘は反映するか、理由を付けて docs/tasks.md に保留として記録しました。
なぜ実行時にAIを使わないのか
問題はAIで下書きしましたが、公開版は検証済みの静的データだけで動きます。教育ツールで正解や解説が間違っていては意味がないため、生成AIの出力は「人間の承認＋決定的な検証」を通したものだけを使う設計にしました。APIキー漏えいや、任意の企業を装った文面の生成に悪用されるリスクもありません。
未確認・今後
- Android の実機と、スクリーンリーダー（VoiceOver など）での読み上げは未確認です。
- 一時停止の画面の読み上げ（ダイアログの名前「一時停止中」、閉じたときの「再開しました」）も、iPhone の VoiceOver の実機ではまだ確かめていません。headless Chrome のスモークで確かめているのは、属性（
role="dialog"・aria-modal・ラベル）、フォーカスの移動、読み上げ用の領域に入る文言までです。
- すりガラス（
backdrop-filter）の描画の重さは、実機ではまだ確かめていません。また、iOS の「透明度を下げる」設定は CSS の prefers-reduced-transparency に反映されないため、iPhone ではすりガラスのままになります（コントラストはぼかしに頼らずに確かめています）。
- 偽の Web サイト（ログイン画面）形式の問題は v2 の候補です。
公開前の確認（架空ドメイン）
問題に出てくるドメイン（data/vocab.json の正規・偽装の69件）が、実在の誰かに使われていないかを確かめています。
- DNS での確認（2026-10-18）：
npm run check-domains（scripts/check-domains.mjs）で、取得できる単位のドメインごとに NS・SOA のレコードを調べました。69件中3件が実際に運用されていたため、別の架空ドメインに差し替えました（account-support.net → acct-support-desk.net、account-verify.net → kouza-kakunin-center.net、system-notice.net → iryo-system-info.net。差し替えた候補も DNS で見つからないことを確認）。差し替え後は69件すべてで NS・SOA が見つかりません。
- WHOIS での確認：作者が行います（DNS で見つからなくても、取得だけされているドメインはあり得るため）。
- ドメインは、いま使われていなくても、今後誰かに取得される可能性があります。公開後もときどき
npm run check-domains を実行して確かめ、使われ始めたドメインは差し替えます。この確認は外部の DNS に問い合わせるため、npm run check には含めていません。
ライセンス
MIT License（Copyright (c) 2026 matan-z）で公開しています。
このアプリは、フィッシングメールを見分ける力を身につけるための教育目的のアプリです。登場する企業・団体・ドメインはすべて架空で、実在のものとは関係ありません。
