最近話題のAI「Gemini Canvas」って何ができるの？と思っていませんか。本記事では、実際に「年末！大掃除マスタークイズ」というWebコンテンツをGemini Canvasで作成した過程を詳しく解説。企画から実装までのAI活用術を学び、あなたも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 href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
    <!-- Font Awesome for X icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <style>
        body {
            font-family: 'M PLUS Rounded 1c', sans-serif;
            touch-action: manipulation;
        }
        .progress-bar-fill {
            transition: width 0.5s ease-out;
        }
    </style>
</head>
<body class="bg-sky-100 text-gray-800 flex items-center justify-center min-h-screen p-4">

    <div id="game-container" class="w-full max-w-xl mx-auto">

        <!-- Course Selection Screen -->
        <div id="course-selection-screen" class="text-center p-8 bg-white rounded-2xl shadow-lg">
            <h1 class="text-4xl font-bold text-sky-600 mb-2">年末！<br>大掃除マスタークイズ</h1>
            <p class="text-lg mb-6">挑戦したいコースを選んでね！</p>
            <div id="course-buttons-container" class="grid grid-cols-1 gap-4">
                <button data-course="kitchen" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 px-6 rounded-xl text-xl transition-transform transform hover:scale-105 shadow-md">🍳 キッチン編</button>
                <button data-course="bathroom" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-6 rounded-xl text-xl transition-transform transform hover:scale-105 shadow-md">🛁 お風呂・水回り編</button>
                <button data-course="living" class="w-full bg-lime-500 hover:bg-lime-600 text-white font-bold py-4 px-6 rounded-xl text-xl transition-transform transform hover:scale-105 shadow-md">🛋️ リビング・窓編</button>
                <button data-course="all" class="w-full bg-gray-600 hover:bg-gray-700 text-white font-bold py-4 px-6 rounded-xl text-xl transition-transform transform hover:scale-105 shadow-md">🏆 総合腕試し編</button>
            </div>
        </div>

        <!-- Main Game Screen -->
        <div id="quiz-screen" class="hidden">
            <!-- Progress Bar & Score -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-1">
                    <span id="progress-text" class="text-sm font-semibold text-sky-700"></span>
                    <span id="score-text" class="text-sm font-bold text-yellow-600">スコア: 0</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-4">
                    <div id="progress-bar" class="bg-green-500 h-4 rounded-full progress-bar-fill" style="width: 0%"></div>
                </div>
            </div>
            
            <!-- Question Container -->
            <div id="question-container" class="w-full bg-white rounded-2xl shadow-lg p-6 md:p-8">
                <p class="text-sm text-gray-500 mb-2">Q. <span id="question-number">1</span></p>
                <h2 class="text-xl md:text-2xl font-bold mb-6" id="question-text"></h2>
                <div id="options-container" class="grid grid-cols-1 gap-4">
                    <!-- Options will be inserted here by JS -->
                </div>
            </div>

            <!-- Feedback Container -->
            <div id="feedback-container" class="hidden w-full bg-white rounded-2xl shadow-lg p-6 md:p-8 flex flex-col items-center justify-center text-center">
                <h3 id="feedback-title" class="text-3xl font-bold mb-3"></h3>
                <p id="feedback-text" class="text-base mb-4"></p>
                <p id="explanation-text" class="text-sm bg-sky-100 p-3 rounded-lg"></p>
                
                <!-- Recommendation / Affiliate Ad Area -->
                <div id="recommendation-container" class="mt-6 w-full p-4 border-2 border-dashed border-orange-300 bg-orange-50 rounded-lg hidden">
                    <h4 class="font-bold text-orange-600 mb-3 text-lg">おすすめアイテム</h4>
                    <a id="recommendation-link" href="#" target="_blank" rel="noopener sponsored" class="flex items-center gap-4 text-left hover:bg-orange-100 p-2 rounded-lg transition-colors">
                        <img decoding="async" id="recommendation-image" src="" alt="Recommended Product" class="w-24 h-24 object-cover rounded-md border border-gray-200">
                        <div>
                            <p id="recommendation-name" class="font-bold text-gray-800"></p>
                            <p id="recommendation-description" class="text-sm text-gray-600 mt-1"></p>
                            <span class="inline-block mt-2 text-white bg-orange-500 hover:bg-orange-600 font-bold py-2 px-4 rounded-md text-sm">詳しく見る</span>
                        </div>
                    </a>
                </div>

                <button id="next-question-button" class="mt-6 w-full bg-sky-500 hover:bg-sky-600 text-white font-bold py-3 px-6 rounded-lg transition-transform transform hover:scale-105">
                    次の問題へ
                </button>
            </div>
        </div>

        <!-- End Screen -->
        <div id="end-screen" class="hidden text-center p-8 bg-white rounded-2xl shadow-lg">
             <h2 class="text-3xl font-bold text-sky-600 mb-4">結果発表</h2>
            <div class="mb-4">
                 <p class="text-lg">最終スコア</p>
                 <p id="final-score" class="text-5xl font-bold"></p>
            </div>
            <div id="trophy-case" class="mb-6 p-4 bg-yellow-100 border-2 border-yellow-400 rounded-lg">
                <p class="font-bold text-lg mb-2">獲得した称号</p>
                <!-- Trophies will be inserted here -->
            </div>
            <p id="end-message" class="text-lg mb-6"></p>
            
            <!-- Share Button -->
            <a id="share-button" href="#" target="_blank" rel="noopener noreferrer" class="w-full bg-black hover:bg-gray-800 text-white font-bold py-4 px-6 rounded-xl text-2xl transition-transform transform hover:scale-105 shadow-md flex items-center justify-center gap-3 mb-4">
                <i class="fa-brands fa-x-twitter"></i>
                <span>結果をXでシェア</span>
            </a>

            <button id="restart-button" class="w-full bg-sky-500 hover:bg-sky-600 text-white font-bold py-4 px-6 rounded-xl text-2xl transition-transform transform hover:scale-105 shadow-md">
                コース選択に戻る
            </button>
        </div>
    </div>

    <script>
    //<![CDATA[
        // --- Quiz Data with Recommendations ---
        const allQuizData = {
            kitchen: [
                { question: "コンロ周りの「油汚れ」。何を使って落とすのが効果的？", options: ["クエン酸", "重曹", "お酢", "塩"], answer: "重曹", explanation: "油汚れは酸性なので、アルカリ性の重曹が中和して汚れを落としやすくします。", recommendation: { name: "NICHIGA(ニチガ) 国産重曹 1ｋｇ", description: "料理にも使える安全な重曹。大容量で家中のお掃除に大活躍します。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/a76632a2932cbce3eb0131b40783bef5.jpg", link: "https://amzn.to/46lUxL4" } },
                { question: "電子レンジ内の頑固な汚れ。安全にふやかして掃除する方法は？", options: ["水をいれた耐熱容器を温める", "洗剤を直接スプレーして温める", "濡れ雑巾で拭く", "ヘラで削り取る"], answer: "水をいれた耐熱容器を温める", explanation: "水を入れた容器を数分温めると、蒸気で汚れがふやけ、力を入れなくても簡単に拭き取れるようになります。", recommendation: { name: "HARIO(ハリオ) 耐熱ガラス製ボウル 3個セット", description: "電子レンジ対応のボウル。これ一つで掃除も料理もこなせます。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/88bfec816775b754b4f758a8733e3435.jpg", link: "https://amzn.to/4nPOjuj" } },
                { question: "シンクの排水溝のヌメリ。重曹と何を組み合わせると効果的？", options: ["砂糖", "サラダ油", "クエン酸", "片栗粉"], answer: "クエン酸", explanation: "重曹とクエン酸が混ざると発泡し、泡の力で汚れを浮かせて落とします。", recommendation: { name: "レック【激落ちくん】のクエン酸 粉末タイプ300g", description: "水アカ掃除やポットの洗浄にも使える万能なクエン酸です。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/71CdC7BMgpL._AC_SL1500_.jpg", link: "https://amzn.to/4go5kJd" } },
                { question: "換気扇フィルターのベトベト油汚れ。つけ置き洗いに最適なものは？", options: ["セスキ炭酸ソーダを溶かしたお湯", "ただの水", "アルコール", "冷たい石鹸水"], answer: "セスキ炭酸ソーダを溶かしたお湯", explanation: "セスキ炭酸ソーダは重曹よりアルカリ性が強く、油汚れに非常に効果的です。", recommendation: { name: "レック 激落ちくんのセスキ炭酸ソーダ 粉末タイプ 1kg", description: "油汚れや皮脂汚れに強力！スプレーボトルに入れて使うのも便利。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/71n2uwUmmL._AC_SL1500_.jpg", link: "https://amzn.to/3JZQDQE" } },
                { question: "魚焼きグリルの焦げ付き。落としやすくする下準備は？", options: ["熱湯をかけて冷ます", "片栗粉をまぶしておく", "冷凍庫で凍らせる", "油を塗っておく"], answer: "片栗粉をまぶしておく", explanation: "使用前に水と一緒に片栗粉を溶いて受け皿に入れておくと、使用後にはがれやすくなります。", recommendation: { name: "レック 強力コゲ落ちくん", description: "洗剤なしでもOK！頑固なコゲ付きをしっかりかき落とす特殊繊維のスポンジ。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/92be756dce8ded853ca53cc14634d0ea.jpg", link: "https://amzn.to/47IvzIb" } },
                { question: "冷蔵庫の中の掃除。食品を入れたままでも安心な除菌スプレーは？", options: ["塩素系漂白剤", "カビ取り剤", "アルコール（エタノール）スプレー", "パーツクリーナー"], answer: "アルコール（エタノール）スプレー", explanation: "アルコールスプレーは食品にかかっても安全で、揮発性が高いので二度拭きも不要です。", recommendation: { name: "フマキラー キッチン用アルコール除菌スプレー", description: "100%天然由来成分。キッチン周りや食卓の除菌に安心して使えます。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/aa.jpg", link: "https://amzn.to/46AiT4Z" } }
            ],
            bathroom: [
                { question: "お風呂場の鏡の白い「水アカ」。酸性の何で落とす？", options: ["石鹸", "塩素系漂白剤", "クエン酸", "重曹"], answer: "クエン酸", explanation: "水アカはアルカリ性の汚れです。そのため、酸性のクエン酸やお酢を使うと効果的に落とせます。", recommendation: { name: "ダイヤモンドパッド", description: "水をつけてこするだけ！鏡のウロコ状の水アカを傷つけずに落とす最終兵器。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/6e9fa1cfb9a6195e528bfee792ed0036.jpg", link: "https://amzn.to/4mdb0Hm" } },
                { question: "お風呂のタイルの目地の「黒カビ」。どうやって退治する？", options: ["お湯をかける", "ブラシで強くこする", "塩素系カビ取り剤を使う", "クエン酸スプレーをかける"], answer: "塩素系カビ取り剤を使う", explanation: "黒カビは根が深いので、殺菌効果のある塩素系カビ取り剤が最も効果的です。", recommendation: { name: "スパイダージェル", description: "ジェルタイプで液だれしにくい！ゴムパッキンやタイルの目地にしっかり密着します。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/2d0c30c6f27ce141257e2ae9129812bb.jpg", link: "https://amzn.to/4n3H7uw" } },
                { question: "シャワーヘッドの穴の詰まり。主な原因と掃除方法は？", options: ["髪の毛。針で突く", "水アカ。クエン酸水につけ置き", "油汚れ。洗剤で洗う", "サビ。交換するしかない"], answer: "水アカ。クエン酸水につけ置き", explanation: "シャワーヘッドの詰まりも水アカが原因です。クエン酸を溶かしたぬるま湯に数時間つけ置きすると綺麗になります。", recommendation: { name: "レック【激落ちくん】のクエン酸 粉末タイプ300g", description: "水アカ掃除やポットの洗浄にも使える万能なクエン酸です。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/71CdC7BMgpL._AC_SL1500_.jpg", link: "https://amzn.to/4go5kJd" } },
                { question: "トイレの便器のフチ裏の黄ばみ（尿石）。効果的な掃除方法は？", options: ["トイレットペーパーに酸性洗剤を染み込ませてパックする", "水で流しながらブラシでこする", "消臭スプレーをたくさんかける", "アルカリ性洗剤で拭く"], answer: "トイレットペーパーに酸性洗剤を染み込ませてパックする", explanation: "尿石はアルカリ性なので、酸性洗剤が効果的です。ペーパーでパックすることで、成分が浸透し汚れが落ちやすくなります。", recommendation: { name: "ドメスト 500mk 3本セット", description: "尿石を溶かす！フチ裏にもかけやすいノズルで、黄ばみ・黒ずみを撃退。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/c3199b575ead45b6f3faa7cb85354541.jpg", link: "https://amzn.to/48eA3Gz" } },
                { question: "洗面台の排水溝の髪の毛やヘドロ。パイプクリーナー以外で使えるものは？", options: ["お湯を流すだけ", "重曹とクエン酸", "歯磨き粉", "アルコール"], answer: "重曹とクエン酸", explanation: "重曹とクエン酸を発泡させて汚れを浮かし、お湯で流す方法も効果的です。", recommendation: { name: "和協産業 パイプ洗浄剤 ピーピースルーF", description: "強力な発泡と発熱作用により流し場、浴場、洗面所などの排水管の汚れを取り除く、衛生的で安全な業務用のパイプクリーナーです。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/a007998dc186faca031a65ca7d0f7457.jpg", link: "https://amzn.to/46j6kJZ" } },
                { question: "洗濯槽の見えない部分のカビ。掃除に使うと効果的なものは？", options: ["洗濯用洗剤", "柔軟剤", "酸素系漂白剤", "おしゃれ着用洗剤"], answer: "酸素系漂白剤", explanation: "酸素系漂白剤をお湯に溶かして洗濯槽に入れ、数時間放置すると、発泡パワーでカビや汚れがごっそり剥がれ落ちてきます。", recommendation: { name: "オキシクリーンEX 3270g 粉 酸素系漂白剤", description: "衣類の漂白・消臭だけでなく、洗濯槽クリーナーとしても効果抜群！", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/52c4c013c8cf826b405feb12ab73bf00.jpg", link: "https://amzn.to/4mbKtKv" } }
            ],
            living: [
                { question: "窓ガラスを拭くとき、拭き跡を残さずピカピカにするための裏ワザは？", options: ["乾いたタオルで強くこする", "濡らした新聞紙で拭く", "洗剤をたくさん使う", "お湯だけで拭く"], answer: "濡らした新聞紙で拭く", explanation: "新聞紙のインクに含まれる油分が、ガラスの汚れを分解し、ツヤを出してくれます。", recommendation: { name: "アズマ ガラスクリーナー 窓・網戸楽絞りワイパーF", description: "これ1本で窓も網戸もきれいに！スクイージーとスポンジが一体化。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/030d4f5aa55cb5851b8bd9ab0724e5d9.jpg", link: "https://amzn.to/4nuZ058" } },
                { question: "カーペットにこぼしたコーヒーのシミ。まず最初にやるべきことは？", options: ["ドライヤーで乾かす", "強くこする", "乾いた布で叩いて水分を吸い取る", "放置する"], answer: "乾いた布で叩いて水分を吸い取る", explanation: "シミはこすると広がってしまいます。まずは乾いた布やティッシュで優しく叩き、できるだけ水分を吸い取ることが重要です。", recommendation: { name: "クリーンプラネット", description: "液剤を塗布後、8時間以上乾かし、時間をかけてシミを分解。繰り返し使うことで、どんどん白くなります*。＊効果は素材・汚れの種類により異なります", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/056eda79875433cae672e743cb4efd4f.jpg", link: "https://amzn.to/4plXV1l" } },
                { question: "フローリングの床の黒ずみ。皮脂汚れが原因の場合、何で拭くと良い？", options: ["アルカリ電解水", "水拭き", "お酢を薄めた水", "ワックスを重ね塗り"], answer: "アルカリ電解水", explanation: "皮脂汚れは酸性です。アルカリ電解水やセスキ炭酸ソーダを薄めた水で拭くと、汚れが落ちやすくなります。", recommendation: { name: "アルカリ電解水クリーナー", description: "水を電気分解して作られた安心クリーナー。二度拭き不要でサラサラな仕上がりに。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/056eda79875433cae672e743cb4efd4f.jpg", link: "https://amzn.to/4gldGBo" } },
                { question: "網戸のホコリや土汚れ。家にあるもので簡単に掃除できる裏ワザは？", options: ["掃除機で吸う", "濡れ雑巾で拭く", "フロア用ウェットシートで拭く", "ホースで水をかける"], answer: "フロア用ウェットシートで拭く", explanation: "フロア用ウェットシートを2枚使い、網戸を両側から挟むようにして拭くと、ホコリが舞い散らず簡単に汚れが取れます。", recommendation: { name: "ハンディ・クラウン NEW網戸お掃除ローラー", description: "キラキラ繊維が裏側まで回り込み汚れをかき出す網戸ローラー。ローラータイプだからコロコロ転がすだけの簡単お掃除。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/40cf4b7e975d9e2886627a5ecc83411a.jpg", link: "https://amzn.to/4gpwSOr" } },
                { question: "壁紙（ビニールクロス）の手アカ汚れ。消しゴム以外で使えるものは？", options: ["住宅用中性洗剤をつけた歯ブラシ", "塩素系漂白剤", "サンドペーパー", "油性ペン"], answer: "住宅用中性洗剤をつけた歯ブラシ", explanation: "薄めた中性洗剤をつけた歯ブラシで優しくこすり、その後固く絞った雑巾で拭き取ると綺麗になります。", recommendation: { name: "メラミンスポンジ", description: "水だけで汚れを落とす魔法のスポンジ。消しゴムのように軽くこするだけで手アカや黒ずみがきれいに。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/2dbca5a742db4f6fa769f68326d6caf2.jpg", link: "https://amzn.to/3In6EiW" } },
                { question: "エアコンのフィルター掃除。ホコリを取る正しい方法は？", options: ["内側から外側へシャワーで流す", "掃除機のブラシで内側から吸う", "外側（ホコリが見える面）から掃除機で吸う", "水洗いせず叩くだけ"], answer: "外側（ホコリが見える面）から掃除機で吸う", explanation: "ホコリがフィルターの目詰まりを起こさないよう、必ずホコリがついている外側から掃除機で吸い取ります。", recommendation: { name: "らくハピ エアコン洗浄スプレー Nextplus", description: "フィルター掃除のついでに！フィンにスプレーするだけで内部のカビやホコリを洗浄・除菌。", image: "https://aitool-lab.jp/wp-content/uploads/2025/09/a8fc356d9e54330a6399582532a79c54.jpg", link: "https://amzn.to/4poq1J9" } }
            ]
        };

        // DOM Elements
        const courseSelectionScreen = document.getElementById('course-selection-screen');
        const quizScreen = document.getElementById('quiz-screen');
        const endScreen = document.getElementById('end-screen');
        const courseButtons = document.querySelectorAll('#course-buttons-container button');
        const restartButton = document.getElementById('restart-button');
        const nextQuestionButton = document.getElementById('next-question-button');
        const questionContainer = document.getElementById('question-container');
        const feedbackContainer = document.getElementById('feedback-container');
        const questionNumber = document.getElementById('question-number');
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const feedbackTitle = document.getElementById('feedback-title');
        const feedbackText = document.getElementById('feedback-text');
        const explanationText = document.getElementById('explanation-text');
        const progressText = document.getElementById('progress-text');
        const progressBar = document.getElementById('progress-bar');
        const scoreText = document.getElementById('score-text');
        const endTitle = document.getElementById('end-title');
        const finalScore = document.getElementById('final-score');
        const trophyCase = document.getElementById('trophy-case');
        const endMessage = document.getElementById('end-message');
        const recommendationContainer = document.getElementById('recommendation-container');
        const recommendationLink = document.getElementById('recommendation-link');
        const recommendationImage = document.getElementById('recommendation-image');
        const recommendationName = document.getElementById('recommendation-name');
        const recommendationDescription = document.getElementById('recommendation-description');

        // Game State
        let currentQuestionIndex = 0;
        let score = 0;
        let shuffledQuizData = [];
        let currentCourse = '';

        // Event Listeners
        courseButtons.forEach(button => {
            button.addEventListener('click', () => {
                const course = button.dataset.course;
                startGame(course);
            });
        });
        restartButton.addEventListener('click', () => {
            endScreen.classList.add('hidden');
            courseSelectionScreen.classList.remove('hidden');
        });
        nextQuestionButton.addEventListener('click', nextQuestion);

        function shuffleArray(array) {
            return array.sort(() => Math.random() - 0.5);
        }

        function startGame(course) {
            currentCourse = course;
            courseSelectionScreen.classList.add('hidden');
            quizScreen.classList.remove('hidden');
            
            let questionsForCourse = [];
            if(course === 'all'){
                questionsForCourse = Object.values(allQuizData).flat();
            } else {
                questionsForCourse = allQuizData[course];
            }
            
            shuffledQuizData = shuffleArray([...questionsForCourse]);
            currentQuestionIndex = 0;
            score = 0;
            
            updateScoreDisplay();
            loadQuestion();
        }

        function loadQuestion() {
            recommendationContainer.classList.add('hidden');
            questionContainer.classList.remove('hidden');
            feedbackContainer.classList.add('hidden');

            const currentQuestion = shuffledQuizData[currentQuestionIndex];
            
            questionNumber.textContent = currentQuestionIndex + 1;
            questionText.textContent = currentQuestion.question;
            
            optionsContainer.innerHTML = '';
            const shuffledOptions = shuffleArray([...currentQuestion.options]);
            shuffledOptions.forEach(option => {
                const button = document.createElement('button');
                button.textContent = option;
                button.classList.add('w-full', 'bg-white', 'hover:bg-sky-100', 'border-2', 'border-sky-300', 'text-sky-800', 'font-semibold', 'py-3', 'px-4', 'rounded-lg', 'transition-all', 'transform', 'hover:scale-105');
                button.addEventListener('click', () => selectAnswer(option));
                optionsContainer.appendChild(button);
            });

            updateProgressBar();
        }

        function showFeedback(isCorrect, selectedOption) {
            const currentQuestion = shuffledQuizData[currentQuestionIndex];
            const buttons = Array.from(optionsContainer.children);

            buttons.forEach(btn => {
                btn.disabled = true;
                if(btn.textContent === currentQuestion.answer) {
                    btn.classList.add('bg-green-200', 'border-green-500');
                } else if (btn.textContent === selectedOption) {
                    btn.classList.add('bg-red-200', 'border-red-500');
                }
            });

            if (isCorrect) {
                score += 10;
                feedbackTitle.textContent = "正解！";
                feedbackTitle.className = 'text-3xl font-bold mb-3 text-green-500';
                feedbackText.textContent = `さすがです！スコア +10点`;
            } else { // Incorrect answer
                feedbackTitle.textContent = "残念！";
                feedbackTitle.className = 'text-3xl font-bold mb-3 text-red-500';
                feedbackText.textContent = `正解は「${currentQuestion.answer}」でした。`;
            }

            explanationText.textContent = currentQuestion.explanation;
            updateScoreDisplay();
            
            // Show recommendation
            if(currentQuestion.recommendation){
                const rec = currentQuestion.recommendation;
                recommendationLink.href = rec.link;
                recommendationImage.src = rec.image;
                recommendationImage.alt = rec.name;
                recommendationName.textContent = rec.name;
                recommendationDescription.textContent = rec.description;
                recommendationContainer.classList.remove('hidden');
            }

            setTimeout(() => {
                questionContainer.classList.add('hidden');
                feedbackContainer.classList.remove('hidden');
            }, 800);
        }

        function selectAnswer(selectedOption) {
            const currentQuestion = shuffledQuizData[currentQuestionIndex];
            const isCorrect = selectedOption === currentQuestion.answer;
            showFeedback(isCorrect, selectedOption);
        }

        function nextQuestion() {
            currentQuestionIndex++;
            if (currentQuestionIndex < shuffledQuizData.length) {
                loadQuestion();
            } else {
                endGame();
            }
        }

        function endGame() {
            quizScreen.classList.add('hidden');
            endScreen.classList.remove('hidden');

            finalScore.textContent = score;
            const percentage = score / (shuffledQuizData.length * 10);
            
            trophyCase.innerHTML = '<p class="font-bold text-lg mb-2">獲得した称号</p>'; // Reset
            let trophies = [];

            if (percentage === 1) {
                trophies.push('🏆 パーフェクト');
            }

            if (percentage >= 0.8) {
                switch(currentCourse) {
                    case 'kitchen': trophies.push('🍳 キッチンマスター'); break;
                    case 'bathroom': trophies.push('🛁 水回りプロ'); break;
                    case 'living': trophies.push('🛋️ リビング名人'); break;
                    case 'all': trophies.push('🌟 総合大掃除マスター'); break;
                }
            }
            
            if (trophies.length > 0) {
                 trophies.forEach(trophy => {
                    const p = document.createElement('p');
                    p.textContent = trophy;
                    p.classList.add('text-gray-700');
                    trophyCase.appendChild(p);
                 });
            } else {
                trophyCase.innerHTML += '<p class="text-gray-500">今回はなし</p>';
            }


            if (percentage >= 0.8) {
                endMessage.textContent = "素晴らしい！あなたは大掃除のプロですね！";
            } else if (percentage >= 0.5) {
                endMessage.textContent = "あと一歩！この調子で知識を増やしましょう！";
            } else {
                endMessage.textContent = "このクイズで学んだ知識を活かして、大掃除頑張りましょう！";
            }
            
            // --- Set up Share Button ---
            const shareButton = document.getElementById('share-button');
            const siteUrl = 'https://aitool-lab.jp/master-cleaner-quiz/';
            
            let shareText = `【大掃除マスタークイズ】に挑戦！\n`;
            try {
              shareText += `コース: ${document.querySelector(`button[data-course="${currentCourse}"]`).innerText.trim()}\n`;
            } catch (e) {
                console.error("Could not find course button to get text.");
            }
            shareText += `スコア: ${score}点\n`;

            if (trophies.length > 0) {
                shareText += `獲得した称号: ${trophies.join(', ')}\n\n`;
            } else {
                shareText += "\n";
            }
            
            shareText += "あなたも知識を試してみよう！\n";
            
            const hashtags = "大掃除マスタークイズ";

            const twitterIntentUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(siteUrl)}&hashtags=${encodeURIComponent(hashtags)}`;

            shareButton.href = twitterIntentUrl;
        }
        
        function updateScoreDisplay() {
            scoreText.textContent = `スコア: ${score}`;
        }
        
        function updateProgressBar() {
            const progress = ((currentQuestionIndex) / shuffledQuizData.length) * 100;
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `進捗: ${currentQuestionIndex + 1} / ${shuffledQuizData.length}`;
        }
    //]]>
    </script>
</body>
</html>

大掃除マスタークイズ

クイズだけしたい方はこちら

Gemini Canvasでの制作過程

初見のプロンプト

年末の大掃除で役立つ汚れを落とす方法まとめて

まずはディープリサーチに調べてもらう

これがゲーム感覚で覚えられるサイトを作って欲しい

お掃除の情報の次はそのままサイト作成に進んでも良かったんですが、Geminiが独断でゲームの企画書をまず書いてくれました。

企画をもとにゲームができるサイト作って

CanvasをONにした状態でサイト作成！

サイトができたら、プレビュー画面を見ながらエラー修正やコンテンツを充実させていきます。今回はクイズを掃除する場所によってわけてもらったり、解答のあとで商品を紹介する段落を追加してもらいました。

おすすめの掃除道具をアソシエイト広告で紹介できるようにしたい
掃除する場所によってコースを選べるようにして

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

【最終プロンプト】ゲーム感覚で学べる「年末！大掃除マスタークイズ」サイト制作
## サイトの概要
年末の大掃除で役立つ知識を、クイズゲーム形式で楽しく学べるWebサイトを制作してください。利用者が自分のペースでじっくり考えられるように、時間制限（タイマー）は設けません。
デザインはポップで親しみやすく、スマートフォンでの操作性を最優先してください。

## 搭載する機能

1. コース選択機能

ゲーム開始画面で、以下の4つのコースから挑戦したいものを選択できるようにしてください。

🍳 キッチン編

🛁 お風呂・水回り編

🛋️ リビング・窓編

🏆 総合腕試し編 (上記3コースの全問題からランダムで出題)

2. クイズ機能

各問題は、1つの質問と4つの選択肢で構成してください。

回答を選択すると、正解・不正解が即座に表示されます。この時、カードが回転するような派手なアニメーションは不要です。シンプルで分かりやすい表示切り替えにしてください。

回答後の解説表示までの待ち時間を短くし、サクサクとテンポ良く進められるようにしてください。

3. 解説とアフィリエイト広告機能

正解・不正解の表示と共に、なぜその答えになるのかを解説する文章を表示してください。

解説の下に、その問題に関連する**「おすすめ掃除アイテム」**を紹介するアフィリエイト広告エリアを設けてください。

広告エリアには、「商品画像」「商品名」「簡単な説明文」「アフィリエイトリンクが設定された購入ボタン（"詳しく見る"など）」を配置してください。

4. 結果表示と称号システム

コースの全問題が終了したら、結果発表画面を表示してください。

結果画面には、最終的なスコア（例：60点満点中50点）を表示してください。

スコアに応じて、以下のような**「称号」**が獲得できるシステムを実装してください。

高得点でクリアした場合: 「🍳 キッチンマスター」「🛁 水回りプロ」など、コースに応じた称号。

全問正解した場合: 「🏆 パーフェクト」といった特別な称号。

獲得した称号は結果画面に表示してください。

5. X（旧Twitter）へのシェア機能

結果発表画面に、「結果をXでシェア」ボタンを設置してください。

このボタンをクリックすると、以下の情報を含んだ投稿文が自動で作成され、Xの投稿画面が開くようにしてください。

挑戦したコース名

最終スコア

獲得した称号

サイトへの誘導URL: 任意URL

ハッシュタグ: #大掃除マスタークイズ

## 技術・実装要件

HTML、CSS、JavaScriptのすべてを単一のHTMLファイルにまとめて作成してください。

スタイリングにはTailwind CSSを使用してください。

シェアボタンのアイコンにはFont AwesomeのXアイコンを使用してください。