Antigravity って何ですか?
簡単に言うと、「プログラミング初心者でも、AI の助けを借りながらアプリが作れる IDE(開発環境)」 です。
IDE?難しいですね。もっと簡単に言うと、「プログラムを書く場所」です。
メモ帳でテキストを書くように、Antigravity で「アプリのコード」を書いていく。その過程で、AI が「あ、ここはこうした方がいいですよ」と提案してくれます。
そして、あなたが書いたコードは、そのままアプリとして動く。
「え、そんなに簡単?」—そうなんです。試しにやってみましょう。
ステップ 1:Antigravity をダウンロード
まず、Antigravity の公式ウェブサイトに行きます。
右上に「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 が何をするか:
- あなたの指示を読む
- 既存のコード を分析する
- 適切な HTML・CSS・JavaScript を生成
- その結果を、自動的にあなたのコードに追加する
右側のプレビューを見ると、「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 日で作れる」—それくらい革命的なツールです。
ぜひ、試してみてください。あなたが想像したアプリが、実際に動く体験。
それは、本当に楽しいですよ。