AIにコードを書かせるだけなら、ツールを入れれば今日から始められます。しかしそれを本番公開まで安全に運べる状態にするには、いくつかの設定が必要です。
この記事では、環境構築から本番公開・運用までを一続きで解説します。macOSとWindowsの両方の手順を含みます。
この記事の概要
構成 | Claude Code + GitHub + Vercel |
|---|---|
範囲 | 環境構築 → リポジトリ保護 → 設計 → CI/CD → 本番公開 → 運用 |
対応OS | macOS / Windows（差分はSTEP 1のみ） |
結論：役割を3つに分けて理解する
ツール | 役割 |
|---|---|
Claude Code | AI搭載の開発アシスタント（実装・PR作成まで担う） |
GitHub | コードの管理・品質チェックの場所 |
Vercel | 本番サイトを公開・運用する場所 |
開発者のPC
[Claude Code] ←── AIが実装・PR作成を支援
↓ git push
GitHub
・コードの保管場所
・PRのレビュー・マージ
・テスト自動実行 / 脆弱性の自動検知
↓ mainにマージ → 自動デプロイ
Vercel
・ホスティング
・PRごとにプレビューURLを自動生成
・カスタムドメイン・SSL自動発行STEP 1：環境構築
macOSの場合（3つ）
# Node.js v22 の確認（22.x.x と表示されればOK）
node -v
# GitHub CLI
brew install gh
gh auth login
# Claude Code
npm install -g @anthropic-ai/claude-codeWindowsの場合（4つ）
Windowsでは winget（Windows標準のパッケージ管理ツール）を使うのが最も手軽です。macOSのHomebrewに相当し、Windows 10 21H1以降・Windows 11に標準搭載されています。
ターミナルは標準搭載のPowerShellを使います。
winget install Git.Git
winget install OpenJS.NodeJS.LTS
winget install GitHub.cliWindowsでは Git for Windows のインストールが追加で必要です（macOSには標準で入っています）。
もう1点、重要な注意があります。各インストール後はPowerShellを再起動してからバージョン確認してください。再起動しないとPATHが反映されません。
STEP 2以降はmacOSとWindowsで共通です。
STEP 2：リポジトリを「守る」設定
リポジトリを作っただけでは、誰でも（自分でも）mainブランチに直接pushできてしまいます。安全レールがない状態です。
【危険な状態（設定なし）】
開発者 → main に直接 push → 即座に本番へ反映
↑ バグがあっても止まらない
【安全な状態（設定あり）】
開発者 → feature ブランチ → PR 作成 → CI チェック → マージ → 本番へ反映
↑ ここで問題を検知できるmainブランチ保護（Rulesets）
設定 | 値 | 意味 |
|---|---|---|
Enforcement status | Active | これがDisabledだとルールが一切効かない |
Target branches |
| 保護対象 |
Require a pull request | ON | PR経由でないとマージ不可 |
Require status checks to pass | ON（任意） | CIが通らないとマージ不可 |
Block force pushes | ON | 強制上書き禁止 |
Enforcement status を Active にするのを忘れないでください。Disabledで作成すると設定が全て無効になります（実際によくあるミスです）。
あわせてDependabotの有効化と、マージ戦略をSquash mergeに統一する設定も行います。
STEP 3：プランモードで設計する
Claude Codeの最大の特徴は「実装前に設計を合意してから動く」プランモードです。
- 実装方針を複数の選択肢で提示してくれる
- 「どのアプローチにしますか？」と確認してから実装を始める
- 設計の記録をファイルに保存する
実際のやりとりは次のような形です。
ユーザー: サービス紹介ページを追加したい
Claude Code: 以下の3点について確認させてください。
1. ページ構成：シングルページ vs. カテゴリ別複数ページ
2. デザイン：既存デザインに合わせる vs. 新規デザイン
3. コンテンツ：静的テキスト vs. CMSで管理
ユーザー: シングルページ、既存デザイン、静的テキスト
Claude Code: 了解です。では実装を開始します...実装の前に方針を合意するので、「作ってみたら思ってたのと違う」という手戻りが大幅に減ります。
担当範囲の切り分け
Claude Codeが担う | 人間が担う（AIが触れない領域） |
|---|---|
コードの実装 | GitHub・VercelのGUI操作 |
テストの作成 | sudoが必要なOS権限操作 |
PRの自動作成 | 最終的なマージの判断 |
エラーの調査と修正提案 | — |
ブラウザ上の設定操作は、AIが代替できない領域として残ります。
STEP 4：CI/CD（任意・推奨）
最初はスキップしても本番公開はできます。ただしリスクを把握したうえで判断してください。
リスク | 内容 |
|---|---|
バグがmainに入る | テストを手動で実行し忘れると気づかない |
Dependabot PRの品質が不明 | 自動作成されたPRが問題ないか確認できない |
後から導入が大変 | チームが増えると後付けコストが跳ね上がる |
導入は最小構成なら1ファイルで済みます。
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '22'
- run: npm ci
- run: npm run test # テストが通らないとマージ不可
- run: npm run build # ビルドが通らないとマージ不可STEP 5：本番公開
GitHubと連携するだけで、mainへのマージが自動で本番反映になります。
- Vercelにアクセス → GitHubでログイン
- 「Add New Project」→ リポジトリを選択
- フレームワークが自動検出される
あわせて環境変数の設定、PRごとのプレビューデプロイ、カスタムドメインの紐付けを行います。
STEP 6：運用は常にPR経由
# 1. ブランチを作る
# 2. Claude Code で実装
# → 実装・テストを行い、PRを自動作成
# 3. GitHub でマージ
# → Vercel が自動でデプロイこの流れが固定されていれば、AIが実装しても本番が壊れません。保護設定とCIが、間に入って止めてくれます。
よくある質問
Windowsでも同じ手順でできますか？
差分はSTEP 1（環境構築）のみです。Windowsではwingetを使い、Git for Windowsのインストールが追加で必要になります。STEP 2以降は共通です。
ブランチ保護の設定が効きません
Enforcement status が Active になっているか確認してください。Disabledで作成すると設定が全て無効になります。よくあるミスです。
CI/CDは必須ですか？
任意ですが推奨です。スキップしても本番公開はできます。ただしチームが増えてからの後付けはコストが跳ね上がります。
AIに任せられない作業は何ですか？
GitHub・VercelのGUI操作、sudoが必要なOS権限操作、最終的なマージの判断です。ブラウザ上の設定は人間が担当します。
まとめ
- 役割はClaude Code（実装）／GitHub（管理・品質）／Vercel（公開）の3分担
- 環境構築のOS差分はSTEP 1のみ。WindowsはwingetとGit for Windowsが追加
- Windowsはインストール後にターミナルを再起動しないとPATHが反映されない
- リポジトリ保護のEnforcement statusをActiveにする——Disabledだと全て無効
- プランモードで実装前に方針を合意すると手戻りが減る
- GUI操作・OS権限操作・マージ判断は人間の担当として残る
- CI/CDは任意だが、後付けはコストが跳ね上がる
AIに実装を任せるほど、安全に止める仕組みの価値が上がります。保護設定とCIを先に入れておけば、あとは流れに乗せるだけになります。
株式会社AI棒では、こうしたAI活用の検証を日々行い、企業の開発体制へのAI導入を支援しています。ご相談はお問い合わせフォームから、継続的な伴走支援についてはAI参謀をご覧ください。