ANTIGRAVITY LABEN
記事一覧/Antigravity 基本
Antigravity 基本/2026-03-20初級

Antigravity をはじめて開く日 — インストールから最初のプロジェクトが動くまで

Antigravity を初めて触る方に向けて、ダウンロードとインストール、最初のプロジェクト作成、AI アシスタントとのやりとりまでを、実際の画面の流れに沿って順に追っていきます。

Antigravity338入門5初心者6インストール2使い方3ガイド202624

Antigravity って何ですか?

簡単に言うと、「プログラミング初心者でも、AI の助けを借りながらアプリが作れる IDE(開発環境)」 です。

IDE?難しいですね。もっと簡単に言うと、「プログラムを書く場所」です。

メモ帳でテキストを書くように、Antigravity で「アプリのコード」を書いていく。その過程で、AI が「あ、ここはこうした方がいいですよ」と提案してくれます。

そして、あなたが書いたコードは、そのままアプリとして動く。

「え、そんなに簡単?」—そうなんです。試しにやってみましょう。

ステップ 1:Antigravity をダウンロード

まず、Antigravity の公式ウェブサイトに行きます。

www.antigravitylabs.com

右上に「Download」ボタンがあります。クリック。

あなたのパソコン(Mac か Windows)に合わせて、ダウンロード。

ステップ 2:インストールしてセットアップ

ダウンロードされたファイルをダブルクリック。

「このアプリを信頼しますか」みたいなメッセージが出たら「はい」を選んで。

インストールが始まります。進行状況バーが表示されて、数分で完了。

完了したら「Antigravity を起動」的なボタンを押すか、アプリケーションフォルダから Antigravity を見つけてダブルクリック。

初回起動時は、セットアップウィザードが出ます。

「新しいプロジェクトを作成」→「プロジェクト名を入力」(例:「My First App」)→「OK」。

ステップ 3:プロジェクトが開く — ここからスタート

Antigravity が開きました。画面は大きく 3 つの部分に分かれています。

左側:ファイルツリー

あなたのプロジェクトのファイルが表示されます。最初は、以下のようなファイルが自動生成されてます:

  • main.js:メインのコード
  • index.html:ウェブページの構造
  • style.css:見た目(色やレイアウト)
  • package.json:プロジェクトの設定ファイル

何もしないでいいです。存在を知ってるだけでいい。

中央:コードエディター

ここでコードを書きます。真っ白い空間ですね。ここに、プログラムを書いていきます。

右側:プレビューペイン

あなたが書いたコードが、どんなふうにアプリとして動くか、リアルタイムで表示されます。

コードを書くたびに「あ、こんなふうに動いたんだ」という確認ができます。

ステップ 4:最初のコード —「Hello World」をアプリにする

プログラミングの伝統として、まずは「Hello World」を表示するアプリを作ります。

中央のエディターに、左側から index.html を見つけてクリック。

エディターに以下を書き込みます:

<!DOCTYPE html>
<html>
<head>
  <title>My First App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Hello World!</h1>
    <p>私の最初のアプリです。</p>
  </div>
  <script src="main.js"></script>
</body>
</html>

書き終わったら、右側のプレビューペインを見てください。

「Hello World!」「私の最初のアプリです。」が表示されていますね。

すごい。あなたが書いたコードが、アプリになりました。

ステップ 5:「AI アシスタント」を使ってみる

Antigravity の本当の力は、ここからです。

画面の右下に、「Antigravity AI」というバーがあります(見当たらなければ、右上のメニューから「Show AI Assistant」をクリック)。

ここに指示を書き込むことで、AI があなたのコードを手伝ってくれます。

試しに、AI に指示してみましょう:

「ボタンを追加して。クリックするとカウンターが増える」

AI が何をするか:

  1. あなたの指示を読む
  2. 既存のコード を分析する
  3. 適切な HTML・CSS・JavaScript を生成
  4. その結果を、自動的にあなたのコードに追加する

右側のプレビューを見ると、「Count: 0」という表示と、「+1」ボタンが追加されてます。

ボタンをクリックすると、カウンターが 1 → 2 → 3…と増えます。

あなたが何も書かなかったのに、アプリが作られました。

これが Antigravity の核です。

最初に触る体験 — 小さなページで「AI が書く」感覚をつかむ

カウンターまで作れたら、いきなり大きなアプリに進む前に、ほんの数分だけ寄り道してみてください。小さなページをいくつか作ると、「言葉で頼む → AI が書く → 右側で形になる」という流れが、自然と体に馴染みます。私自身、個人開発で新しいツールを試すときも、成果物の大きさより先に「手応えの速さ」を確かめるようにしています。

最初の一枚は、自己紹介ページがおすすめです。AI チャットに、こんな具合に日本語で頼んでみます。

「シンプルな自己紹介ページを作ってください。名前は『たなか はなこ』、趣味は『読書と散歩』です。やさしい色合いでお願いします。」

数秒で、パステルカラーの背景に名前と趣味が並んだページが立ち上がります。右側のプレビューに、たった今お願いした内容がそのまま映る。この最初の一回が、いちばん印象に残るところです。私はこの「頼んだものが、その場で立ち上がる」瞬間こそ、入門のいちばん大事な体験だと考えています。

慣れてきたら、動きのあるものも試してみましょう。

「現在の時刻をリアルタイムで表示するページを作ってください。大きな文字で見やすくしてください。」

数字が一秒ごとに静かに進んでいくのを見ると、「コードが動いている」という感覚が、初めて腑に落ちます。

