「イベントや忘年会で使う『抽選ツール』が急に必要になった…」そんな時、プログラミングの知識がなくても大丈夫です。今話題の「バイブコーディング（AIと対話しながらコードを書く手法）」を使えば、AIに日本語で指示を出すだけで、一瞬でオリジナルのツールが作れてしまいます。

今回は、私がGoogleのAI「Gemini」を使って作成した、WordPressの記事に貼り付けるだけで動く「高機能な抽選ツール」の作り方を全公開します。

プラグインは不要。ぜひ試してみてください。

抽選・くじ引きツール｜イベントや忘年会の番号くじ引きに（CSV出力対応）

ツールを利用したいだけの人はこちら

完成イメージ

まずは、AIと一緒にどのようなツールを作り上げたか、その機能を紹介します。

範囲指定: 「1〜100」など、好きな数字の範囲で抽選できます。
当選者・予備当選者の設定: 繰り上げ当選用の「予備人数」も設定可能です。
アニメーション演出: ドラムロール風の演出でイベントを盛り上げます。
データ保存: 結果をCSVでダウンロード、またはテキストでコピーできます。
スマホ対応: スマートフォンでも見やすいデザインです。

個人情報不要で安心

このツールはすべてブラウザ上（JavaScript）で動作します。サーバーにデータを送信・保存しないため、セキュリティ面でも安心してご利用いただけます。（※ページを再読み込みすると結果が消える仕様のため、CSVダウンロード機能を搭載しました）

HTML コードビューア

<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<div id="lottery-app-container" class="max-w-xl mx-auto my-8 p-6 border border-gray-200 rounded-xl bg-slate-50 shadow-sm font-sans text-gray-700">
  <h3 class="text-2xl font-bold text-center mb-6 text-gray-800">抽選ツール</h3>

  <!-- イベント情報 -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
    <div class="flex flex-col">
      <label class="block text-sm font-bold mb-1 text-gray-600">抽選名（任意）</label>
      <input type="text" id="lottery-event-name" placeholder="例：大抽選会" class="w-full p-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white shadow-sm transition">
    </div>
    <div class="flex flex-col">
      <label class="block text-sm font-bold mb-1 text-gray-600">開始日時（任意）</label>
      <input type="datetime-local" id="lottery-date" class="w-full p-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white shadow-sm transition text-gray-600">
    </div>
  </div>

  <!-- 番号範囲設定 -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
    <div class="flex flex-col">
      <label class="block text-sm font-bold mb-1 text-gray-600">開始番号</label>
      <input type="number" id="lottery-min" value="1" min="0" class="w-full p-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white shadow-sm transition">
    </div>
    <div class="flex flex-col">
      <label class="block text-sm font-bold mb-1 text-gray-600">終了番号</label>
      <input type="number" id="lottery-max" value="100" min="1" class="w-full p-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white shadow-sm transition">
    </div>
  </div>

  <!-- 人数設定 -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div class="flex flex-col">
      <label class="block text-sm font-bold mb-1 text-gray-600">当選人数</label>
      <input type="number" id="lottery-winners-count" value="1" min="1" class="w-full p-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white shadow-sm transition">
    </div>
    <div class="flex flex-col">
      <label class="block text-sm font-bold mb-1 text-gray-600">予備人数</label>
      <input type="number" id="lottery-reserves-count" value="0" min="0" class="w-full p-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white shadow-sm transition">
    </div>
  </div>

  <!-- 抽選ボタン -->
  <button id="btn-run-draw" class="w-full py-3 px-4 bg-blue-600 text-white font-bold text-lg rounded-lg shadow hover:bg-blue-700 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed mb-2" onclick="runLottery()">
    抽選する
  </button>
  
  <p id="lottery-error" class="hidden text-red-500 font-bold text-center mt-3 bg-red-50 p-2 rounded border border-red-200"></p>

  <!-- 結果表示エリア -->
  <div id="lottery-results" class="hidden mt-8 pt-6 border-t-2 border-dashed border-gray-300">
    
    <!-- 当選番号 -->
    <div class="mb-6">
      <span class="block text-lg font-bold mb-3 text-gray-800 border-l-4 border-blue-600 pl-3">🎉 当選番号</span>
      <div id="display-winners" class="flex flex-wrap gap-2"></div>
    </div>
    
    <!-- 予備番号 -->
    <div id="section-reserves" class="hidden mb-6">
      <span class="block text-lg font-bold mb-3 text-gray-700 border-l-4 border-gray-400 pl-3">予備番号</span>
      <div id="display-reserves" class="flex flex-wrap gap-2"></div>
    </div>

    <!-- アクションボタン -->
    <div class="flex flex-col sm:flex-row gap-3 mt-4">
      <button id="btn-copy-clipboard" class="hidden flex-1 py-2.5 px-4 bg-slate-500 text-white font-bold rounded-lg shadow hover:bg-slate-600 transition duration-300" onclick="copyResults()">
        結果をコピー
      </button>
      <button id="btn-download-csv" class="hidden flex-1 py-2.5 px-4 bg-green-600 text-white font-bold rounded-lg shadow hover:bg-green-700 transition duration-300" onclick="downloadCSV()">
        CSV保存
      </button>
    </div>
    <div id="copy-msg" class="text-center text-green-600 text-sm font-bold h-5 mt-2 opacity-0 transition-opacity duration-500">コピーしました！</div>
  </div>
