非エンジニアがAI個人開発に挑戦!GeminiとAntigravityを活用したシマエナガアプリの作成手順を完全公開

AI・Gemini活用

この記事では、プログラミング未経験の非エンジニアが、2つの生成AI(GeminiとGoogle Antigravity)を駆使して「シマエナガ満員電車アプリ」を個人開発・公開するまでの全手順を公開します。

【この記事でわかる3つのこと】

  • 非エンジニアでもAIを使えばWebアプリが作れるという事実
  • GeminiとAntigravityを組み合わせた最強の開発手順と、エラーを乗り越えるコツ
  • 作成したアプリを全世界に公開する(デプロイ)方法

結論、非エンジニアでもAIを使えば「シマエナガ満員電車アプリ」は作れる!

結論から言うと、コードが一切書けなくても、AIを上手く役割分担させて活用すれば自分だけのオリジナルアプリを作ることは十分に可能です。

実際に私が開発したのがこちらのアプリです。(PCのブラウザでお試しください)
👉 [シマエナガ満員電車アプリで遊んでみる]

普段はハイブリッド車の電池開発という、ITやプログラミングとは全く無縁の世界で働いている私ですが、AIの力だけで「物理演算(Matter.js)」を使ったブラウザゲームを完成させることができました。

非エンジニアがAIアプリ開発を始める前に知るべき3つのこと

プログラミングの勉強から始める必要はありません。AI時代の個人開発で重要なのは以下の3つです。

1. 複数のAIを使い分ける(アイデア出しと実行の分離)

1つのAIにすべて任せるのではなく、「どんなアプリにするか相談するAI(今回はGemini)」と、「実際にコードを書いて動かし、修正するAI(今回はAntigravity)」を分けるのが、スムーズな開発のコツです。

2. コードが読めなくてもOK!公開ツールの基本

生成されたコードの意味が完璧に分からなくても大丈夫です。大切なのは、AIツールの使い方を知っておくことです。私も今回の開発にあたり、プログラミングの勉強はしませんでしたが、Antigravityの使い方など最低限の知識は身に着けました。

3. 完璧を求めず、まずは「動くもの」を作るマインド

最初から完璧なアプリを目指すと挫折します。まずは「画面に四角形が表示されるだけ」でもいいので動くものを作り、そこからAIと相談しながら少しずつ機能を足していくアプローチが最強です。

実録!シマエナガ満員電車アプリができるまでの全ステップ

ここからは、実際に私がアプリを完成させるまでに踏んだステップと、リアルな失敗談を公開します。

ステップ1:Geminiでアイデア出しと設計の壁打ち

最初は「上からシマエナガを落として、箱の中に貯めていく物理演算ゲームを作りたい」というざっくりしたアイデアからスタートしました。
まずはGeminiに相談してアイデアを練ります。すると「HTML5 Canvas」と「Matter.js」という物理演算ライブラリを使えばいける!という具体的な設計方針と、ベースとなる考え方を提案してくれました。

ステップ2:Antigravityで実行・コード生成とエラー修正(ここが本番!)

Geminiで固まった方針をもとに、ここからはGoogle Antigravityを使って実際の開発を進めます。Antigravityに指示を出してコードを生成し、実行して動きを確かめていきます。

もちろん、一発で完璧に動くことは稀です。
実際、開発途中で「文字以外何も表示されなくなる」という真っ白な画面のバグに遭遇しました。しかし、焦らずに「この部分でエラーが出た」「画面が真っ白になった」とAntigravityにそのまま伝えると、すぐに修正コードを提案してくれました。以下実際に修正してくれた様子。

そこからAntigravityを使って、さらに機能をゴリゴリアップデートさせていきました。

  • 物理演算でシマエナガが重なる挙動の微調整
  • 電車の外に落ちたシマエナガをカウントしないロジックの修正
  • 10%の確率で通常の5倍デカい「デブシマエナガ」が出現する機能
  • シマエナガが100匹に乗車すると発車する演出

先ほどの修正と同じ形で、どのような機能を追加したいのかを伝えるだけで実際にその機能が追加されました。
自分のアイデアがAIの力でみるみる形になっていく感覚は、本当に感動します!

ステップ3:Vercelを使ったネットへの公開(デプロイ)

アプリがローカル(自分のPC上)で動くようになったら、次は世界中の人に遊んでもらうための公開作業です。
今回は「Vercel」というサービスを使い、Githubと連携させてサクッと公開しました。

非エンジニアがAI個人開発でよくあるQ&A

AIを使った開発に挑戦したい初心者の方に向けて、よくある疑問をまとめました。

Q. プログラミングの知識は本当にゼロでいいの?
A. はい、ゼロで始められます。エラーが出ても、エラーメッセージや「今画面がどうなっているか」をそのままAntigravityに丸投げすれば、解決策を教えてくれます。冒頭にも記載しましたが、プログラミングの知識よりAIツールの知識のほうが必要になると考えています。

Q. 開発にかかる費用や時間はどれくらいだった?
A. 基本的な開発環境やVercelでの公開は「無料」でできます。時間は機能へのこだわり次第ですが、簡単なモック(試作品)なら数時間で完成します。

Q. エラーが出て行き詰まった時はどうやって解決した?
A. 何度AIに聞いても直らない時は、「一度前の動いていた状態のコードに戻す」か、「AIのチャット履歴を新しくして、今のコードを全部読ませて再質問する」のがおすすめです。

まとめ:非エンジニアもAIで「作り手」になれる時代!次にやるべきこと

いかがだったでしょうか?
「シマエナガ満員電車アプリ」の開発を通じて、非エンジニアでもGeminiとAntigravityをパートナーにすれば、頭の中にあるアイデアを形にできることが証明できました。

「自分にもできるかも?」と思った方は、まずはGeminiを開いて「こんなアプリを作りたいんだけど、どうすればいい?」と話しかけてみてください。そこからあなたの個人開発の旅が始まります!

コメント

タイトルとURLをコピーしました