Gemini Canvasを活用した新しい開発スタイル「バイブコーディング」の制作過程を解説。Webゲーム『洗濯の王子様』を題材に、AIとの対話からコードが生まれる様子を具体的に紹介。AIコーディングのリアルな事例です。
HTML コードビューア
ゲームだけしたい方はこちら
作成ログ
完成までの作成時間：1時間
完成までのチャットでのやり取り回数：15回
Gemini Canvasでの制作過程
初見のプロンプト
こんなゲームができるサイトが作りたい。まずは選択の汚れを落とすための方法とか下記のゲームを作る上で必要な情報を集めて
『ファッションレスキュー！洗濯の王子様』
衣類の正しいお手入れ方法を学ぶ、シミュレーションゲームを作ってほしい
見分け方: 服の「洗濯表示タグ」を読み解いて、素材（綿、ウール、シルクなど）や洗い方（洗濯機OK、手洗いのみ、漂白剤の可否など）を見分けるクイズ。
仕分け: 「白い服」「色の濃い服」「デリケートな服」などを正しく洗濯カゴに仕分けるパズル。間違えると服が色移りしたり、縮んでしまったりする演出で失敗も学べます。
シミの種類（醤油、コーヒー、泥など）を見分けて、正しい落とし方を選ぶミニゲームもあります。ディープリサーチに調べてもらう
この情報をもとにゲームができるサイト作って
プレビュー画面の左下にエラーが発生しましたとでたら、最優先で【エラー修正】を押して修正してもらう。その後も、プレビュー画面見ながら機能の追加やエラー修正をしていく
ステージ２を作って
ステージ３を作って追加できそうなアイディアが浮かばない時はGeminiに聞いて、良いものがあれば選んで追加してもらう。
このサイトもっと充実させたい
いや、マイアバターいらん。消して
各ステージの問題をさらに増やす
シェアボタンを作って欲しい
何問あるのかわかるようにして
汚れ落とす早見表みたいなのが欲しい最後にゲーム内で表示する画像を自分のサーバーにアップして画像のURLをGeminiに渡してはめ込んでもらって完了！
画像を用意したからコードに埋め込んで
漂白NG
https://aitool-lab.jp/画像のパス
白のタオル
https://aitool-lab.jp/画像のパス
他過程をまとめたプロンプト
概要
ユーザーが衣類の正しい手入れ方法を楽しく学べる、シミュレーションゲームのWebサイト「ファッションレスキュー！洗濯の王子様」を制作してください。
サイトは単一のHTMLファイルで構成し、Tailwind CSSとJavaScriptを使用して、レスポンシブデザインに対応させてください。
サイト構成とデザイン
全体デザイン:
清潔感のある色合いを基調とし、親しみやすい丸みのあるフォントを使用してください。
カードやボタンには、マウスオーバー時に浮き上がるような滑らかなアニメーションを適用してください。
スマートフォンでも快適にプレイできるよう、レスポンシブ対応を徹底してください。
メインメニュー画面:
ゲームのタイトル「ファッションレスキュー！洗濯の王子様」を表示してください。
以下の3つのステージへ進むための、クリック可能なゲームカードを設置してください。
ステージ1: 洗濯表示クイズ
ステージ2: 仕分けパズル
ステージ3: シミ抜きチャレンジ
後述する「シミ抜き早見表」をモーダルウィンドウで表示するためのボタンを設置してください。
ゲームステージの仕様
共通仕様:
各ステージのプレイ画面上部には、問題の進行状況がわかるカウンター（例: 「3 / 8 問」）を表示してください。
ゲーム開始時に、問題の順番がランダムにシャッフルされるようにしてください。
ステージ1: 洗濯表示クイズ
洗濯表示の画像（または絵文字）を見て、正しい選択肢を選ぶ4択クイズ形式にしてください。
回答後、すぐに正解・不正解が分かり、正解の選択肢がハイライトされるようにしてください。
問題には、以下のような内容に対応する、開発者が用意した洗濯表示の画像を使用してください。
「漂白NG」を表すマーク
「日陰での吊り干し」を表すマーク
「アイロンは中温まで」を表すマーク
「ドライクリーニング可能」を表すマーク
「タンブル乾燥可能」を表すマーク
「アイロン不可」を表すマーク
画像がない問題（例：「デリケートなブラウスの洗い方」）では、服の絵文字 👚 などを代わりに使用してください。
ステージ2: 仕分けパズル
衣類をドラッグ＆ドロップで正しい洗濯カゴに仕分けるゲームにしてください。
洗濯カゴは「白物用」「色柄物用」「デリケート用」の3種類を用意してください。
正解・不正解を視覚的なフィードバック（色の変化、震えるアニメーション等）で表現してください。
問題には、衣類の絵文字や、開発者が用意した衣類のイラスト画像（例：白いタオル）を使用してください。
ステージ3: シミ抜きチャレンジ
シミの種類に合った正しいアイテムを選ぶ、4択のミニゲームにしてください。
最重要: 回答後、正解・不正解に関わらず、「なぜそのアイテムが正しいのか」という詳しい解説を必ず表示してください。
その他の機能
結果表示画面:
各ステージクリア後に、スコア（例: 8 / 10）と、スコアに応じたメッセージ（「パーフェクト！」など）を表示してください。
「メニューに戻る」ボタンを設置してください。
シェアボタン:
結果をX（旧Twitter）でシェアできるボタンを設置してください。
シェアされるテキストには、ゲーム名、ステージ名、スコアを含めてください。
シェア機能に含まれるURLは、開発者が指定するゲームの公開ページのURLに設定できるように、コード内でURLを保持する変数を分かりやすく用意してください。（例: const shareUrl = "ここにあなたのサイトURL";）
シミ抜き早見表:
メインメニューのボタンからモーダルウィンドウで表示してください。
ステージ3に出てくる全てのシミについて、「シミの種類」「効果的なアイテム」「落とし方のコツ」を一覧できる表形式にしてください。
デザイン: 文字が大きくなりすぎないよう、フォントサイズを調整し、一覧性と可読性を高めてください。