この記事で作れるもの
AIエージェントに「ここ直して」と日本語で話しかけるだけで、Webサイトの修正から本番反映までが完了する環境を構築します。
- コードを書かなくても、AIに指示するだけでサイトを更新できる
- GitHub で変更履歴を管理、いつでも前の状態に戻せる
- プッシュするだけで自動デプロイ。数分で本番反映
全体構成
Mac（ローカル）
ソースコード + AIエージェントがここを編集
GitHub
バージョン管理 / git push で連携
Cloudflare Pages
自動ビルド & デプロイ
本番サイト
https://your-domain.com
Claude Code vs Antigravity
どちらを使っても同じ結果が得られます。GitHub + Cloudflare Pagesの構成は共通です。
| 比較項目 | Claude Code | Antigravity |
|---|---|---|
| 動作環境 | ターミナル（ローカル） | ブラウザ（クラウド） |
| ファイルアクセス | ローカルに直接アクセス | GitHub経由で同期 |
| プレビュー | localhost で確認 | ブラウザ内蔵プレビュー |
| 外部連携 | MCP（Gmail, Supabase等） | Google系サービス連携 |
| Git操作 | ターミナルで自由自在 | IDE内蔵ターミナル |
| Node.js | ローカルにインストール必須 | クラウド実行で不要な場合あり |
| 画像生成 | 非対応（Gemini等で別途生成） | Gemini統合で対応可能 |
前提ツールのインストール
Homebrew
Mac用のパッケージマネージャー。他のツールをインストールするために必要です。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Node.js
JavaScript実行環境。Next.jsのビルドに必要です。
# nvm（バージョン管理ツール）をインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# ターミナルを再起動してから
nvm install --lts
nvm use --lts
# 確認
node -v # v22.x.x 等が出ればOK
npm -v # 10.x.x 等が出ればOKGit + GitHub CLI
# Git（最新版）
brew install git
# 初期設定
git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
# GitHub CLI
brew install gh
# GitHubにログイン（ブラウザが開きます）
gh auth loginAIエージェント
Claude Code
npm install -g @anthropic-ai/claude-code
# 起動
claudeAntigravity
ブラウザで antigravity.dev にアクセスし、Googleアカウントでログイン。 インストール不要。
GitHubリポジトリの作成
# プロジェクトフォルダで実行
cd ~/projects/my-website
# Gitを初期化
git init
# GitHubにリポジトリを作成してプッシュ
gh repo create my-website --private --source=. --remote=origin --pushSSHキーの設定
ターミナルからGitHubにプッシュするために必要です。
# SSHキーを生成
ssh-keygen -t ed25519 -C "your-email@example.com"
# GitHubに登録
gh ssh-key add ~/.ssh/id_ed25519.pub --title "My Mac"
# 接続テスト
ssh -T git@github.com
# → "Hi username!" と出ればOKAntigravityの場合
Antigravity内でGitHub連携済みならSSHキー設定は不要です。 Antigravityの設定画面からGitHubアカウントを接続してください。
Cloudflare Pagesとの連携
Cloudflareダッシュボードにログイン
Workers & Pages → Create → Pages → Connect to Git
GitHubアカウントを連携し、対象リポジトリを選択
ビルド設定:
Framework: Next.js
Build command: npm run build
Output directory: .next（もしくはout）
「Save and Deploy」で初回デプロイ完了
これで準備完了
以降、GitHubにプッシュするたびに自動でビルド＆デプロイされます。 カスタムドメインの設定もCloudflareダッシュボードから行えます。
AIエージェントでサイトを修正する
日常の運用フロー
ターミナルを開く
もしくはAntigravityでリポジトリを開く
プロジェクトフォルダに移動
cd ~/projects/my-website
AIエージェントを起動
Claude Code: claude と入力 / Antigravity: チャットを開く
日本語で指示する
「トップページの見出しを変えて」「お問い合わせページを追加して」
「プッシュして」と言う
AIがgit add → commit → pushを実行
数分後に本番反映
Cloudflare Pagesが自動ビルド＆デプロイ
指示の例
ページ修正
「料金ページの金額を更新して」
新規ページ
「会社概要ページを新しく作って」
デザイン変更
「ヘッダーの色を紺色に変えて」
機能追加
「お問い合わせフォームを設置して」
Antigravity特有の注意点
ローカルとの同期に注意
AntigravityとClaude Codeを同じリポジトリで併用する場合、作業前に必ずgit pullして最新状態にしてください。コンフリクトの原因になります。
画像生成について
Claude Codeは画像生成に対応していないため、サイトに使うイラストや写真素材はGoogleのGemini（NanoBanana）等で別途生成します。 AntigravityはGeminiが統合されているため、テキストも画像も一つの環境で完結できます。
Node.jsバージョンの固定
AntigravityのクラウドとCloudflare PagesでNode.jsバージョンが異なる場合があります。 プロジェクトルートに.nvmrcファイルを作成してバージョンを固定しておくと安全です。
必要なアカウント一覧
| サービス | 用途 |
|---|---|
| GitHub | コード管理 |
| Cloudflare | ホスティング / ドメイン |
| Anthropic | Claude Code を使う場合 |
| Antigravity を使う場合 |
環境構築のサポートや、AIを活用したWeb制作のご相談は
お気軽にお問い合わせください。