ネットで意図しない契約やクリックをしてしまった経験はありませんか？それはあなたを騙すために設計された「ダークパターン」の仕業かもしれません。このページでは、9つの典型的な手口を安全に体験し、クイズで知識を深めることで、賢いネットユーザーになるための実践的なスキルが身につきます。

Gemini Canvasとバイブコーディングで作成した、ダークパターン体験ギャラリー制作の全過程、具体的なプロンプト、試行錯誤のログを解説。生成AIを活用した新しい開発フローに興味がある方必見です。

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ダークパターン体験ギャラリー</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', 'Noto Sans JP', sans-serif;
            background-color: #111827;
        }
        .pattern-card, .info-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .pattern-card:hover, .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3), 0 4px 6px -2px rgba(99, 102, 241, 0.2);
        }
        .modal-content, #quiz-container, #info-section {
            animation: slide-up 0.5s ease-out;
        }
        @keyframes slide-up {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .fake-popup-button-good {
            transition: background-color 0.3s;
        }
        .fake-popup-button-bad {
            transition: all 0.3s;
        }
        .fake-popup-button-bad:hover {
            text-decoration: none;
            color: #9ca3af;
        }
        /* クイズ用のスタイル */
        .quiz-option {
            transition: background-color 0.2s ease;
        }
        .quiz-option:hover {
            background-color: #374151; /* 少し明るいグレー */
        }
        .quiz-option.selected {
            background-color: #4f46e5; /* インディゴ */
            border-color: #6366f1;
        }
        .quiz-option.correct {
            background-color: #166534; /* 緑 */
            border-color: #22c55e;
        }
        .quiz-option.incorrect {
            background-color: #991b1b; /* 赤 */
            border-color: #ef4444;
        }
    </style>
</head>
<body class="text-gray-200">

    <!-- ヘッダー -->
    <header class="bg-gray-900/80 backdrop-blur-sm sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
            <h1 class="text-2xl font-bold text-indigo-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                ダークパターン体験ギャラリー
            </h1>
        </div>
    </header>

    <main class="container mx-auto px-6 py-12">

        <!-- イントロダクション -->
        <section class="text-center mb-16">
            <h2 class="text-4xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-500">そのクリック、本当に大丈夫？</h2>
            <p class="text-lg text-gray-400 max-w-3xl mx-auto">
                ダークパターンは、ユーザーを騙したり、意図しない行動をさせたりするために巧みに設計されたUI/UXデザインです。
                このサイトで様々な手口を体験し、賢いネットユーザーになりましょう。
            </p>
        </section>
        
        <!-- 区切り線 -->
        <div class="border-b border-gray-700 my-16"></div>

        <!-- 体験セクション -->
        <section>
            <h2 class="text-3xl font-bold text-center mb-10">ダークパターンを体験する</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            
                <!-- カード 1: 偽のカウントダウン -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('fake-countdown')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                             <span class="text-2xl mr-3">⏲️</span>
                            <h3 class="text-xl font-bold text-indigo-300">偽の緊急性</h3>
                        </div>
                        <p class="text-gray-400">「残り時間あとわずか！」偽のカウントダウンで、ユーザーの焦りを煽り、冷静な判断を奪います。</p>
                    </div>
                </div>

                <!-- カード 2: 隠れた定期購入 -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('subscription-trap')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">💸</span>
                            <h3 class="text-xl font-bold text-indigo-300">サブスクリプショントラップ</h3>
                        </div>
                        <p class="text-gray-400">無料トライアルのつもりが、気付かないうちに高額な定期購入に同意させられてしまいます。</p>
                    </div>
                </div>
                
                <!-- カード 3: 意図的な誤誘導 -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('misdirection')">
                    <div class="p-6">
                         <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">↘️</span>
                            <h3 class="text-xl font-bold text-indigo-300">誤誘導</h3>
                        </div>
                        <p class="text-gray-400">視覚的に目立つボタンへ巧みに誘導し、ユーザーが望まない選択をさせようとします。</p>
                    </div>
                </div>

                <!-- カード 4: シェイミング -->
                 <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('confirmshaming')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">😳</span>
                            <h3 class="text-xl font-bold text-indigo-300">シェイミング</h3>
                        </div>
                        <p class="text-gray-400">選択肢に罪悪感を煽るような文言を使い、特定の行動（例:メルマガ購読）を強制します。</p>
                    </div>
                </div>

                <!-- カード 5: こっそりバスケットに追加 -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('sneak-into-basket')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">🛒</span>
                            <h3 class="text-xl font-bold text-indigo-300">スニーキング</h3>
                        </div>
                        <p class="text-gray-400">商品をカートに入れると、いつの間にか保険や追加商品が勝手に追加されています。</p>
                    </div>
                </div>

                <!-- カード 6: ローチモーテル -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('roach-motel')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">🏨</span>
                            <h3 class="text-xl font-bold text-indigo-300">ローチモーテル</h3>
                        </div>
                        <p class="text-gray-400">登録は簡単なのに、退会・解約が非常に困難。一度入ると中々抜け出せません。</p>
                    </div>
                </div>

                <!-- カード 7: 隠れたコスト -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('hidden-costs')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">🏷️</span>
                            <h3 class="text-xl font-bold text-indigo-300">隠れたコスト</h3>
                        </div>
                        <p class="text-gray-400">決済の最終段階で、送料や手数料など想定外の料金が突然追加されます。</p>
                    </div>
                </div>

                <!-- カード 8: 広告の偽装 -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('disguised-ads')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">🎭</span>
                            <h3 class="text-xl font-bold text-indigo-300">広告の偽装</h3>
                        </div>
                        <p class="text-gray-400">広告なのに、記事やダウンロードボタンのように見せかけ、クリックさせようとします。</p>
                    </div>
                </div>

                <!-- カード 9: プライバシー・ザッカリング -->
                <div class="pattern-card bg-gray-800 rounded-xl overflow-hidden shadow-lg border border-gray-700 cursor-pointer" onclick="showSimulation('privacy-zuckering')">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-2xl mr-3">🕵️</span>
                            <h3 class="text-xl font-bold text-indigo-300">プライバシー・ザッカリング</h3>
                        </div>
                        <p class="text-gray-400">複雑な設定でユーザーを混乱させ、意図せず多くの個人情報を共有させてしまいます。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 区切り線 -->
        <div class="border-b border-gray-700 my-16"></div>

        <!-- クイズセクション -->
        <section id="quiz-container" class="bg-gray-800 border border-gray-700 rounded-xl p-8 max-w-3xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-2">🧠 知識チェッククイズ</h2>
            <p class="text-center text-gray-400 mb-8">ダークパターンを見抜く力を試してみよう！</p>

            <div id="quiz-content">
                <!-- クイズの質問と選択肢がここに表示される -->
            </div>
            
            <div id="quiz-result" class="hidden text-center">
                 <h3 id="quiz-result-title" class="text-2xl font-bold mb-4"></h3>
                 <p id="quiz-result-text" class="text-lg mb-6"></p>
                 <button id="quiz-retry-button" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-6 rounded-lg transition-colors">もう一度挑戦する</button>
            </div>
        </section>
        
        <!-- 区切り線 -->
        <div class="border-b border-gray-700 my-16"></div>

        <!-- 情報提供セクション -->
        <section id="info-section">
            <h2 class="text-3xl font-bold text-center mb-10">🛡️ 困ったときの相談窓口</h2>
            <p class="text-center text-gray-400 mb-8 max-w-3xl mx-auto">もしダークパターンによってトラブルに巻き込まれてしまったら、一人で悩まずに専門の機関に相談しましょう。</p>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <!-- 消費者ホットライン -->
                <div class="info-card bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 class="text-xl font-bold text-indigo-300 mb-3">消費者ホットライン</h3>
                    <p class="text-5xl font-bold text-center my-4 text-yellow-400">☎️ 188</p>
                    <p class="text-gray-400">地方公共団体が設置している身近な消費生活相談窓口を案内してくれる全国共通の電話番号です。「いやや(188)！」と覚えましょう。</p>
                </div>
                <!-- 消費者庁 -->
                <div class="info-card bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 class="text-xl font-bold text-indigo-300 mb-3">消費者庁</h3>
                    <p class="text-gray-400 mb-4">消費者問題全般を管轄する国の機関です。ウェブサイトには多くの情報や注意喚起が掲載されています。</p>
                    <a href="https://www.caa.go.jp/" target="_blank" rel="noopener noreferrer" class="inline-block bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-colors">公式サイトへ</a>
                </div>
                <!-- 国民生活センター -->
                <div class="info-card bg-gray-800 p-6 rounded-xl border border-gray-700">
                    <h3 class="text-xl font-bold text-indigo-300 mb-3">国民生活センター</h3>
                    <p class="text-gray-400 mb-4">商品やサービスに関する消費者からの相談を受け付け、解決のための情報提供や商品テストを行っています。</p>
                    <a href="https://www.kokusen.go.jp/" target="_blank" rel="noopener noreferrer" class="inline-block bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-colors">公式サイトへ</a>
                </div>
            </div>
        </section>
    </main>
    
    <!-- シミュレーション＆解説モーダル -->
    <div id="modal-container" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50 hidden">
        <div id="modal-content" class="modal-content bg-gray-800 rounded-lg shadow-2xl w-full max-w-2xl border border-gray-600">
            <!-- シミュレーション画面 -->
            <div id="simulation-view" class="p-8">
                <h3 id="sim-title" class="text-2xl font-bold text-center mb-6 text-indigo-300"></h3>
                <div id="sim-body" class="bg-gray-900 p-6 rounded-lg border border-gray-700 min-h-[200px] flex flex-col items-center justify-center">
                    <!-- 各シミュレーションのUIがここに挿入される -->
                </div>
            </div>
            <!-- 解説画面 -->
            <div id="explanation-view" class="p-8 hidden">
                <div class="text-center mb-6">
                    <span class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-yellow-500">これはダークパターンです！</span>
                    <h3 id="exp-title" class="text-3xl font-bold mt-2"></h3>
                </div>
                <div class="space-y-6">
                    <div>
                        <h4 class="text-lg font-bold text-indigo-300 mb-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /></svg>手口の解説</h4>
                        <p id="exp-description" class="text-gray-400 bg-gray-900 p-4 rounded-md"></p>
                    </div>
                    <div>
                        <h4 class="text-lg font-bold text-green-400 mb-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>見分け方と対策</h4>
                        <p id="exp-advice" class="text-gray-300 bg-gray-900 p-4 rounded-md"></p>
                    </div>
                </div>
                <div class="mt-8 text-center">
                    <button id="close-modal-button" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-6 rounded-lg transition-colors">閉じる</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // --- クイズ機能のスクリプト ---
        const quizContent = document.getElementById('quiz-content');
        const quizResult = document.getElementById('quiz-result');
        const quizResultTitle = document.getElementById('quiz-result-title');
        const quizResultText = document.getElementById('quiz-result-text');
        const quizRetryButton = document.getElementById('quiz-retry-button');

        const quizQuestions = [
            { question: "ECサイトで決済画面に進んだら、いつの間にか「安心手数料」が追加されていました。これはどのダークパターン？", options: ["偽の緊急性", "隠れたコスト", "シェイミング"], answer: "隠れたコスト", explanation: "決済の最終段階で予期せぬ費用を追加するのは「隠れたコスト」の典型的な手口です。" },
            { question: "あるアプリの退会手続きをしようとしたら、「退会はサポートセンターへの電話でのみ受け付けます（平日10時～17時）」と表示されました。これはどのダークパターン？", options: ["ローチモーテル", "スニーキング", "誤誘導"], answer: "ローチモーテル", explanation: "登録は簡単なのに、退会を意図的に困難にするのは「ローチモーテル」です。" },
            { question: "「メルマガを購読しますか？」というポップアップで、「いいえ、私は損をしても構いません」という選択肢があります。この文言はどのダークパターン？", options: ["広告の偽装", "プライバシー・ザッカリング", "シェイミング"], answer: "シェイミング", explanation: "ユーザーに罪悪感を抱かせて特定の行動を促すのは「シェイミング」の手口です。" },
            { question: "無料ソフトのダウンロードページで、本物のダウンロードボタンより遥かに大きく目立つ「高速ダウンロードはこちら」というボタンがありました。これは何である可能性が最も高い？", options: ["広告の偽装", "スニーキング", "偽の緊急性"], answer: "広告の偽装", explanation: "本物のコンテンツに見せかけてクリックを誘うのは「広告の偽装」です。意図しないサイトに飛ばされたり、不要なソフトをインストールさせられたりします。" }
        ];

        let currentQuestionIndex = 0;
        let score = 0;

        function startQuiz() {
            currentQuestionIndex = 0;
            score = 0;
            quizResult.classList.add('hidden');
            quizContent.classList.remove('hidden');
            showQuestion();
        }

        function showQuestion() {
            const questionData = quizQuestions[currentQuestionIndex];
            quizContent.innerHTML = `<div class="mb-6"><p class="text-gray-400 text-sm">問題 ${currentQuestionIndex + 1} / ${quizQuestions.length}</p><p class="text-xl font-semibold">${questionData.question}</p></div><div id="quiz-options" class="space-y-3">${questionData.options.map(option => `<button class="quiz-option w-full text-left p-4 border-2 border-gray-600 rounded-lg">${option}</button>`).join('')}</div><div id="quiz-feedback" class="mt-6 hidden"><p id="feedback-text" class="p-4 rounded-md"></p><button id="next-question-button" class="mt-4 w-full bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-6 rounded-lg transition-colors">次の問題へ</button></div>`;
            const optionButtons = quizContent.querySelectorAll('.quiz-option');
            optionButtons.forEach(button => button.addEventListener('click', () => selectAnswer(button, optionButtons)));
        }

        function selectAnswer(selectedButton, allButtons) {
            allButtons.forEach(button => button.disabled = true);
            const selectedAnswer = selectedButton.textContent.trim();
            const questionData = quizQuestions[currentQuestionIndex];
            const correctAnswer = questionData.answer;
            const feedbackContainer = document.getElementById('quiz-feedback');
            const feedbackText = document.getElementById('feedback-text');
            const nextButton = document.getElementById('next-question-button');
            if (selectedAnswer === correctAnswer) {
                score++;
                selectedButton.classList.add('correct');
                feedbackText.className = 'p-4 rounded-md bg-green-900/50 text-green-300 border border-green-700';
                feedbackText.innerHTML = `<span class="font-bold">正解！</span> ${questionData.explanation}`;
            } else {
                selectedButton.classList.add('incorrect');
                feedbackText.className = 'p-4 rounded-md bg-red-900/50 text-red-300 border border-red-700';
                feedbackText.innerHTML = `<span class="font-bold">不正解…</span> 正解は「${correctAnswer}」です。 ${questionData.explanation}`;
                allButtons.forEach(btn => { if (btn.textContent.trim() === correctAnswer) btn.classList.add('correct'); });
            }
            feedbackContainer.classList.remove('hidden');
            nextButton.addEventListener('click', () => {
                currentQuestionIndex++;
                if (currentQuestionIndex < quizQuestions.length) showQuestion();
                else showResult();
            });
        }

        function showResult() {
            quizContent.classList.add('hidden');
            quizResult.classList.remove('hidden');
            const percentage = Math.round((score / quizQuestions.length) * 100);
            let title, text;
            if (percentage === 100) { title = "素晴らしい！全問正解です！ 🎓"; text = "あなたはダークパターンの専門家です。この知識で安全なネットライフを！"; }
            else if (percentage >= 75) { title = "おしい！あと一歩！ 👍"; text = `正解率は${percentage}%です。ほとんどのパターンを見抜けています。`; }
            else { title = "まだまだ伸びしろあり！ 💪"; text = `正解率は${percentage}%です。もう一度体験コーナーで学んで再挑戦してみましょう！`; }
            quizResultTitle.textContent = title;
            quizResultText.textContent = text;
        }

        document.addEventListener('DOMContentLoaded', startQuiz);
        quizRetryButton.addEventListener('click', startQuiz);

        // --- モーダル用のJavaScript ---
        const modalContainer = document.getElementById('modal-container');
        const modalContent = document.getElementById('modal-content');
        const simView = document.getElementById('simulation-view');
        const expView = document.getElementById('explanation-view');
        const simTitle = document.getElementById('sim-title');
        const simBody = document.getElementById('sim-body');
        const closeModalButton = document.getElementById('close-modal-button');
        let countdownInterval;

        const patterns = {
            'fake-countdown': { title: '偽の緊急性', simTitle: '限定タイムセール！', simHTML: `<p class="text-lg mb-2">幻のガジェット「Chrono-Device」</p><p class="text-4xl font-bold text-yellow-400 mb-4">50% OFF!</p><p class="mb-2">セール終了まで</p><div id="countdown" class="text-3xl font-mono bg-red-600 text-white px-4 py-2 rounded-lg mb-6">10:00</div><button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-lg text-lg transition-colors" data-action="trap">今すぐ購入する</button>`, expTitle: '偽の緊急性（Scarcity）', description: '「限定」「残りわずか」「タイムセール」といった言葉と、もっともらしいカウントダウンタイマーでユーザーを焦らせ、購入を急がせる手口です。実際にはタイマーがゼロになってもセールが終わらない、あるいはページを再読み込みするとリセットされることがよくあります。', advice: '本当に信頼できるセールか、一度立ち止まって考えましょう。急かすような表示は、まず疑ってみる癖をつけることが大切です。一度サイトを離れて、他のサイトで価格を比較してみるのも有効です。' },
            'subscription-trap': { title: 'サブスクリプショントラップ', simTitle: '最高の動画体験を！', simHTML: `<div class="text-left w-full max-w-sm mx-auto"><h4 class="text-2xl font-bold mb-4 text-center">無料トライアルに登録</h4><input type="email" placeholder="メールアドレス" class="w-full bg-gray-700 border border-gray-600 rounded-md px-4 py-2 mb-4 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"><input type="password" placeholder="パスワード" class="w-full bg-gray-700 border border-gray-600 rounded-md px-4 py-2 mb-6 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"><div class="text-center"><button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors w-full mb-4" data-action="trap">無料で始める</button></div><p class="text-xs text-gray-500 text-center leading-tight">「無料で始める」をクリックすると、利用規約に同意したことになります。無料期間は7日間です。期間終了後、自動的にプレミアムプラン（月額2,980円）に移行します。解約はいつでも可能ですが、手続きはアカウント設定ページから行う必要があります。</p></div>`, expTitle: 'サブスクリプショントラップ', description: '「無料」や「お試し」を強調してユーザーを惹きつけ、目立たない小さな文字で有料プランへの自動移行について記載する手口です。多くの場合、解約方法もわざと分かりにくくされています。', advice: '登録ボタンを押す前に、必ず利用規約や注意書きを隅々まで確認しましょう。特に「自動更新」「有料プランへ移行」などの文言には注意が必要です。登録時にクレジットカード情報の入力を求められたら、特に警戒してください。' },
            'misdirection': { title: '誤誘導', simTitle: '通知を許可しますか？', simHTML: `<div class="bg-white text-gray-800 p-6 rounded-lg shadow-xl text-center w-full max-w-md"><h4 class="text-xl font-bold mb-2">最新のお得な情報をお届けします！</h4><p class="mb-6">サイトからの通知を許可して、限定セールや新着情報を見逃さないようにしましょう。</p><div class="flex flex-col gap-3"><button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-lg transition-colors fake-popup-button-good" data-action="trap">はい、許可します</button><button class="w-full text-gray-500 text-sm hover:underline fake-popup-button-bad" data-action="escape">今はやめておく</button></div></div>`, expTitle: '誤誘導（Misdirection）', description: 'サイト側が望む選択肢（この場合は「通知を許可」）を、色や大きさ、配置で意図的に目立たせる手口です。逆に、ユーザーが選びたいであろう選択肢（「許可しない」）は、目立たないテキストリンクや地味なボタンで表示し、見つけにくく、クリックしにくくします。', advice: 'ポップアップが表示されたら、すぐに一番目立つボタンをクリックせず、全ての選択肢を注意深く確認しましょう。本当にその操作が必要か、一度考えてから選択することが重要です。「いいえ」「キャンセル」「拒否」などの選択肢がどこかに隠れていないか探してみてください。' },
            'confirmshaming': { title: 'シェイミング', simTitle: 'メールマガジンを購読しませんか？', simHTML: `<div class="bg-white text-gray-800 p-6 rounded-lg shadow-xl text-center w-full max-w-md"><h4 class="text-xl font-bold mb-2">限定セール情報を見逃すな！</h4><p class="mb-6">購読者限定のシークレットセールやクーポンをメールでお届けします。今すぐ登録！</p><div class="flex flex-col gap-3"><button class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg text-lg transition-colors" data-action="trap">はい！お得な情報が欲しいです！</button><button class="w-full text-gray-500 text-sm hover:underline" data-action="trap">いいえ、私はお得な情報には興味ありません。</button></div></div>`, expTitle: 'シェイミング（Confirmshaming）', description: 'サービス登録を断る選択肢に、ユーザーが「自分は損をしている」「間違っている」と感じるような、罪悪感や羞恥心を煽る文言を使う手口です。「お得な情報はいらない」「賢い買い物に興味ない」といった表現が典型例です。', advice: '感情に訴えかけるような選択肢が出てきても、冷静になりましょう。これはあなたの意思決定を操るための心理的なトリックです。自分にとって本当に必要かどうかだけを基準に、堂々と「いいえ」を選択してください。' },
            'sneak-into-basket': { title: 'スニーキング', simTitle: '商品をカートに追加', simHTML: `<div class="text-left w-full max-w-lg"><div class="flex items-center bg-gray-700 p-4 rounded-t-lg"><img decoding="async" src="https://placehold.co/80x80/374151/e5e7eb?text=PC" class="rounded-md mr-4"><div><h4 class="font-bold">最新型ノートPC "ProBook X"</h4><p class="text-lg font-bold">150,000円</p></div></div><div class="bg-gray-800 p-4"><label class="flex items-center cursor-pointer"><input type="checkbox" class="form-checkbox h-5 w-5 bg-gray-900 border-gray-600 text-indigo-600 focus:ring-indigo-500" checked><span class="ml-3 text-gray-300">おすすめ！安心延長保証（+5,000円）を追加する</span></label></div><div class="p-4 text-center"><button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors w-full" data-action="trap">カートに追加</button></div></div>`, expTitle: 'スニーキング（Sneak into Basket）', description: 'ECサイトなどで、ユーザーが商品を選択した際に、デフォルトでチェックが入ったオプション（保険、関連商品など）を使い、ユーザーが意図しない追加料金を支払わせようとする手口です。ユーザーはチェックボックスに気づかずに購入手続きを進めてしまうことがあります。', advice: '商品をカートに追加する前や、購入を確定する前の確認画面では、注文内容を必ず詳細にチェックしましょう。特に、合計金額が想定より高くなっていないか注意してください。不要なオプションのチェックは手動で外す必要があります。' },
            'roach-motel': { title: 'ローチモーテル', simTitle: 'アカウントを解約しますか？', simHTML: `<div class="text-center w-full max-w-lg"><h4 class="text-2xl font-bold mb-4">解約手続きのご案内</h4><p class="mb-6 text-gray-400">サービスをご利用いただきありがとうございます。解約をご希望の場合は、以下の手順に従ってください。</p><div class="bg-gray-900 border border-gray-700 rounded-lg p-6 text-left space-y-3 text-sm"><p>1. まず、<a href="https://aitool-lab.jp/ai/work-efficiency/ai-dark-pattern-simulator-dev/#" class="text-indigo-400 underline" action="trap">サポートセンターのFAQ</a>で「解約」について検索します。</p><p>2. 次に、FAQに記載の「解約申請フォーム」をダウンロードし、印刷してください。</p><p>3. フォームに必要事項を記入・捺印の上、弊社カスタマーサポート宛に郵送してください。</p><p>4. 書類到着後、弊社にて確認作業を行い、10営業日以内に解約処理が完了します。</p></div><p class="mt-4 text-xs text-gray-500">※お電話やメールでの解約は受け付けておりません。</p></div>`, expTitle: 'ローチモーテル', description: 'サービスへの登録はオンラインで簡単にできるにも関わらず、解約や退会手続きを意図的に非常に複雑・面倒にする手口です。電話でのみ受付、書類の郵送が必要など、ユーザーが途中で諦めてしまうことを狙っています。名前の由来は「ゴキブリホイホイ（入るのは簡単だが出るのは難しい）」から来ています。', advice: 'サービスに登録する前に、必ず解約方法を確認しておきましょう。サイトのフッターにある「よくある質問(FAQ)」や「利用規約」などに記載されていることが多いです。解約方法が不自然に複雑なサービスは、利用を避けるのが賢明です。' },
            'hidden-costs': { title: '隠れたコスト', simTitle: '注文内容の確認', simHTML: `<div class="text-left w-full max-w-lg bg-gray-900 rounded-lg border border-gray-700"><div class="p-6 border-b border-gray-700"><h4 class="text-xl font-bold">ご注文の最終確認</h4></div><div class="p-6 space-y-3"><div class="flex justify-between"><span>商品小計:</span><span>1,980円</span></div><div class="flex justify-between text-gray-400"><span>送料:</span><span>???</span></div><div class="flex justify-between text-gray-400"><span>手数料:</span><span>???</span></div></div><div class="p-6 border-t border-gray-700"><div class="flex justify-between text-xl font-bold"><span>お支払い総額:</span><span>1,980円</span></div></div><div class="p-4 pt-0 text-center"><button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors w-full" data-action="trap" onclick="revealCosts(this)">支払いを確定する</button></div></div>`, expTitle: '隠れたコスト (Hidden Costs)', description: '購入プロセスの最終段階に進むまで、送料、税金、サービス手数料などの追加料金を意図的に隠す手口です。ユーザーは最初に表示された安い価格に惹かれて購入手続きを進めますが、最後の最後で合計金額が跳ね上がり、驚くことになります。この時点では既に多くの情報を入力しているため、「今さらやめるのも面倒だ」という心理が働き、そのまま支払ってしまうことを狙っています。', advice: 'オンラインショッピングでは、最終確認画面で必ず請求項目を一つ一つ確認しましょう。「送料」「手数料」「税」などが別途加算されていないか、注意深く見ることが重要です。合計金額が想定と違う場合は、一度立ち止まって内訳を確認する癖をつけましょう。' },
            'disguised-ads': { title: '広告の偽装', simTitle: '無料ソフトをダウンロード', simHTML: `<div class="text-center w-full max-w-2xl bg-gray-900 rounded-lg border border-gray-700 p-6"><h4 class="text-2xl font-bold mb-2">高速画像編集ソフト「Photon Pro」</h4><p class="text-gray-400 mb-6">最新バージョン 5.0 を無料でダウンロード</p><div class="space-y-4"><a href="https://aitool-lab.jp/ai/work-efficiency/ai-dark-pattern-simulator-dev/#" class="block w-full text-center bg-green-600 p-4 rounded-lg text-white font-bold text-xl hover:bg-green-700" action="trap">▽▽ 今すぐダウンロード ▽▽</a><a href="https://aitool-lab.jp/ai/work-efficiency/ai-dark-pattern-simulator-dev/#" class="block w-full text-center bg-gray-700 p-3 rounded-lg text-white font-semibold hover:bg-gray-600" action="escape">Photon Pro v5.0 (Windows 64bit) - 本体はこちら</a><a href="https://aitool-lab.jp/ai/work-efficiency/ai-dark-pattern-simulator-dev/#" class="block w-full text-center bg-green-600 p-4 rounded-lg text-white font-bold text-xl hover:bg-green-700" action="trap">▽▽ 高速ダウンロードはこちら ▽▽</a></div><p class="text-xs text-gray-500 mt-4">上記の緑色のボタンは広告です。実際のダウンロードリンクは中央の灰色のボタンです。</p></div>`, expTitle: '広告の偽装 (Disguised Ads)', description: '広告を、ウェブサイトの主要なコンテンツ（記事、ナビゲーション、ダウンロードボタンなど）とそっくりなデザインにする手口です。ユーザーはそれを広告だと認識せずにクリックしてしまい、意図しない広告サイトに飛ばされたり、不要なソフトウェアをインストールさせられたりします。特に無料のソフトウェアダウンロードサイトなどで頻繁に見られます。', advice: 'ダウンロードボタンなどが複数ある場合は注意が必要です。一番目立つボタンが広告である可能性が高いです。マウスカーソルをボタンの上に乗せた際に、ブラウザの左下に表示されるリンク先URLを確認する癖をつけましょう。関係のないドメイン名が表示されたら、それは広告です。' },
            'privacy-zuckering': { title: 'プライバシー・ザッカリング', simTitle: 'プライバシー設定のカスタマイズ', simHTML: `<div class="text-left w-full max-w-2xl bg-gray-900 rounded-lg border border-gray-700 p-6"><h4 class="text-xl font-bold mb-4">データ共有設定</h4><p class="text-sm text-gray-400 mb-6">より良いサービス提供のため、以下の情報をパートナー企業と共有することをお勧めします。</p><div class="space-y-4 text-sm"><label class="flex items-center p-3 bg-gray-800 rounded-md"><input type="checkbox" class="form-checkbox h-5 w-5 bg-gray-900 border-gray-600 text-indigo-600 focus:ring-indigo-500" checked><span class="ml-3">プロフィール情報（氏名、年齢、性別）の共有を許可しないのチェックを外す</span></label><label class="flex items-center p-3 bg-gray-800 rounded-md"><input type="checkbox" class="form-checkbox h-5 w-5 bg-gray-900 border-gray-600 text-indigo-600 focus:ring-indigo-500" checked><span class="ml-3">閲覧履歴に基づいたパーソナライズ広告の配信を停止しない</span></label><label class="flex items-center p-3 bg-gray-800 rounded-md"><input type="checkbox" class="form-checkbox h-5 w-5 bg-gray-900 border-gray-600 text-indigo-600 focus:ring-indigo-500"><span class="ml-3">位置情報へのアクセスを全てのパートナーに許可しない、のチェックを外さない</span></label></div><div class="mt-8 text-center"><button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition-colors" data-action="trap">設定を保存</button></div></div>`, expTitle: 'プライバシー・ザッカリング (Privacy Zuckering)', description: 'Facebookの創業者にちなんで名付けられた手口で、ユーザーを巧みに誘導して、本来共有するつもりのなかった個人情報を共有させるデザインのことです。二重否定を使った分かりにくい文章、デフォルトで共有がオンになっているチェックボックス、どこにあるか分かりにくいプライバシー設定ページなどが典型的な例です。', advice: '新しいサービスに登録する際は、プライバシー設定を必ず確認し、デフォルト設定のままにしないようにしましょう。文章が分かりにくい場合は、特に注意して読み解く必要があります。「許可しないのチェックを外す」は「許可する」という意味です。自分にとって不要な情報共有は、面倒でも一つずつオフに設定することが自己防衛に繋がります。' }
        };

        function revealCosts(button) {
            const container = button.closest('.w-full');
            container.innerHTML = `<div class="p-6 border-b border-gray-700"><h4 class="text-xl font-bold text-yellow-400">料金が更新されました！</h4></div><div class="p-6 space-y-3"><div class="flex justify-between"><span>商品小計:</span><span>1,980円</span></div><div class="flex justify-between"><span>送料:</span><span class="text-red-400">800円</span></div><div class="flex justify-between"><span>サービス手数料:</span><span class="text-red-400">500円</span></div></div><div class="p-6 border-t border-gray-700"><div class="flex justify-between text-2xl font-bold"><span>お支払い総額:</span><span class="text-yellow-400">3,280円</span></div></div><div class="p-4 pt-0 text-center"><button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors w-full" data-action="trap">この内容で支払う</button></div>`;
            container.querySelectorAll('[data-action]').forEach(el => el.addEventListener('click', (e) => { e.preventDefault(); showExplanation('hidden-costs'); }));
        }

        function showSimulation(patternKey) {
            const pattern = patterns[patternKey];
            if (!pattern) return;
            clearInterval(countdownInterval);
            simView.classList.remove('hidden');
            expView.classList.add('hidden');
            simTitle.textContent = pattern.simTitle;
            simBody.innerHTML = pattern.simHTML;
            if (patternKey === 'fake-countdown') {
                let timeLeft = 10 * 60;
                const countdownEl = document.getElementById('countdown');
                countdownInterval = setInterval(() => {
                    timeLeft--;
                    const minutes = Math.floor(timeLeft / 60);
                    const seconds = timeLeft % 60;
                    countdownEl.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
                    if (timeLeft <= 0) { clearInterval(countdownInterval); countdownEl.textContent = "00:00"; }
                }, 1000);
            }
            simBody.querySelectorAll('[data-action]').forEach(el => el.addEventListener('click', (e) => { e.preventDefault(); showExplanation(patternKey); }));
            modalContainer.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function showExplanation(patternKey) {
            const pattern = patterns[patternKey];
            if (!pattern) return;
            clearInterval(countdownInterval);
            document.getElementById('exp-title').textContent = pattern.expTitle;
            document.getElementById('exp-description').textContent = pattern.description;
            document.getElementById('exp-advice').textContent = pattern.advice;
            simView.classList.add('hidden');
            expView.classList.remove('hidden');
        }

        function closeModal() {
            modalContainer.classList.add('hidden');
            document.body.style.overflow = 'auto';
            clearInterval(countdownInterval);
        }

        closeModalButton.addEventListener('click', closeModal);
        modalContainer.addEventListener('click', (e) => { if (e.target === modalContainer) closeModal(); });
        document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modalContainer.classList.contains('hidden')) closeModal(); });
    </script>
