【Antigravity】プロンプト指示だけで最初のアプリを自動生成する手順

Google Antigravityのインストールが完了したら、いよいよプロンプトを使って実際に動くアプリケーションを作成してみましょう。

はじめに
Antigravityの画面構成と各部名称
手順1：新規プロジェクト（作業フォルダ）を作成する
手順2：入力欄にプロンプトを入力して送信
手順3：生成された実装計画（Implementation Plan）を確認して承認
手順4：実装完了の確認とアプリの起動・動作確認
関連コンテンツ

はじめに

Google Antigravityのインストールが完了したら、いよいよプロンプトを使って実際に動くアプリケーションを作成してみましょう。

コードを手書きする必要はありません。中央の入力エリアに日本語で指示を打ち込むだけで、AIがプロジェクトの作成からコードの実装までを自動で進めます。本記事では、最初に画面構成を簡単に紹介したのち、簡単なアプリ「カウントダウンタイマー」の作成を行うことで、基本操作を体感していきます。

解説動画

Antigravityの画面構成と各部名称

アプリを起動すると、対話形式で開発を進めるメイン画面が表示されます。

メイン画面にある各エリアの主な機能・役割は以下のとおりです。

画面エリア	主な機能・役割
① メニューバー	ファイル操作、表示切り替えなどの基本メニュー（File, View, Windowなど）
② 左側サイドバー	新規チャット作成（+ New Conversation）、過去履歴（Conversation History）、タスク（Scheduled Tasks）、プロジェクト一覧の管理
③ メイン作業エリア（チャット＆プロンプト入力欄）	指示文の入力（Ask anything…）やAIとの対話、生成ログ・結果が表示される中心エリア
④ モデル選択メニュー	アプリ生成に使用するAIモデル（Gemini 3.7 Flash Highなど）を切り替えるドロップダウン
⑤ 「Open IDE」ボタン	コードの詳細編集やファイル構造の直接確認ができるIDE画面への切り替えボタン
⑥ Settings（設定）	アプリ全体の設定や各種連携オプションを変更する設定メニュー

手順1：新規プロジェクト（作業フォルダ）を作成する

生成されるファイルを保存するためのプロジェクトフォルダを作成・指定します。

画面左側のサイドバー（②）にある「Projects」の右横にある フォルダアイコン（Create New Project） をクリックします。

表示されたメニューから [New Project] をクリックします。

フォルダ選択ダイアログが表示されるので、任意の保存場所（例：C:\Users\<ユーザー名>\Downloads\test）を選択し、[フォルダーの選択] をクリックします。

左側サイドバーの「Projects」欄に保存場所のフォルダ名（例：test）が表示され、作業ディレクトリとして固定されたことを確認します。また、③ メイン作業エリアのプロンプト入力欄上部にも同じフォルダ名（test）が表示されます。これは、現在入力するプロンプトや生成されるファイルがすべてこの test フォルダ内で管理・実行される状態になっていること を示しています。

手順2：入力欄にプロンプトを入力して送信

作業フォルダが設定できたら、画面中央の入力欄からAIに作成指示を出します。

プロンプト入力欄の左下にある モデル選択メニュー（④） を確認します。基本的にはデフォルト（例：Gemini 3.7 Flash High やその時点での推奨モデル）のままで問題ありませんが、必要に応じて利用したいモデルを選択します。

2026年8月20日現在、選択できるモデルは以下のとおりです。

モデル名	特徴・処理速度	推奨用途・使い分け
Gemini 3.7 Flash (High)	高速応答かつ高推論（デフォルト推奨）	日常的なコード修正、UI調整、一般的な機能追加全般
Gemini 3.6 Flash / 3.5 Flash	高速応答・軽量設計	軽微なテキスト修正、簡単なコード生成、トークン・クォータ節約時
Gemini 3.1 Pro	安定した標準モデル	ドキュメント生成、基本的なロジック解説・確認
Claude Sonnet 4.6 (Thinking)	高いコーディング能力と深い思考プロセス	複雑なアルゴリズム実装、非同期処理や状態管理の設計、バグ調査
Claude Opus 4.6 (Thinking)	最も高度な推論力と網羅的な論理構成	アーキテクチャ全体の設計、大規模リファクタリング、難解なエラー解析
GPT-OSS 120B (Medium)	オープンソース系大規模モデル	オープンソース系特有の挙動検証、標準的なコーディング支援

画面中央のメイン作業エリア（③）にある「Ask anything, @ to mention, / for actions」と書かれた入力欄をクリックしてフォーカスを合わせます。

以下のプロンプト（指示文）をコピーし、入力欄に貼り付けます。

ブラウザで動作するシンプルな「カウントダウンタイマー」Webアプリを作成してください。

【要件】
– 分・秒を設定してカウントダウンを開始できること
– 「スタート」「一時停止」「リセット」の各ボタンを配置すること
– タイマー終了時に画面上で分かりやすく通知すること
– シンプルで見やすいモダンなデザイン（レスポンシブ対応）にすること
– HTML / CSS / JavaScript を使用し、省略せずに完全なコードを生成すること

入力欄の右端にある 矢印ボタン（送信アイコン） をクリックするか、キーボードの Enter キーを押して送信します。

手順3：生成された実装計画（Implementation Plan）を確認して承認

プロンプトを送信すると、AIが要件を解析して画面右側に「実装計画（implementation_plan.md）」を自動生成します。

