サイト更新セットアップ手順書

サイト更新に関わるサービスは 3つ だけ覚えればOKです。

更新の流れ（日常）

すでに Claude アカウントをお持ちなら この章はスキップ してください。

必要なプラン

サイト更新（Code タブ）を使うには、以下のいずれかの 有料プラン が必要です。

• 登録・プラン確認：claude.ai
• プラン変更：claude.ai/upgrade

Vercel（ヴェルセル） は、サイトをインターネット上に公開するサービスです。裏側でサーバーが動いていて、世界中の誰でもブラウザからアクセスできます。

1. 1

   サインアップページを開く

   https://vercel.com/signup
2. 2

   Google アカウントで登録（おすすめ）

   • 「Continue with Google（Google で続行）」をクリック
   • 普段使っている Google アカウントを選ぶ
   • 「許可」や「同意」を求められたら許可する
3. 3

   初回画面の設定

   • Team name（チーム名）→ なんでもOK（例：kanka-media）
   • What would you like to do? → 「Hobby（個人・趣味）」を選ぶ（無料）
   • 残りの質問はスキップしてOK
4. 4

   ダッシュボードが表示されれば成功

   画面左上に Vercel のロゴと、Projects などのメニューが見えれば完了です。

GitHub（ギットハブ） は、サイトのソースコード（設計図）を保存・管理するサービスです。Word の「変更履歴」が全部残るイメージです。

1. 1

   サインアップページを開く

   https://github.com/signup
2. 2

   アカウント情報を入力

   項目	入力例	注意
   Email	普段使うメールアドレス	確認メールが届きます
   Password	8文字以上	忘れないようにメモ
   Username	natsuro-hara など	半角英数字とハイフンのみ

3. 3

   メール認証

   • 登録メールアドレスに届いた 6桁のコードを入力
   • またはメール内のリンクをクリック
4. 4

   初期アンケート（全部スキップ可）

   人数、用途、プランなど聞かれますが Skip（スキップ）で進んでOK。無料プラン（Free）のままで問題ありません。

5. 5

   ホーム画面が表示されれば成功

   左上に GitHub の猫アイコン（Octocat）が見えれば完了です。

リポジトリ（レポジトリ） = GitHub 上の「プロジェクトフォルダ1個分」のことです。

5-1. 新しいリポジトリを作る

1. 1

   GitHub にログイン → 右上の「+」→「New repository」をクリック

2. 2

   項目	入力内容	例
   Repository name	英語でサービス名	tonitoga / kanka-media / natsuro-media
   Description	任意（日本語OK）	原奈都良のオウンドメディア トニトガ
   Public / Private	Private（非公開）を推奨	ソースコードを一般公開しない
   Add a README file	チェックを入れる	空のリポジトリを避けるため

3. 3

   緑色の「Create repository」ボタンをクリック

5-2. 岡崎（zakioka-pirori）を招待する

岡崎が最初のサイト構築と、困ったときのサポートをします。

1. 1
   作成したリポジトリのページ → 上部タブの Settings
2. 2
   左メニューの Collaborators（または Collaborators and teams）
3. 3
   「Add people」ボタンをクリック
4. 4
   検索欄に zakioka-pirori と入力
5. 5
   Role は Write（書き込み権限）を選ぶ
6. 6
   「Add zakioka-pirori to this repository」をクリック

5-3. 岡崎側で招待を承認

岡崎が承認したら、あなたのリポジトリにサイトの初期ファイルがアップロードされます。

この章は 岡崎が作業 → あなたが Vercel をつなぐ という順番です。

6-1. 岡崎がやること（あなたは待つだけ）

• リポジトリにサイトの初期コードをアップロード
• 動作確認

6-2. あなたが Vercel と GitHub をつなぐ

1. 1
   vercel.com
2. 2
   「Add New…」→「Project」
3. 3
   「Import Git Repository」で「Continue with GitHub」
4. 4
   初回は GitHub 連携の許可 →「Authorize Vercel」
5. 5
   リポジトリ一覧から tonitoga（または kanka-media）を選ぶ
6. 6

   項目	値	備考
   Framework Preset	Next.js（自動検出）	触らなくてOK
   Root Directory	./	そのまま
   Build Command	npm run build	自動入力
   Output Directory	自動	触らなくてOK

7. 7
   「Deploy」をクリック → 1〜3分待つ →「Congratulations!」

6-3. 公開 URL を確認

https://tonitoga-xxxxx.vercel.app

この URL をブラウザで開いてブックマークしておいてください。

Claude Desktop の Code タブは パソコン上のフォルダ を編集します。GitHub 上のファイルを一度パソコンに「クローン（複製）」する必要があります。

7-1. GitHub Desktop をインストール（おすすめ）

1. 1
   https://desktop.github.com/
2. 2
   「Download for macOS」または「Download for Windows」
