はじめに
ご挨拶
こんにちは。nakakoです。
この度、Googleから新たに発表されたGemini 3 Pro をフル活用して、「ConnectCorners」というWebで遊べるゲームアプリを作りました。
既存のAI開発ツールでは解決しきれなかった課題を、同時に公開された Antigravity や Nano Banana Pro でどう突破したのか。今回はそのアプリの内容や開発体験について紹介していこうと思います。
(ゲームのロゴ: Nano Banana Pro作)
記事の目的
- Gemini 3 Pro（およびAntigravityやNano Banana Pro）の実践的な魅力を発信すること
- 最新AIスタックを使った個人開発で得た知見を共有すること
作ったアプリの紹介
アプリ名
ConnectCorners（コネクトコーナーズ）
概要
[👉 アプリを遊んでみる ](https://connect-corners.com/)
※音が出るので注意！
※スマホ非対応
【ゲーム紹介】
- ポリオミノを使った陣取りパズルゲームです。
- プレイヤーは配置ルールに従って、できるだけ多くのピースを盤面に配置することを競います。
- スペシャルピースやボーナスパネルをうまく利用して一番ポイントを獲得した人が勝利！
- WebRTC (PeerJS) を使用しており、サーバーレスでオンラインマルチプレイにも対応しています。
デモ
(※皆様も遊んだことがあるかもしれない、あの名作ボードゲームからインスパイアされて作りました)
かわいいキャラクターやストーリーもたくさん！
推しポイント
【ゲーム編】
- キャラクターたちがかわいい（鼻血）
- アチーブメントを用意してやりこみ要素を加えた点
- BGMやSEを用意してなるべく「ゲームしてる感」を演出した点
【開発編】
- 設計書を一切用意せずに開発した
- Gemini3Proの強みである画像生成を使ってゲームの世界観演出した
技術スタック
せっかくGeminiを使うので今回の開発は「Googleフル活用」をテーマにしました。
主要開発ツール
| カテゴリ | ツール名 | 用途 |
|---|---|---|
| AI Model | Gemini 3 Pro | コード生成、ロジック相談、設計 |
| IDE | Antigravity | ブラウザベースの統合開発環境 |
| Assets | Nano Banana Pro | キャラクター、UI素材生成 |
| Others | Jules | サーバーレス実行環境 (Devin-like tool) |
※補完的に Claude 4.5 Sonnet も一部使用しました。
使用技術
- Framework: Next.js 16 (React 19)
- Language: TypeScript
-
Styling:
- Tailwind CSS v4
- Radix UI
- Lucide React
-
Animation:
- Framer Motion
- tw-animate-css
- Communication: PeerJS (WebRTC)
- Audio: use-sound
- Deployment: Firebase Hosting
開発の流れ（Geminiとの実際のやりとり紹介）
ここからは、実際にどのようにAIと対話して開発を進めたかを紹介します。
① Web上のGeminiとゲームのイメージやルールを一緒に考える
まずゲームのコンセプトを固めます。
私:
デザインとかで遊び心持たせて○○（某ボードゲーム）と差別化図りたいだけど、いい案ある？
Gemini:
遊び心を持たせ、デザインで差別化を図るための具体的なテーマ案と、それに合わせたタイトル案を提案します。
- 食べ物をテーマにしたデザイン
- 宇宙・SFをテーマにしたデザイン
- …
→ 世界観を「宇宙・SF」に決定◎
私:
ゲーム性のアイデアをください
Gemini:
- ピースの種類に応じたボーナス
- 盤面を使ったボーナス
- ゲーム終了時のボーナス
これらのアイデアを組み合わせることで、「角で繋ぐ」というシンプルなルールは維持しつつ、どのモジュール（ピース）から配置するか、どのエリアを狙うかという戦略的な深みが増し、新しいゲーム体験を提供できます。
→ 提案を全部採用◎
私:
このゲーム「Connect Corners」のキャラクターを考えたい。
世界観は宇宙空間で仲良く戦う四人。それぞれ友達。
年齢は高校生くらいで。性別は女性。
〇〇星人の〇〇（キャラクター名）みたいな感じで、簡単に性格と容姿についても補足を入れるように。
Gemini:
舞台は、銀河の辺境にある「ユニバース・ハイスクール」。彼女たちはそこの「戦略ゲーム部」に所属する仲良し4人組という設定です。プレイヤーカラー（青・赤・緑・黄）をイメージしています。
…
→ 全部採用◎（ゲーム内のキャラクター紹介文はGeminiの回答そのままです）
私:
これは私が作っているボードゲームのキャラクターたちです。
なぜ彼女らがピースバトルで戦っているのかをプレイヤーに伝えるためのストーリーを作成してください。以下設定を共有します。
（↑ひとつ前でGeminiが考えてくれた設定の回答コピペ）
Gemini:
ご提示いただいたキャラクター設定は非常に個性的で、それぞれの性格や戦略（攻撃型、守備型、トリッキー型など）がボードゲームのメカニクスとうまくリンクしそうな素晴らしい構成ですね。
「なぜ仲良しの4人が、他校の生徒と戦うことになったのか？」という導入ストーリーを作成しました。 ゲームの楽しげでポップな雰囲気（かつ少し熱い展開）を伝えるために、「交流戦」と「ある“ささやかな”野望」を組み合わせたストーリーをご提案します。
ストーリー案：『銀河の頂点は誰の手に？ 激突！プリン・ウォーズ』
- 平和な日常と、嵐の予感
…
→ 全部採用◎（こちらの回答もそのまま採用しているため、ゲーム内のストーリーで確認できます）
これにてゲームのシステムとデザインの方向性が決定しました
② Web上のGemini (Nano Banana Pro) にアセット作成依頼
ストーリーとキャラクターの内容が固まったので、次はNanoBananaに画像生成をお願いします。
キャラクター画像作成
私:
アニメスタイル。
背景無色透明。(※背景は透明っぽいだけで透明にはしてくれないので、あとで自分で透明化させる必要がある)
正面から見た画像。
頭の先からつま先まで描写。
（ここにGeminiが考えてくれたキャラクターの特徴コピペ）
Gemini (Nano Banana):
※ちなみにこの初期段階に生成したキャラクターの画像はNanoBananaが生成しています。本当はProの方に頼みたかったのですが間違えました…。
でもかわいいからOK！
私:
スタイルを維持したまま次のキャラ画像を生成して。
（ここにGeminiが考えてくれたキャラクターの特徴コピペ）
(以降、キャラクター分繰り返し)
ストーリー用挿絵の作成（一例）
1ページ目
私:
私が書いた文字に対する絵本の絵の部分をかいてください。
スタイルはクレヨン。（ただし落書きみたいにならないように。）
1ページ目
（Geminiが生成したストーリーのコピペ）
Gemini (Nano Banana Pro):
ストーリー内のキャラクターは勝手に補完してくれましたが、キャラクターをあらかじめ作ってあるのでそれに差し替えてもらいましょう。
私:
キャラクターはこちらのキャラに置き換えてください。
（生成したキャラクター画像4枚貼り付け）
Gemini (Nano Banana Pro):
机の上の盤面が見たことないゲームになっているので、ゲームのスクショを渡して差し替えてもらいます。（ちょうど盤面のコーディング作業が終わっていたため）
私:
> ゲームの盤面はこの画像みたく差し替えてください。（ピースが水色のものがありますが、これは緑色で描くこと）
Gemini (Nano Banana Pro):
（今気づきましたが、この時点だと黄色の子の手が三本ありますね…AI画あるある）
ちゃんとピースの色も変えてくれましたね！
(以下修正指示を繰り返して微調整)
いきなり理想の画像を生成しようとするのではなく、段階的に作っていくのが私流。
なぜかというと、生成した内容がイメージと違った場合、段階的に指示をしていると違った指示のみを編集して画像を再度生成できるから。
一気につくると、指示を修正したら全く別の画像になりかねない。…と思う。
2ページ目
私:
（Geminiが生成したストーリーのコピペ）
ストーリーを踏まえて、今生成した画風のまま、セレスティア女学院の生徒（オレンジ）が勢いよくドアを開けて、その後ろに水色、ピンク、紫の3人がいる構図で、下からのカメラアングルの絵を描いて。
Gemini (Nano Banana Pro):
構図はとてもいい！
あとはキャラクターを差し替えればよさそう
私:
（生成したキャラクター画像4枚貼り付け）
このドアを開けている画像のキャラクターたちを添付したキャラクターに差し替えてください。
髪の毛の色で差し替えるべきキャラクターを判断してください。
Gemini (Nano Banana Pro):
Good!
あいまいな指示でもここまで伝わる…！
タイトルロゴ作成
私:
（アプリのタイトル画面とキャラクター8人の画像添付）
CONNECT CORNERSというゲームを作りました。
今タイトル画面はCSSで作っていますが、この雰囲気に合ったタイトル用のロゴを作成してください。
こういったキャラクターもいます。
ロゴにミニキャラみたいなのをいれてもかわいいかもね。
Gemini (Nano Banana Pro):
ちゃんとミニキャラいれて作ってくれましたね…。優しい。
③ Antigravity上のGeminiと計画・実装・テスト
ここからが本番の実装フェーズです。
私はいままでClaudeCodeと一緒に開発していたのですが、その時はしっかりとした詳細設計書を用意してから実装に入っていました。
しかし、今回は設計書の類を一切用意せず、Antigravity内のGeminiとの対話のみで進めました。
私:
ゲーム作りたい。以下ゲームのルールを共有するので実装お願いします。
最初の手: 自分の色のマークがある角（コーナー）を埋めるように配置します。…
（Geminiと一緒に考えたゲームのルールをコピペ）
Gemini:
計画を立てました。確認してください（xxx_plan.md作成）
開発のサイクル
Antigravity内では、以下のようなサイクルで開発が進みます。
- Geminiに指示を出す（「〇〇の機能作って」「〇〇のデザイン変更して」等）
- Geminiが実装計画（Plan）を提示
- 計画のレビューをする。「User Review Required」が出たら要確認
- 問題なし → 「OK、この計画で実装お願いします」
- 問題あり → 「UIが崩れないように気をつけて」「この機能は不要」等コメント
- Geminiが計画を修正 or 実装開始
(例：修正された計画を確認)
以降1~4の操作を繰り返すだけでアプリが完成します。
その場の思いつきで追加したい要素をどんどんGeminiにお願いしていきます。
Gemini3Proの大容量のコンテキストウィンドウのおかげで、破綻することなくこちらの意図を理解してコーディングしてくれます。
番外編: Julesを使った開発
あまり知られていませんが、Google版Devinのような Jules (https://jules.google/) も活用しました。
GitHubと連携させておけば、「音量調整の機能作って」等とテキストを送るだけでAntigravity同様に実装してくれます（しかもブランチを切って）。通勤中などPCが開けない隙間時間に最適でした。
④ Firebaseにデプロイ
私:
このプロジェクトをFirebaseで静的ホスティングしたい
Gemini:
Next.config確認します～
以下指示に従ってアカウント作成してください～
指示に従ってコマンドを打ったりアカウント作成したりしてデプロイ完了です‼︎
Geminiの指示をなんでも鵜呑みにしないこと
自分でも公式のドキュメントや最新情報チェックしながら作業進めましょう
失敗談・苦労したこと
計画段階：思った通りの画像を出力するのが難しい
キャラクターの見た目が安定しなかったり、共有した画像がそのまま出てきたりと苦戦しました。
✅ 対応策
- 満足いく画像ができたら保存し、生成時に**「この画像のスタイルを維持して（参考にして）ください」**と画像を添付して指示する
- 言葉だけでなく、画像を提示して「こんな感じ」と伝える。（私はGoogleドライブにキャラクターや画像スタイルを指示する用の画像をストックして、それらを使って指示してました）
- 出力して「こういう指示が足りなかったんだ」と学び、次の画像ではきちんと指定する
- 「100点満点にこだわらない」（人間でも作画ミスはある！と割り切る）
実装段階：イメージ通りにならない・AIの劣化
長く開発しているとコンテキストが溜まり、コーディング性能が落ちたり、指示通りにならなくなることがありました。
✅ 対応策：1タスク1ウィンドウ
重要Tips: AgentWindowの切り替え
1つだけのウィンドウで全ての指示を出すのではなく、タスクごとに「AgentWindow」を切り替える運用に変えました。
- 「タスクA」完了 → 「＋」ボタンで新しいWindowへ
- 新しいWindowで「タスクB」を開始
これにより、AIのコーディング力が終始安定するようになりました。
また、Gemini 3 Proでどうしても解決しない時は、Antigravity上でモデルを Claude 4.5 Sonnet に切り替えることで、あっさり解決することもありました（適材適所！）。
まとめ
感想
初めて Antigravity × Gemini 3 Pro をフル活用して開発しましたが、非常に快適で楽しかったです。
これまで（Cursor + Claude）の開発では、後半になるにつれてAIの修正精度が落ちたり、意図しない破壊的変更が入ることに悩んでいました。しかしAntigravityは、計画を立てて修正方針を説明した上でコードを触ってくれるため、実装後半でも安定感が段違いでした。
画像生成まで含めて一つのエコシステムで完結する点は、個人開発において最強の武器になると感じています。
今後
Gemini3発表されてすぐ後にClaude Opus 4.5が発表されましたね。
Claude Opus 4.5 の実力はまだ未知数でとても気になるのですが、今回の開発体験があまりに良かったため、しばらくは Gemini 3 Pro を相棒に開発していこうと思います。
あと今回挑戦はしたけど私の実力不足で断念した「キャラクターボイス（TTS使用して）」の作成や動画や音楽も作ってみたいと思っています。（もちろんGeminiで！）
最後に
ここまで読んでいただきありがとうございました！
皆様もぜひ、Googleの最新ツールでの開発を体験してみてください。
Happy Hacking!