Article

Conversation

Image
【小学生でもわかる】Antigravity 超初心者向け始め方ガイド
Claude Codeの始め方の記事がバズっていたので便乗で記事を書いておきます😇
この記事では、GoogleのAIエディタ Antigravity を導入して簡単なアプリを作成するまでを小学生でもわかるように解説します😆
Antigravityでも今話題の「Claude Code」が使えるので入れておいて損はないかと。
この記事のゴールは以下です。
  • Antigravityをインストールして起動
  • UI(画面表示)を日本語にする
  • AIの返答も日本語に固定
  • ブラウザ連携(Chrome拡張)まで導入
  • 簡単なブラウザアプリを作成する
「インストールして、日本語で使える状態にする」ところから「AIとチャットをして簡単なアプリを作る」ところまで手順化して初心者にもわかりやすく解説していきます。

1. Antigravityとは?

Antigravityは、AIと対話しながら開発を進められるAIコーディングエディタです。 やりたいことを文章で伝えるだけで、AIがタスクを整理 → 手順を提案 → 必要ならコードまで書いて、アプリ開発を進められます。 でも本領はそれだけじゃありません。 資料作成、記事作成、Webページ制作、文章の校正など、アプリ開発だけではない日々のアウトプット作業やビジネスで必要な作業などにも超使えるんです。
一度使ったらもうこれ無しじゃ何もやる気は起きなくなります😇

2. 初心者がAntigravityを選びやすい理由

初心者にとって重要なのは「性能」よりも、すぐに触り始められるかどうかです。
  • 無料(パブリックレビュー中)で試しやすい
  • 面倒な環境設定がほぼなく、起動までが速い
  • インストール後すぐに会話で指示できる
※無料でもある程度使えますが、ガッツリ使おうとするとすぐにAI使用のリミットが来て使えなくなってしまいます。Claude Codeと同じでガッツリ使いたいのであればGoogle AI Pro(月額 ¥2,900)やUltra(月額 ¥36,400)といったAIを使うためのプランに課金する必要があります。
私はGoogle AI Proに課金していますが、Gemini 3 Flash(性能中々でいっぱい使える)であればほとんどレートに引っかかることなく動画編集などもできています👌
プランのサブスクリプションは こちらのリンクから行うことができます。

3. 対応OS・事前チェック

インストール前に、まず環境を確認します。
3-1. 対応OS
  • Windows:Windows 10 / 11(64bit)
  • Mac:macOS Monterey(12)以上、Apple Silicon(M1/M2/M3…)推奨
  • Linux:利用可能だが環境によって導入が難しい場合があり
