ロマンス詐欺の流れをチャット形式で疑似体験できるWebアプリを作ったので紹介します。
実際に公開しているアプリはこちらです。
約5分で体験できます。
個人情報の入力や実際の送金は一切ありません。
開発にはOpenAI Codexを活用しています。
作ろうと思ったきっかけ
ロマンス詐欺のニュースを目にするたびに、「被害に遭う人を減らすために、何か役立つものを作れないだろうか」と考えていました。
詐欺の手口や注意点を文章で読むだけでも知識は得られますが、実際の詐欺では、最初から露骨に怪しい話が出てくるとは限りません。
普通の会話から始まり、少しずつ好意や信頼を作られ、気づいたときには金銭の話へ誘導されていることがあります。
そこで今回は、解説を読むだけではなく、自分で返信を選びながら会話の変化を体験できる教材にしてみました。
どんなアプリ？
あらかじめ、このアプリが教育目的の疑似体験であることや、登場人物が架空であることを案内しています。
相手役は架空の人物です。
プロフィール画像もAIで生成した架空人物で、実在する人物やサービスへのなりすましは行っていません。
体験を始めると、メッセージアプリのような画面で会話が進みます。
利用者は自由入力ではなく、毎回表示される3つの返信から1つを選びます。
選択肢には、おおむね次のような反応を用意しています。
- 相手に寄り添う返信
- 少し警戒して確認する返信
- 拒否したり、相手との境界線を伝えたりする返信
選んだ返信によって相手の反応が一部変わるため、一本道の説明を読むよりも「会話している感覚」があります。
一方で、教材として必要な流れを体験できるよう、分岐した会話は最終的に共通のシナリオへ戻る設計です。
会話の最後には、このチャットが詐欺の疑似体験であったことを明確に伝えます。
その後、会話に含まれていた危険なサインを振り返ります。
たとえば、次のようなサインを扱っています。
- 知り合って間もない段階で強い好意を示す
- 二人の関係を秘密にするよう求める
- 「あなただけが頼り」と心理的な負担をかける
- 突然、家族の病気などのトラブルを持ち出す
- 一時的な立て替えを装って金銭を求める
- 期限を示して判断を急がせる
また、選んだ返信も記録し、「確認を求める選択をしました」「境界線を伝える選択をしました」といった形で振り返れます。
主な機能
このアプリの主な機能は次のとおりです。
- 3択で進むロマンス詐欺の疑似チャット
- 選択内容に応じた会話の分岐
- 「入力中…」や待機時間によるチャットらしい演出
- 危険なサインを時系列で確認できる振り返り
- 選択履歴に応じた中立的なフィードバック
使用した技術
| 技術 | このアプリでの役割 |
|---|---|
| Vue 3 | 画面と操作の実装 |
| TypeScript | 型を使った安全な実装 |
| Vue Router | 画面のルーティング |
| Pinia | 体験中の会話・選択履歴・進行状態を管理する |
| Vue I18n | 多言語表示への対応 |
Codexと一緒に開発しました
このアプリは、OpenAIのCodexを開発支援に使って作成しました。
要件の整理、Vueコンポーネントの実装、シナリオデータの設計、テスト、レスポンシブ対応、文言調整、ブラウザでの動作確認、Cloudflareへの公開作業などを、Codexと対話しながら進めています。
ここで少し紛らわしい点がありますが、Codexを使っているのは「開発時」です。
公開したアプリの会話中に生成AIが返答しているわけではなく、OpenAI APIなどへの外部通信もありません。
相手役や会話データを差し替えるだけで追加しやすい構成にしているので、少しずつ教材を増やしていきたいです。
まとめ
今回は、ロマンス詐欺の会話の変化を約5分で疑似体験できるWebアプリを、Vue 3、TypeScript、Codexで開発しました。
一般的な注意事項を読むだけでは気づきにくい「少しずつ距離を縮められる感覚」を、注意喚起につなげられたら幸いです。
もしよろしければ、実際に触って危険なサインを探してみてください。
このアプリは注意喚起・教育を目的とした疑似体験です。登場人物、プロフィール、出来事、金銭要求はすべてフィクションです。現実の被害や不安がある場合は、一人で判断せず、信頼できる家族・友人や公的な相談窓口へ相談してください。