</body>
</html>

ダークパターン体験ギャラリー

ページの体験だけしたい人はこちら

作成ログ

完成までの作成時間：20約分
完成までのチャットでのやり取り回数：6回

Gemini Canvasでの制作過程

初見のプロンプト

ダークパターンを体験して引っかからないように勉強できるサイトを作りたい。ダークパターンについて調べて

ディープリサーチに「ダークパターン」について詳しく調べてもらう

ダークパターンが体験でと、引っかからないための見分け方やアドバイスがわかるサイト作って

他にも種類はある？他に追加したほうがいい機能はある？

Geminiに追加機能のアイディアを考えてもらいます。

クイズモードの追加、いざという時のための情報提供、追加して

ディープリサーチに一旦調べてもらってから、Canvasでサイトを作成することで自分の覚えたい分野を簡単にクイズ形式のサイトを作って配布することが可能です。

過程をまとめたプロンプト

こちらのプロンプトは、サイトの**「何を」「なぜ」作るのか**という目的と、絶対に含めてほしい要素に絞って記述しています。デザインの細かい部分（色やフォントなど）はAIに任せる形となります。

依頼の目的
ユーザーが悪質なウェブデザイン「ダークパターン」の手口を、安全な環境でインタラクティブに学べる教育ウェブサイトを制作してください。

