【Antigravity】機能追加・IDE直接編集・@メンションや/スラッシュコマンドを活用した指示のコツ

Antigravityで生成したWebアプリをさらに発展させる方法を解説。チャットからの機能追加指示、内蔵エディタ（Open IDE）でのコード直接編集、@メンションや/スラッシュコマンドを活用した効率的な開発手順を詳しく紹介します。

はじめに
手順1：チャットから追加指示を出して修正
手順2：内蔵エディタ（Open IDE）でソースコードを直接編集
手順3：メンション機能（@）で特定ファイルを指定して修正
手順4：スラッシュコマンド（/）でスキルを活用
関連コンテンツ

はじめに

Antigravityでは、以下のとおりAIへの対話指示と人間による直接編集をスムーズに両立できる機能が備わっています。

機能名	実行方法	主なメリット・用途
チャット追加指示	入力欄にプロンプトを送信	新しいUIパーツの追加、ロジック変更の大枠実装
内蔵エディタ（Open IDE）	画面右上の [Open IDE]	テキストの微修正、カラー変更、即座のコード保存
メンション機能（@）	入力欄で `@ファイル名`	対象ファイルを限定し、関係ないファイルの誤変更を防止
スラッシュコマンド（/）	入力欄で `/アクション名`	コード解説（explain）、テスト作成、高速バグ解析

つまり、一度作成しアプリに対して自然言語で機能追加を指示したり、内蔵エディタを使って自分自身でコードを直接微調整したりできます。今回は前回作成したタイマーアプリを例に、チャット追加指示、内蔵エディタ、 @ メンションや / スラッシュコマンドを使いこなすことで、狙ったファイルだけをピンポイントに修正・分析するテクニックを解説します。

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

Google Antigravityの基本画面の見方と操作手順を解説します。中央の入力欄に日本語プロンプトを入力し、コードを書かずにミニアプリを自動生成・実行するまでの流れを初心者向けにわかりやすく紹介します。

手順1：チャットから追加指示を出して修正

一度生成したアプリは、チャット欄から自然言語で指示を出すだけでデザインの変更や機能追加が可能です。

メイン作業エリア下部のプロンプト入力欄に、変更したい内容や追加したい機能を具体的に入力し、入力欄右端の 矢印ボタン または Enter キーを押して送信します。

クイック設定のボタンに「15分」と「60分」のボタンを追加してください。
ボタンを押したときは、現在と同じように即座にタイマーの分数がセットされるように実装をお願いします。

AIが追加要件に対する修正計画（Implementation Plan）を提示した場合は、内容を確認して「進めてください」と送信して承認します。コードの更新が完了したら、[Walkthrough] をクリックしてどのファイルにどのような変更が加わったか（差分）を確認します。

ブラウザ（または内蔵プレビュー）を再読み込み（リロード）し、指示した新機能（「15分」と「60分」のボタンを追加）が正しく反映されているか動作テストを行います。

手順2：内蔵エディタ（Open IDE）でソースコードを直接編集

生成されたソースコードを直接編集したり、ファイル構造を確認したりするための内蔵エディタ（Antigravity IDE）の使い方です。初回起動時にはセキュリティ確認画面が表示されます。

画面右上にある [Open IDE] ボタンをクリックします。

「外部アプリケーションが Antigravity IDE で…を開こうとしています」という確認ダイアログが表示されたら、[はい(Y)] をクリックします。

次回以降の確認を省略する場合は、「要求なしにローカルパスを開くことを許可する」にチェックを入れます。

「このフォルダー内のファイルの作成者を信頼しますか？」というセキュリティ画面が表示されたら、[はい、作成者を信頼します] をクリックします。

画面内にファイルツリーとコードエディタが展開されます。左側のファイルツリーから style.css をクリックして開きます。

エディタ上で直接コードを書き換えます。例えば、7行目の --bg-color: #0f172a; を --bg-color: #1e293b; に書き換えると、背景色をダークネイビーからグレーに変わります。

/* 変更前 */
--bg-color: #0f172a;

/* 変更後 */
--bg-color: #444444;

