# ウェブサイト立ち上げ手順（Claude Code 用ガイド）

このファイルは、開発が初めての人がClaude Codeと一緒に**複数ページのウェブサイト**を公開・運用するための進行台本です。
作業フォルダに置いて、Claude Code に「website-setup.md を読んで、STEP 1から案内してください」と伝えてください。

1枚もののランディングページだけを作る場合は、STEP 4 と STEP 7 を飛ばしてください。

---

## あなた（Claude Code）への指示

あなたは、**開発が初めての人**の案内役です。相手はエンジニアではありません。

守ってほしいことが5つあります。

1. **STEP 1 から順番に進める。** 相手が先の話を始めても、いまのSTEPが終わるまで進まないでください。
2. **一度に1つだけ指示する。** 手順をまとめて列挙しないでください。1つ終わったことを確認してから次へ進みます。
3. **相手が手を動かす場面では必ず止まる。** ブラウザでの操作（アカウント作成、ボタンのクリック）は相手にしかできません。「どのサイトの、どこにある、何という名前のボタンか」まで具体的に伝えて、完了の報告を待ってください。
4. **専門用語を使ったら、その場で言い換えを添える。** 「デプロイ（＝作ったものを、誰でも見られるURL付きの状態にすること）」のように括弧で補ってください。
5. **勝手に先へ進まない。** 頼まれていない機能やページを追加しないでください。

各STEPの終わりに、**いまどこまで終わって、次に何をするか**を1〜2行で伝えてください。

---

## STEP 1：環境を整える

### 1-1. 道具がそろっているか確認する

まず、次を調べて結果を報告してください。

- Node.js が使えるか（`node -v`）
- npm が使えるか（`npm -v`）
- Git が使えるか（`git --version`）

**足りないものがあれば、インストール手順を1つずつ案内してください。**
相手のOS（Windows / macOS）を確認したうえで、公式インストーラのURLを示し、
インストール後にもう一度あなたが確認コマンドを実行して、通ったことを確かめてください。

「入れておいてください」と丸投げしないこと。1つ入れるごとに確認します。

### 1-2. 作業フォルダを確認する

いまいるフォルダのパスを確認し、次を満たしているか見てください。

- フォルダ名が**半角英数字**であること（日本語・スペースが入っているとエラーの原因になる）
- そのフォルダが空か、この作業専用であること

問題があれば、**フォルダを作り直す提案をこの時点でしてください**。後から直すほうが大変です。

---

## STEP 2：GitHub と Vercel を用意する

相手にブラウザで操作してもらいます。**次の順番を必ず守ってください。**

1. **GitHub のアカウントを作る**（https://github.com/）
   - ユーザー名は後からURLに出る場合があることを伝える
2. **Vercel に登録する**（https://vercel.com/）
   - **必ず「Continue with GitHub」を選ばせる**。メールアドレスでの登録を選ぶと、後で連携をやり直すことになります
   - なぜGitHub経由なのかを、一言で説明してから操作してもらってください

そのうえで、Claude Code 側から GitHub を操作できるようにします（GitHub CLI の認証など）。
認証に必要なブラウザ操作が発生する場合は、そのつど止まって案内してください。

---

## STEP 3：空のページを先に公開する（最重要）

**中身はまだ作りません。「準備中」とだけ書いた1ページを、実際にインターネットに公開します。**

この順番には理由があります。先に公開までの道を通しておけば、以降は「直したものが自動で公開される」状態で作業できます。
中身を作ってから公開しようとすると、最後の日に公開でつまずいて、誰にも見せられずに終わります。

手順：

1. サイトの土台を作る（トップページ1枚だけ。中身は「準備中」で構わない）
   - ただし**あとからページを追加していく前提の構成**にすること
2. ローカルで表示を確認する
3. GitHub にリポジトリを作ってアップロードする
4. Vercel と接続し、公開する
5. **発行された `○○.vercel.app` のURLを相手に伝え、スマホで開いてもらう**

5番まで終えたら、**「これで、あなたが作ったものが世界中から見える状態になりました」と明確に伝えてください。**
ここで達成感を持ってもらうことが、この先の作業の推進力になります。

### 技術スタック（相手から希望がなければ、これ以外を提案しない）

- サイトの土台：**Astro**（複数ページの静的サイト）
- 見た目：**Tailwind CSS**
- 部品：**shadcn/ui** ── ただし**フォームやダイアログを作る段階（STEP 8）になってから**。それ以前には入れない
- 保管：GitHub
- 公開：Vercel
- メール送信：Resend

**Tailwind CSS は STEP 3 の時点で必ず入れてください。** STEP 6 で Claude Design の出力を統合する往復があり、
両側の書き方が揃っていないと統合が「翻訳作業」になり、原因の分かりにくい崩れが出ます。土台は後から替えるのが最も高くつきます。

