このステップの到達目標
- Antigravityが「何をするツール」なのかを正確に理解する。
- インストールから初回起動までの手順を知る。
- AIとAntigravityの連携フロー(設計→承認→構築)を体験する。
ステップ 01で「AIにコードを書かせてコピペする」という呪縛から解放されました。
では、コピペの代わりに誰がファイルを作るのか? その答えがAntigravity(妖精)です。
01 Antigravityって何?
従来方式との決定的な違い
従来:手動コピペ方式
- AIがコードを「テキスト」として出力
- あなたが手動でコピーして貼り付け
-
ファイル名を間違えれば即エラー
- 長いコードは途中で途切れる
- 10ファイル以上は人間の限界を超える
新方式:Antigravity自動構築
- AIが設計図を書く
- Antigravityが直接ファイルを生成
- ファイル名・パスは自動で正確
- 何万行でも途切れない
- 50ファイルでも100ファイルでも自在
02 準備しよう:4ステップで完了
Antigravityを召喚するための準備は、思ったより簡単です。以下のステップを順番に進めてください。
-
01
Antigravity をダウンロード
Antigravityの公式サイトからインストーラーをダウンロードします。Windows / Mac / Linux に対応しています。
公式サイトからダウンロード →
Antigravityとは?
AIエージェントが内蔵された
コードエディタ(専用アプリ)です。見た目はプログラマーが使う「VS
Code」というソフトに似ていますが、最初からAIの力が組み込まれており、日本語で指示を出すだけでファイルを自動生成してくれます。
インストール手順:
- 上のリンクから公式サイトを開く
- お使いのOS用の「Download」ボタンをクリック
- ダウンロードされたインストーラーを開いて指示に従う
- インストール完了後、Antigravityを起動
VS
Codeを既に使っている方へ:Antigravityの操作画面はVS Codeに非常に似ているので、すぐに馴染めるはずです。
-
02
作業フォルダを開く
Antigravityで「フォルダーを開く」から、WebサイトファイルをAIに構築させたいフォルダを開きます。ここがAntigravityの「工房」になります。
なぜフォルダを開くの?
Antigravityは「今開いているフォルダの中」にファイルを作ります。フォルダを開いていないと、ファイルの作成先が分からず動けません。
手順:
- デスクトップなどに新しい空のフォルダを作成(例: 「my-website」)
- Antigravityメニューの「ファイル」→「フォルダーを開く」をクリック
- 作成したフォルダを選択して「フォルダーの選択」をクリック
フォルダをAntigravityのウィンドウに
ドラッグ&ドロップしても開けます!
「信頼しますか?」と聞かれたら「はい」を選んでください。
-
03
Geminiで設計書(プロンプト)を作る
ここがこのガイドの最も大事なポイントです。いきなりAntigravityに話しかけるのではなく、まず案内人であるGeminiと対話して「どんなサイトにするか」の設計書を作ります。(詳しくはステップ
03で学びます)
Antigravityは「職人」、Geminiは「設計士」
Antigravityにいきなり曖昧な指示を出すと、意図と違うものが大量に作られてしまうリスクがあります。
正しい流れ:
- Gemini(ステップ 01で紹介した「案内人」)とチャットで設計を相談
- Geminiが「設計書(プロンプト)」を整理してくれる
- その設計書をAntigravityに渡す → 自動構築スタート!
Geminiは
ファイルを一切触らない安全な相談役なので、何度でも気軽にやり直せます。一方Antigravityは直接ファイルを書き換える「実行役」です。だからこそ、まずGeminiで設計を固めてからAntigravityに渡す、という順番が大切なのです。
-
04
設計書をAntigravityに渡す
Geminiと一緒に作った設計書(プロンプト)を、Antigravityのチャットパネルにそのまま貼り付けて送信します。あとはAntigravityが設計書の通りにファイルを自動生成してくれます。
設計書の渡し方:
- Antigravity左サイドバーのチャットアイコンをクリック
- Geminiで作った設計書をコピー
- チャットの入力欄に貼り付けて送信
- Antigravityが自動でファイルを生成していく → 承認ボタンを押すだけ
Antigravityが「このファイルを作成していいですか?」と確認してくるので、内容を見て承認していくだけです。設計書がしっかりしていれば、ここでの作業は
ほぼ承認ボタンを押すだけになります。
03 実際の流れを見てみよう
準備ができたら、いよいよ魔法の実演です。実際のやり取りはこのように進みます。
1. 要望を入れる
2. AIが設計
3. あなたがOK
4. 自動生成!
特別コラム:なぜ最初から全部「妖精」に丸投げしないの?
ここでひとつの疑問が湧くかもしれません。
「Antigravityが全自動で作れるなら、なぜ面倒なプロンプトを書いてGemini(案内人)を挟む必要があるの?」
実は、これこそが『初心者が挫折せず、プロへ成長するための最大の工夫』です。
1. 思考の安全地帯(Sandbox)
ファイルを直接書き換える能力を持つ妖精(Agent)に「よくわからないけどなんかいい感じにして」と曖昧な指示を出すと、最悪の場合、必要なファイルまで壊されてしまう恐怖があります。「ファイルを絶対にいじらない安全な相談役」であるGeminiを挟むことで、心おきなく何度でも壁打ち(試行錯誤)ができるのです。
2. 「魔法」に飲み込まれないための設計図
最初からワンクリックで完成してしまうと、「何が起きたか一切分からないブラックボックス状態」になり、エラーが出た瞬間に手詰まりになります。あえて「言葉で設計図(プロンプト)を作り、それを妖精に渡す」というステップを踏むことで、「自分が指揮をとって作っている」という鮮烈なオーナーシップと構造理解が得られるのです。
> 作業場所を開いています: /研修/00_Web-Architect-Guide/
> 設計図を読み込み中…
> index.html を作成中… (ポータルページ, 720行)
> styles.css を作成中… (デザイン全般, 480行)
> main.js を作成中… (動きや操作, 120行)
完了! 3ファイル・合計1320行・エラーなし