【AI×バイブコーディング】プログラミング知識ゼロの私がクイズゲームを作ってみた話

資格を取れば収入アップにつながるとわかっていても、なかなか勉強が続かない…。

そこで思いつきました。

　「AIに資料を投げて、クイズを作ったら覚えやすいかも！」

そんなノリで、クイズゲームを作ってみることにしました。

私は、プログラミングの知識ゼロ。GitHubも未経験。
ChatGPTには課金していますが、今回はすべて無料のAIツールでチャレンジ。

Gemini 2.5Pro に資料のPDFをアップロード

Geminiの左上にある新規ページを開きます。グレーアウトしている場合は新規図面になっています。

真ん中下の＋をクリックして、ファイルからアップロードからPDFファイルを選択するか

□の枠内にFDFをドラックアンドドロップして、クイズを作るのに必要なPDFをアップロードする。

Geminiにやって欲しい指示を出す

“これを元にブラウザで動く5択ゲームを作って”　とと雑な指示を文字で打ち込みEnter

何故か説明が英語で表示されてしまいましたが、Gemini君がゴリゴリHTML（ネット上のページの“設計図”）のコードを書いてくれました。

英語表記された時は、「日本語にして」と打てば日本語に変更してくれます。

日本語訳↓

ゲームをプレイするには、以下のコードをコピーしてHTMLファイル（例: quiz-game.html）として保存してください。その後、そのファイルを最新のウェブブラウザで開いてください。

プレイ方法

・コードを保存: 下の枠内にあるコードをすべてコピーしてください。

・ファイルを作成: テキストエディタ（Windowsのメモ帳やMacのテキストエディットなど）を開き、コードを貼り付けて、.htmlの拡張子を付けてファイルを保存してください。

・ブラウザで開く: コンピューターに保存したファイルを見つけ、ダブルクリックしてウェブブラウザ（Chrome、Firefox、Edgeなど）で開いてください。

・クイズを開始: 「クイズ開始」ボタンをクリックして、質問に答えてください。

作成したHTMLを.htmlの拡張子で保存

Geminiの指示に従い、HTMLの右上の□（コピー）をクリックして、HTMLをコピーしてWindowsのメモ帳を開いて貼り付けます。

ファイル→名前を付けて保存で　自分のPCに保存

ファイルの種類：全てのファイル　にして　

ファイル名：quiz-game.html　で保存

出来たファイルは私の場合Edgeに紐付け（ダブルクリックすると開く）されていたのでそのままダブルクリック

chrome等の別のブラウザで開きたい場合は、quiz-game.htmlを選択して右クリックの”プログラムから開く”　でchromeを選択

保存したquiz-game.htmlをブラウザで開いて動作確認

Edgeで開くとそれなりの見た目が出来ています。凄い！！たった一行のあんな雑な指示で見た目もちゃんとしてる✨✨✨

スタートを押してクイズをスタートしようとしましたが、画面が動かない。

よくある事です。

再度Geminiに戻り

「表紙から動かんよ」という、かなり雑でバリバリの博多弁で入れても

しっかり失敗した原因と修正したHTMLを書き直してくれました。

ホントAI賢い！好き♡

再度　quiz-game.html　を上書きしてブラウザで開くと・・

前回と同じ現象でスタートを押しても、うんともすんとも動きません

再度「スタート出来ん」と打つと

解決のためのステップと新しいコードが出たので

解決のためのステップをよく見て、間違いが無い事を確認して、コードを貼り付けてブラウザで開くと

無事にクイズがスタート！！

ただ、クイズをやっていると

「毎回正解が一番上に出る」という、クイズとして致命的な不具合が発覚！

これもGeminiに修正をお願いすると、しっかり対応してくれました。

※AIは一発で正解を出すことは少なく、やり取りを重ねて完成度を上げていくイメージです。
うまくいかないときはChatGPTやClaude、DeepSeekなど他のAIにコードを貼って直してとお願いすると、解決の可能性が高まります。

作ったゲームをネットで公開するには？

この時点で、Gemini2.5proの無料枠がもう終わってしまいました（24時間経ったらまた使えます）

出来上がったゲームをPCやスマホからでもできるようにするには、どうやってやって良いか見当もつかなかったので、出来上がったコードをアップしてClaudeで聞いてみました。

GitHubが最も簡単でオススメだという事でGitHubでアップロードしていきます。

GitHub Pages に公開する手順

GitHubアカウントを作成

GitHub.com にアクセス「Sign up」をクリックユーザー名、メールアドレス、パスワードを入力メール認証を完了

私は何故か？昔にGitHubのアカウントだけは持っていたようです（GitHubで何かをした事はありません）

新しいリポジトリを作成

GitHubにログイン後、右上の「+」→「New repository」Repository

※↓の画像はノウハウ図書館で投稿するために再度ログインしている為少し表示が変わっています、初めてやった時は↑（右上の「+」→「New repository」Repository ）になっていました。

name に quiz-game（任意の名前でOK）

Public を選択（重要！）

「Add a README file」にチェック

「Create repository」をクリック

HTMLファイルをアップロード

作成されたリポジトリページで「Add file」→「Upload files」

あなたの quiz-game.html をドラッグ&ドロップ

ファイル名を index.html に変更（重要！）下部の「Commit changes」をクリック

GitHub Pagesを有効化

リポジトリページで「Settings」タブをクリック

左サイドバーの「Pages」をクリック

Source で「Deploy from a branch」を選択Branch で「main」を選択「Save」をクリック

公開完了！

30分後位経つと、以下のURLでアクセス可能になりました！

https://stan-nats1004.github.io/quiz-game/

補足

GitHubは英語表記なので、ブラウザの翻訳機能をオンにするとスムーズ。

今回はCloudの指示が英語表記だったので画像はそのままにしていますが

GitHubはALL英語で分かりにくいので、右上の日本語翻訳をオンにすると単語の内容が解って進めやすいです。

わからないときは、スクショをAIに投げて「わからん」と言えばOK！

私自身、全くプログラミング知識が無いので解らなくなたら、ChatGPTや他のAIにスクショを貼って「解らん」とか「先に進めん」と雑に投げても、AIはちゃんと答えてくれます。100％の正解でなくても誠実に答えてくれます。人間相手にこんな事したら絶対に嫌われるのに　AI優しすぎる♡

課金すればできることが広がり、ビジネスやDXの可能性も広がります。

まとめ：AIは優しすぎる♡

先頭にも書きましたが、AIは同じ質問をしてもその時々によって違う内容になったり、ぐるぐると同じことをして解決できない時もあります。内容によっては実際自分で調べた方が早い時もあります。翌日再挑戦するとすんなり正解を出してくれる事もあります。

ゲーム感覚で、諦めず楽しんでAIを触ってみて下さい。

次回はもっと内容の濃いゲームに挑戦しようと思います！

つたない文章を最後まで読んでいただいてありがとうございました。