ステップ 02

道具を揃えよう

自動構築ツール「Antigravity」を使えるようにする

このステップの到達目標

  • Antigravityが「何をするツール」なのかを正確に理解する。
  • インストールから初回起動までの手順を知る。
  • AIとAntigravityの連携フロー(設計→承認→構築)を体験する。

ステップ 01で「AIにコードを書かせてコピペする」という呪縛から解放されました。
では、コピペの代わりに誰がファイルを作るのか? その答えがAntigravity(妖精)です。

01 Antigravityって何?

仕組み:「指示書を読んで実行する職人」

Antigravityは、あなたのパソコンの中に常駐するAIコーディングエージェントです。普通のAI(Gemini等)が「言葉で回答する」のに対し、Antigravityはあなたのローカルフォルダに直接ファイルを作成・編集します。

たとえば「indexページを作って」と頼めば、あなたのフォルダに `index.html` が出現します。「ここの色を赤にして」と言えば、該当するCSSファイルの該当行をピンポイントで修正します。コピペは一切不要です。

従来方式との決定的な違い

従来:手動コピペ方式

  • AIがコードを「テキスト」として出力
  • あなたが手動でコピーして貼り付け
  • ファイル名を間違えれば即エラー
  • 長いコードは途中で途切れる
  • 10ファイル以上は人間の限界を超える

新方式:Antigravity自動構築

  • AIが設計図を書く
  • Antigravityが直接ファイルを生成
  • ファイル名・パスは自動で正確
  • 何万行でも途切れない
  • 50ファイルでも100ファイルでも自在

02 準備しよう:4ステップで完了

Antigravityを召喚するための準備は、思ったより簡単です。以下のステップを順番に進めてください。

  1. 01

    Antigravity をダウンロード

    Antigravityの公式サイトからインストーラーをダウンロードします。Windows / Mac / Linux に対応しています。
    公式サイトからダウンロード →

    Antigravityって何?初めての方へ
    Antigravityとは?
    AIエージェントが内蔵されたコードエディタ(専用アプリ)です。見た目はプログラマーが使う「VS Code」というソフトに似ていますが、最初からAIの力が組み込まれており、日本語で指示を出すだけでファイルを自動生成してくれます。

    インストール手順:
    1. 上のリンクから公式サイトを開く
    2. お使いのOS用の「Download」ボタンをクリック
    3. ダウンロードされたインストーラーを開いて指示に従う
    4. インストール完了後、Antigravityを起動
    VS Codeを既に使っている方へ:Antigravityの操作画面はVS Codeに非常に似ているので、すぐに馴染めるはずです。
  2. 02

    作業フォルダを開く

    Antigravityで「フォルダーを開く」から、WebサイトファイルをAIに構築させたいフォルダを開きます。ここがAntigravityの「工房」になります。

    フォルダって何を開けばいいの?
    なぜフォルダを開くの?
    Antigravityは「今開いているフォルダの中」にファイルを作ります。フォルダを開いていないと、ファイルの作成先が分からず動けません。

    手順:
    1. デスクトップなどに新しい空のフォルダを作成(例: 「my-website」)
    2. Antigravityメニューの「ファイル」→「フォルダーを開く」をクリック
    3. 作成したフォルダを選択して「フォルダーの選択」をクリック
    フォルダをAntigravityのウィンドウにドラッグ&ドロップしても開けます!
    「信頼しますか?」と聞かれたら「はい」を選んでください。
  3. 03

    Geminiで設計書(プロンプト)を作る

    ここがこのガイドの最も大事なポイントです。いきなりAntigravityに話しかけるのではなく、まず案内人であるGeminiと対話して「どんなサイトにするか」の設計書を作ります。(詳しくはステップ 03で学びます)

    なぜ直接Antigravityに頼まないの?
    Antigravityは「職人」、Geminiは「設計士」
    Antigravityにいきなり曖昧な指示を出すと、意図と違うものが大量に作られてしまうリスクがあります。

    正しい流れ:
    1. Gemini(ステップ 01で紹介した「案内人」)とチャットで設計を相談
    2. Geminiが「設計書(プロンプト)」を整理してくれる
    3. その設計書をAntigravityに渡す → 自動構築スタート!
    Geminiはファイルを一切触らない安全な相談役なので、何度でも気軽にやり直せます。一方Antigravityは直接ファイルを書き換える「実行役」です。だからこそ、まずGeminiで設計を固めてからAntigravityに渡す、という順番が大切なのです。
  4. 04

    設計書をAntigravityに渡す

    Geminiと一緒に作った設計書(プロンプト)を、Antigravityのチャットパネルにそのまま貼り付けて送信します。あとはAntigravityが設計書の通りにファイルを自動生成してくれます。

    渡し方の詳しい手順
    設計書の渡し方:
    1. Antigravity左サイドバーのチャットアイコンをクリック
    2. Geminiで作った設計書をコピー
    3. チャットの入力欄に貼り付けて送信
    4. Antigravityが自動でファイルを生成していく → 承認ボタンを押すだけ
    Antigravityが「このファイルを作成していいですか?」と確認してくるので、内容を見て承認していくだけです。設計書がしっかりしていれば、ここでの作業はほぼ承認ボタンを押すだけになります。

03 実際の流れを見てみよう

準備ができたら、いよいよ魔法の実演です。実際のやり取りはこのように進みます。

1. 要望を入れる
2. AIが設計
3. あなたがOK
4. 自動生成!

あなたの仕事は「承認する」だけ

Antigravityは設計図を渡されると、まず「こういうファイル構成で作りますが、よろしいですか?」と確認してきます。あなたは内容を確認して「OK」と伝えるだけ。すると妖精は一気にファイルを生成し始めます。☕ コーヒーを飲みましょう。

もし途中で「ここの色は青がいい」と思ったら? そのまま日本語で伝えてください。該当ファイルの該当行だけをピンポイントで修正してくれます。全部作り直す必要はありません。

特別コラム:なぜ最初から全部「妖精」に丸投げしないの?

ここでひとつの疑問が湧くかもしれません。
「Antigravityが全自動で作れるなら、なぜ面倒なプロンプトを書いてGemini(案内人)を挟む必要があるの?」

実は、これこそが『初心者が挫折せず、プロへ成長するための最大の工夫』です。

1. 思考の安全地帯(Sandbox)
ファイルを直接書き換える能力を持つ妖精(Agent)に「よくわからないけどなんかいい感じにして」と曖昧な指示を出すと、最悪の場合、必要なファイルまで壊されてしまう恐怖があります。「ファイルを絶対にいじらない安全な相談役」であるGeminiを挟むことで、心おきなく何度でも壁打ち(試行錯誤)ができるのです。

2. 「魔法」に飲み込まれないための設計図
最初からワンクリックで完成してしまうと、「何が起きたか一切分からないブラックボックス状態」になり、エラーが出た瞬間に手詰まりになります。あえて「言葉で設計図(プロンプト)を作り、それを妖精に渡す」というステップを踏むことで、「自分が指揮をとって作っている」という鮮烈なオーナーシップと構造理解が得られるのです。

04 実際に動いている様子を見てみよう

実際にAntigravityが動いている様子を見てみましょう。以下は、研修まとめサイトを構築した時のターミナルログの再現です。

宝箱 開いた宝箱 空の宝箱
🔒 まだ開けられません…
0%

ステップ 02 クリア!

EXP +200 獲得
Lv.1 見習い職人 0 / 1500 EXP

最強の職人(エディタ)を召喚し、魔法の呪文(Geminiの設計図)を流し込む準備が整いました!