サイトのコンセプト
ゲーム感覚でダークパターンのシミュレーションを体験し、その仕組みや見分け方を直感的に理解できる学習ツール。

必須の機能とコンテンツ
ウェブサイトは、以下の3つの主要セクションで構成してください。

体験セクション:

複数の代表的なダークパターン（偽の緊急性、サブスクリショントラップ、誤誘導、隠れたコストなど、最低でも8種類以上）を体験できるシミュレーションを用意する。

各シミュレーションの後には、その手口の詳しい解説と、実生活で役立つ対策方法を分かりやすく表示する。

クイズセクション:

学んだ知識が身についたかを確認できる、簡単な多肢選択式のクイズを設置する。

回答すると、すぐに正解・不正解とその理由がわかるようにする。

相談窓口セクション:

実際にトラブルに遭ってしまった場合に備え、日本の公的な相談窓口（消費者ホットライン188など）の連絡先や公式サイトへのリンクを掲載する。

デザインと技術的な要件
形式: 全てのコード（HTML, CSS, JavaScript）を単一のHTMLファイルにまとめてください。

デザイン: 全体的にモダンで分かりやすいデザインにしてください。スマートフォンでも快適に閲覧できるよう、レスポンシブ対応は必須です。

言語: サイト内のテキストはすべて日本語でお願いします。