AIと「おしゃべり」して
ゲームを作ろう！
プログラミング知識ゼロでOK。基本の「バイブコーディング」体験。
「一発で作る」必要はありません
AIでアプリを作るとき、最初から完璧な指示書（プロンプト）を書こうとしていませんか？
実は、今のAI開発の主流は「バイブコーディング（Vibe Coding）」。
AIとチャットで「あ、いい感じ！じゃあ次はこうして」「ちょっと違うな、こう直して」と、対話を重ねながら、バイブス（ノリや雰囲気）を合わせて作っていく方法です。これなら、専門用語を知らなくても大丈夫です。
1. 道具の準備：Geminiを使おう
GoogleのAI「Gemini」には、画面上でプレビューを見ながらコードを書ける「Canvas機能」があります。これを使うのが一番簡単です。
Gemini 3.0 Pro (おすすめ)
非常に賢く、複雑な指示も理解します。無料版でも1日数回まで使えます。
Gemini 2.5 Flash
爆速で動作します。Proの回数制限が来たらこちらでも十分作れます。
※Google AI Studioなど、無料で試せる開発環境は他にもあります。今後、様々なツールでの活用法も紹介していきます。
2. 実践：ブロック崩しを作ろう
ターン1：まずは土台を作る
あなた
「シンプルなブロック崩しのゲームをつくります。1つのファイルで動くようにしてください。」Gemini
「はい、ブロック崩しを作成しました。（コードを出力）」
まずはこれだけ。ここでプレビュー画面を見てみましょう。動きましたか？
でも、たぶん「ボールが速すぎる」とか「愛想がない画面だな」と思うはずです。
ターン2：バグを見つけて直させる
プレビューで遊んでみると、なんと玉がバーをすり抜けてしまいました！
でも慌てなくて大丈夫。AIに見たままを伝えれば直してくれます。
あなた
「玉が、バーをすり抜けました。修正してください」Gemini
「申し訳ありません。当たり判定の処理を修正しました。」ターン3：見た目を整える
正しく動くようになったら、最後はデザインです。
具体的なイメージを伝えてみましょう。
あなた
「最後に見た目をカッコよくしたいです。背景を宇宙っぽい暗い色にして、ブロックをカラフルにネオンのように光らせてください。」
Gemini
「了解です！CSSでデザインを修正し、サイバーパンク風の見た目に変更しました。」完成品：実際に遊んでみよう
以下のエリアで、実際に作成したブロック崩しが動きます。
（マウスまたはタッチでパドルを操作できます）
BLOCK BREAKER
スタートボタンを押して開始
まとめ：失敗しても大丈夫
AIは疲れません。「やっぱりさっきのに戻して」「もっとこうして」と何度頼んでも怒りません。
最初から正解を出そうとせず、粘土をこねるように、AIとのおしゃべりを楽しんでみてください。
それが、オリジナルの支援ツールを作る一番の近道です。