[!NOTE]
この記事の要約（TL;DR）
- 何ができるのか: Googleの次世代AIエージェント「Antigravity」を使えば、自然言語のプロンプトだけでWebサイトやランディングページ（LP）の骨格を構築できます。
- 最初の壁: Next.jsなどNode.jsを必要とする構成でLPを作る場合、ローカルPC側に実行環境がなければ、初期段階で
npxエラー等で停止します。- 実践の結論: AIエージェントによってコードを書く作業は大幅に減らせます。しかし、要件を決めること、生成されたコードや画面を確認すること、エラーに対応すること、完成品質を判断することまで自動化されるわけではありません。
Webアプリケーション開発は、AIエージェントの登場によって「コードを一行ずつ書く作業」から「自然言語で対話し、意図したものを具現化する作業（Vibe Coding）」へと大きく進化しました。
Googleが提供する自律型AIエージェント環境「Antigravity」は、まさにその未来を体感できるツールです。しかし、実際にゼロからNext.jsなどを用いたLP（ランディングページ）を作ろうとすると、従来の開発と同様に**「PCローカル環境の最初のハードル」**に直面することがあります。
本記事は、筆者が実際にAntigravityを使ってLP作成に挑み、つまずいた環境設定エラーの解決から、AIの実装計画の確認、ローカルサーバー起動、ブラウザでの表示確認、そして修正に至るまでの全工程を記録したリアルな実録マニュアルです。
1. プロジェクト開始とワークスペースの指定
AIエージェントにLP作成を指示する前に、まずAIが安全にファイルを生成・編集できる「作業場所（ワークスペース）」を指定します。
Step 1: ワークスペース（専用フォルダ）の準備
- Antigravityを起動し、画面の「Open Agent Manager」またはサイドバーのフォルダアイコンをクリックします。
- 「Open local folder」を選択し、PC上に新規作成した**「LP作成専用の空フォルダ」**を指定します。
[!TIP]
初めて試す場合のポイント
初めて試す場合は、既存プロジェクトとの競合や不要なファイルの巻き込みを避けるため、専用の空フォルダから始めると安全です。
Step 2: 最初のプロンプト入力
ワークスペースを設定したら、中央のチャット入力欄（Ask anything, @ for context）にLP作成の指示を入力します。
Next.jsとTailwind CSSを使って、AI駆動型ツールの魅力的なLPを実装してください。
ヘッダー、主要機能3つの紹介、利用者の声（レビュー）、FAQ、CTA付きフッターの構成でお願いします。2. 最初の壁：環境設定エラーと解決策（最重要）
プロンプトを送信すると、AIエージェントは自律的にプロジェクトの初期化（Next.js環境のセットアップ等）を試みます。しかし、環境によっては**「環境依存エラー」**が発生することがあります。
2-1. 発生したエラー：command not found: npx
今回の制作では、AIエージェントがコマンドを実行した直後、以下のようなエラーログを出力して処理が停止しました。
zsh: command not found: npxこれは、AIエージェントが動作しているあなたのPC環境に、Next.jsのセットアップに必要な Node.js（および npx コマンド）がインストールされていない、またはPATH（パス）が通っていない ことを意味します。
[!IMPORTANT]
なぜNext.jsなどの構成でNode.jsが必要なのか？
Antigravityは設計図やプログラムコードを自律的に書くことができますが、そのコード（Next.jsやReactなど）をあなたのPC上で実際に動かしてブラウザに描画するには、土台となる実行環境（Node.js）が必須です。AIは万能の魔法ではなく、あくまで「PC上の開発ツールを操る優秀なパイロット」だからです。
2-2. Node.jsインストールの具体的な解決手順
このエラーを解決するには、PCにNode.jsを導入します。
- 公式サイトからダウンロード: ブラウザで Node.js 公式サイト にアクセスし、安定している 「LTS（推奨版）」 のインストーラーをダウンロードします。
- インストール実行: ダウンロードしたインストーラーを開き、画面の指示に従って標準設定のままインストールを完了させます。
- 環境の確認: ターミナル（MacならTerminal、WindowsならPowerShellなど）を新しく開き直して、以下のコマンドを実行します。バージョン番号が表示されれば成功です。
node -v
npx -v- AIエージェントへの再指示: Antigravityに戻り、チャット欄で以下のように伝えます。
Node.jsの環境設定が完了しました。LPプロジェクトの初期化を再度実行してください。3. 実装の進行とローカルサーバーの起動
環境エラーが解消されると、AIエージェントは本格的な設計とコーディングへ進みます。ここからは「AIの計画を人間が確認し、GOサインを出す」フェーズに入ります。
3-1. 実装計画の確認（Implementation Plan）とコード生成
今回の制作では、Antigravityはコード生成に入る前に implementation_plan.md（実装計画書）を作成し、実装計画を確認する流れになりました。
- 操作: 画面に表示された計画内容を確認し、問題がなければ 「Proceed and Execute」（承認ボタン）をクリックします。
flowchart LR
A[プロンプト投入] --> B[実装計画書の作成]
B --> C{人間のレビュー・承認}
C -->|承認| D[自律コーディング]
C -->|修正要求| B[!TIP]
初心者がチェックすべき2つのポイント
- 目的の整合性: 計画書の冒頭に書かれた「プロジェクトの目的」が、自分の作りたいLPとズレていないか。
- 技術選定: 使用するフレームワークやスタイリング（Next.js / CSSなど）が指示通りになっているか。
3-2. サーバー起動：ブラウザで表示確認するための操作
AIがコード生成を完了しても、そのままではブラウザで実際の画面を見ることができません。画面下部の「Terminal」タブ、またはAntigravityのコマンド実行機能を使ってローカル開発サーバーを起動します。
npm run dev[!WARNING]
ERR_CONNECTION_REFUSEDが出たときは？
ブラウザでhttp://localhost:3000を開いた際に接続エラー（ERR_CONNECTION_REFUSED）が出る場合は、開発サーバーがまだ起動していないか、別ポート（localhost:3001等）で立ち上がっている可能性があります。ターミナルに表示されているURL（ready on http://localhost:...）を必ず確認してください。
ターミナルに Ready in ...ms や http://localhost:3000 と表示されたら、ブラウザでそのURLを開きます。AIが生成した実際のLPが表示されます。
4. 成果物の確認と戦略的修正
ブラウザで画面が表示されたら、デザインやレイアウトをチェックしてブラッシュアップしていきます。
4-1. ビジュアル・フィードバックによる直感的な修正指示
今回の制作では、コードを直接編集せず、ブラウザの画面を確認しながら自然言語で修正を指示しました。
- 指示の例:
- 「メインビジュアルのキャッチコピーをもう少し大きくして、太字にしてください。」
- 「CTAボタンの背景色を
#7DCA7Eに変更し、ホバー時に少し浮き上がるアニメーションをつけてください。」 - 「機能紹介の3つのカードの余白を広げて、スマホ表示時にも崩れないように調整してください。」
今回の制作では、こうした指示に応じて該当するコンポーネントやスタイルを修正していきました。
4-2. 成果物の確定と次のステップ
デザインと動作に納得がいったら、Antigravityのパネルに表示されている確定ボタン（「Accept all」等）をクリックして変更を確定します。
[!NOTE]
Webサイトとして公開（デプロイ）するには？
本記事ではローカル環境での制作・確認までを扱っています。完成したLPを全世界に公開したい場合は、作成したプロジェクトフォルダを GitHub にアップロードし、Vercel や Cloudflare Pages などの無料ホスティングサービスと連携することで、数クリックで公開できます。
5. 結局、AntigravityでLPを作るのにプログラミング知識は必要？
この記事を読んでいる方が一番気になっているのは、「本当にプログラミング知識がゼロでもLPを作れるのか？」という点ではないでしょうか。実際に作ってみて分かった結論は以下の通りです。
- HTML/CSS/JavaScriptを完全に暗記している必要はない
- 構文を1行ずつ手作業で書く場面を大幅に減らせるため、文法を完全に覚えていなくてもLPの構築自体は可能です。
- ただし、最低限の環境知識（Node.jsなど）は必要になる場合がある
- 本記事で紹介したように、「なぜエラーが出ているのか」「サーバーを起動するとはどういうことか」といったPCの基本動作の理解は求められます。
- エラーや表示崩れを判断する「目」があると強い
- 生成されたLPのレイアウト崩れや配色の違和感に気づき、「ここを直して」と的確に指示を出すディレクション力が必要です。
- 最終的な品質判断と責任は人間が持つ
- AIは指示通りに作ってくれますが、「これでユーザーに価値が伝わるか」「ビジネスとして成立しているか」を判断できるのは人間だけです。
6. よくある質問（FAQ）
Q1. Node.jsを使わずに、もっとシンプルにLPを作る方法はありますか？
A. あります。Next.jsなどのフレームワークを使わず、「Vanilla HTML + CSS + JavaScript」 の単一ファイル構成で指示を出せば、Node.jsの環境構築なしでブラウザで即座にプレビュー（index.html を直接開くだけ）が可能です。軽量なLPであれば、この方法の方が手軽でおすすめです。
Q2. エラーが何度も出て進まないときはどうすればいいですか？
A. エラーメッセージをそのままAntigravityのチャット欄に貼り付け、「このエラーが発生して進みません。原因と解決策を教えてください」と相談してください。エージェントがコマンドのパスや設定ファイルの不備を分析し、修正案を提示してくれます。
まとめ：AIエージェント時代の開発者の役割
実際にAntigravityを使ってLPを作成してみて痛感したのは、「開発者の役割が『手を動かしてコードを書く人』から『全体の設計と品質をディレクションする監督』へと変化したこと」 です。
| 従来の開発 | AIエージェント（Antigravity）を活用した開発 |
|---|---|
| 文法を覚えてコードをタイピングする | 作り上げたい世界観や要件を言葉で伝える |
| 構文エラーを自分で調べて修正する | エラーログをAIに渡し、協調して環境を整える |
| すべてのCSSレイアウトを手動で組む | 画面を見て直感的にフィードバックを返す |
| 実装作業そのものに大半の時間を消費 | 計画の承認と意思決定（ディレクション）に集中 |
環境構築の最初の壁さえ乗り越えれば、プログラミング経験の有無にかかわらず、頭の中にあるアイデアを爆速で形にできる強力な時代が到来しています。
まずは空のフォルダを用意し、最初のプロンプトを打ち込むところから、新しい開発体験を始めてみてください。