「プログラミングは自分には無理だった」——そう思っている方に、30分だけ時間をください。この記事の手順通りに進めるだけで、あなただけのWebアプリが動き始めます。
スクール時代、カウンターアプリを作るのに何週間もかかった。あの頃の自分が見たら信じられないと思いますが、今はAIに「作って」と伝えるだけでアプリが生まれる時代です。
使うのはGoogleが開発した無料のAIエディタ「Antigravity」。プログラミング未経験でも、スクールで挫折した経験がある人でも、この記事の通りに進めれば動くものが手に入ります。
Antigravityとは
Antigravityは、Googleが2025年11月にリリースしたAI搭載のコードエディタです。
AIに「こういうアプリを作って」と日本語で伝えると、計画を立てて、コードを書いて、ブラウザで動作確認まで自動でやってくれます。
AIに「こういうアプリを作って」と日本語で伝えると、計画を立てて、コードを書いて、ブラウザで動作確認まで自動でやってくれます。
無料で使える
Googleアカウントがあればすぐに始められます。
現在パブリックプレビュー中で、GoogleのAI「Gemini」のモデルを無料で利用可能です。
現在パブリックプレビュー中で、GoogleのAI「Gemini」のモデルを無料で利用可能です。
日本語で指示が出せる
UIは英語ですが、AIへの指示は日本語で問題ありません。
「シンプルなタスク管理アプリをHTMLとJavaScriptで作って」と日本語で入力すれば、そのまま理解してコードを生成してくれます。
「シンプルなタスク管理アプリをHTMLとJavaScriptで作って」と日本語で入力すれば、そのまま理解してコードを生成してくれます。
VS Codeベースで馴染みやすい
スクール経験者ならVS Codeを触ったことがあるかもしれません。
AntigravityはVS Codeベースなので、画面の見た目はほぼ同じです。
操作に迷うことも少ないはず。
Windows、Mac、Linuxに対応しています。
AntigravityはVS Codeベースなので、画面の見た目はほぼ同じです。
操作に迷うことも少ないはず。
Windows、Mac、Linuxに対応しています。
セットアップ（5分で完了）
ステップ1：ダウンロード
公式サイト（antigravity.google）にアクセスして、自分のOSに合ったインストーラーをダウンロードします。
Wi-Fi環境での作業がおすすめです。
Wi-Fi環境での作業がおすすめです。
ステップ2：インストールと初期設定
ダウンロードしたファイルを実行するとセットアップが始まります。
VS CodeやCursorを使ったことがある人は設定をインポートすることもできます。初めての人はデフォルトのまま進めてOK。
VS CodeやCursorを使ったことがある人は設定をインポートすることもできます。初めての人はデフォルトのまま進めてOK。
ステップ3：Googleアカウントでログイン
Googleアカウントでサインインすれば準備完了。
ここまでで5分程度です。
スクール時代、開発環境の構築だけで1日潰れた経験がある人もいるかもしれません。
Antigravityなら、5分で動き始めます。
ここまでで5分程度です。
スクール時代、開発環境の構築だけで1日潰れた経験がある人もいるかもしれません。
Antigravityなら、5分で動き始めます。
実演：タスク管理アプリを作る
Step 1：AIに作りたいものを伝える
Antigravityを開いたら、画面右上の「Open Agent Manager」をクリック（またはCmd+E / Ctrl+E）。
チャット欄に以下を入力して送信します。
「シンプルなタスク管理アプリをHTMLとJavaScriptで作って。
機能は以下の通り：タスクの追加、タスクの完了チェック、完了したタスクの削除。
デザインはシンプルで見やすく。」
するとAIが計画を立てて、自動的にコードを書き始めます。
ファイルの作成からコードの記述まで、AIが全部やってくれます。
見ているだけでOKです。
チャット欄に以下を入力して送信します。
「シンプルなタスク管理アプリをHTMLとJavaScriptで作って。
機能は以下の通り：タスクの追加、タスクの完了チェック、完了したタスクの削除。
デザインはシンプルで見やすく。」
するとAIが計画を立てて、自動的にコードを書き始めます。
ファイルの作成からコードの記述まで、AIが全部やってくれます。
見ているだけでOKです。
Step 2：ブラウザで確認する
AIがコードを書き終わったら、生成されたHTMLファイルをブラウザで開いてみてください。
画面にタスク管理アプリが表示されます。
テキストボックスにタスクを入力して「追加」ボタンを押すと、リストに追加される。
チェックボックスで完了マークがつく。削除もできる。
ここで一度、画面をじっくり見てほしいんです。
自分が日本語で伝えただけのものが、ちゃんと動いている。
この「動いた」という瞬間の感覚は、スクールで何週間も写経してようやくたどり着いた「動くアプリ」と同じものです。
ただし、かかった時間はまるで違う。
画面にタスク管理アプリが表示されます。
テキストボックスにタスクを入力して「追加」ボタンを押すと、リストに追加される。
チェックボックスで完了マークがつく。削除もできる。
ここで一度、画面をじっくり見てほしいんです。
自分が日本語で伝えただけのものが、ちゃんと動いている。
この「動いた」という瞬間の感覚は、スクールで何週間も写経してようやくたどり着いた「動くアプリ」と同じものです。
ただし、かかった時間はまるで違う。
Step 3：デザインを変えてみる
「デザインをもっとおしゃれにして。背景をダークモードにして、角丸のカードデザインにして。
フォントはNoto Sans JPを使って。」
とチャット欄に追加入力します。
AIがCSSを修正して、見た目がガラッと変わります。
コードを一行も書かずに、デザインの変更ができました。
フォントはNoto Sans JPを使って。」
とチャット欄に追加入力します。
AIがCSSを修正して、見た目がガラッと変わります。
コードを一行も書かずに、デザインの変更ができました。
Step 4：機能を追加する
「締め切り日の機能を追加して。
各タスクに日付を設定できるようにして、締め切りが過ぎたタスクは赤く表示して。」
と入力します。
AIが既存のコードに機能を追加してくれます。
ここまで、あなたはコードを一行も書いていません。
やったのは「こういうものが欲しい」と日本語で伝えただけ。
各タスクに日付を設定できるようにして、締め切りが過ぎたタスクは赤く表示して。」
と入力します。
AIが既存のコードに機能を追加してくれます。
ここまで、あなたはコードを一行も書いていません。
やったのは「こういうものが欲しい」と日本語で伝えただけ。
生成されたコードを「読んでみる」
ここまでは「作る」体験でした。
ここからは少しだけ「読む」体験をしてみましょう。
AIが生成したコードの中身を覗いてみてください。
全部理解する必要はありません。
たとえば、タスクを追加する部分のコードには「addTask（タスクを追加する）」「taskInput（タスクの入力欄）」と書かれています。
英語がそのまま意味になっています。
変数名の付け方を習ったことがあるなら、「ああ、そういうことか」と感覚的に分かるはず。
この「なんとなく読める」感覚が、バイブコーディングを続けていく上でとても大事です。
ここからは少しだけ「読む」体験をしてみましょう。
AIが生成したコードの中身を覗いてみてください。
全部理解する必要はありません。
たとえば、タスクを追加する部分のコードには「addTask（タスクを追加する）」「taskInput（タスクの入力欄）」と書かれています。
英語がそのまま意味になっています。
変数名の付け方を習ったことがあるなら、「ああ、そういうことか」と感覚的に分かるはず。
この「なんとなく読める」感覚が、バイブコーディングを続けていく上でとても大事です。
まとめ
この記事の手順通りに進めれば、30分でタスク管理アプリが動いているはずです。
何週間もかけて写経して、エラーに泣いて、それでも「動くもの」にたどり着けなかった。
あの頃の自分と、今の自分を比べてみてください。
やったことは「AIに日本語で指示を出しただけ」。
コードは一行も書いていない。
でも、画面にはちゃんと動くアプリがある。
この体験が「できた」という自信になって、次の一歩を引っ張ってくれます。
何週間もかけて写経して、エラーに泣いて、それでも「動くもの」にたどり着けなかった。
あの頃の自分と、今の自分を比べてみてください。
やったことは「AIに日本語で指示を出しただけ」。
コードは一行も書いていない。
でも、画面にはちゃんと動くアプリがある。
この体験が「できた」という自信になって、次の一歩を引っ張ってくれます。