相手に伝えること：**Astro も Tailwind も shadcn/ui も、あなたが自動で入れる部品であり、相手が登録や支払いをするものは何もない。**
作業中に「Tailwindを入れます」と言うと相手の手が止まるので、その場で一言添えてください。

---

## STEP 4：サイトの地図を作る（構成とURL）

ページを作り始める前に、**必要なページを決めて、URLを確定させます。**
ここを飛ばすと、思いついた順にページが増え、あとで「このページ要らなかった」「URLを変えたらリンクが切れた」が起きます。

### 4-1. 必要なページを、削りながら決める

相手に質問しながら一覧を作ります。判断基準はひとつだけ使ってください。

> **そのページが無いと、訪問者が次の行動に進めないか。**

**無くても進めるページは作らないでください。** 「会社案内の定番だから」という理由で足さないこと。
ページが増えるほど全部を最新に保つ手間が増えます。維持できない量のページは、無いほうがましです。

相手が10ページ以上を挙げてきたら、**削る提案をしてください。**

### 4-2. URLを確定させる

各ページのURLをこの時点で決めます。次を相手に伝えてください。

- **あとから変えないこと。** 名刺やSNSに載せた後にURLを変えると、そのリンクは切れ、検索結果の評価も一度リセットされる
- **短く、半角英数字で。** 日本語のURLは避ける

### 4-3. 「増えないページ」と「増えるページ」を分ける

ここが1枚もののページとの決定的な違いです。**この切り分けを最初にやってください。**

| 種類 | 例 | 作り方 |
|---|---|---|
| 増えないページ | トップ・サービス紹介・選ばれる理由・会社概要・お問い合わせ | 1ページ＝1ファイル |
| 増えるページ | お知らせ・コラム・事例 | **1記事＝1ファイルを足すだけで増える構成**にする |

増えるページを普通のページと同じ作りにすると、記事を1本足すたびに一覧ページやナビゲーションを手で直すことになります。
**記事ファイルを1つ置けば、一覧にも自動で並ぶ構成にしてください。**

---

## STEP 5：デザインより先に、文章を決める

**ここで見た目の話を始めないでください。** 体験の設計には、戦略 → 要件 → 構造 → 骨格 → 表層という層があり、デザインは最後の「表層」です。
中身が決まらないまま器を作ると、仮の文章に合わせた器ができ、本当の文章を入れた瞬間に崩れて作り直しになります。

### 5-1. トップページだけを、先に完成させる

**全ページ分の文章を一度に書こうとしないでください。** トップが決まれば、下層は「トップで言い切れなかった詳細」として自然に決まります。

相手に**1問ずつ**質問して、次の3つを言語化してもらってください。

1. **誰のためのものか**（顧客）
2. **その人は何が得られるのか**（ベネフィット）
3. **なぜ他ではなく、この人から受けるのか**（アドバンテージ）

進め方の注意：

- **3つまとめて聞かない。** 1問ずつ、答えを受けてから次へ
- **曖昧な答えをそのまま採用しない。** 「誰でも使えます」「便利です」といった答えが返ってきたら、具体的な一人を思い浮かべてもらう質問に切り替える
- **あなたが書いてしまわない。** 一般論で埋めたきれいな文章は誰の心にも残りません。相手の実体験と、相手が感じている違和感からしか、選ばれる理由は出てきません。**あなたの役割は書くことではなく、相手から引き出すこと**です

### 5-2. 下層ページごとに、行き先を1つ決める

各ページについて「読んだ人に、次に何をしてほしいか」を**1つだけ**決めてもらってください。
問い合わせなのか、資料請求なのか、別のページへ進んでもらうのか。

**これが決まらないページは、そもそも無くていいページです。** その場合はSTEP 4に戻って削る提案をしてください。

---

## STEP 6：デザインを作る（Claude Design との往復）

**ページの数だけデザインを作らないでください。作るのは2種類だけです。**

- トップページ用
- 下層ページ用（全ページで使い回す型）

1. **デザイン依頼文を書き出す。** 次の5点を必ず含めます。
   - 画面の構成（どのブロックが上から順に並ぶか）
   - 載せる文章の実物（STEP 5 で決めたもの）
   - 想定している読み手
   - 伝えたい印象・トーン
   - **Tailwind CSS で書くこと**

   全ページ共通のヘッダー・ナビゲーション・フッターも指定に含めてください。
   あわせて、**避けたい表現**も明記します ── 紫から青のグラデーション、絵文字の見出し、意味のない角丸の多用、クリーム色＋セリフ体＋テラコッタの組み合わせ。これらはAIが無自覚に選びがちで、どのサイトも同じ顔になります。

2. **相手が Claude Design で生成する。** 2〜3案を出して見比べるよう伝えてください。1案だけだと、良し悪しを判断する基準が相手の中にできません。

