はじめに
フィッシング詐欺を安全に疑似体験し、見抜く視点と適切な行動を学ぶ日本語Webアプリを作りました。
Vue 3・TypeScriptを使ったフロントエンドのみのシンプルな構成で、開発にはOpenAI Codexを活用しています。
この記事では、制作の背景、主な機能、安全に疑似体験してもらうために考えたこと、技術構成、Codexをどのように使ったかを紹介します。
👉 フィッシング対策学習サイト「そのログイン、本物ですか？」を開く
開発のきっかけ
最近、親から「フィッシングメールが来るようになった」と相談を受けました。
届いたメールが本物かどうかを確認するとき、「差出人を確認して」「メール内のリンクを押さずに公式サイトから開いて」と説明することはできます。ただ、知識を伝えるだけでは、実際に不安をあおるメールが届いた場面で同じように行動できるとは限りません。
フィッシングメールは、次のような言葉で受信者を急がせます。
- 「24時間以内に確認してください」
- 「アカウントを停止します」
- 「不正なアクセスを検知しました」
落ち着いて読めば怪しいと感じられても、自分のアカウントが危険かもしれないと思うと、反射的にリンクを押してしまうことがあります。
そこで、単に注意点を読むのではなく、安全な環境で一度体験して、立ち止まる感覚を持ち帰れるものを作りたいと考えました。
セキュリティ技術だけでは防ぎきれない部分
迷惑メールの検知、ブラウザーの警告、多要素認証など、セキュリティ技術は進化しています。一方で、攻撃者はシステムの弱点だけでなく、人の心理も利用します。
特に使われやすいのが、次のような心理です。
- 損をしたくないという不安
- 早く対応しなければならないという焦り
- 見慣れた名前や整った画面への信頼
- 有名な企業や公的機関からの連絡だと思い込む気持ち
技術的な対策はとても重要ですが、人が最後にリンクを開いたり情報を入力したりする場面を、すべて自動で守ることは困難です。
そのため、このアプリでは知識を並べるだけではなく、疑似メールと疑似ログイン画面を通して、 「いったん止まる」「別の経路から確認する」 という行動を体験できるようにしました。
作ったもの
アプリは、主に次の内容で構成しています。
- 疑似メールを読む
- 疑似ログイン画面を体験する
- 心理的な誘導や怪しかったポイントを振り返る
- 基礎知識を学ぶ
- 確認テストに挑戦する
- 被害が疑われる場合の相談先を確認する
疑似体験に登場する「Cloud Letter」は架空のサービスです。実在する企業、団体、サービスとは無関係です。
1. 疑似メール
最初は答えを強調せず、本当にメールが届いたつもりで読んでもらいます。
メール本文には、期限を示して急がせる表現や、アカウント停止への不安をあおる表現を含めています。
利用者は、メール内のボタンを押すだけでなく、「送信元とリンク先を確認する」「公式サイトを自分で開いて確認する」といった行動も選べます。
2. 疑似ログイン
メール内のリンクを選ぶと、疑似ログイン画面へ進みます。
見た目が整っていても、本物とは限りません。
画面には専用の体験用アカウントを表示し、普段使っているメールアドレスやパスワードを入力しないよう、目立つ位置に警告を置いています。
3. 種明かしと振り返り
疑似ログインの後は、フィッシングサイトの疑似体験だったことを伝えます。
ここでは、次の5つの観点を振り返ります。
- 緊急性
- 損失への不安
- 見慣れた画面
- 権威への信頼
- メール内リンク
それぞれの観点について、どのような危険が潜んでいるのかを説明します。
4. 学習ページと確認テスト
疑似体験の後に、フィッシング対策の基礎を学べるページと、3択式の確認テストを用意しています。
正解 / 不正解にかかわらず、回答後には解説を表示します。間違えた問題は最後に一覧で振り返ることができ、再挑戦もできます。
安全な疑似体験にするための設計
ログイン画面を模したアプリを一般公開する以上、入力情報の扱いは特に慎重に設計しました。
このアプリでは、次の方針を取っています。
- ログインフォームに、送信先となる
action属性を付けない - ユーザの入力内容をログや外部サービスへ渡さない
- 画面遷移の前にユーザの入力内容を明示的に空にする
つまり、疑似ログイン画面に入力された文字列は、その画面のメモリ内に一時的に存在するだけです。
ただし、ブラウザーやパスワードマネージャーの自動入力をHTML属性だけで完全に防ぐことはできません。そのため、画面上でも「実際の認証情報は入力しないでください」と繰り返し案内しています。
技術構成
今回は、学習体験に必要な状態をすべてブラウザー内で完結できるため、フロントエンドのみで構築しました。
| 分類 | 使用技術 | 役割 |
|---|---|---|
| UI | Vue 3 | 画面と操作の実装 |
| 言語 | TypeScript | 型を使った安全な実装 |
| 開発・ビルド | Vite | 開発サーバーと本番ビルド |
| 画面遷移 | Vue Router | SPA内のルーティング |
| 表示文言 | Vue I18n | 日本語文言のJSON管理 |
| 品質管理 | ESLint / vue-tsc | コード、CSS、型の検査 |
| 開発支援 | OpenAI Codex | 設計、実装、テスト、レビューの支援 |
OpenAI Codexを活用した開発
このアプリは、OpenAI Codexを開発支援として活用し制作しました。
主に支援してもらったのは次の作業です。
- 要件の整理と実装計画の作成
- Vue 3 / TypeScript / Viteのプロジェクト構築
- 各コンポーネントの実装
- 疑似ログインで情報を送信・保存しない設計の確認
- テストコードの作成と実行
- Cloudflareへの公開設定
アプリの目的、体験の流れ、表示内容、安全面、最終的なデザインは人間側で判断し、生成されたコードのレビューと修正指示を繰り返しました。
関連記事
同じく「体験して学ぶ」をテーマに、ロマンス詐欺をチャット形式で疑似体験できるWebアプリも作成しました。
👉 ロマンス詐欺を疑似体験して学べるWebアプリを作りました
おわりに
フィッシング対策では、怪しいメールの特徴を覚えることも大切です。ただ、攻撃の手口は変化します。
だからこそ、
- メール内のリンクをすぐに開かない
- 公式アプリやブックマークから自分で開く
- 不安なときほど、一度立ち止まる
- 判断に迷ったら、ひとりで抱え込まず相談する
という行動を、知識だけでなく体験として覚えておくことが大切だと思います。
このアプリが、フィッシング被害を未然に防ぐきっかけとなればうれしいです。
実際の疑似体験はこちらから試せます。
👉 「そのログイン、本物ですか？」でフィッシング疑似体験を始める