Claude Code×Vercelのプレビュー環境で、確認と納品の往復を減らす──ブランチごとのURL、契約の名義、計算例

この記事は、Claude Code×Vercelのプレビュー環境を使い、制作の確認と納品の往復を減らす流れと、そのときに決めておく契約と権限を扱います。

修正の確認に、毎回スクリーンショットを撮っていないか

「トップの見出しを直しました。スクリーンショットを添付します」
「スマホではどう見えますか」

確認の往復は、制作の工数の中で見積もりに入りにくい部分です。
Claude Codeで修正そのものが数分で終わっても、確認の準備と説明に1時間かかれば、速くなったことになりません。

プレビュー環境とは、修正のたびに本番と同じ形の確認用URLを作り、確認と記録を同じ場所に残す仕組みである

黒字化の外科医です。Vercelのプレビュー環境を、確認と納品の工程にどう組み込むかを解剖します。

プレビューを工程の中心に置くべき理由は、三つあります。

第一に、確認用のURLが、修正のたびに自動で作られるから。
Vercelの公式ドキュメントでは、本番以外のブランチへの反映やプルリクエストの作成のたびに、プレビューのデプロイが作られると説明しています（Vercel公式ドキュメント、2026年11月2日確認）。テスト環境に上げる作業そのものがなくなります。

第二に、指摘を画面の上に残せるから。
Vercelのコメント機能は、プレビューの画面の任意の場所にコメントを付けられ、全プランで使えます。ただし、コメントする人はVercelのアカウントが必要です。メールの「3枚目の画像の右上」がなくなります。

第三に、本番に出す判断を、人の操作として残せるから。
本番のドメインを自動で割り当てず、確かめてから手動で昇格させる設定があります。「いつ、誰が公開したか」が記録に残ります。

公式ドキュメントで確かめた、Vercelの事実

以下は、VercelとClaude Codeの公式ドキュメントで確かめた範囲です（2026年11月2日確認）。

• 環境は「ローカル」「プレビュー」「本番」の3つ。プレビューのURLには、ブランチの最新を指すものと、コミットごとのものがある
• 環境ごとに環境変数を分けられる
• デプロイの保護（Standard Protection）は全プランで使え、本番のドメイン以外を保護する。パスワードでの保護はProで1プロジェクトあたり月20ドル、Hobbyでは使えない
• Hobbyプランは、個人の非商用の利用に限られる
• コメントは全プランで使える。外部の人を招待してコメントしてもらうのは、ProとEnterpriseの機能
• 公式のMCPサーバー（https://mcp.vercel.com）があり、OAuthで認証する。Claude Codeには `claude mcp add --transport http vercel https://mcp.vercel.com` で追加できる。接続したAIは、そのユーザーのアカウントと同じ権限を持つと説明されている

顧客のサイトは商用の利用です。
Hobbyの無料枠で受託のサイトを公開する前提は、見積もりから外してください。

今すぐ試せる：確認依頼のメッセージを作るプロンプト

私はWeb制作会社のディレクターです。顧客に、修正の確認を依頼します。
次の情報から、確認依頼のメッセージを作ってください。

【前提】
・今回の修正の一覧（Claude Codeの作業記録、またはコミットの一覧）：〔貼り付け〕
・プレビューのURL：〔記載〕
・確認してほしい画面と、端末：〔トップ、スマートフォン など〕
・確認の期限：〔記載〕
・今回の修正回数（契約上の何回目か）：〔例：2回目／全3回〕

1. 修正した箇所を、顧客の言葉で3〜7行にまとめる。
2. 確認してほしい点を、チェックの形で書く。
3. コメントの付け方を、2行で添える。
4. 契約上の修正回数の残りを、角が立たない言い方で書く。

専門用語（ブランチ、コミットなど）は使わないこと。

プレビュー納品工場：流れ、名義、計算例

確認から公開までの流れ

① 修正ごとにブランチを作り、Claude Codeで修正する
② プレビューのURLで、社内の担当者が先に確認する
③ 顧客に、確認依頼のメッセージとURLを送る
④ 顧客は、画面にコメントを付ける（またはメールで返す）
⑤ 指摘を直し、同じブランチに反映する（URLは同じまま更新）
⑥ 顧客の「確認しました」をメールで受け取る
⑦ 本番に反映し、公開した日時と担当者を記録する

⑥のメールが、検収の記録になります。
画面のコメントだけで終わらせず、合意は記録に残る形で受け取ります。

▶ 検収で揉めるWeb制作は、納品の前に負けている──検収基準を先に決める、検収期間、みなし検収の条項、不具合と仕様変更の線引き

契約の名義と権限を決める表

□ Vercelのチーム（プロジェクト）は、誰の名義で契約するか
　　顧客の名義：解約や引き継ぎが簡単。制作会社はメンバーとして参加
　　制作会社の名義：管理は楽。月額を保守料に含め、移管の手順を契約に書く
□ プレビューを保護するか（保護の方法と、費用の負担者）
□ 本番の環境変数（APIキーなど）を、誰が登録するか
□ MCPでVercelにつなぐ場合、使う人と、読み取り中心の使い方に限るか

顧客のアカウントや鍵を預かるときは、権限を必要な範囲に絞り、契約で範囲を決め、顧客の同意を得てから設定します。
なお私は弁護士ではありません。実務の指針として読み、個別の判断は専門家や公的な窓口に確認してください。

確認の往復で減る時間の計算例

（例：時間単価8,000円、1案件の確認の往復5回）
これまで：準備と説明 1回3時間 × 5回 ＝ 15時間
プレビュー：準備と説明 1回1.5時間 × 5回 ＝ 7.5時間
差：7.5時間 × 8,000円 ＝ 60,000円（1案件あたり）

席の費用も見ておきます。
Proの開発者の席は、1人あたり月20ドルです（Vercel公式ドキュメント、2026年11月2日確認）。2人なら月40ドル、例として1ドル150円で計算すると月6,000円です。

構造的なリスク

逆説を指摘しておきます。

プレビューのURLは、作るのが簡単なぶん、顧客が「いつでも直せる」と感じやすくなります。
URLが同じまま更新されるので、修正の回数が見えにくくなるのです。確認依頼のたびに「今回は何回目か」を書き、契約の修正回数と結びつけてください。

▶ Web制作の契約書に、必ず入れておく11の条項──業務範囲、修正回数、検収、著作権と人格権の不行使、損害賠償の上限。なぜ必要かまで

よくあるQ&A

Q. 顧客がVercelのアカウントを作りたがらない。

コメントは使わず、確認依頼のメッセージへの返信で受けます。プレビューのURLだけでも、テスト環境に上げる作業はなくなります。

Q. プレビューに、本番のAPIキーを入れてよいか？

環境ごとに環境変数を分けられます。プレビューには、テスト用のキーやデータを使う構成にしてください。

Q. Vercel MCPで、デプロイまでAIに任せてよいか？

接続したAIは、ユーザーと同じ権限を持ちます。ログや状態の確認から使い、本番への反映は人が判断する形を勧めます。

最後に

プレビュー環境は、確認の準備をなくし、指摘と合意を同じ場所に残す仕組みです。

名義と権限と修正回数を決めてからプレビューを使った会社だけが、速く直せる時代に、確認の往復で粗利を失わずに済むのです。

これまでの記事は、メンバーシップ「黒字化オペ室」でまとめて読めます。月額1,980円、記事2本分の金額です。詳しくはプロフィールから。

#Web制作会社 #Vercel #ClaudeCode #プレビュー #検収 #修正回数 #制作会社経営 #中小企業 #進行管理 #Jamstack