ステップ 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

    VS Code をインストール

    Microsoft製の無料エディタ「Visual Studio Code」をインストールします。Antigravityはこの中で動きます。
    公式サイトからダウンロード →

  2. 02

    Antigravity 拡張機能を追加

    VS Codeの拡張機能マーケットプレイスから「Gemini Code Assist」（またはAntigravity互換のAIエージェント）を検索してインストールします。

  3. 03

    作業フォルダを開く

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

  4. 04

    AIに話しかける

    サイドバーのチャットパネルから、日本語で要望を伝えます。「研修まとめサイトを作って。カレンダー付きのポータルページと、各日のレポートページが欲しい」など、自然な言葉でOKです。

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

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


① やりたいことを伝える
→

② AIが設計図を作る
→

③ あなたが「OK」する
→

④ 自動でファイル完成！

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

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

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

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

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

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

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

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

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

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

> 作業場所を開いています: /研修/00_Web-Architect-Guide/
> 設計図を読み込み中…
> index.html を作成中… (ポータルページ, 720行)
> styles.css を作成中… (デザイン全般, 480行)
> main.js を作成中… (動きや操作, 120行)
完了！ 3ファイル・合計1320行・エラーなし

ステップ 02 クリア！

EXP +100 獲得

Antigravityの正体と使い方を理解しました。次は、AIと一緒に「設計書（プロンプト）」を書く練習です。

← ステップ 01 ｜ トップへ戻る ｜ ステップ 03 →