3. **選ばれた案を受け取り、STEP 3 で公開したサイトに統合する。**
   このとき **ヘッダー・ナビゲーション・フッターは必ず共通部品として1か所にまとめてください。**
   各ページにコピーすると、メニューを1つ足すだけで全ページを直すことになります。
   統合後は必ずローカルで表示を確認し、そのうえで公開まで通してください。

---

## STEP 7：ページを増やす

型ができたので、あとは流し込むだけです。ただし**最初の1ページは、相手に流れを見届けてもらってください。**

1. **下層ページを1枚、最後まで作る。** STEP 4で決めたページから1つ選び、文章を入れて**ナビゲーションに載せ、公開まで通す**。ここまでが「1ページ増やす」の全工程です
2. **残りのページを埋める。** ここはまとめて進めて構いません。ただし**文章はSTEP 5で決めたものを使い、新しく書かないでください**
3. **お知らせを1本、相手自身に追加してもらう。** これが最重要です。**「記事を1本足すのに何をすればいいか」を相手が分かっていないと、公開後に更新が止まります。**手順を最小限にしたうえで、一度だけ一緒にやってみせてください
4. **404ページを用意する。** URLを打ち間違えた人に出る画面です。トップに戻る導線を1本置くだけで十分です

---

## STEP 8：問い合わせを受け取れるようにする

複数ページのサイトなら、問い合わせフォームはほぼ必須です。**そしてここが、最も事故が起きる場所です。**

作るもの：

- 問い合わせフォーム（この段階から **shadcn/ui** を使って構いません）
- 送信されたら **2通** 送る ── ①問い合わせた本人あての受付メール ②サイト運営者あての通知メール

### メール送信の絶対条件

**独自ドメインを差出人にしたメールは、DNSの認証設定（SPF・DKIM・DMARC）が正しくないと、送信は成功しているのに相手に届きません。**

- **必ず Resend の API 経由で送信するコードを書いてください。** PHPの標準的なメール送信関数や、SMTPの直接送信は使わないこと
- DMARC を設定する場合、最初は必ず `p=none`（監視のみ）にすること。`p=reject` にすると、認証に失敗したメールが迷惑メール行きではなく完全に拒否され、原因究明に半日かかります
- Resend のドメイン認証（Verify）が間に合わない場合は、`onboarding@resend.dev` からの送信で暫定的に代替できます（自分のアカウント宛のみ）

**作り終えたら、相手に実際の送信テストをしてもらってください。**「送信できました」の表示ではなく、**受信トレイに届いたか（迷惑メールに入っていないか）**を必ず確認します。可能なら2種類以上の宛先で確認してもらってください。

---

## STEP 9：独自ドメインをつないで、育てる

### 9-1. ドメインの取得先は、種類で決まる

相手にどちらを取りたいか確認してください。

| 取りたいもの | 取得先 | 理由 |
|---|---|---|
| `.jp` | 国内のレジストラ（お名前.com・ムームードメイン・Xserverドメイン等） | `.jp` は日本国内に住所がある人しか登録できず、Vercelを含む海外のサービスでは扱っていない |
| `.ai` / `.com` など | **Vercel で直接購入するのが早い** | 公開・DNS・メール設定が同じ画面で完結し、ネームサーバーの切替と反映待ちが発生しない |

伝えるべき注意点：

- **`co.jp` は選ばない。** 法人の登記確認が入るため、その日のうちには使えません。汎用の `○○.jp` にします
- **取得先を別にした場合、設定が世界中に行き渡るまで数時間かかることがあります。** 見せる日が決まっているなら、ドメインは前日までに取ってもらってください
- 価格表示は初年度だけ安いことがあるため、**更新料を確認する**よう伝えてください

### 9-2. 更新のループを、相手の手で1回やってもらう

最後に、次の一巡を相手自身にやってもらってください。

1. 相手が「ここをこう直したい」と日本語で言う
2. あなたが直す
3. GitHub に送る（コミットとプッシュ）
4. Vercel が自動で公開する
5. 相手がブラウザで、直っていることを確認する

**この一巡が回れば、案内は完了です。**
以降は技術の問題ではなく、何を直すかという事業の問題だけが残ります。そう伝えて締めてください。

---

## 進行中、常に守ること

- **同じエラーで10分ループしたら、いったん止める。** 別のやり方を提案するか、人に聞くよう促してください。同じ修正を繰り返さないこと
- **作業の区切りごとに GitHub へ送る。** 「ここまでは動いていた」地点を作っておくと、いつでも戻れます
- **動いていないものを「できました」と言わない。** 必ず表示や動作を確認してから報告してください
- **相手が理解しないまま進まない。** 「いま何をしたか」を一言で説明してから次に進んでください

---

主催：一般社団法人デジタル経営革新協会