【図解たっぷり】Antigravity（IDE）入門～導入・基本の使い方を解説！まずは無料で試してみよう～

「このままコーダーで、3年後も食べていけるだろうか？」
AIが進化するほど、手を動かすだけの作業者の単価は下がり続けます。これからのWeb制作で生き残るのは、AIに指示を出す「司令塔」側に回った人だけです。

14日間で「作業者」から「AI Webディレクター」へ転身する集中プラン『10倍速 AIワークフロー マスタープラン』を公開中です。プロの個別メンタリング＆8日間の全額返金保証付き。

（先着限定、7月5日まで）

» 「司令塔」側に回る14日間プランを見る

Google が出した AI開発環境「Antigravity（アンチグラビティ）」 は、Claude Code や Codex、AI搭載エディタ Cursor と並んで注目されている新しいツールです。

Web制作者なら使ってみたいAntigravity IDEの導入方法から、無料で試せる範囲で画像素材・デザイン「ゼロ」の状態から以下のようなWebページをAIに作ってもらう方法まで図解たっぷりで順番に説明します。
気になっているという方は一緒に試してみてください。

• Antigravityについて知ろう
• Antigravityをはじめる前に
• Antigravity IDEの導入方法
• Antigravity IDEを使ってみよう
• まとめ

Antigravityについて知ろう

Antigravityとは？

Antigravityは、Googleが提供する 次世代の自律型AI開発ツールです。用途に応じてIDE・CLIなどいくつかのタイプがありますが、この記事で使うのは、コードを書く作業場にあたる Antigravity IDE です。

画像元：https://antigravity.google/

「IDE（統合開発環境）」とは、コードを書いたりプレビューしたりするためのアプリのこと。Antigravity IDEは VS Code や Cursor と同じエディタの仲間で、実際VS Codeをベースに作られているためUIもよく似ています。VS CodeやCursorを触ったことがある方なら、すぐに馴染めるはずです。

ほかのAIエディタと大きく違うのは、AIがコードを書くだけで終わらず、自分でブラウザを開いて見た目や動作まで確認してくれること。ここがAntigravity最大の特徴です（ほかのツールとの違いは、のちほどくわしく紹介します）。

他のAIツールと比べた、Antigravity ３つの強み

「コードを作る・直す」だけなら、CodexもClaude CodeもCursorもやってくれます。
そのうえで、Antigravityがと評価されている要点を３つご紹介します。

① AIが「ブラウザで見た目まで」確認する

ここがAntigravity最大の持ち味です。 ふつうのAIエージェントは「コードを書いて終わり」で、ちゃんと表示できているかの確認は人間の仕事でした。 Antigravityは、書いたページを自分でブラウザに表示して、見た目や動作までチェックします。「ボタンは押せるか」「スマホで崩れていないか」をAI自身が見て、おかしければ直す。見た目が命のWeb制作（LP・サイト制作）で、この差は大きく効いてきます。

② いきなり書き始めず、「段取り」を立てて最後まで進める

Antigravityは、お願いするといきなりコードを書き出すのではなく、まず作業の計画（段取り）を立ててから動き始めます。 そして計画に沿って、ファイルを作る → 必要な準備を実行する → ブラウザで開いて確認するまでを、あなたが画面を行き来しなくてもひとつの流れで進めてくれます。「どこまでやってくれるんだろう？」と不安にならず、ゴールまで任せやすいのがポイントです。

③ 作業の中身が「見える」から、任せても不安が少ない

Antigravityは、AIが何をしたかを Artifacts（成果物） として残します。 具体的には、作業の計画リスト・確認したチェックリストやスクリーンショットなどです。「AIに任せたけど、中で何をやったのか分からない」という不安が減り、結果をチェックして指示し直すのがやりやすいのが利点です。

[Antigravityによる表示チェックのイメージ]

Antigravity・Cursor・VS Code＋AI、何が違う？

いまWeb制作でAIを使う場合、色々なエディタ・IDEがありますよね。
「どれも似たようなもの」と思いがちですが、AIとの付き合い方のイメージがそれぞれ違います。以下は有名どころ3社の目安です（細かい性能は日々変わるので目安として捉えてください）。

ポイントは、「AIにどこまで・どう任せたいか」です。

