COCOCREA

Vercel 共同編集ガイド

人のVercelを一緒にさわるための、場合分けマニュアル

STEP 01 — まずここで確認

START
そのVercelプロジェクト、GitHubと繋がってる?
確認方法: Vercelダッシュボード → プロジェクト → Settings → Git
YES 繋がってる
おすすめ GitHubコラボレーター方式
  • GitHubのリポジトリに招待してもらう
  • コードを編集してpush
  • Vercelに自動デプロイ
NO 繋がってない
2択 ファイルを直接もらう or Vercel招待
  • コードファイルをもらって編集し返す
  • または相手のVercelにメンバー招待

STEP 02 — あなたのパターンを選んで

クライアント・仕事仲間 知人から頼まれた場合
  • 1

    GitHubリポジトリのURLを教えてもらう

    相手に「GitHubのリポジトリのURLを教えて」と聞く。
    例: https://github.com/〇〇/リポジトリ名

  • 2

    コラボレーターに招待してもらう

    相手が以下の手順で招待する:

    相手に伝える手順

    GitHubリポジトリ → Settings → Collaborators → Add people → ゆきさんのGitHubアカウント名を入力 → 招待

  • 3

    招待メールを承認する

    GitHubに登録したメールに招待が届く。「Accept invitation」を押す。

  • 4

    コードを手元にダウンロードして編集

    Claude Codeを使っているなら、VSCodeでリポジトリを開いて編集できる。

    git clone https://github.com/〇〇/リポジトリ名
  • 5

    pushするだけで自動デプロイ

    コードを直してGitHubにpushすると、Vercelが自動で本番に反映してくれる。相手は何もしなくてOK。

    POINT

    ゆきさんがpush → GitHub更新 → Vercel自動ビルド → サイト反映、という流れ。相手の手間ゼロ。

B
ファイルをもらって編集して返す
GitHubが繋がっていない・招待が難しい場合
知人から頼まれた場合
  • 1

    コードファイル一式をもらう

    相手に「プロジェクトのファイルをZIPで圧縮して送って」と頼む。

    相手への伝え方

    「Vercelのダッシュボードから "Download" できるか確認して。なければフォルダごとZIPにして送ってください」

  • 2

    Claude Codeで編集する

    受け取ったZIPを展開して、Claude Codeで開いて修正する。ここでゆきさんとシオリが一緒に作業できる。

  • 3

    編集したファイルを返す

    修正済みのファイルをZIPにして相手に送る。

  • 4

    相手がVercelに再デプロイ

    ファイルを受け取った相手がVercelにドラッグ&ドロップ(またはCLIで)デプロイする。

    注意点

    この方法は毎回ファイルをやり取りする手間がある。頻繁に修正が発生するなら、方式Aへの移行を相談するのがおすすめ。

C
VercelのTeamメンバーとして入る
相手がVercel Teamプランを使っている場合のみ
  • 1

    相手がVercel Teamプランか確認

    無料プランでは他人を招待できない。
    Teamプランなら「Settings → Members → Invite」から招待可能。

  • 2

    ゆきさんのメールアドレスで招待してもらう

    招待されたらメールから承認してVercelにアクセスできるようになる。

  • 3

    Vercelダッシュボードから設定変更

    環境変数の変更やデプロイのトリガーはできるが、コード自体の編集はGitHub経由が必要。

    POINT

    コードを書き換えたいなら、結局GitHubと繋げてもらうのが一番スムーズ。Vercel招待だけでは「設定変更」止まりになることが多い。

SUMMARY
一番楽な方法

GitHubと繋がってる → コラボレーター招待(方式A)
これ一択。push一発でデプロイまで自動。

繋がってない場合

まず「GitHubと繋げてもらえる?」と聞いてみる。それが無理ならファイル交換(方式B)。

困ったら

「GitHubのSettings → Git」のスクショをAIに見せてください。一緒に確認します。