3-2. ログイン用Googleアカウント
最初は 個人Gmail(@ が無難です。会社アカウント(Workspace)だと制限に当たる場合があります。

4. ダウンロード〜インストール〜初期設定

4-1. 公式サイトからダウンロード
公式サイトから自分のOSに合ったインストーラを取得します。
(公式サイト)
Image
⬇︎Download for MacOS/Windowsをクリック
Image
自分のOSに合ったものをダウンロードしましょう。

4-2. インストールと初期設定
  1. ダウンロードしたファイルを開く
  2. 最初は基本的に Next を押して進める
テーマ(Theme)の設定
Image
Dark / Tokyo Night / Light / Solarized Light から選択できます。好みでOKです。
エージェントの動かし方の選択
Image
左の選択肢の意味:
・Agent-driven development AIが主役でガンガン進むモード ・Agent-assisted development (推奨) 人間が主役でAIが手伝う(初心者向け)モード ・Review-driven development AIがとにかく慎重にレビューするモード ・Custom configuration 開発の自動化レベルや権限を細かく自分で設定できるモード
迷ったら Agent-assisted development(推奨) を選ぶのがおすすめです。

右の項目の意味:
・Terminal execution policy AIが勝手にターミナルコマンド実行しても良いか ・Review policy 変更は毎回確認するのか、それともAIに任せるか ・JavaScript execution policy AIが勝手にJavaScript実行していいか
各種ポリシー(Terminal / Review / JavaScript)は、最初は デフォルト(Request Review) のままで問題ありません。

エディタ設定
Image
・Keybindings (Normal / Vim) エディタで使うキーボード操作方式を選択 ・Extensions よく使うプログラミング言語用の拡張機能を自動でインストール ・Command Line コマンドラインツールをインストール
Keybindings、Extensions、Command Lineなどは、デフォルトのままで進めてOKです。

Googleアカウントでログイン
Image
「Sign in Google」を押すとブラウザが開くので、アカウントを選んでログイン→利用規約を確認して進めます。
Image
Antigravityに戻ると利用規約が表示されているのでそのままNextをクリック
初期設定完了!
これで初期設定が完了しました。次はAntigravityの基本的な使い方を解説してきます。

5. 画面の見方

Image
画面は大きく以下の役割に分かれます。
  • (赤枠)フォルダ表示エリア:PC内のフォルダ/ファイル構成
  • (青枠)タスク・計画表示エリア:AIが作る実装計画やタスクなどのファイルが表示される
  • (緑枠)AIの思考・確認エリア:AIの処理内容や確認事項が表示される
  • (黄枠)チャットエリア:やりたいことを文章で伝える場所
基本はチャットに「何をしたいか」を書くだけで、AIが計画→提案→実行まで進めてくれます。
※黄色枠のエリアではAIモデルも変更できます。ここでGemini 3 FlashからClaude Opus 4.6など他のAIモデルに変更することができます。
もしすでにClaude Codeに公式で課金して使っている方は、この次に説明する「拡張機能」を使って自分のClaude Codeと連携することもできます😇 ただ、この記事では詳しくは書きません!ごめんなさい。でも簡単です😇

6. 画面表示(UI)を日本語にする

UIの日本語化は、言語パック(拡張機能)を入れるだけです。
6-1. 手順
  1. 拡張機能を開く Mac:Cmd + Shift + X Windows:Ctrl + Shift + X
  2. 検索欄に Japanese Language Pack と入力
  3. Installをクリック
  4. Antigravityを再起動
  5. 日本語化完了
Image
※UIが日本語になっても、AIの返答は別設定です。次で対応します。


7. AIの返答を日本語に固定する

UIが日本語でも、AIが英語で返してくることがあります。 その場合は「ルール(Global設定)」で日本語を指定します。
7-1. 手順(Globalルールを追加)
1.右側パネル上部の「…(三点メニュー)」を開く
Image
2.Customizations → Rules → +Global を選択
Image
Image
が開くので、下記の「貼り付け用テンプレート」をコピペ
Image
貼り付け用テンプレート:
# 言語設定
- あなたは日本の開発者を支援するAIエージェントです。
- ユーザーとの対話、計画の策定、説明文はすべて**日本語**で行ってください。
- 技術用語(例: Request, Response, Commit)は、文脈に応じてカタカナまたは英語のまま使用しても構いませんが、説明は日本語で行ってください。

# コード生成ルール
- コード内のコメントは、ドキュメンテーション文字列(docstring)を含め、すべて**日本語**で記述してください。
- 変数名は英語で分かりやすく命名してください(ローマ字命名は禁止)。

3. Cmd + S で保存(必要なら Refresh rules または再起動)これでAIの返事も日本語化完了です。AIにグローバルルールを設定することでAIの行動を制御する事ができます。

8. ブラウザ連携(Chrome拡張)を入れる

Antigravityはブラウザ操作もできるため、連携用のChrome拡張機能が必要です。
8-1. 手順
  • ブラウザ連携を求められたら案内に従ってChromeを開く
  • Chrome Web Storeで「Chromeに追加」
  • Antigravityに戻って許可
Image
うまくいかない時のチェック:
  • Chromeを使っているか(別ブラウザだと不可)
  • 「Chromeに追加」を押し忘れていないか
  • 再起動したかチェック

9. アプリの作成(①フォルダの作成)

ここからは、Google Antigravityを使って実際にアプリを作っていきましょう。 まずは「開発環境の準備」と「簡単なアプリを動かす練習(テトリス)」までを一気に進めます。
やることは以下の3つです。
  • 作業フォルダを用意する
  • Node.jsをインストールする
  • Antigravityでテトリスを作って、ブラウザで動かす

9-1. 「作業フォルダ」とは?
作業フォルダは、アプリを作るための専用の場所です。 フォルダの中に、開発に必要なものがまとまって入ります。
  • アプリのファイル(コードや画像など)
  • 設定ファイル
  • ライブラリ(便利な部品)
最初に専用の作業フォルダを作っておくと、管理が圧倒的に楽になります。

9-2. どこに作るのが良いか(重要)
おすすめは 同期されない場所に作ることです。 (iCloud / OneDrive / Google Drive 配下は避けるのが無難です)
同期フォルダの中に作成すると、ファイル増加 → 同期処理 → 動作が重くなる…といったトラブルが起きやすくなります。

9-3. フォルダの作り方(Windows / Mac)
Windowsの場合
  1. エクスプローラーを開く
  2. C:\Users\あなたのユーザー名\ を開く
  3. 右クリック → 新規作成 → フォルダ
  4. 名前を Development にする(例)
Macの場合
  1. Finderを開く
  2. 「ホーム」(自分の名前のフォルダ)を開く
  3. 右クリック(またはメニュー)→ 新規フォルダ
  4. 名前を Development にする(例)
Image
※フォルダ名は自由ですが、英字の方が後々のトラブルが起きにくくおすすめです。
不安ならAntigravityに依頼してOK
操作が不安な場合は、Antigravityのチャット欄に以下を貼り付けてください。
AIがフォルダを作成してくれます。
Antigravityで作業をするために、専用の作業フォルダを自分で作りたいです。
iCloud・OneDriveなどの同期フォルダを避けて、安全なホームディレクトリ直下にフォルダを作ってもらえますか?
フォルダの名前はDevelopmentにしてください。
フォルダができたら、Antigravityで開きます。
  • Antigravityのメニューから 「ファイル」→「フォルダーをワークスペースに追加」
  • 作業フォルダ(Development)を指定
Image

📷10. アプリの作成(②Node.jsのインストール)

10-1. なぜNode.jsが必要?
Node.jsは、JavaScriptPC上で動かすための実行環境です。 Webアプリ開発では、Node.jsが入っていないと開発を開始できません。
ここで一度だけ、イメージしやすい例えで説明します。
JavaScriptは基本「ブラウザの中」でしか動けない
JavaScriptは、もともとブラウザ(ChromeやSafari)の中で動くための言語です。 つまり、
  • ブラウザの中では動ける
  • でもPC全体(ファイル操作や開発用の処理)には関われない
という制限があります。
Node.jsを入れると「ブラウザの外」でも動ける
Node.jsを入れると、JavaScriptがブラウザの外でも動くようになります。 これによって、
  • 開発の準備(環境構築)
  • ライブラリの追加
  • ローカルサーバーの起動
といった「アプリを作る側の処理」ができるようになります。
さらに重要なのが「npm」
Node.jsと一緒に入る npm は、開発に必要な部品(ライブラリ)を一瞬で追加できる仕組みです。 npmがあると、ログイン機能やUIパーツなど「自分で全部作ると大変なもの」を、必要に応じて追加できます。

10-2. Node.jsのインストール
Node.js公式サイトから LTS(安定版) を入れるのがおすすめです。
Windows
  • Node.js公式サイト()でLTSをダウンロード
  • インストーラー(.msi)を開く
  • 「Next」「I Agree」「Install」で進む(基本そのままでOK)
Mac
Image
Image

  • インストーラー(.pkg)を開く
Image

  • 「続ける」で進みインストール完了
Image

10-3. インストール確認 Antigravityのチャット欄(またはターミナル)で以下を実行します。
node -v
npm -v
  • node -v:Node.jsのバージョンが表示されます
  • npm -v:npmのバージョンが表示されます
数字が出ればインストール成功です。

11. アプリ作成(③テトリスをAIと作る)

ここから実際に、Antigravityに指示して簡単なアプリを作り、動かす体験をします。 題材はテトリスです。成果が目に見えて分かりやすく、学習として進めやすいからです。
11-1. Antigravityに最初の指示を出す(コピペOK)
チャット欄に以下を貼り付けます。
Developmentフォルダの中に、ブラウザで動くテトリスを作りたいです。
初心者向けに、アプリを作成する前にしっかりとヒアリングを行ってから作業を進めてください。
また、コマンド実行前に「これから何をするか」を箇条書きで説明して、最後に確認(y/n)をしてください。
その後、いくつか質問されるので回答していきます。
ここはプログラミングの練習用と答えておきます。
Image
会話を続けていきましょう。
すべて答えると、AIが作業を始めてよいか確認してくるので承認します。
Image
チャットに「はい」や「y」を入力して承認するとAIがアプリを作るために色々なコマンドを実行していきます。 実行の度にしっかり確認を求めてくるので承認ボタンを押していきます。
Image

【よく出てくるコマンドについて】
途中で以下のようなコマンドが出てきます。
cd tetris npm install npm run dev
意味はざっくり次の通りです。
  • cd tetris:作業するフォルダへ移動
  • npm install:必要な部品(ライブラリ)をまとめて準備
  • npm run dev:開発用サーバーを起動し、ブラウザで確認できるようにする
不安な場合は、その都度「このコマンドは何をしますか?」とAIに聞けば問題ありません。
11-2. プロジェクトの計画書を確認
作業を進めていくとAIが実装の計画書(Implemention Plan)を作成してくれるので確認。
左のフォルダが表示されている場所からImplemention Planファイルをクリックしましょう。
Image
問題なさそうなのであればこのまま作業を続けてもらいます。 チャット欄でAIが何度も実装の提案をしてくるので「y」 or 「はい」を答えていきます。

11-3. プレビューを表示して確認する
しばらく経つとAIがテトリスを完成させてくれます。
プレビューを見るためにチャットで伝えましょう。
プレビューをローカルサーバーで見せて下さい
完成後、プレビューを開くとブラウザ(ローカルサーバー)でテトリスが動作します。
Image
これでアプリの完成です!実際に遊ぶこともできます😇
AIに伝えるだけでアプリが作れてしまいました。
何か追加したい点や調整したいことなどがあれば、さらにチャット欄で同じようにAIに伝えていくだけで自分のアプリが作れてしまいます。
ここで重要なのが、URLに localhost と表示される点です。 これは「自分のPCの中だけで動いている状態」であり、他人にURLを送っても基本的に見られません。

12. おわりに

本格的にアプリを作って公開するとなると、UI/UXの作り込みだけでなく、APIキーなどの機密情報の管理、利用制限、課金設計、エラー監視、公開サーバーの構成など、考えることが一気に増えてきます。 ただ、その前に必要なのは「まず一度、最初から最後まで作って動かしてみる体験」です。チャットするだけでアプリが作れるとか普通に感動します😇
そして最初にも言いましたがAntigravityではアプリの開発だけじゃなく
  • 資料の作成
  • データ整理
  • Webページ制作
  • 記事制作
  • 動画編集
などなど、日常生活やビジネスで必要な作業やWEB制作なんかにも普通に使えます。やりたいことがあればまずはチャット「〜〜したいんだけど?」と投げれば全て教えてくれるし実行もしてくれます。
今は無料ですし入れておいて損はないツールだと思います!
もし使いにくいと感じたなら、これを機にClaude Codeや他のツールを触ってみればいいだけです。それぞれのツールにそれぞれの良さがあります。自分のお気に入りを見つけてみて下さい😆
今回は始め方ガイドとしてAntigravityの基本的な使い方と、アプリを形にするまでの流れをこの記事にまとめました。 少しでも参考になれば幸いです!
Want to publish your own Article?
Upgrade to Premium