• まずは基本をしっかり押さえたい → VS Code＋AI。Web制作の王道エディタで、基礎が身につけば覚えた操作はそのまま実務でも通用します。長く使える土台にしたい人向け。
• AIをシームレスに使い分けたい → Cursor。GPT・Claude・Geminiなどを場面ごとに切り替えながら、自分が主導して書き進めたい人向け。
• 見た目の確認までまるっと任せたい → Antigravity（IDE）。お願いすればAIがブラウザで表示まで確認してくれます。LPやサイトのように表示できてナンボの制作と相性が良い人向け。

CursorとAntigravityはどちらも「AIが最初から入ったエディタ」。
Cursor＝AIと一緒に書く ／ Antigravity（IDE）＝AIに任せるところに軸足がおかれているイメージをすると良いと思います。

「Antigravity」って種類がいっぱいあるんですが…

調べていると「Antigravity 2.0」「CLI」「SDK」など、いろいろな名前が出てきて混乱するかもしれません。

画像元：https://antigravity.google/download

それぞれ役割が違うのですが、Web制作を学びながら最初に触るならAntigravity IDEがおすすめです。

この記事では、コードを見ながら作業を進めやすいAntigravity IDE を使って進めます。
チャットがメインのAntigravity 2.0や、CLI/SDKも便利な機能ですが、まずはIDEの使い方を覚えてからで問題ありません。

Antigravityをはじめる前に

無料で試すための準備

Antigravity は Googleアカウント（Gmailなど）があれば無料で試せます。
今回のデモに必要なものは、たった2つだけです。

1. Googleアカウント（無料でOK）
   普段Gmailを使っている方はそのアカウントで大丈夫です
2. Antigravity アプリ本体（無料）
   次の章でダウンロードします

Antigravityの利用料金と注意点

Antigravityは、個人なら基本的に無料で使えます。
（※執筆時点。今後変わる可能性はあります）

• 無料で使える：個人利用はGoogleアカウントでサインインするだけで無料。この記事のデモは無料の範囲内で作りました。
• 使える量に上限がある：無料版ではAIに頼める量に上限があります（使用量は回数ではなく作業量に応じて算出されます）。たくさん使うと作業途中で止まる・約一週間使えなくなる可能性があります。
• 本格的に使うなら有料プラン：Google AI Pro（月$20）や AI Ultra（月$100〜）にすると上限が広がり、上限に達した後の復活も早くなります。

どんなことができるのか、お試し操作程度であれば無料でできます。
まずGoogleアカウントで無料で触ってみる → 気に入ったら有料プラン で本格稼働させるイメージです。

Antigravity IDEの導入方法

実際にAntigravity IDEをインストールして、パソコンで動かしてみましょう。

ステップ1：Antigravity IDEをダウンロードする

ブラウザで以下の Antigravity 公式サイト（ダウンロードページ）を開きます。
上部にあるボタンから「Antigravity IDE」を選択してください。

公式：Google Antigravity Download

OS毎にダウンロードボタンがありますので、お使いのパソコン（Windows / Mac）に合ったものを選んでダウンロードしてください。

ステップ2：インストールして起動する

ダウンロードしたファイルを開き、画面の案内に従ってインストールします。
普通のアプリと同じ感覚で進めればOKです。

完了したらAntigravityを起動してみましょう。

ステップ3：初期設定

Antigravity IDEの初回起動時には、いくつか設定が必要です。
画面の指示に従って進めていきましょう。

3-1. Googleアカウントで認証

はじめにGoogleアカウントでのログインを求められます。 Continue with Googleをクリックして、ブラウザで認証してください。

認証が成功したら、Antigravity IDEの「Next」ボタンが有効になります。
次に進みましょう。

3-2. 他のIDEの設定を引き継ぐか

VS Code、Cursor の設定を Antigravity IDE にインポートするを聞かれます。
インポートしたい方はそのIDEを、しなくない方は Start Fleshを選択して進めてください。

3-3. テーマ（見た目）の選択

明るい/暗いなどUIの配色を選びます。後から変更もできるので、直感で選んでOK。

3-4. AIの動作モードを選ぶ

AIエージェントにどこまで作業を任せるか（動作モード）を選びます。
次の4つから選択します。

• Strict Mode：
  いちばん慎重なモード。AIが操作するたびに、こまかく確認を取ります。
• Review-driven development：
  ひと区切りごとにAIが「これで進めていい？」と確認してくれるモード。AIの動きを見ながら進められます。
• Agent-driven development：
  確認をあまり挟まず、AIにどんどん任せて進めてもらうモード。
