Step 4：Antigravity の使い方を覚えよう

環境構築が完了している前提で進めます。 まだの方は Step 1: 環境構築 を先に完了してください。

Antigravity でプロジェクトを開く

  1. Antigravity を起動
  2. 「Open Folder」または「フォルダを開く」をクリック
  3. Step 1 で作った ~/my-accomadation-lp フォルダを選択
  4. プロジェクトが開ければ OK

エージェントに話しかけてみよう

Antigravity の画面下部にある チャット欄 に日本語で指示を入力します。

ウォーミングアップ：3段階で試そう

レベル1：質問する

Astro って何ですか？初心者向けに教えて

レベル2：ファイルを作ってもらう

src/pages/index.astro に「Hello World」と表示するページを作って

レベル3：実行してもらう

開発サーバーを起動して

→ ブラウザに「Hello World」が表示されれば成功！

指示の出し方のコツ

良い指示の例

パターン例
具体的に言う「青いボタンを画面の右上に配置して」
セクション単位で頼む「ヒーローセクションを作って。温泉旅館のイメージで」
修正はピンポイントで「見出しのフォントサイズを大きくして」
参考を伝える「和風の落ち着いたデザインにして」

あまり良くない指示の例

パターンなぜダメ？
「いい感じにして」何が「いい感じ」か AI にはわからない
「全部一気に作って」長すぎると品質が下がる。セクション単位が◎
「前のやつに戻して」何を戻すのか具体的に伝える

ポイント：友達にお願いするように、でも具体的に。

Antigravity でよく使う操作

やりたいことやり方
指示を出すチャット欄に日本語で入力
ファイルを見るサイドバーのファイルツリーからクリック
プレビューを見るChrome 拡張機能でブラウザ確認
やり直したい「今の変更を元に戻して」と伝える
エラーが出たエラーメッセージをそのまま貼り付けて「これを直して」

操作チートシート

やりたいこと指示の例
ファイルを作りたい「○○ というファイルを作って」
コードを書いてほしい「△△するコンポーネントを作って」
エラーを直したいエラーメッセージを貼って「これを直して」
デザインを変えたい「背景色を白にして」「余白を広くして」
画像を配置したい「public フォルダに画像を置いて、ヒーローに表示して」
パッケージを入れたい「○○ をインストールして」
わからないこ��を聞きたい「Tailwind の flex って何？」

このステップのまとめ

「Antigravity には、友達に頼むように自然な日本語で指示を出せば OK。完璧な指示じゃなくても、会話しながら修正できます。」

操作に慣れたら、次はいよいよ LP の制作に入ります！

トラブルシューティング

症状原因対処法
エージェントが反応しないネットワーク接続の問題Wi-Fi を確認、Antigravity を再起動
プレビューが表示されない開発サーバーが起動していない「bun run dev を実行して」と指示
回答が英語になる指示が英語と判定されている「日本語で回答して」と追加で伝える
変更が反映されないブラウザのキャッシュCtrl+Shift+R（Mac: Cmd+Shift+R）で強制リロード