メイン作業エリア（③）でAIの思考プロセスが完了すると、「Implementation Plan」を提示するのでクリックします。

画面右側に 「Implementation Plan」 パネルが展開されるので、表示された実装計画の内容（要件の整理、作成予定のファイル構成、検証手順など）を確認します。

カウントダウンタイマー Webアプリ実装計画

ブラウザ上で動作するシンプルかつモダンなカウントダウンタイマーWebアプリケーションを作成します。

【ユーザー要件の確認】
・時間設定: 分（Minutes）・秒（Seconds）の入力設定、および便利なプリセット時間ボタン（1分、3分、5分、10分など）
・操作ボタン: 「スタート」「一時停止（再開）」「リセット」
・終了通知:

* 画面上での視覚的アラート・アニメーション（パルスエフェクト・通知バナー/モーダル）
* Web Audio APIを活用したビープ音/アラーム音（外部音声ファイル不要でオフラインでも確実に動作）
・デザイン:
* 円形プログレスバー（SVG circular progress bar）による視覚的な残り時間表現
* 洗練されたモダンUI（グラスモフィズム、美しいフォント、滑らかなトランジション）
* モバイル・タブレット・PCに対応したレスポンシブデザイン
* ブラウザタブのタイトル（Title tag）にも残り時間をリアルタイム表示
・技術構成: HTML5 / CSS3 / Vanilla JavaScript（単体で完結・即実行可能）

【提案するファイル構成】
[NEW] index.html
・タイマー表示エリア（円形プログレスリング、デジタル数字表示）
・時間設定フォーム（分・秒スピンボックス、クイック設定プリセット）
・コントロールボタン群（スタート/一時停止/リセット）
・終了時アラートバナー / サウンド切り替えトグル

[NEW] style.css
・CSS変数を用いたカラーパレットとデザインシステム
・円形プログレスバーのSVGアニメーション
・レスポンシブレイアウト（Flexbox / Grid）
・ボタンホバー・アクティブ時のマイクロインタラクション

[NEW] app.js
・Date.now() ベースのドリフトしない高精度カウントダウンロジック
・タイマー状態管理（IDLE, RUNNING, PAUSED, FINISHED）
・Web Audio APIによるシンセサイズド・アラーム通知音生成
・タブタイトル同期およびアニメーション処理

【検証手順】

1. index.html をブラウザで直接開き、UIのレイアウトとレスポンシブ表示を確認
2. 分・秒を入力して「スタート」をクリックし、カウントダウンと円形プログレスが連動することを確認
3. 「一時停止」でカウントダウンが停止し、「再開」で続きからカウントされることを確認
4. 「リセット」で初期状態に戻ることを確認
5. 5秒などの短い時間でカウントダウンを完了させ、画面通知およびWeb Audio音の再生を確認

チャット欄のメッセージ（「よろしければ『Proceed』または承認のメッセージをお願いいたします」など）を確認し、入力欄に「進めてください」（または Proceed）と入力して右端の 矢印ボタン（送信アイコン） をクリックします。

承認を受けるとAIが実装を開始し、思考ログ（Thought for ...）とともに各ファイル（index.html、style.css など）の編集・生成ログが順次表示されます。生成中は送信ボタンが 停止ボタン（四角アイコン） に切り替わります。すべての処理が完了するまで待ちます。

手順4：実装完了の確認とアプリの起動・動作確認

コードの生成が完了すると、実装内容のサマリー、使い方、変更されたファイル一覧（Walkthrough）が表示されます。

チャット欄に「実装した主なポイント」や「使い方」が表示され、変更・作成されたファイル一覧（3 files changed）が完了したことを確認します。

生成されたコードの差分や詳細を確認したい場合は、チャット下部の [Walkthrough] または [Review] ボタンをクリックします。

[Walkthrough] ボタンを押した場合、右側のパネルから生成されたコードの解説等を確認できます。

[Review] ボタンを押した場合、右側のパネルから編集されたファイル（index.html、style.css、app.js）の中身と変更箇所を行単位で確認できます。

アプリを起動して動作確認を行います。エクスプローラーで作成した作業フォルダ（例：Downloads\test）内にある index.html をブラウザ（Google ChromeやMicrosoft Edgeなど）でダブルクリックして開きます。

画面上にカウントダウンタイマーが表示されたら、以下の項目をテストして動作を確認します。

① 分・秒の指定やプリセットボタン（「3分」「5分」など）をクリックして時間が正しくセットされるか
② [スタート] ボタン（または `Space` キー）を押し、1秒ずつカウントダウンと円形プログレスバーが連動して減っていくか
③ [一時停止] でタイマーが止まり、[リセット]（または `Esc` キー）で初期値に戻るか
④ カウントが「00:00」になった際、画面上部に通知バナーが表示され、アラーム音が正常に鳴るか

など

動作に問題がなければWebアプリの作成は完了です。

AntigravityでAIに指示を出すと、画面右側に「Implementation Plan（実装計画）」や「Walkthrough（変更内容の解説）」などのパネルが表示されます。
これらはAIエージェントがタスクを進める中で自動生成する作業ドキュメント（`implementation_plan.md` や `walkthrough.md` などのMarkdownファイル）であり、Antigravityではこれら一連の成果物を「Artifacts」といいます。ユーザーはArtifactsを確認・承認することで、AIの作業内容を正確にコントロールしながら開発を進められます。