• Custom configuration：
  確認のタイミングなどを自分で細かく設定するモード。

迷ったら、画面でも「RECOMMENDED」と表示されている Review-driven development を選んでおけば安心です。 AIが何をしているかを確認しながら進められるので、操作に慣れるのにもぴったり。モードはあとからいつでも変更できます。
選び終えたら「Next」で次に進みましょう。

3-5. エディタの設定

「Configure Your Editor」では、エディタの操作まわりの設定を行います。
よくわからない、特にこだわりはない、という方はそのまま「Next」で次へ進めてください。

3-6. Google連携等の設定

「Build with Google」では、AIエージェントがGoogleのいろいろな開発ツール（FirebaseやChrome DevToolsなど）と連携するための追加スキルのようなものを設定します。

こちらも、あとからSettingsでいつでも追加・変更できます。
何が必要かまだわからない場合は、特に何も選ばずに「Next」で進んでOK。
Web制作に使う場合は、ブラウザ操作に関わる「Chrome DevTools」や、最新のWeb制作の知識を補う「Modern Web Guidance」あたりを足してみるのもおすすめです。

3-7. セキュリティに関する確認

最後にセキュリティに関する確認事項が表示されます。
上部に表示させている説明は、簡単に意訳すると以下のような内容になります。

AIには、意図しないコードの実行や情報の取り扱いに関するリスクがあります。 機密情報は扱わず、AIが実行する内容は必ず確認してください。

• ☑ AIの品質向上への協力（初期状態でON）
  Antigravity IDEの改善のため、利用状況や操作内容をGoogleが収集・利用することに同意します。
• ☐ メールによるお知らせ（初期状態でOFF）
  Googleから製品アップデートや便利な情報、キャンペーンなどのメールを受け取ります。

「Next」ボタンを押して、初期設定画面を完了させます。
すると、Antigravity IDEの操作画面に切り替わります。

これで準備完了です。

Antigravity IDEを使ってみよう

いよいよAntigravityを動かします。 Web制作の練習にぴったりな、お店（カフェ）の紹介ページ（1枚もののLP）を作ってもらいましょう。

準備

1. 作業用のフォルダを開く

Antigravityに作業をお願いするためには、作業場所となるフォルダを開いておく必要があります。
Antigravityの初期画面は親切で、２つのショートカットが用意されています。

• Open Folder：自分のパソコンの中にあるフォルダを開く
• Cleone Repository：リポジトリからクローンする（Gitを使用している方向け）

今回は、お試し用のフォルダを作ってAntigravityで開きます。
デモではフォルダ名をcafe-lpとしました。
「Open Folder」からファイルエクスプローラーでフォルダを選択しても、フォルダのドラッグアンドドロップでも開けます。

2. Agentパネルの使い方を把握する

簡単に、Antigravityのチャットパネル（Agentパネル）の使い方を確認します。

VSCode拡張機能版ClaudeCodeなど、他社エディタのAIパネルとほぼ同じ。
上部がAIにお願いする指示を打ち込むテキストエリア、下部がミニメニューという形です。
Antigravityの場合は、ファイル添付、@メンション、/コマンドの全てが+ボタンに集約されています。

• Media
  ファイルや画像を会話に添付します。
  上部テキストエリアにドラッグアンドドロップしてもOK。
• Mentions
  プロジェクト内のファイルを指定して会話に含めます。
  上部テキストエリアで@と打つのと同じです。
• Actions
  あらかじめ設定されている機能・指示を呼び出せます。
  上部テキストエリアで/と打つのと同じです。

3. 作業してもらう内容を確認する

Antigravityに限らず、AIは「カフェを紹介するWebページを作ってください」などと言っても、その指示を叶えようと動きます。コードを生成するたびに仕上がりは変わりますが、こうした場合はテンプレートのようなHTMLページが仕上がることが多いです。

今回は、「なんとなく作って」から一歩踏み込んだ、お店の情報やデザインの希望、載せる文章を整理した依頼書（.mdファイル）を渡す形で試してみます。ある程度の縛りがあったほうが、イメージに近い仕上がりになる可能性は上がります。

依頼書は、フル版とライト版の2種類を用意しました。「自分でイチから考えるのは大変だな…」という方は、試したい内容に合わせてご活用ください（より簡単に試したい場合は、依頼書添付なし／プロンプトのみでもできます）。

ダウンロード

