Gemini Canvas（バイブコーディング）を使って、オリジナル画像を使ったおみくじアプリを作成する方法をご紹介します。

今回のポイントは、「自分で用意した画像（作成ソフトなどで作ったもの）」を使って、独自性のあるおみくじを作ることです。

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>運命の恋のおみくじ</title>
    <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&family=Zen+Maru+Gothic:wght@400;700&family=Shippori+Mincho:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* ベース設定 */
        #love-fortune-app * {
            box-sizing: border-box;
        }
        #love-fortune-app {
            font-family: 'Zen Maru Gothic', sans-serif;
            color: #1f2937;
            line-height: 1.6;
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            padding: 1rem;
            text-align: center;
        }

        /* 背景ラッパー */
        .fortune-bg-wrapper {
            background-color: #fff0f5; /* Lavender Blush */
            background-image: radial-gradient(#ffdee9 2px, transparent 2px);
            background-size: 20px 20px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 20px 0;
        }

        #love-fortune-app .serif { font-family: 'Kiwi Maru', serif; }
        #love-fortune-app .mincho { font-family: 'Shippori Mincho', serif; }
        #love-fortune-app .hidden { display: none !important; }

        /* スタート画面 */
        .start-card {
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            border-radius: 24px;
            box-shadow: 0 10px 30px rgba(236, 72, 153, 0.15);
            padding: 2.5rem 2rem;
            max-width: 28rem;
            margin: 0 auto;
            border: 4px solid #fbcfe8;
        }

        .badge {
            display: inline-block;
            background-color: #ec4899;
            color: white;
            font-size: 0.75rem;
            padding: 0.25rem 0.8rem;
            border-radius: 9999px;
            margin-bottom: 0.8rem;
            font-weight: bold;
        }

        .input-group {
            text-align: left;
            margin-bottom: 1.5rem;
        }
        .input-label {
            display: block;
            font-size: 0.9rem;
            font-weight: bold;
            color: #db2777;
            margin-bottom: 0.5rem;
            text-align: center;
        }
        .name-input {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 0.5rem;
            border: 2px solid #fce7f3;
            font-size: 1.1rem;
            text-align: center;
            outline: none;
            transition: all 0.3s;
            background-color: #fff;
        }
        .name-input:focus {
            border-color: #ec4899;
            box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
        }
        .error-text {
            color: #ef4444;
            font-size: 0.85rem;
            margin-top: 0.5rem;
            height: 1.25rem;
            opacity: 0;
            transition: opacity 0.3s;
            text-align: center;
        }

        .primary-btn {
            width: 100%;
            background: linear-gradient(135deg, #f472b6, #ec4899);
            color: white;
            font-weight: bold;
            padding: 1rem;
            border-radius: 9999px;
            border: none;
            box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            font-size: 1.1rem;
        }
        .primary-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
        }
        .primary-btn:active {
            transform: scale(0.98);
        }

        /* グリッド */
        .omikuji-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            max-width: 48rem;
            margin: 0 auto;
        }
        @media (min-width: 640px) {
            .omikuji-grid {
                grid-template-columns: repeat(8, 1fr);
                gap: 1rem;
            }
        }

        .omikuji-card {
            position: relative;
            aspect-ratio: 2 / 5;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .omikuji-card:hover {
            transform: translateY(-8px) scale(1.05);
            z-index: 10;
        }
        .omikuji-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 6px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: box-shadow 0.3s;
        }
        .omikuji-card:hover img {
            box-shadow: 0 10px 15px rgba(236, 72, 153, 0.3);
        }
        .hover-number {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            border-radius: 6px;
            opacity: 0;
            transition: opacity 0.2s;
            backdrop-filter: blur(2px);
        }
        .omikuji-card:hover .hover-number {
            opacity: 1;
        }

        /* モーダル */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 10px;
            backdrop-filter: blur(5px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .washi-paper {
            background-color: #fcfaf2;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            max-width: 28rem;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            transform: scale(0.95) translateY(10px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border: 8px double rgba(220, 38, 38, 0.2);
        }
        .modal-overlay.active .washi-paper {
            transform: scale(1) translateY(0);
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            border: 1px solid #e5e7eb;
            font-size: 1.2rem;
            color: #666;
            cursor: pointer;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .close-btn:hover { background: #f3f4f6; }

        .result-content {
            padding: 2.5rem 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .tategaki {
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 0.15em;
            line-height: 1.8;
            height: 9rem;
            margin: 0 auto;
            font-size: 3.5rem;
            font-weight: 800;
            color: #dc2626;
            font-family: 'Shippori Mincho', serif;
        }

        .message-box {
            width: 100%;
            background-color: rgba(255,255,255,0.7);
            padding: 1.2rem;
            border-radius: 8px;
            border: 1px solid #fecaca;
            margin-bottom: 2rem;
            text-align: justify;
            font-size: 1rem;
            line-height: 1.8;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.8rem 1.5rem;
            width: 100%;
            font-size: 0.9rem;
            border-top: 1px solid #d1d5db;
            border-bottom: 1px solid #d1d5db;
            padding: 1.5rem 0;
            margin-bottom: 2rem;
        }
        .detail-row {
            display: flex;
            border-bottom: 1px dotted #d1d5db;
            padding-bottom: 0.4rem;
        }
        .detail-label {
            color: #db2777;
            font-weight: bold;
            width: 4rem; 
            font-size: 0.8rem;
            letter-spacing: 0.05em;
        }
        .detail-val {
            flex: 1;
            color: #374151;
            font-weight: 500;
        }

        .share-area {
            width: 100%;
            text-align: center;
            padding-top: 0.5rem;
        }
        .share-buttons {
            display: flex;
            justify-content: center;
            gap: 0.8rem;
            margin-bottom: 1.5rem;
        }
        .share-btn {
            display: flex;
            align-items: center;
            font-size: 0.8rem;
            padding: 0.6rem 1.2rem;
            border-radius: 9999px;
            color: white;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: transform 0.2s;
            font-weight: bold;
        }
        .share-btn:hover { transform: translateY(-2px); }
        .share-twitter { background-color: #000; }
        .share-line { background-color: #06C755; }
        .share-icon { width: 14px; height: 14px; margin-right: 6px; fill: currentColor; }
        
        .reset-btn {
            background: transparent;
            border: 1px solid #f87171;
            color: #ef4444;
            font-size: 0.8rem;
            padding: 0.6rem 2rem;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .reset-btn:hover { background-color: #fef2f2; }

        .fade-in { animation: fadeIn 0.8s forwards; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body style="margin:0;">

    <div class="fortune-bg-wrapper">
        <div id="love-fortune-app">
            
            <!-- 1. スタート画面 -->
            <div id="start-screen" class="start-card">
                <div style="margin-bottom: 2rem;">
                    <span class="badge">無料占い</span>
                    <h1 class="serif" style="font-size: 2rem; font-weight: bold; color: #be185d; margin: 0.5rem 0;">運命の恋のおみくじ</h1>
                    <p style="font-size: 0.9rem; color: #6b7280;">あなたの恋の行方を占います</p>
                </div>
                
                <div style="display: flex; flex-direction: column; gap: 1.2rem;">
                    <div class="input-group">
                        <label class="input-label">お名前</label>
                        <input type="text" id="username-input" placeholder="例：サクラ" class="name-input">
                        <p id="error-msg" class="error-text">名前を入力してください</p>
                    </div>
                    
                    <button id="start-btn" type="button" class="primary-btn">
                        運命を占う
                    </button>
                </div>
            </div>

            <!-- 2. 選択画面 -->
            <div id="selection-screen" class="hidden fade-in">
                <div style="text-align: center; margin-bottom: 2rem;">
                    <h2 style="font-size: 1.4rem; font-weight: bold; color: #be185d;">
                        <span id="display-name" style="font-size: 1.6rem; margin-right: 0.25rem;"></span>さんの運勢
                    </h2>
                    <p style="color: #4b5563;">直感で一枚選んでください</p>
                </div>

                <div class="omikuji-grid" id="omikuji-grid">
                    <!-- JSで生成 -->
                </div>
            </div>

            <!-- 3. 結果モーダル -->
            <div id="result-modal" class="modal-overlay">
                <div class="washi-paper" id="result-content">
                    
                    <button id="close-result-btn" type="button" class="close-btn">✕</button>

                    <div class="result-content mincho">
                        
                        <!-- 装飾 -->
                        <div style="position: absolute; top: 1.5rem; right: 1.5rem; width: 4rem; height: 4rem; border: 4px solid #f87171; border-radius: 50%; opacity: 0.15; transform: rotate(-15deg); pointer-events: none;"></div>

                        <div style="text-align: center; margin-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb; width: 100%; padding-bottom: 1rem;">
                            <p style="font-size: 0.8rem; color: #9ca3af; margin-bottom: 0.5rem; font-weight: bold; letter-spacing: 0.1em;">本日の恋愛運</p>
                            <h2 id="result-title" class="tategaki">大吉</h2>
                        </div>

                        <div class="message-box">
                            <p id="result-message" style="margin: 0;"></p>
                        </div>

                        <div class="detail-grid">
                            <div class="detail-row"><span class="detail-label">願望</span><span id="detail-wish" class="detail-val"></span></div>
                            <div class="detail-row"><span class="detail-label">待ち人</span><span id="detail-wait" class="detail-val"></span></div>
                            <div class="detail-row"><span class="detail-label">失せ物</span><span id="detail-lost" class="detail-val"></span></div>
                            <div class="detail-row"><span class="detail-label">方位</span><span id="detail-direction" class="detail-val"></span></div>
                            <div class="detail-row"><span class="detail-label">ラッキー</span><span id="lucky-item" class="detail-val"></span></div>
                            <div class="detail-row"><span class="detail-label">色</span><span id="lucky-color" class="detail-val"></span></div>
                        </div>

                        <div style="text-align: center; width: 100%; margin-bottom: 2rem;">
                            <p style="font-size: 0.8rem; color: #f472b6; font-weight: bold; margin-bottom: 0.4rem; border-bottom: 1px dashed #f472b6; display: inline-block; padding-bottom: 2px;">【 恋の歌 】</p>
                            <p id="love-quote" style="color: #4b5563; font-style: italic; font-size: 1rem; margin: 0; font-family: 'Kiwi Maru', serif;"></p>
                        </div>

                        <div class="share-area">
                            <p style="font-size: 0.75rem; color: #9ca3af; margin-bottom: 0.8rem;">– 運勢をシェア –</p>
                            <div class="share-buttons">
                                <button id="share-twitter" type="button" class="share-btn share-twitter">
                                    <svg class="share-icon" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                                    Xでポスト
                                </button>
                                <button id="share-line" type="button" class="share-btn share-line">
                                    <svg class="share-icon" viewBox="0 0 24 24"><path d="M12 2.5c-5.5 0-10 3.6-10 8 0 2.5 1.5 4.8 3.9 6.2-.2.7-.7 2.6-.8 3 0 0 .2.4.9.2s3-1.8 4.2-2.5c.6.1 1.2.2 1.8.2 5.5 0 10-3.6 10-8s-4.5-8-10-8z"/></svg>
                                    LINEで送る
                                </button>
                            </div>
                            
                            <div>
                                 <button id="reset-btn-footer" type="button" class="reset-btn">
                                    トップに戻る
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        (function() {
            var OMIKUJI_IMAGE_URL = 'https://aitool-lab.jp/wp-content/uploads/2025/12/fab55d53325695a0c22b5ecd58cd26fd-1.jpg';
            var SHARE_URL = 'https://aitool-lab.jp/love-fortune/';

            var fortunes = [
                { 
                    type: "大吉", 
                    message: "最高の恋が訪れる予感！片思いの人は勇気を出してアプローチを。カップルはより深い絆で結ばれるでしょう。運気は最高潮です。", 
                    item: "赤いリボン", color: "紅色", quote: "瀬を早み 岩にせかるる 滝川の われても末に 逢はむとぞ思ふ",
                    details: { wish: "叶う", wait: "来る", lost: "すぐ出る", direction: "東" }
                },
                { 
                    type: "大吉", 
                    message: "モテ期到来！？周囲からの注目度が急上昇中。自分磨きを怠らなければ、理想の相手と巡り会える千載一遇のチャンスです。", 
                    item: "香水", color: "金色", quote: "忍ぶれど 色に出でにけり わが恋は",
                    details: { wish: "必ず叶う", wait: "便りあり", lost: "高い所", direction: "南" }
                },
                { 
                    type: "中吉", 
                    message: "穏やかな幸せが待っています。焦らずゆっくりと関係を温めることが大切。笑顔が最高の武器になります。", 
                    item: "手作り菓子", color: "桜色", quote: "君がため 春の野に出でて 若菜つむ",
                    details: { wish: "時を待て", wait: "遅れる", lost: "家の中", direction: "西" }
                },
                { 
                    type: "中吉", 
                    message: "意外な場所に出会いがありそう。いつもは行かない場所へ出かけてみて。友達からの紹介も期待大です。", 
                    item: "映画券", color: "水色", quote: "巡り逢ひて 見しやそれとも 分かぬ間に",
                    details: { wish: "他人の助け有", wait: "来る", lost: "低い所", direction: "北西" }
                },
                { 
                    type: "小吉", 
                    message: "小さな幸せを見逃さないで。何気ない会話の中に恋のヒントが隠されています。聞き上手になると運が開けます。", 
                    item: "文庫本", color: "若草色", quote: "恋すてふわが名はまだき立ちにけり",
                    details: { wish: "小さな事叶う", wait: "音信あり", lost: "出にくい", direction: "東南" }
                },
                { 
                    type: "小吉", 
                    message: "今は自分を大切にする時期。無理な背伸びは禁物です。ありのままのあなたを好きになってくれる人が必ず現れます。", 
                    item: "蝋燭", color: "藤色", quote: "玉の緒よ絶えなば絶えねながらへば",
                    details: { wish: "今は耐えよ", wait: "来ず", lost: "友人宅", direction: "北" }
                },
                { 
                    type: "吉", 
                    message: "努力が実を結ぶ時。今まで頑張ってきたことが報われます。素直な気持ちを伝えることが幸せへの鍵となります。", 
                    item: "ハンカチ", color: "白", quote: "筑波嶺の峰より落つる男女川",
                    details: { wish: "努力次第", wait: "来る", lost: "身近にあり", direction: "南西" }
                },
                { 
                    type: "吉", 
                    message: "迷いがあるなら、信頼できる友人に相談を。客観的な意見が突破口になります。独りよがりにならないように注意。", 
                    item: "スマホ", color: "銀色", quote: "逢ひ見てののちの心にくらぶれば",
                    details: { wish: "相談せよ", wait: "遅く来る", lost: "出ず", direction: "西" }
                },
                { 
                    type: "吉", 
                    message: "再会の予感。懐かしい人との縁が復活するかも？過去の恋ではなく、新しい関係として向き合ってください。", 
                    item: "古写真", color: "茶色", quote: "有明のつれなく見えし別れより",
                    details: { wish: "旧きを温ねよ", wait: "偶然会う", lost: "鞄の中", direction: "北東" }
                },
                { 
                    type: "末吉", 
                    message: "今は準備期間。焦って結果を求めると空回りしそう。趣味や仕事に打ち込む姿があなたの魅力をアップさせます。", 
                    item: "靴", color: "紺色", quote: "嘆けとて月やは物を思はする",
                    details: { wish: "今は待て", wait: "来ない", lost: "忘れた頃に", direction: "南" }
                },
                { 
                    type: "末吉", 
                    message: "波乱含みの予感。相手の言葉の裏を読む必要がありそう。感情的にならず、冷静な判断を心がけてください。", 
                    item: "時計", color: "黒", quote: "忘らるる身をば思はず誓ひてし",
                    details: { wish: "用心せよ", wait: "障りあり", lost: "出ない", direction: "北西" }
                },
                { 
                    type: "末吉", 
                    message: "少しマンネリ気味かも。いつもと違うデートコースや服装で変化をつけてみて。新鮮な風を取り入れましょう。", 
                    item: "口紅", color: "珊瑚色", quote: "風をいたみ岩打つ波のおのれのみ",
                    details: { wish: "変化が必要", wait: "連絡せよ", lost: "店の中", direction: "東" }
                },
                { 
                    type: "凶後吉", 
                    message: "雨降って地固まる。喧嘩やトラブルがあっても、それを乗り越えれば強い絆になります。諦めない心が大切です。", 
                    item: "雨傘", color: "紫色", quote: "長からむ心もしらず黒髪の",
                    details: { wish: "後に叶う", wait: "遅れて来る", lost: "出る", direction: "南" }
                },
                { 
                    type: "凶", 
                    message: "今は動くべきではないかも。無理にアプローチすると逆効果。自分を見つめ直す静かな時間を持ちましょう。", 
                    item: "日本茶", color: "緑", quote: "夜をこめて鳥のそらねははかるとも",
                    details: { wish: "叶いにくい", wait: "来ない", lost: "出ない", direction: "北" }
                },
                { 
                    type: "大吉", 
                    message: "奇跡的な出会いの予感！運命の赤い糸はすぐそこに。直感を信じて行動すれば間違いありません。", 
                    item: "ペア小物", color: "虹色", quote: "久方の光のどけき春の日に",
                    details: { wish: "思うまま", wait: "すぐ来る", lost: "手元に", direction: "全方位" }
                },
                { 
                    type: "大大吉", 
                    message: "これ以上ない最強の恋愛運！意中の人と思いが通じ合ったり、プロポーズされたりするかも？自信を持って進んで！", 
                    item: "宝石", color: "白金", quote: "高砂の尾の上の桜咲きにけり",
                    details: { wish: "大成する", wait: "来る", lost: "出る", direction: "天" }
                }
            ];

            var currentUser = "";
            var shuffledFortunes = [];
            var currentResult = null;

            // シャッフル関数
            function shuffleArray(array) {
                var newArray = array.slice();
                for (var i = newArray.length - 1; i > 0; i--) {
                    var j = Math.floor(Math.random() * (i + 1));
                    var temp = newArray[i];
                    newArray[i] = newArray[j];
                    newArray[j] = temp;
                }
                return newArray;
            }

            function startOmikuji() {
                var input = document.getElementById('username-input');
                var errorMsg = document.getElementById('error-msg');
                
                if (!input || !input.value.trim()) {
                    if(errorMsg) errorMsg.style.opacity = "1";
                    return;
                }
                
                currentUser = input.value.trim();
                var displayNameEl = document.getElementById('display-name');
                if(displayNameEl) displayNameEl.textContent = currentUser;

                // スタート時にシャッフルして各カードの中身を決定
                shuffledFortunes = shuffleArray(fortunes);
                
                var startScreen = document.getElementById('start-screen');
                var selectionScreen = document.getElementById('selection-screen');
                if(startScreen) startScreen.classList.add('hidden');
                if(selectionScreen) {
                    selectionScreen.classList.remove('hidden');
                    selectionScreen.classList.add('fade-in');
                }

                generateGrid();
            }

            function generateGrid() {
                var grid = document.getElementById('omikuji-grid');
                if(!grid) return;
                grid.innerHTML = "";

                for (var i = 0; i < 16; i++) {
                    var card = document.createElement('div');
                    card.className = "omikuji-card";
                    // インデックスを紐付け
                    card.setAttribute('data-index', i);
                    
                    var img = document.createElement('img');
                    img.src = OMIKUJI_IMAGE_URL;
                    img.alt = "おみくじ";
                    img.onerror = function() {
                        this.src = 'https://placehold.co/100x250/ffb6c1/ffffff?text=恋'; 
                    };

                    var numberOverlay = document.createElement('div');
                    numberOverlay.className = "hover-number";
                    numberOverlay.textContent = i + 1;

                    card.appendChild(img);
                    card.appendChild(numberOverlay);
                    grid.appendChild(card);
                }
            }

            function openResult(index) {
                if (index === undefined || index === null) return;
                currentResult = shuffledFortunes[index];

                if(!currentResult) return;
                
                var titleEl = document.getElementById('result-title');
                if(titleEl) titleEl.textContent = currentResult.type;
                
                var personalizedMsg = currentResult.message.replace("あなた", currentUser + "さん");
                var msgEl = document.getElementById('result-message');
                if(msgEl) msgEl.textContent = personalizedMsg;
                
                var itemEl = document.getElementById('lucky-item');
                var colorEl = document.getElementById('lucky-color');
                var quoteEl = document.getElementById('love-quote');
                if(itemEl) itemEl.textContent = currentResult.item;
                if(colorEl) colorEl.textContent = currentResult.color;
                if(quoteEl) quoteEl.textContent = currentResult.quote;

                var wishEl = document.getElementById('detail-wish');
                var waitEl = document.getElementById('detail-wait');
                var lostEl = document.getElementById('detail-lost');
                var dirEl = document.getElementById('detail-direction');
                if(wishEl) wishEl.textContent = currentResult.details.wish;
                if(waitEl) waitEl.textContent = currentResult.details.wait;
                if(lostEl) lostEl.textContent = currentResult.details.lost;
                if(dirEl) dirEl.textContent = currentResult.details.direction;

                var modal = document.getElementById('result-modal');
                if(modal) {
                    modal.classList.add('active');
                }
            }

            function closeResult() {
                var modal = document.getElementById('result-modal');
                if(modal) {
                    modal.classList.remove('active');
                }
            }

            function resetApp() {
                closeResult();
                setTimeout(function() {
                    var selScreen = document.getElementById('selection-screen');
                    var stScreen = document.getElementById('start-screen');
                    var uInput = document.getElementById('username-input');
                    var err = document.getElementById('error-msg');

                    if(selScreen) selScreen.classList.add('hidden');
                    if(stScreen) stScreen.classList.remove('hidden');
                    if(uInput) uInput.value = "";
                    if(err) err.style.opacity = "0";
                }, 300);
            }

            function shareTwitter() {
                if (!currentResult) return;
                var br = String.fromCharCode(10);
                var amp = String.fromCharCode(38);
                var text = '【恋のおみくじ】' + currentUser + 'さんの運勢は「' + currentResult.type + '」でした！' + br + 'ラッキーアイテム：' + currentResult.item + br + '#恋のおみくじ #運命の恋';
                var url = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text) + amp + "url=" + encodeURIComponent(SHARE_URL);
                window.open(url, '_blank');
            }

            function shareLine() {
                if (!currentResult) return;
                var br = String.fromCharCode(10);
                var amp = String.fromCharCode(38);
                var text = '【恋のおみくじ】' + currentUser + 'さんの運勢は「' + currentResult.type + '」でした！' + br + 'ラッキーアイテム：' + currentResult.item;
                var url = "https://social-plugins.line.me/lineit/share?url=" + encodeURIComponent(SHARE_URL) + amp + "text=" + encodeURIComponent(text);
                window.open(url, '_blank');
            }

            document.addEventListener('click', function(e) {
                var target = e.target;
                
                if (target.closest('#start-btn')) {
                    startOmikuji();
                }
                else if (target.closest('#close-result-btn')) {
                    closeResult();
                }
                else if (target.closest('#reset-btn-footer')) {
                    resetApp();
                }
                else if (target.closest('#share-twitter')) {
                    shareTwitter();
                }
                else if (target.closest('#share-line')) {
                    shareLine();
                }
                else if (target.closest('.omikuji-card')) {
                    var card = target.closest('.omikuji-card');
                    var index = card.getAttribute('data-index');
                    openResult(index);
                }
                else if (target.classList.contains('modal-overlay')) {
                    closeResult();
                }
            });

        })();
    </script>
</body>
</html>

作成ログ

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

恋のおみくじ｜名前で占う今日の恋愛運＆ラッキーアイテム

おみくじだけやりたい人はこちら

Gemini Canvasでの制作過程

まずは、最低限のイメージを伝えます。今回は「ユーザーが自分で引くカードを選べる」という、おみくじ本来の楽しさを再現するため、「16枚の裏返し画像から好きなものを選ぶ」という仕様にしました。

実際に使用したプロンプト（指示文）は以下の通りです。

最初のプロンプト

おみくじ作成して
汎用性ある感じで

名前入力欄
１６通り

恋みくじ
１６枚おみくじ並べて選べる

おみくじの画像素材
https://aitool-lab.jp/wp-content/uploads/2025/12/17fab094da4769ffebe5449a84eecae6.jpg

プレビュー画面を見ながら微調整していく

ベースができたら、右側のプレビュー画面を見て動作を確認します。ここで重要なテクニックがあります。

「他に追加したほうがいいアイデアがあれば、チャット欄で教えて」

とAIに投げかけてみることです。

他に追加した方がいいアイディアはあればチャット欄で教えて。

プロンプトのポイント

「チャット欄で教えて」と指定しないと、AIが気を利かせて新機能を勝手にコードに盛り込んでしまうことがあります。一度「会話」のフェーズを挟むことで、本当に必要な機能だけを選んで追加することができます。

シェア・拡散機能の追加

AIとの相談の結果、今回は「SNSシェア機能」を追加することにしました。

シェア・拡散機能追加

ページのURL
https://aitool-lab.jp/love-fortune/

完成！

名前を入力する
好きなおみくじ（画像）を選ぶ
結果をシェアする

これらすべての機能が揃った、イメージ通りのおみくじツールがあっという間に完成しました！

【2026午年】開運！馬みくじ

2026年午年の運勢を無料診断！名前と日付から導き出される「今日の運勢」と、あなたを守護する「ラッキー馬（芦毛・ペガサスなど）」を判定します。勝負運、待ち人、ラッキー馬番まで詳細にアドバイス。大吉を引き当てて、素晴らしい一年を駆け抜けよう！

戦慄の毒舌みくじ

今日の運勢を「毒舌」で診断！名前を入力するだけで、辛口AIがあなたの未来を容赦なく予言します。大吉でも皮肉たっぷり、大凶なら絶望的。メンタルが弱い方はご遠慮ください。SNSでのシェア率No.1を目指す、戦慄のエンタメ占い。【完全無料】

【Gemini Canvas】オリジナル画像で「おみくじアプリ」を作る方法！たった10分で完成

HTML コードビューア

作成ログ

Gemini Canvasでの制作過程

最初のプロンプト

プレビュー画面を見ながら微調整していく

シェア・拡散機能の追加

完成！

【Geminiに指示するだけ】10分で完成！チェキ風画像メーカーの作り方

Gemini 写真加工プロンプト図鑑！家族写真がアートに変わる！？｜Nano-Banana【コピペOK/随時更新中】

Gemini 画像加工プロンプト図鑑！1枚のイラストを劇的アレンジ｜Nano-Banana【コピペOK/随時更新中】

プロンプトの書き方完全ガイド｜「ざっくり」でOK？2025年最新の5要素とバイブコーディングの極意

５分で完了「生成AI活用レベル診断」