この段階で大切なのは、画面中央のコードエリアを無理に読もうとしないことです。最初は AI チャットと、右側のプレビュー。この二つだけに目を向けてください。コードの中身は、作る楽しさを覚えたあとでゆっくり辿れば十分です。私も個人開発を始めた頃は、まず動くものを目で見て、仕組みは後から少しずつ理解していきました。

うまく反映されないときは、難しく考えず「もう一度やり直してください」と伝えれば、AI が最初から組み直してくれます。何を作ればいいか迷ったら、「初心者が最初に作るとおすすめのものを教えてください」と AI に聞いてみるのも一つの手です。

ステップ 6:「もっと複雑なアプリ」を AI に作ってもらう

「OK、カウンターはできました。今度は、簡単な TODO リスト を作ってほしい」

と AI に指示。

AI は以下を自動的に生成します:

  • テキスト入力欄(新しい TODO を入力するため)
  • 「追加」ボタン
  • TODO のリスト表示
  • 各 TODO の横に「完了」ボタン
  • 「完了」を押すと、その TODO がチェックマーク付きで表示

右側のプレビューを見ると、「あ、本当に TODO リストアプリになってる」という驚き。

あなたがコードを 1 行も書きませんでした。

ステップ 7:「カスタマイズ」—あなた好みに修正する

AI が作ったアプリは、基本的なものです。

「でも、もっと色鮮やかにしたい」「フォントを大きくしたい」「削除ボタンも追加してほしい」

そういう時は、直接コードを修正するか、AI に「あ、これ修正して」と頼みます。

例えば:

「TODO の項目が削除ボタンも持つようにして。ボタンはアイコンで。」

AI はコードを修正。右側のプレビューが更新されます。

重要なポイント:「自分で修正することも、AI に頼むこともできる」

100% AI に頼る必要はないし、100% 自分でコードを書く必要もありません。

その時々で、自分のスキルと時間に応じて、柔軟に使い分けましょう。

ステップ 8:「プロジェクトの構造」を理解する

ここまでで、基本は分かったと思いますが、少しプロジェクトの構造を理解しましょう。

HTML ファイル(index.html)

「ウェブアプリの骨組み」です。「ボタンはここ、テキストはここ」という配置を決めます。

CSS ファイル(style.css)

「見た目」です。色、フォント、大きさ、レイアウト…すべてここで決まります。

JavaScript ファイル(main.js)

「動き」です。「ボタンをクリックしたら、カウンターが増える」みたいな「動作」を定義します。

JSON ファイル(package.json)

「プロジェクト全体の設定」です。最初は気にしなくていい。

ステップ 9:「プロジェクトを保存・共有する」

あなたが作ったアプリ、保存したいですよね。

メニューから「File」→「Save」。

これで、プロジェクトがあなたのパソコンに保存されます。

次回、Antigravity を開いて「プロジェクトを開く」を選べば、同じプロジェクトが再び開きます。

共有

「この TODO リストアプリ、友人に見てほしい」

メニューから「Share」を選ぶと、公開リンクが生成されます。

そのリンクを友人に送れば、友人はあなたのアプリをブラウザで見ることができます。

ステップ 10:「ここからが本当のスタート」

ここまで来たら、あなたは「アプリ作成」の基本的な流れを理解しました。

次は、好きなアプリを想像して、作ってみる段階です。

  • 「家計管理アプリ」を作りたい → AI に「こういう機能のアプリ作って」と頼む
  • 「友人と共有する買い物リスト」が欲しい → 作ってみる
  • 「勉強の進捗管理ツール」を思いついた → 作ってみる

Antigravity と AI の力を使えば、「プログラミングの知識がなくても」実現できます。

最後に:「作る喜び」を感じてみて

Antigravity は、プログラミングの敷居を下げるために作られたツールです。

「本来なら 1 ヶ月かかるアプリが、1 日で作れる」—それくらい革命的なツールです。

ぜひ、試してみてください。あなたが想像したアプリが、実際に動く体験。

それは、本当に楽しいですよ。

シェア

お読みいただきありがとうございます

Antigravity Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • コピー&ペーストで使える実装コード付き
  • 毎日新しい上級ガイドを追加
  • ¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

もしこの記事がお役に立ちましたら、チップ(¥150)で応援いただけると大変励みになります。広告なしでの運営を続けるため、皆さまのご支援が大きな力になっています。

関連記事

Antigravity 基本2026-03-20
Antigravity 2026 — AI コーディングエディタの主要機能と使いどころ
Antigravity(旧 Windsurf)とは何か?エージェント機能、エディタの使い方、AGENTS.md、MCP 連携、料金プランまで。2026年最新の情報を網羅した完全入門ガイド。
Antigravity 基本2026-03-25
Antigravity IDE 入門ガイド2026 — AIコーディングの始め方
Antigravity IDEのセットアップから基本操作まで。AIコーディングの第一歩を解説します。
Antigravity 基本2026-03-20
AI ツール完全索引 2026【前編】— Antigravity と一緒に使える AI ツール・サービス総まとめ
Antigravity IDE と組み合わせて使える AI ツール・サービスを網羅的に索引化。各ツールの概要・料金・用途・Antigravity との連携方法を一覧で紹介する2026年版完全ガイド。
📚RECOMMENDED BOOKS
大規模言語モデル入門
山田育矢
LLM開発
生成AIプロンプトエンジニアリング入門
我妻幸長
プロンプト
Claude CodeによるAI駆動開発入門
平川知秀
AI駆動開発
※ アフィリエイトリンクを含みます
もっと見る →