</div>

<script>
  let currentWinners = [];
  let currentReserves = [];
  let animationInterval = null;

  // 初期化処理
  window.addEventListener('DOMContentLoaded', (event) => {
    // 必要に応じて初期値を設定
  });

  function runLottery() {
    // 入力値の取得
    const min = parseInt(document.getElementById('lottery-min').value, 10);
    const max = parseInt(document.getElementById('lottery-max').value, 10);
    const winCount = parseInt(document.getElementById('lottery-winners-count').value, 10);
    const resCount = parseInt(document.getElementById('lottery-reserves-count').value, 10);
    const errorMsg = document.getElementById('lottery-error');
    const resultsArea = document.getElementById('lottery-results');
    const downloadBtn = document.getElementById('btn-download-csv');
    const copyBtn = document.getElementById('btn-copy-clipboard');
    const drawBtn = document.getElementById('btn-run-draw');
    const reservesSection = document.getElementById('section-reserves');

    // リセット
    errorMsg.style.display = 'none'; // Tailwindのhiddenクラスの代わりにstyle操作で制御（またはclassList.add('hidden')を使用）
    errorMsg.classList.add('hidden');
    document.getElementById('copy-msg').style.opacity = '0';
    
    // バリデーション
    if (isNaN(min) || isNaN(max) || isNaN(winCount) || isNaN(resCount)) {
      showError('全ての項目に数値を入力してください。');
      return;
    }
    if (min >= max) {
      showError('終了番号は開始番号より大きくしてください。');
      return;
    }
    
    const totalPopulation = max - min + 1;
    const totalNeed = winCount + resCount;

    if (totalNeed > totalPopulation) {
      showError(`指定された範囲の数字の個数（${totalPopulation}個）に対し、当選・予備人数の合計（${totalNeed}人）が多すぎます。`);
      return;
    }
    if (winCount <= 0) {
      showError('当選人数は1人以上にしてください。');
      return;
    }

    // 抽選処理（計算）
    let pool = [];
    for (let i = min; i <= max; i++) {
      pool.push(i);
    }

    // シャッフル
    for (let i = pool.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [pool[i], pool[j]] = [pool[j], pool[i]];
    }

    currentWinners = pool.slice(0, winCount).sort((a, b) => a - b);
    currentReserves = pool.slice(winCount, winCount + resCount).sort((a, b) => a - b);

    // --- アニメーション準備 ---
    
    // UIを初期表示
    resultsArea.classList.remove('hidden');
    downloadBtn.classList.add('hidden');
    copyBtn.classList.add('hidden');
    drawBtn.disabled = true;
    drawBtn.textContent = '抽選中...';

    const winnersContainer = document.getElementById('display-winners');
    const reservesContainer = document.getElementById('display-reserves');
    
    winnersContainer.innerHTML = '';
    reservesContainer.innerHTML = '';

    // プレースホルダー作成（当選者）
    createPlaceholders(winnersContainer, winCount, false);

    // プレースホルダー作成（予備者）
    if (resCount > 0) {
      reservesSection.classList.remove('hidden');
      createPlaceholders(reservesContainer, resCount, true);
    } else {
      reservesSection.classList.add('hidden');
    }

    // --- アニメーション開始 ---
    const startTime = Date.now();
    const duration = 300; // 0.3秒間アニメーション

    if (animationInterval) clearInterval(animationInterval);

    animationInterval = setInterval(() => {
      // プレースホルダーの数字をランダムに書き換える
      updatePlaceholdersRandomly(winnersContainer, min, max);
      if (resCount > 0) {
        updatePlaceholdersRandomly(reservesContainer, min, max);
      }
    }, 50);

    // --- アニメーション終了 ---
    setTimeout(() => {
      clearInterval(animationInterval);
      
      // 最終結果を表示
      updatePlaceholdersFinal(winnersContainer, currentWinners);
      if (resCount > 0) {
        updatePlaceholdersFinal(reservesContainer, currentReserves);
      }

      // ボタン復帰
      drawBtn.disabled = false;
      drawBtn.textContent = '抽選する';
      downloadBtn.classList.remove('hidden');
      copyBtn.classList.remove('hidden');

    }, duration);
  }

  // スタイル定義（JavaScript内でクラスを付与）
  // isReserve: trueなら予備用スタイル、falseなら当選用スタイル
  function createPlaceholders(container, count, isReserve) {
    // 共通スタイル
    const baseClass = "inline-flex items-center justify-center min-w-[3rem] h-[3rem] px-3 bg-white border-2 rounded-full font-bold text-lg shadow-sm transition-transform duration-100 cursor-default";
    
    // 当選用スタイル: 青枠、青文字
    const winnerClass = "border-blue-600 text-blue-600";
    
    // 予備用スタイル: グレー枠、グレー文字、背景少しグレー
    const reserveClass = "border-gray-400 text-gray-500 bg-gray-50";

    const finalClass = `${baseClass} ${isReserve ? reserveClass : winnerClass}`;

    for (let i = 0; i < count; i++) {
      const span = document.createElement('span');
      span.className = finalClass; // Tailwindクラスを適用
      span.textContent = '?';
      // カスタムデータ属性で識別しやすくしても良いが今回は不要
      container.appendChild(span);
    }
  }

  function updatePlaceholdersRandomly(container, min, max) {
    const chips = container.children;
    for (let chip of chips) {
      const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
      chip.textContent = randomNum;
    }
  }

  function updatePlaceholdersFinal(container, finalNumbers) {
    const chips = container.children;
    for (let i = 0; i < chips.length; i++) {
      if (finalNumbers[i] !== undefined) {
        chips[i].textContent = finalNumbers[i];
      }
    }
  }

  function showError(msg) {
    const el = document.getElementById('lottery-error');
    el.textContent = msg;
    el.classList.remove('hidden');
    el.style.display = 'block'; //念の為
  }

  // --- クリップボードコピー機能 ---
  function copyResults() {
    if (currentWinners.length === 0) return;

    const eventName = document.getElementById('lottery-event-name').value.trim() || '抽選会';
    let eventDate = document.getElementById('lottery-date').value;
    if (eventDate) eventDate = eventDate.replace('T', ' ');

    let text = `【${eventName} 結果】\n`;
    if (eventDate) text += `実施日時: ${eventDate}\n`;
    text += `----------------------\n`;
    
    text += `\n🎉 当選番号 (${currentWinners.length}名)\n`;
    text += currentWinners.join(', ');

    if (currentReserves.length > 0) {
        text += `\n\n📝 予備番号 (${currentReserves.length}名)\n`;
        text += currentReserves.join(', ');
    }
    text += `\n----------------------\n`;

    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.left = "-9999px";
    document.body.appendChild(textArea);
    textArea.select();
    
    try {
        document.execCommand('copy');
        const msg = document.getElementById('copy-msg');
        msg.style.opacity = '1';
        setTimeout(() => { msg.style.opacity = '0'; }, 3000);
    } catch (err) {
        console.error('コピーに失敗しました', err);
        alert('コピーできませんでした。');
    }
    
    document.body.removeChild(textArea);
  }

  function downloadCSV() {
    if (currentWinners.length === 0) return;

    const eventName = document.getElementById('lottery-event-name').value.trim();
    let eventDate = document.getElementById('lottery-date').value;
    if (eventDate) eventDate = eventDate.replace('T', ' ');

    let csvContent = "";
    csvContent += `抽選名,${eventName}\n`;
    csvContent += `開始日時,${eventDate}\n`;
    csvContent += `\n`; 
    csvContent += "区分,番号\n";

    currentWinners.forEach(num => {
      csvContent += `当選,${num}\n`;
    });

    currentReserves.forEach(num => {
      csvContent += `予備,${num}\n`;
    });

    const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
    const blob = new Blob([bom, csvContent], { type: 'text/csv;charset=utf-8;' });
    
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    
    const now = new Date();
    const dateStr = now.getFullYear() +
                    ('0' + (now.getMonth() + 1)).slice(-2) +
                    ('0' + now.getDate()).slice(-2) + '_' +
                    ('0' + now.getHours()).slice(-2) +
                    ('0' + now.getMinutes()).slice(-2);
    
    let fileName = `当選者リスト`;
    if (eventName) {
        const safeEventName = eventName.replace(/[\\/:*?"<>|]/g, '_');
        fileName += `_${safeEventName}`;
    }
    fileName += `_${dateStr}.csv`;
    
    link.setAttribute("href", url);
    link.setAttribute("download", fileName);
    link.style.visibility = 'hidden';
    
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
</script>

作成ログ

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

Gemini Canvasでの制作過程

Gemini3.0になってからコードが複雑になり、高性能すぎてWordPressの投稿しようとするとセキュリティエラーになることが多くなりました。WordPressやGoogleサイトに作ったコード貼りたい人は「カスタムHTMLで投稿できるように作成して」と一言添えるとシンプルなコードを書いてくれるので成功しやすいです。

初見のプロンプト

抽選で使えるサイトを作りたい。ワードプレスのカスタムHTMLで投稿できるコードで作成して

条件
始まりと終わりの数字指定【デフォルトは１〜１００】
当選人数を設定
予備人数の数指定

ボタンを押すと当選番号が表示されCSVでダウンロードできるようにして。

これで、基本的な機能を持ったツールが出来上がりました。プレビュー画面を見ながら、さらに使いやすく微調整していきます。

管理機能を追加する

イベントで何度も抽選を行う場合、「どのファイルのデータだっけ？」と迷わないように、管理機能を追加してもらいました。

追加のプロンプト

ダウンロードしたときに何のイベントかわかりやすいよう、イベントの管理がしやすいように下記を追加して欲しい

CSVにも追加して
抽選名の指定【無記入OK】
開始日の指定【無記入OK】時刻も指定したい

アイディア出しと演出の強化

ここで行き詰まったら、AIにアイディアを聞いてみるのがコツです。自分では思いつかない機能を提案してくれます。

相談のプロンプト

他に追加した方がいいアイディアあれば教えて

Geminiからいくつか提案があり、その中から「結果のクリップボードコピー」と「抽選アニメーション」を採用することにしました。

追加のプロンプト

追加して

結果のクリップボードコピー
抽選アニメーション（演出）

最後の微調整（こだわり）

アニメーションが追加されましたが、少しテンポが悪かったため修正を依頼しました。また、ダウンロードファイル名も分かりやすい日本語に変更します。

修正のプロンプト

抽選アニメーションもう少し短くして
０.3秒にして

追加で修正
ダウンロードした時のファイル名は「当選者リスト」にして

まとめ

以上のステップで、プログラミング知識ゼロでも高機能な抽選ツールが完成しました。

AIを使ったツール作成は、「指示を出す→確認する→修正する」の繰り返しです。まるで優秀なアシスタントと一緒に仕事をしているような感覚で、楽しみながら作ることができます。

イベントや忘年会の番号くじ引きにぜひ利用ください。

役立つツールが欲しい時は、ぜひGeminiに頼んでみてください！

抽選・くじ引きツール｜イベントや忘年会の番号くじ引きに（CSV出力対応）

ツールを利用したいだけの人はこちら

Geminiに指示するだけ！抽選・くじ引きツールの作り方

完成イメージ

個人情報不要で安心

HTML コードビューア

作成ログ

Gemini Canvasでの制作過程

初見のプロンプト

管理機能を追加する

追加のプロンプト

アイディア出しと演出の強化

相談のプロンプト

追加のプロンプト

最後の微調整（こだわり）

修正のプロンプト

まとめ

【実録】70代父のスマホがウイルス感染？偽クリーナーアプリを生成AIと撃退した全手順

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

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

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

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