コードを書かない開発の現実と最初の壁
Webアプリケーション開発は、今、大きな転換期を迎えています。GoogleのAIエージェントツール「Antigravity」は、「コードを一行も書かずにLP（ランディングページ）を作れる未来」を提示しますが、その裏側には、従来の開発者が必ず直面してきた「最初のハードル」が存在します。
本記事は、筆者が実際に Antigravity でLP作成を試み、つまずいた環境設定のエラー解決から、AIにコードを承認するまでの全工程を記録した実録マニュアルです。この手順通りに進めれば、開発初心者やマネージャー候補の方でも、必ずAIエージェントによる開発を成功させることができます。
1. プロジェクト開始とワークスペースの指定
AIエージェントにLP作成を指示する前に、AIがコードを書き込むための作業場所（ワークスペース）を指定します。
Step 1: ワークスペースの初期化
- 画面中央または右側の「Open Agent Manager」ボタンをクリックします。
- 表示された画面で「Open local folder」をクリックし、PC上に作成したLP作成専用の空のフォルダを指定します。
- 理由: 既存のファイルへの干渉を防ぎ、AIがNext.jsの構成ファイルを安全に生成できるようにするためです。
Step 2: 最初のプロンプト入力
ワークスペースが設定されたら、中央のチャット入力欄（「Ask anything, @for context」と書かれている）にLP作成の指示を入力します。
- プロンプト例: 「Next.jsとTailwind CSSを使って、AI駆動型ツールのLPを実装してください。ヘッダー、機能3つ、顧客の声、フッターの構成でお願いします。」
2. 最初の壁：環境設定エラーと解決策（最重要）
AIエージェントはNext.jsの初期化を試みますが、ここで多くのユーザーが直面する環境依存のエラーが発生します。
2-1. 発生したエラー
AIエージェントが実行したコマンドに対して、以下のエラーが発生して処理が停止しました。
zsh: command not found: npx
これは、AIエージェントの実行環境に、Next.jsの初期化に必要なNode.js（および npx コマンド）がインストールされていない、またはパスが通っていないことを意味します。
2-2. Node.jsインストールの具体的な解決手順
このエラーを解決するには、ユーザーがAntigravityの外部でNode.jsをインストールする必要があります。
【補足：なぜAIでもNode.jsが必要なのか？】
Antigravityはコードを生成できますが、その生成したコード（Next.js）をPC上で動かすには、土台となる実行環境が必要です。Node.jsは、Next.jsやnpm、
npxといったツールの親玉であり、これがなければAIが生成したファイルは動かすことすらできません。
- インストーラーのダウンロード: WebブラウザでNode.jsの公式サイトにアクセスし、「推奨版（LTS版）」のインストーラーをダウンロードします。
- インストール実行: ダウンロードしたファイルを開き、画面の指示に従って完了させます。
- 環境の再確認:必ず新しいターミナルウィンドウを開き、以下のコマンドでバージョンが表示されることを確認します。
node -vnpx -v
- AIエージェントへの再指示: Antigravityのチャット入力欄に戻り、「Node.jsの環境設定が完了しました。LPプロジェクトの初期化を再度実行してください。」と入力し、送信します。
3. 実装の進行とローカルサーバーの起動（操作必須）
環境エラーが解決すると、AIエージェントは自動でLPのコード生成に進みます。しかし、LPをブラウザで確認するには、手動でのサーバー起動が必要です。
3-1. 計画の承認とコード生成
エラー解決後、AIエージェントは自動で implementation_plan.md を作成し、チャットで承認を求めます。
- 操作: 計画書をレビューし、問題がなければ「Proceed and Execute」ボタンをクリックします。
【レビューの着眼点：初心者がチェックすべき2つの項目】
複雑な技術的内容は無視して構いません。以下の2点だけ確認してください。
- 目的に合っているか？ 計画書の冒頭に書かれている「このプロジェクトの目的」が、あなたが指示したLPの内容とズレていないか。
- 使ってほしい技術か？ 「Tech Stack」の欄に、あなたが意図した技術（例：Next.js、Tailwind CSS）が正しく記載されているか。
3-2. サーバー起動：ブラウザ確認のための必須操作 💡
AIがコード生成を完了し、「実装が終わった」ように見えても、ブラウザでLPを見るためには、Next.jsの開発サーバーを起動する必要があります。
- エラーの経験: 筆者もここで
ERR_CONNECTION_REFUSEDエラーに遭遇しました。 - 操作: 画面下部の「Terminal」タブを開き、以下のコマンドを実行します。
npm run dev【補足：なぜTerminalでコマンドを打つのか？】
このコマンドは、あなたのPC内に一時的な「ローカルサーバー」を起動させるためのものです。あなたのPCを小さなWebサーバーに変身させ、ブラウザがLPのファイルを正しく読み込めるようにします。この操作はPC内での動作であり、インターネットにLPを公開するわけではありませんので、ご安心ください。
- 確認: ターミナルに「ready on http://localhost:3000」と表示されたら、ブラウザで
http://localhost:3000にアクセスし、AIが作成したLPを確認します。
4. 成果物の最終承認と戦略的修正
LPがブラウザで表示され、AIエージェントが最終検証を完了したら、いよいよ最終段階です。
4-1. デザイン修正の新しい常識（ビジュアル・フィードバック）
コードを直接修正する代わりに、以下の手順で視覚的に修正指示を出します。
- LPを確認: ブラウザでLPを開き、修正したい部分（例：ボタンの色、フォントサイズ）を見つけます。
- 視覚的指示: Antigravityのフィードバック機能を使って、修正したい箇所を囲んで（スクリーンショットなどに描画）伝えます。
- 自然言語で指示: チャット入力欄で「このボタンの色を青（#1D4ED8）に変更し、角を丸くしてください。」と指示します。
- AIの能力: AIは、簡単なSVGアイコン生成や、プロンプトに基づいた画像生成も自律的に行い、LPに組み込むことができます。
4-2. 最終承認とデプロイ（公開）
修正が完了し、LPの品質に納得できたら、最終承認を行います。
- 操作: 画面右側のAgent Panelに表示された 「Accept all」ボタンをクリックします。
- この操作で、AIが生成したすべてのコードがプロジェクトフォルダに確定され、LP作成タスクが完了します。
- デプロイ: 確定したLPプロジェクトフォルダ全体を、Vercelなどのデプロイサービスに接続すれば、LPが世界に公開されます。
🌟 結論：AIエージェント時代の開発者の役割
Antigravityを使った開発は、「コードを書く」ことから「AIエージェントをディレクションする」ことに開発者の役割を明確にシフトさせます。
環境構築の壁は残りますが、一度それを乗り越えれば、LP作成にかかる実装工数（コーディング、テスト、ドキュメント作成）はほぼゼロになります。
AIエージェントを活用することで、あなたの開発チームは、環境エラーを解決し、最初の計画と最終チェックという、最も戦略的な判断に集中できるようになるのです。あなたのチームは、まずどこにAIエージェントを導入しますか？
素人が無理を承知でチャレンジしてみました。間違いなどあるかもしれません。
あしからず苦笑