GeminiのディープリサーチとCanvasを使用して作成した巧妙化するネット詐欺、あなたは見破れますか？このゲームでは、フィッシング、偽サイト、SNS型投資詐欺などリアルな手口を体験し、サイバー犯罪から身を守る方法を学べます。楽しみながらネットリテラシーを向上させよう！
HTML コードビューア
作成ログ
完成までの作成時間：約45分
完成までのチャットでのやり取り回数：20回
ゲームだけしたい方はこちら
Gemini Canvasでの制作過程
初見のプロンプト
「デジタル・防犯」をテーマにした
現代社会に必須の、情報リテラシーを高めるゲームができるサイトが作りたい
『サイバーパトロール！嘘と詐欺を見破れ』
フェイクニュースや詐欺メールから身を守る、謎解き・鑑定ゲームです。
見分け方: 表示されるメール、SNSの投稿、ニュース記事が「本物」か「フェイク/詐欺」かを見破ります。「送信元の怪しいアドレス」「不自然な日本語」「巧妙に偽装されたURL」などが鑑定のポイントになります。
仕分け: ネット上の様々な情報を「信頼できる」「デマの可能性あり」「危険な詐欺」などに正しく仕分けして、ポイントを獲得します。
ゲームのポイント: 子供から高齢者まで、全世代のネットリテラシー向上に貢献できます。ステージをクリアするごとに、フィッシング詐欺の手口や安全なパスワードの作り方など、実践的な知識が身につきます。
最新のデジタル・防犯・フィッシング詐欺・AIを使ったさぎなどの情報とそれに対する対策を調べてディープリサーチでサイバー犯罪とその対策を調べてもらう
これを元にゲームの企画書を作成して
以上を元にしてゲーム感覚で学習できるサイトを作って
いいね。もっと問題を増やしてほしい
他にも追加した方がいいアイディアあれば教えて問題を追加していたら、少し多すぎるかなと思ったので、コースをわけることにしました。
ゲーム開始の下にもう一つコースを作って追加して
王道コースと新コース最後に、イメージの画像もAIに画像生成してもらい、画像のURLをGeminiにはめ込んでもらって完了
過程をまとめたプロンプト配布
依頼内容
「デジタル防犯」をテーマに、子どもから高齢者まで、あらゆる世代の情報リテラシーを向上させるためのゲームサイトを制作してください。
ゲームのコンセプト
ゲームタイトル:
『サイバーパトロール！嘘と詐欺を見破れ』
概要:
プレイヤーはサイバーパトロール隊員となり、インターネット上に溢れるフェイクニュースや詐欺メールなどの危険な情報を見破り、対処法を学ぶ謎解き・鑑定ゲームです。
基本システム:
鑑定: 画面に表示されるメール、SNS投稿、Webサイトなどを見て、怪しい箇所（チェックポイント）をクリックしてヒントを集めます。
判断: 全ての情報をもとに、その事案が「本物」か「詐欺/フェイク」か、あるいはどのような「行動」を取るべきかを判断します。
学習: 判断のあとには、なぜそれが危険なのか、どう対処すべきだったのかを学ぶための詳しい解説が表示されます。
実装してほしい機能
コース選択システム:
ゲーム開始時に2つのコースから選択できるようにしてください。
王道コース: フィッシング詐欺、スミッシング、偽ショッピングサイトなど、サイバー犯罪の基本的な手口を網羅したコース。
特別捜査コース: アカウント乗っ取り、プライバシー侵害、ネット炎上、情報のトリック（統計グラフの嘘）など、より高度で巧妙な手口を学ぶコース。
シナリオ分岐機能:
一部のステージでは、単純な「本物/フェイク」の判断ではなく、「あなたならどう行動するか？」という複数の選択肢を提示してください。
選んだ選択肢によって、その後の結果（成功/失敗）が変わるシナリオを表示し、正しい対処法を学べるようにしてください。
捜査手帳:
一度クリアしたステージの手口（フィッシング、サポート詐欺など）が自動的に記録されていくコレクション機能です。
プレイヤーはいつでも手帳を見返すことができ、学んだ知識を復習できます。
実践ツールコーナー:
ゲームで学んだ知識を実生活で活かすための、具体的な情報を提供するコーナーです。
内容はアコーディオン形式で、「安全なパスワード管理術」「二要素認証（2FA）の設定方法」「困ったときの公的な相談窓口」などをまとめてください。
階級システムと結果表示:
ゲームクリア後、最終スコアに応じて「見習い隊員」から「サイバーエース」までの階級を認定し、結果画面に表示してください。
プレイヤーへのフィードバックメッセージも表示してください。
X（旧Twitter）へのシェア機能:
結果表示画面に、獲得した階級とスコア、そしてゲームのURLを含んだ投稿を作成できるシェアボタンを設置してください。
シェア先のURLは、仮の [ここにゲームのURL] としてください。
ステージ内容の例
各コースに、以下のようなテーマのステージを複数用意してください。各ステージには、クリックできる「チェックポイント」と、それに対応するフィードバック、そして最終的な解説文が必要です。
王道コースのテーマ例:
宅配業者を騙るSMS（スミッシング）
有名企業を騙るメール（フィッシング詐欺）
SNSで拡散される嘘のニュース（フェイクニュース）
AIを使った偽のビデオ通話（ディープフェイク詐欺）
激安の偽ショッピングサイト
街中の危険なQRコード（クイッシング）
偽のウイルス警告（サポート詐欺）
有名人になりすました投資勧誘（SNS型投資詐欺）
友人になりすました電子マネーの要求
国際ロマンス詐欺
うますぎる話の副業詐欺
身に覚えのない架空請求
危険な闇バイト募集
特別捜査コースのテーマ例:
偽のログインページ（アカウント乗っ取り）
写真に潜む個人情報（プライバシー侵害）
広告グラフの嘘（統計のトリック）
インフルエンサーの広告投稿（ステルスマーケティング）
ネットいじめや炎上への対処法
添付ファイルに潜むウイルス（ランサムウェア）
技術・デザイン要件
ファイル形式: 全てのHTML, CSS, JavaScriptを1つのHTMLファイルにまとめてください。
スタイリング: Tailwind CSSを使用してください。
デザイン:
全体的にモダンで分かりやすく、親しみやすいデザインにしてください。
アイコンはFont Awesomeを使用してください。
フォントは丸みのあるゴシック体（例: M PLUS Rounded 1c）をWebフォントとして使用してください。
画像: 画像が必要な箇所では、特定のURLは使用せず、https://placehold.co/ などのプレースホルダーサービスを使用してください。
言語: UIや解説など、プレイヤーが見るテキストはすべて日本語にしてください。
コード: 構造が分かりやすく、後からステージの追加や修正がしやすいように記述してください。