3. 3
   インストール → 起動 →「Sign in to GitHub.com」
4. 4
   ブラウザが開く → Authorize desktop をクリック

7-2. リポジトリをクローン

1. 1
   GitHub Desktop →「File」→「Clone repository…」
2. 2
   「GitHub.com」タブ → 自分の tonitoga リポジトリを選ぶ
3. 3

   Local path（保存場所）を確認してメモ：

   Mac 例：/Users/あなたの名前/Documents/tonitoga
   Windows 例：C:\Users\あなたの名前\Documents\tonitoga

4. 4
   「Clone」→ 左下「Fetch origin」が成功すれば完了

7-3. フォルダの中身（覚えておくと便利）

tonitoga/
├── content/
│   ├── articles/     ← 記事を追加・編集
│   └── people/       ← 人物紹介を追加・編集
├── public/images/    ← 画像ファイル
├── app/              ← 触らなくてOK
├── lib/              ← 触らなくてOK
└── docs/             ← 手順書など

8-1. Claude Desktop をインストール

1. 1
   https://claude.ai/download
2. 2
   お使いの OS のインストーラーをダウンロードしてインストール
3. 3
   Claude アカウントでログイン

8-2. Code タブを開く

• Claude Desktop 上部のタブで「Code」をクリック
• 有料プラン（Pro 以上）が必要。アップグレードを求められたら第2章を参照

8-3. プロジェクトフォルダを選ぶ

1. 1
   環境は「Local」を選ぶ
2. 2
   「Select folder」をクリック
3. 3

   Mac：/Users/あなたの名前/Documents/tonitoga
   Windows：C:\Users\あなたの名前\Documents\tonitoga

4. 4
   フォルダへのアクセス許可を求められたら「許可」

8-4. 動作確認

このプロジェクトの README を読んで、サイトの概要を3行で教えてください。

8-5. 権限モードについて

基本サイクル

9-5. GitHub に保存する（公開のトリガー）

方法A：Claude に任せる（おすすめ）

変更を GitHub に push してください。
コミットメッセージは「記事：〇〇〇を追加」にしてください。

方法B：GitHub Desktop を使う

• GitHub Desktop を開く → 変更ファイル一覧を確認
• 左下 Summary にメッセージを入力 →「Commit to main」
• 上部「Push origin」をクリック

9-6. サイトに反映されたか確認

• 1〜3分待つ
• Vercel の URL をブラウザで開く
• 更新が見えない場合 → スーパーリロード（Mac: Cmd+Shift+R / Windows: Ctrl+Shift+R）

おすすめ：下書き → PC で仕上げ

1. 1
   スマホ Claude の Chat で記事本文を一緒に書く
2. 2
   完成したテキストをメモ帳やメールにコピー
3. 3
   PC の Claude Desktop Code タブで「以下のテキストを新しい記事として content/articles/ に追加してください」と指示

tonitoga-xxxxx.vercel.app ではなく、tonitoga.jp のような独自ドメインを使いたい場合の手順です。

参考：Qiita 記事

11-1. お名前.com でドメインを取得

1. 1
   https://www.onamae.com/
2. 2
   欲しいドメイン名を検索（例：tonitoga.jp）
3. 3
   カートに入れて購入（クレジットカード必要）
4. 4
   本人確認メールのリンクをクリックして完了

11-2. Vercel にドメインを追加

1. 1
   vercel.com → 対象プロジェクト → Settings → Domains
2. 2
   ドメインを入力 → Add → Recommended を選ぶ
3. 3

   種類	例
   A レコード	76.76.21.21
   CNAME	cname.vercel-dns.com

11-3. お名前.com で DNS 設定

A レコードと CNAME の両方が必要です。

11-4. 反映を待つ

• DNS 反映：10分〜最大48時間
• Vercel の Domains で「Valid Configuration」になれば成功
• ブラウザで https://tonitoga.jp を開いて確認

Q. Code タブでフォルダを開けない

Q. push したのにサイトが更新されない

• Vercel → Deployments で最新デプロイの状態を確認
• 赤い Error なら Claude に「ビルドエラーを直して」
• ブラウザのキャッシュ → スーパーリロード

Q. 用語がわからない

全部チェックできたら、自分一人でサイト更新できます。

• □Claude Pro（以上）に加入している
• □Vercel アカウントを作成した
• □GitHub アカウントを作成した
• □GitHub リポジトリを作成し、zakioka-pirori を Write 権限で招待した
• □岡崎から初期コードが push された
• □Vercel で GitHub リポジトリを Import して Deploy 成功
• □公開 URL でサイトが表示される
• □GitHub Desktop でリポジトリを Clone した
• □Claude Desktop の Code タブでフォルダを開けた
• □Claude に指示してファイル変更 → Accept できた
• □GitHub に push して、Vercel 上のサイトが更新された
• □（任意）独自ドメインを設定した

サポート連絡先