ダウンロードしたフォルダの中から、使用したい方のmdファイルを作業フォルダ（cafe-lp）の中に入れておいてください。

💡 無料枠には使用量の上限があります。制限が気になる方はライト版がおすすめです。
→ 使用量制限 / 緊急対処法について

① 制作依頼書を渡して、Webページを作ってもらう

作業内容をまとめた依頼書を、Agentパネルに 添付 します。 先ほど確認した + ボタンの 「Media」 から選ぶか、テキストエリアに ファイルをドラッグ＆ドロップ すればOKです（フォルダ内のファイルなら @ メンションでも渡せます）。

添付できたら、次のようにお願いしてみましょう。

カフェ「こもれびcafe」のWebページを作成したいです。
mdファイルの内容に沿って、シングルページを HTML・CSS・JavaScript で作成してください。
スマートフォンでの見やすさを優先しつつ、PCでも崩れないレスポンシブにしてください。

送信すると、Antigravityがまず作業の計画（プラン）を立ててくれます。
少し待つと、以下のように「この計画で進めて良い？」というようなメッセージが表示されます。
用意された計画書を確認します。

Geminiは画像生成機能も持っているので、画像の作成も同時にこなしてくれます。

計画書を確認して問題なければ、Proceed（進む）を押して実行します。
（追加リクエストがある場合は、それをテキストボックスに打ってチャットを続けてください。）

途中で「このファイルを作ってもいい？」「このコマンドを実行してもいい？」と確認が出たら、内容を見て承認（1. Yes ... などを選択）してください。
依頼書に沿って必要なファイルが次々と作られていきます。

② Antigravityが「自分でブラウザを開いて確認」する

ここがAntigravityの真骨頂です。 ファイルを作ったあと、Antigravityは 自分でブラウザを立ち上げて、作ったページを表示・確認します。

少し経つと、こんな感じにGoogle Chromeのウィンドウが自動的に立ち上がります。
Always Allow （常に許可）をクリックすると、Antigravity がローカルサーバーで編集しているファイルが読み込めるようになります。

このまま作成したページのチェック始まれば、そのまま見守りましょう。
上手くページが開かない方は、下の[ ページが開けない場合は… ]をご確認ください。

「ボタンは押せるか」「レイアウトは崩れていないか」「アニメーションの動作が正しいか」などをAI自身がチェックし、その結果を報告してくれます。

コードを出力するだけのAIとの大きな違いが、この作って・自分の目で確かめる流れです。
以前の記事 VSCode+CodexでJSを追加する の「ハンバーガーメニューを開こうとしても表示されない」など、Skillhubブログでも何度かAIコーディングによる位置ズレ問題と解決方法を紹介してきました。ブラウザと連動できるとこうした問題の発生率自体が低くなり、生成されたコードを確認して、修正して、という時間が圧倒的に減ります。

上手くいっていない部分を修正してほしいけれど「AIにどう説明したら良いか困る」という場合にも、かなり心強いですね。

■ 使用量制限について

既定の使用量を超えると、以下のような表示が出ます。
本記事でも無料版で試してきましたが、下の「ページが開けない場合」を試している途中で制限が入りました。
ちなみに、Claude Codeでもブラウザ（Google Chrome）と連動さられますが、こちらも使用量は結構いきます。どのAIにしろコストはそれなりにかかると考えて良さそうです。

加えて、今回行ったようにAntigravity（Gemini）では画像生成もできます。ブラウザチェック機能、画像生成等、Google AIの機能をフルで使用したい場合は最低でもGoogle AI Pro（月額2,900円）の申し込みが必要なのは間違いないでしょう。Proプランなら利用枠がかなり大きくなるほか、利用枠が5時間ごとにリセットされるので復活も早いです。

なお、無料プランの場合は一度制限を超過すると最大7日間使えなくなります。
制限が入ってしまった時は、Antigravity IDEの右上にあるGoogleアカウントアイコンからサインアウト→別アカウントでサインインし直すと、チャットは引き継ぎつつ続きを試せます。どのくらい出来るか試したいのに…なんて時は、この方法で続きを試しても良いかもしれません。

■ ページが開けない場合は…

Antigravityはパソコンの設定に応じてローカルサーバーを起動し、チェックしてくれます。
しかし、稀にAlways Allowをクリックしてもページが開かず、下図のように何度も接続し直している状態になることがあります。

