プログラミング知識がなくても、AntigravityでToDo管理アプリは本当に作れるのか──。前回の最後にそう問いかけた。
第一回記事:
プログラミング知識がなくてもアプリが作成できる Google Antigravityで始める AIエージェント開発入門 第1回
結論から言えば、簡易型のToDo管理アプリならば、すぐに作ることができた。送信したプロンプトは2回、計画書へのコメントが1件、所要時間は約15分。書いたコードは一行もない。完成画面はこのとおりだ。
驚きは、見た目だけではない。ダークモード、グラスモーフィズム、なめらかなアニメーション。こちらが具体的に指示したわけでもないデザイン要素が、AIの判断で次々と盛り込まれていた。
今回は、この結果に至るまでの全過程を、プロンプトとスクリーンショット付きで再現していく。前回紹介した「エージェントファースト」「アーティファクト」「PlanningモードとFastモード」が、実体験としてどう機能するかも合わせて見ていこう。
今回のゴール：ToDoアプリの自作
題材として選んだのは、ToDo管理アプリだ。誰もが仕様を直感的に理解でき、「タスクを追加する」「完了にする」「削除する」というシンプルな動作の中に、データの保存・読み込みという重要な要素が含まれている。
今回は2つの制約を設けた。自然言語の指示だけで作ること、そしてコードは一切書かないことだ。エディタ画面でカーソルを動かすのは、AIが書いたコードを読むときに限る。
使用する環境は次の通りだ。
- エディタ：Google Antigravity IDE（Editor View）
- AIモデル：Gemini 3.1 Pro（High）
- モード：Planningモード
プロジェクトフォルダを「To-Do_APP」という名前で新規作成し、Antigravityで開く。
これで準備は完了だ。あとはAIに自然言語で指示をしていく。
なお本稿執筆後、Google I/O 2026でAntigravity 2.0が発表された。Antigravity 2.0は本記事で扱うAntigravity IDEとは独立した、エージェント特化型の新しいデスクトップアプリケーションだ。コードを直接編集するエディタ機能（エクスプローラーやファイルエディタ）は搭載されておらず、複数エージェントの並列実行、スケジュール実行、サブエージェントによる並列タスク処理などに最適化された設計となっている。
既存のAntigravity IDEは2.0の発表後も継続提供されており、本記事で紹介する手順は引き続き有効である。ただし、IDEと2.0を併用するとIDE側の拡張機能や設定が正しく引き継がれない不具合の報告も上がっているため、導入時は公式のリリースノートを確認したい。
第一声：素朴な日本語プロンプトを投げる
「AIに何をどう書けばいいのか」は、AIツールの最大のハードルでもある。だが、Antigravityでは事前に練り上げた長文プロンプトは不要で、思いついたことを日本語で投げ込むだけで十分だ。
最初に送ったプロンプトはこれだけである。
ToDo管理アプリを作ってください。
タスクを追加・完了・削除できるシンプルなWebアプリにしてください。
送信ボタンを押すと、エージェントが動き始める。最初にやるのは「現在の環境を把握すること」だ。プロジェクトフォルダの中身を確認し、すぐにターミナルでコマンドを実行しようとする。
ここで初めて、Antigravityのコマンド実行許可システムが顔を出す。エージェントが何らかのコマンドを実行する前に、ユーザーに「Run（実行）」か「Reject（拒否）」かを問う仕組みだ。本稿では、安全性を確認しつつ「Run」を選択していった。
興味深かったのは、ここからの判断だ。エージェントは node -v でNode.jsのバージョンを確認しようとして、筆者の環境にNode.jsもnpmも入っていないことを検知。「Node.jsが使えないなら、Vanilla HTML/CSS/JavaScriptで作ろう」と自発的に方針転換した。
筆者は「Vanillaで作って」とは一度も指示していない。それでもエージェントは、ユーザーが「シンプルなWebアプリ」と書いたという事実と、Node.js未導入の環境という2つの情報から、最適な構成を組み立てた。これがAntigravityの「エージェントファースト」の片鱗である。
計画書が出てくる ── 「壁打ち」のはじまり
エージェントは状況把握を終えると、すぐにコードを書き始める……わけではない。Planningモードでは、まずImplementation Plan（実装計画書）を作成し、ユーザーに見せてくる。
実際に生成された計画書には、こんな内容が並んでいた。
- 目的：タスクの追加・完了・削除ができ、localStorageでデータを永続化するToDoアプリ
- デザイン方針：プレミアムダークモード、グラスモーフィズム（半透明＋ぼかし）、Inter または Robotoフォント、パープル→ピンクのグラデーション
- アニメーション：ボタンホバー時のマイクロアニメーション、タスク追加・削除時のフェード、完了時のチェックマーク演出
- ファイル構成：index.html、style.css、app.js の3つ
- 検証計画：ブラウザでの手動動作確認、localStorageの永続性チェック
筆者の指示は「シンプルなWebアプリ」だけだった。にもかかわらず、Gemini 3.1 Proはデザイン要素まで踏み込んで具体的な提案をしてくる。AIに「気を利かせてもらう」ような感覚である。
ただし、計画書はデフォルトでは英語で生成される。これでは読み返すのに労力がかかる。
ここで第1回でも紹介したアーティファクトへのコメント機能を試す。計画書の冒頭部分をマウスで選択すると、Google Docsと同じ要領でコメントアイコンが現れる。クリックして入力欄を開き、こう書き込んだ。
この計画書全体を日本語で書き直してください。
セクション名・本文・箇条書きすべて日本語にしてください。
ただし、ファイル名（index.html、style.css、app.jsなど）、CSSクラス名、技術用語（localStorage、Flexboxなど）は英語のままで構いません。
「Add Comment」を押すと、エージェントは作業を再開。十数秒後、計画書全体が日本語に書き換わっていた。
注目すべきは、指示の細かいニュアンスまで正確に反映されている点だ。セクション名と本文は日本語化されているが、localStorage や Flexbox といった技術用語、ファイル名はちゃんと英語のまま残っている。コードを書かずに、自然言語の指示だけで設計書を自分の読みやすい形に整えられる──これがAntigravityの「壁打ち感」だ。
第1回で「AIと壁打ちをしながらアプリが作れる」と書いた手応えが、ここで実体化した。
承認、エージェントが書き始める
計画書に満足したら、いよいよ承認して実装に進む。ただ、実装ボタンがどこにあるのかは、意外とわかりづらい。
計画書画面の右上には「Review ▼」というボタンがある。一見、承認ボタンに見える。だがこれはコメントを追加するためのボタンであって、承認とは関係ない。
では、どうやって承認するのか。正解は、Agentパネルのチャット欄に「この計画書を承認します。実装を開始してください」と入力して送信することだ。シンプルだが、Antigravityは自然言語の指示で承認まで受け取る設計になっている。
送信ボタンを押した瞬間、エージェントの動きが変わる。まず、計画書を実装可能な単位に分解したTask Listが生成された。
そして、コードが書かれ始める。エクスプローラーには index.html が現れ、続いて style.css、app.js と次々とファイルが生成されていった。
ここまでで筆者がやったことは、画面を眺めることだけである。ボタンを押す動作すらなかった。
ファイルが揃うと、エージェントは自動で動作確認に入る。第1回で紹介したAntigravity Browser Extensionの出番だ。エージェントがChromeを起動し、生成したHTMLファイルを開き、自分でタスクを追加・完了・削除して、計画書通りに動くかを検証していく。
検証が終わると、最後にWalkthroughという完了レポートが生成される。何を作ったか、どう動かして確認すればいいか、ファイルパスはどこかが日本語の要約とともにまとめられていた。
ここまでを、「承認します」の送信だけで完結できる。これがAntigravityの強みだ。
完成 ── 実際に動かしてみる
index.html をブラウザで開いてみる。すると、こんな画面が現れた。
ダーク背景に紫とブルーのグラデーション、中央に半透明のガラス調のカード──まさに計画書で予告された「プレミアムダークモード」と「グラスモーフィズム」が、そのまま形になっている。「My Tasks」のタイトルは紫からピンクへのグラデーションで描かれ、追加ボタンも同色系の鮮やかなアクセントカラーだ。
指示は「シンプルなWebアプリ」というものだけだったが、結果としてはこのデザインが出てくるのである。
実際に使ってみよう。入力欄に「企画書を書く」「Antigravityでアプリを制作する」「散歩をする」と打ち込み、それぞれ追加していく。
タスクを追加するたびに、リスト要素がふわっとフェードインしてくる。計画書に書かれていた「マイクロアニメーション」が機能している証拠だ。
次に、1件にチェックを入れて完了マークを付けてみる。テキストに取り消し線が引かれ、色がやや薄くなる。
フィルタを「Completed」に切り替えると、完了済みのタスクだけが表示される。「Active」に戻せば未完了のものだけが見える。
最後に、最も大切な検証だ。ブラウザをリロードしてみる。
タスクは消えなかった。localStorage が機能している。サーバーなしで、データはすべてブラウザ内に保存される設計だ。
雑に「シンプルなWebアプリで」と頼んだだけで、ここまで動くものが手に入る。これが、Antigravityというツールの実力である。
数値で振り返る
ここまでの作業を数値で整理しておく。
- 送信したプロンプト数：2回（最初の依頼＋承認）
- 追加したコメント：1件（計画書の日本語化）
- 生成されたファイル：6（コード3、アーティファクト3）
- コード：index.html、style.css、app.js
- アーティファクト：implementation_plan.md、task.md、walkthrough.md
- 所要時間：約15分（最初のプロンプト送信から完成画面の確認まで）
- 使用したAIモデル：Gemini 3.1 Pro（High）
- エラー発生回数：1回（サーバー混雑による中断、自動復帰）
15分の中に、計画書の生成・コメントによる修正・コード3ファイルの生成・自動動作確認まで含まれている。
困った点も
うまくいった部分ばかりではない。実際の作業で気になった点を3つ挙げておく。
1つ目は「Review ▼」ボタンのわかりにくさ。前述したとおり、これは承認ボタンではなくコメント追加機能だ。Antigravity初心者がハマりやすい点だろう。
2つ目は、サーバー混雑による中断。今回の作業中に1度、「Our servers are experiencing high traffic」というエラーで処理が止まった。「Retry」ボタンで復帰できたが、無料のパブリックプレビュー期間中は、時々こうした不安定さに遭遇する。
3つ目は、AIの自発的な提案を抑えたい場面もあるという点だ。今回は結果オーライだが、グラスモーフィズムや凝ったアニメーションは「指示していない」要素である。シンプルなUIが欲しいなら、最初のプロンプトに「装飾は最小限で」と明記したほうがいい。
だがそれらを差し引いても、「コード未経験で15分でアプリが動く」という事実は、十分すぎる説得力を持つと言えるだろう。
次回予告
第2回では、ToDoアプリを作る一連の流れを通じて、Antigravityの「自然言語からアプリへ」というワークフローを実体験した。
次回の第3回では、難易度を一段上げる。複数のエージェントを同時に走らせて、ポートフォリオサイトを並行で構築する回だ。第1回で紹介したManager Viewの出番である。
1人のAIに任せた今回と、複数のAIを並行運用する次回。 AIが複数になっても、人間の役割は変わらないのか。それとも、新しい難しさが現れるのか──次回、検証していく。