編集後、キーボードの Ctrl + S（Macは Cmd + S）を押して変更を保存します。
プレビュー画面（またはブラウザの表示画面）に戻り、全体の背景色が指定した色（#444444）に切り替わっていることを確認します。変更が反映されていない場合は、プレビュー画面の更新ボタンを押すか、ブラウザをリロード（再読み込み）してください。

また、IDE画面右側の Agent パネルから、IDEを開いたままAIに直接指示や質問ができます。例として「タイマーの文字サイズを大きくして」と入力して送信します。

AIが修正案を生成すると、エディタ上に差分（削除箇所が赤、追加箇所が緑）が表示されます。変更内容を確認し、エディタ下部の [Accept Changes]（または個別行の [Accept] / チャット下の [Accept all]）をクリックして変更を確定します。

プレビュー画面（またはブラウザの表示画面）に戻り、全体の背景色や文字サイズなどの変更が反映されていることを確認します。変更が反映されていない場合は、プレビュー画面の更新ボタンを押すか、ブラウザをリロード（再読み込み）してください。

手順3：メンション機能（@）で特定ファイルを指定して修正

プロンプト入力時に「@」を入力することで、プロジェクト内の特定のファイルやコンテキストを明示的に指定してピンポイントに修正・相談ができます。

メイン作業エリア下部の入力欄に半角で「@」と入力します。「@」に続けてファイル名の一部（例：style や app など）を入力すると、該当するプロジェクト内のファイル候補が表示されるので、修正対象のファイル（例：style.css）を選択します。

メンションタグに続けて、具体的な修正指示を入力し、入力欄右端の 矢印ボタン または Enter キーで送信します。

@style.css
メインボタンのサイズをひと回り大きくして、角丸を 8px に変更してください。
また、ホバー時に背景色が少し明るくなり、わずかに浮き上がるようなアニメーション（transform: translateY(-2px);）を追加してください。

@app.js
タイマーカウントダウン終了時に、ブラウザのアラートを出すのではなく、画面上にポップアップモーダルを表示して「時間になりました！」と通知する処理に変更してください。

AIが指定されたファイル（style.css）のみを対象として効率的にコード更新を行うため、関係のないファイルの誤変更を防ぎながら意図通りの修正が完了します。

手順4：スラッシュコマンド（/）でスキルを活用

入力欄に半角で「/」を入力することで、特定の開発タスクに特化したガイドラインや専用スキル（Customizations / Skills）を呼び出し、AIに適切な手順や専門ルールを適用させることができます。

メイン作業エリア下部の入力欄に半角で「/」と入力し、続けてコマンド名の一部を入力すると、該当するコマンド候補が表示されるので、使用したいものを選択します。

コマンドの一例は以下のとおりです。

コマンド（スキル名）	概要・役割	主な活用シーン
/building-data-apps	Webアプリ設計やUI・データ可視化コンポーネントの構築ガイド	画面実装、UIコンポーネント作成、仕様書・操作マニュアル作成
/notebook-guidance	ノートブック形式による処理設計や検証手順のガイド	データ集計・ログ分析、動作検証手順書・テスト仕様書の作成
/accidental-data-loss-prevention	破壊的コマンドやファイル変更前の安全確認・保護ルールの適用	不要ファイルの安全な削除、影響範囲の大きいリファクタリング
/agy-customizations	プロジェクト独自の設定・ルールの参照と定義	プロジェクト規約（Rules）の策定、README・開発ガイドライン作成
/flutter-add-integration-test	FlutterアプリのUI操作や画面遷移を含む結合テスト・統合テストの自動化	画Flutterアプリの面操作シナリオの自動検証、E2Eテストコードの生成
/test-driven-development	テスト駆動開発（TDD）に沿ったコード設計と検証	単体テスト（Unit Test）作成、品質担保を前提としたロジック実装
/code-review-guidelines	ベストプラクティスに基づいたコード品質・セキュリティの検証	プルリクエスト前のセルフレビュー、リファクタリング箇所の洗い出し
/api-design-scaffolding	RESTful APIやデータモデルの設計・雛形作成	エンドポイント定義、リクエスト/レスポンス仕様書の作成
/performance-optimization	描画速度・メモリ使用量・処理効率のボトルネック特定と改善	フロントエンドの読み込み最適化、重いロジックのチューニング