この現象はローカルサーバーが起動していない、もしくは起動後に短時間で停止してしてしまったことが原因のようです。ページにアクセスが出来ない状態になり、いろいろなアドレスでアクセスを試みて、上図のような状態に陥いります。

ページを表示出来ていなさそうなときは、ストップボタン■で一旦停止して、ブラウザチェックを依頼し直してみてください。高確率で動くようになります。

③ デザイン調整や問題修正

コーディングされたページについて、チャットで直してほしいことを書いて送れば、生成されたページの改善や修正もできます。
もちろん、AIが書いたコード以外であっても、Antigravity IDEのウィンドウで読み込んでいれば該当ファイル・コードを読んで改善してくれます。このあたりはAntigravityも、他のIDE（AIエージェント導入）も変わりません。

デモで作成したページでは、見出しの構成・配置に違和感がありました。
ここを直してもらいましょう。

各セクションのタイトル部分を直してください。
- 英語と日本語のセクション名は回り込ませず、縦に並べてください。
- その下のリード文は、PC幅の時だけ文の途中で自動改行しないよう、句点を入れて欲しいです。

ファイル変更の許可を求められた場合は、確認してAcceptしてください。


該当箇所が修正されました。

作業完了後に、変更箇所のDiff（差分表示）もまとめて確認できます。

• 🟩 緑の行　新しく追加された部分
• 🟥 赤い行　削除された部分

まとめ

Antigravity（IDE）の要点

Antigravity（IDE）は、言葉でお願いすると、AIが自分で作って・ブラウザで確かめて・直してくれるAI開発環境（エディタ）です。すごさは 「作る・確かめる・理解して直す」 の3つ。とくにブラウザで見た目まで確認してくれる点は、LPやサイトを作るデザイナー・コーダーにとって心強いポイントです。

本デモの時点（2026年7月）では、ざっくりした指示でも配色やアニメーションが自然で、見慣れたWebページらしく仕上がるデザイン力が印象的でした。Gemini搭載なので、ダミー写真やイメージ画像もその場で生成してくれます。

今回は触れていませんが、こんな使い方もできます。

• 参考デザインを渡す：「こんな雰囲気で」と参考サイトやデザインボードの画像を添付し、テイストを合わせてもらう
• スクショで指示する：気になる箇所のスクリーンショットを渡して「ここをこう直して」と伝える
• ページを横展開する：「メニューページも同じデザインで作って」と、別ページに広げる

このAI時代にWeb制作の学習は必要？

ここまで試して、こう感じた方もいるかもしれません。
「AIがここまでやってくれるなら、もうWeb制作の学習はしなくていいのでは？」

ですが、AIがデザインやコーディングをしてくれると言っても、Web制作の基礎力は必要です。
たとえばデモ③では、「英語と日本語のタイトルを縦に並べて」「PC幅のときだけ文の途中で改行しないように」と直しをお願いしました。これは、どこが気になるのか・どう直せばいいのかが分かる人だからこそ出せる指示です。

Antigravityにしろ、他社AIにしろ、指示が具体的な人・Web制作の基本的な考え方がわかる人ほど力を発揮します。Antigravityがブラウザで「確認しました」と見せてくれても、その結果が良いのか・まだ直すべきかを判断するのは、最後はあなたです。

逆に基礎がないと、何をどう頼めばいいかが曖昧になり、制作物も不安定になりがちです。
Antigravity（AI）は、制作を任せられる優秀な部下のような存在。優秀な部下も、的確に指示して成果物をチェックできる上司がいてこそ活きます。

Claude Code × AIデザイン
次世代Web制作ワークフロー

GPTやGeminiでデザインを生成し、AIに「指示」を出して一気に実装から公開まで持っていく。
「AI時代のモダンな開発ワークフロー」と「新しい学び方」を14日で習得します。プロの個別メンタリング付きで、絶対に迷わせません。

結論

知識ゼロでもWebページが作れてしまう時代です。それでも、「何が欲しいか」を具体的に指示でき、「出てきたものの良し悪しを判断できる」人ほど、AIをぐっと使いこなせます。基礎を学ぶ価値は、むしろ上がっているのです。

「Antigravityのすごさを体験したい」「基礎力が必要ってどういうこと？」と思った方は、まずは今回のような「カフェのLP」を作ってみてください。 「すごい！」と「あれ、なんか変だな…」の両方を味わえるはずです。そのなんか変に気づいて直せる力こそ、これからのWeb制作であなたの武器になります。

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。