# Claude Code で誰でも作れる「オンラインマニュアル」 — 30分手順書 v1

**作成**: 2026-05-18｜小松ウォールアイティ株式会社 鍛治 渉
**この手順書の目的**: 業界団体・社外団体・社内行事の運営担当者が、Claude Code を使って **スマホで開けるオンラインマニュアル** を再現性高く作れるようにする。
**実証元**: 第67回 清水建設兼喜会 全国総会 北陸大会（2026-05-15/16）で稼働させた以下3案件の作成過程を一般化したもの。
- スライド型大型マニュアル — `https://zenkoku-kankikai-2026.pages.dev`
- 式典＋座席表マニュアル — `https://hokuriku-kaneki.pages.dev`
- 会議アーカイブ — `https://hokuriku-kaneki-yakuin.pages.dev`

> **ひとことで**: HTML/CSS/JS は触らず、**データを差し替える** だけで自分の案件用のマニュアルが作れる。デプロイは1コマンド。当日まで何度でも更新できる。

---

## 0. これで何が作れるか

- **スマホで開けるオンラインマニュアル**（紙の冊子・Word の代わり）
- QRコードを配るだけで関係者全員に配布できる
- 当日まで何度でも更新でき、URL は変わらない
- Cloudflare Pages で**無料公開**（独自ドメインも可）
- 「私の担当」だけ絞り込み・座席表の名前検索・タイムラインで「今やること」表示 — などの便利機能つき

### 完成イメージ（実例 3件）

| タイプ | URL | 規模 | 主な機能 |
|---|---|---|---|
| A. **会議アーカイブ型** | hokuriku-kaneki-yakuin.pages.dev | 小（1〜数十ページ）| 議事録・アジェンダの保管庫 |
| B. **式典マニュアル型** | hokuriku-kaneki.pages.dev | 中（数タブ・座席表あり）| 式次第・服装・担当者割・座席表検索 |
| C. **スライド型大型** | zenkoku-kankikai-2026.pages.dev | 大（数十〜数百スライド）| 計画書pptxをそのままWeb化＋ロール絞り込み |

---

## 1. 想定読者

- 業界団体・社外団体の **幹事・事務局** （兼喜会・井桁会・JIA・JPSA・ロータリー 等）
- 社内行事（社員総会・周年式典・研修）の運営担当
- 「Word・PDF・LINE で資料配って終わり」運用を卒業したい人

### 「これは私には無理かも」と思ってしまう人へ

- **HTMLが書けなくても大丈夫**。あなたは「中身の文章を整理する人」、Claude Code は「形にする人」、という分担です。
- **コマンドが分からなくても大丈夫**。本書のコピペで動きます。失敗しても元に戻せます。
- **既存案件をベースに差し替える** ので、ゼロから書く必要はありません。

---

## 2. 必要な準備（全部無料・15分）

### 2-1. 用意するもの

| 項目 | 入手先 | 費用 |
|---|---|---|
| Windows PC（Mac可） | — | — |
| **Claude Code**（CLI） | https://claude.com/claude-code | 月20$〜 |
| **Cloudflare アカウント** | https://dash.cloudflare.com | 無料 |
| **Git**（バージョン管理） | https://git-scm.com | 無料 |
| **Node.js**（wrangler 用） | https://nodejs.org | 無料 |
| 元になる資料 | pptx / Word / Excel / 議事録 | — |

### 2-2. インストール手順（初回のみ・10分）

PowerShell を開いて以下を上から順に貼り付け：

```powershell
# Node.js が入っているか確認
node --version
# v18 以上が出ればOK。出なければ https://nodejs.org からインストール

# Cloudflare CLI（wrangler）をインストール
npm install -g wrangler

# Cloudflareにログイン（ブラウザが開く→承認）
wrangler login
```

これで準備完了。あとは Claude Code に話しかけるだけ。

---

## 3. まず「どのタイプ」か決める（3分）

下の3タイプから**自分の案件に近いもの**を1つ選ぶ。後から変更も可。

### A. 会議アーカイブ型 — 役員会議・例会の議事録置き場

**こんな案件向け**: 月例の役員会、年次総会、青年部例会など、**定期的に議事録が増えていく** 運用
**機能**: 一覧カード、議事録PDFへのリンク、開催日順ソート
**規模感**: ページ数は1〜数十
**実例**: `hokuriku-kaneki-yakuin.pages.dev`（北陸兼喜会青年部 役員会議）

### B. 式典マニュアル型 — 単発イベントの「当日マニュアル」

**こんな案件向け**: 周年式典・懇親会・全国大会など、**当日数時間で進行する** 行事
**機能**: タブ切替（式次第／服装／担当割／座席表）、座席表の名前検索、サイドバー目次
**規模感**: 中（数タブ・座席数百名対応）
**実例**: `hokuriku-kaneki.pages.dev`（北陸兼喜会 懇親会マニュアル）

### C. スライド型大型 — 計画書pptx をそのままWeb化

**こんな案件向け**: 数十〜数百ページの**計画書pptx を、各担当者がスマホで参照** したいケース
**機能**: スライド画像を縦並び表示、ロール絞り込み（「私の担当だけ表示」）、タイムライン同期、章立て目次、座席表
**規模感**: 大（pptx 30〜200枚）
**実例**: `zenkoku-kankikai-2026.pages.dev`（清水建設兼喜会 全国総会）

---

## 4. Claude Code への「最初の一言」テンプレ

Claude Code を起動して、下のテンプレを **コピペして自分の案件に置き換える** だけ。

### A. 会議アーカイブ型 を作りたい場合

```
これから「○○の役員会議 議事録アーカイブ」のオンラインマニュアルを作りたい。
既存案件 hokuriku-kaneki-yakuin.pages.dev と同じ構成で。

— 団体名：○○○○
— 会議名：○○役員会議
— 公開URL希望：○○-yakuin（Cloudflare Pages のサブドメイン）
— カラー：（例）コーポレートブルー＋ゴールド
— 配布対象：役員 約○名

これで `dev/○○-yakuin/` にプロジェクト一式を作ってください。
README.md にデプロイ手順も書いて、Cloudflare Pages に初回デプロイまで進めて。
```

### B. 式典マニュアル型 を作りたい場合

```
これから「○○の○○式典 当日オンラインマニュアル」を作りたい。
既存案件 hokuriku-kaneki.pages.dev と同じ構成で。タブUIで、座席表の名前検索つき。

— 団体名：○○○○
— 行事名：第○回 ○○式典
— 開催日：YYYY-MM-DD（X）
— 会場：○○ホテル ○○の間
— 規模：参加者 約○名
— 主要タブ：式次第／タイムライン／服装ルール／担当割／座席表
— カラー：○○ブルー（HEX指定があれば）
— 配布対象：当日スタッフ・来賓誘導役・役員 約○名

座席表データは別途 Excel で渡します。これで `dev/○○-manual/` にプロジェクト一式を作ってください。
```

### C. スライド型大型 を作りたい場合

```
これから「○○の計画書」を当日マニュアルとしてWeb化したい。
既存案件 zenkoku-kankikai-2026.pages.dev と同じ構成で。

— 元データ：計画書pptx（○○ページ）— PowerPoint で PNG エクスポート済み、後でフォルダごと渡す
— 団体名：○○○○
— 行事名：第○回 ○○大会
— 開催日：YYYY-MM-DD（X）
— ロール（担当区分）：司会（紺）／総務（金）／来賓誘導（赤）／開催支部（緑）／全員（灰）
— 座席表：あり（○卓・約○名、xlsx）／なし
— 配布対象：役員・スタッフ・SC来賓誘導者 約○名

これで `dev/○○-manual/` にプロジェクト一式を作ってください。
データは assets/data.js（章立て・ロール・スライド注釈）と assets/seating.json（座席表）の2ファイルに集約してください。
```

> **コツ**: ○○の箇所を自分の案件で埋めてから貼り付ける。**Claude Code は文脈を多く渡すほど精度が上がる**。資料の現物（pptx／Word／xlsx）を `dev/○○-manual/_source/` に置いてから話しかけると確実。

---

## 5. データだけ差し替える（HTML本体は触らない原則）

Claude Code が最初の骨格を作ったら、**あなたの仕事はデータの差し替えだけ**。HTML/CSS/JS のコードは触らない。

### 5-1. データを「1ファイルに集める」が鉄則

| タイプ | 触るファイル |
|---|---|
| A. 会議アーカイブ型 | `index.html`（カード一覧の `<section class="meeting-list">` 部分） + `meetings/YYYYMMDD/` フォルダ追加 |
| B. 式典マニュアル型 | `index.html` 上部の `const SEATS = [...]` データ部 |
| C. スライド型大型 | `assets/data.js`（章立て・ロール・スライド注釈） + `assets/seating.json`（座席） + `assets/slides/slide-NN.png`（画像） |

「データを触る場所が**1〜3ファイル**だけ」になるよう、最初に Claude Code に **「データとレイアウトを分離した構造にして」** とお願いするのが超重要。

### 5-2. pptx → PNG 変換（スライド型の場合）

PowerPoint で：
1. `ファイル → エクスポート → ファイルの種類の変更 → PNG`
2. すべてのスライドを選択 → 出力フォルダ指定
3. 出力は `スライド1.PNG`, `スライド2.PNG`... になるので **連番リネーム**

リネームは PowerShell で1行：

```powershell
# 出力フォルダで実行
Get-ChildItem -Filter "スライド*.PNG" | ForEach-Object {
  $num = [int]($_.BaseName -replace 'スライド','')
  $newName = "slide-{0:D2}.png" -f $num
  Rename-Item -Path $_.FullName -NewName $newName
}
```

これで `slide-01.png` 〜 `slide-NN.png` に揃う。`assets/slides/` に放り込めばOK。

### 5-3. xlsx → JSON 変換（座席表の場合）

座席表の Excel を Claude Code に投げて：

```
このxlsxを seating.json に変換してください。
1卓ごとに { table, title, seats:[{seat, org, role, name, side}] } 構造で。
振り仮名は kana フィールドに別途入れて。
```

Excel の項目名（卓番号／所属／氏名／役職）を Claude Code に説明すれば、変換コードを書いて実行してくれる。

### 5-4. 議事録 PDF / Word の取り込み（会議アーカイブ型）

PDF/Word はそのまま `meetings/YYYYMMDD/` フォルダに置いてリンクを張るのが一番速い。文章として取り込みたければ：

```
この議事録Wordから決定事項と次回アジェンダを抽出して、
meetings/20260512/index.html に整形してください。
```

---

## 6. ローカル動作確認（デプロイ前に手元で見る）

デプロイ前に必ず手元で見る。PowerShell で：

```powershell
# プロジェクトルート（index.html がある場所）で
python -m http.server 8000

# ブラウザで http://localhost:8000 を開く
```

> Python が入ってなければ `npx serve .` でも同等。**`file:///` で直接開くと一部のブラウザで JSON 読み込みがブロック** されるので、必ずローカルサーバ経由で。

---

## 7. Cloudflare Pages にデプロイ（初回 10分・以降 1分）

### 7-1. プロジェクト初回作成

```powershell
# プロジェクト名は世界で一意。例：hokuriku-kaneki-2027
wrangler pages project create hokuriku-kaneki-2027 --production-branch main
```

### 7-2. デプロイ

```powershell
# プロジェクトルートで（index.html がある場所）
wrangler pages deploy . `
  --project-name=hokuriku-kaneki-2027 `
  --branch=main `
  --commit-dirty=true `
  --commit-message="rev1 initial"
```

出力に `https://hokuriku-kaneki-2027.pages.dev` のような URL が出る。これが本番URL。

### 7-3. 落とし穴 3つ（必ず読む）

#### ① **Production branch は何で作ったか確認**

`wrangler pages project create` 時に `--production-branch main` で作ったなら deploy 時も `--branch=main`。
**ローカル git が `master` のままなのに `--branch main` で deploy すると Preview 止まり** で本番反映されないことがある（実例：`hokuriku-kaneki.pages.dev` は `master` で運用）。

確認方法：

```powershell
# 最新デプロイに "Production" バッジが付いているか確認
wrangler pages deployment list --project-name=hokuriku-kaneki-2027 | grep Production
```

Cloudflare ダッシュボード → 該当プロジェクト → Deployments で見るのが一番確実。

#### ② **`--commit-message` は ASCII のみ**

日本語を入れると `Invalid commit message, it must be a valid UTF-8 string` で 8000111 エラーになる。

OK: `"rev1 initial"` / `"update content"` / `"fix seating chart"`
NG: `"初回デプロイ"` / `"修正反映"`

#### ③ **`file:///` で直接開かない**

ローカル確認時は必ず `python -m http.server` 経由。`index.html` をダブルクリックで開くと JSON が読めないなど挙動が変わる。

---

## 8. 関係者へURL配布

### 8-1. QRコード生成

無料サービスで一発：
- https://www.qrcode-monkey.com/
- または Claude Code に「このURLを QRコード PNG にして」とお願い

### 8-2. 配布文（LINE / メール）テンプレ

```
○○役員の皆様

○月○日の○○○○ オンラインマニュアルが完成しました。
当日はお手元のスマホで以下URLを開いてご活用ください。
（QRコードは画像でお送りします）

URL: https://○○○○.pages.dev

【主な機能】
・上部タブで「式次第／服装／担当割／座席表」を切替
・座席表は名前検索可能（振り仮名でも可）
・当日まで内容を更新しますので、ブックマーク推奨

ご不明点は○○までお知らせください。
```

### 8-3. 印刷物にQRを載せる場合

紙のプログラム・名札裏・封筒同封など、**「迷ったらここを見て」の入口** をアナログ側にも残しておく（高齢の役員・SC側来賓配慮）。

---

## 9. 当日まで rev を重ねる運用

オンラインマニュアルの最大の強みは **「直前変更を即反映できる」**。

### 9-1. 直前変更を追記するときのお作法

データファイル（`data.js` 等）の該当項目の `notes` 等に：

```
"★【2026-05-12 青年部役員会決定】二次会を3会場から1会場（リエ）に統合"
```

の形で **日付＋決定機関名＋内容** を追記。誰がいつ何を変えたか、後から追える。

### 9-2. rev の上げ方

- `rev1`: 初版（関係者展開開始）
- `rev2`: 軽微な修正反映
- `rev3`: 当日朝の最終確定
- 案件によっては `2026-05-13rev3` のように日付付きでも可

サイトのフッターやヘッダに「最終更新: 2026-05-13 rev3」と出しておくと、関係者が「自分が見ているのは最新か」を確認できる。

### 9-3. 再デプロイは1分

```powershell
wrangler pages deploy . `
  --project-name=○○○○ `
  --branch=main `
  --commit-dirty=true `
  --commit-message="rev3 final updates"
```

これだけ。**2分以内に本番反映**。

---

## 10. 公開前 動作確認チェックリスト

スマホ（iPhone Safari / Android Chrome）で必ず確認：

- [ ] トップを開いてタイトルが正しい
- [ ] タブ／サイドバーが横スクロールor開閉できる
- [ ] 各タブの中身が表示される
- [ ] 画像が表示される（404 にならない）
- [ ] スライド画像をタップして拡大できる（スライド型のみ）
- [ ] 座席表の名前検索が効く（座席表ありの場合）
- [ ] 振り仮名でも検索できる（ひらがな入力でカタカナの名前がヒット）
- [ ] スマホ縦持ちで文字が読める大きさか
- [ ] 関係者（できれば60代の役員1人）に開いてもらって迷わず使えるか

最後の項目が一番大事。**作った人がスマホで使えるのと、初見の人が使えるのは別物**。

---

## 11. つまずきポイントとリカバリ

| 症状 | 原因 | 対処 |
|---|---|---|
| `wrangler login` でブラウザが開かない | コーポレートPCのプロキシ | 個人PCで認証 → `wrangler.toml` に API トークン直書きで運用 |
| Deploy したのに本番URLが古いまま | Production branch 不一致 | §7-3 ①参照。Cloudflare ダッシュボードで Production バッジ確認 |
| `Invalid commit message` エラー | `--commit-message` に日本語 | ASCIIに直す |
| 画像が表示されない | パス間違い／拡張子大文字 | `slide-01.png` と `slide-01.PNG` は別物。小文字統一 |
| 「私の担当だけ表示」が動かない | `roles` 配列のID 不一致 | `ROLES` の `id` と `SLIDES` の `roles:[...]` 内の文字列が完全一致しているか |
| 関係者から「URLが開けない」 | URL の typo or タイポ防止のため QR配布推奨 | LINEで送ると URL がリンク化される。直URL でなく QR で展開 |
| Claude Code が「コード全部書き直し」を提案 | プロンプトに「○○を変えて」だけだと過剰反応 | **「データ部分のみ変更、HTML/CSS/JSは触らないで」** を冒頭で念押し |
| データ差し替えしたら表示が崩れた | データの形式不一致 | 直前の `git commit` まで `git restore .` で巻き戻し可。Claude に元データと差分を見せて修正依頼 |

---

## 12. もっと凝りたい人へ（応用編）

### 12-1. カラーを団体カラーに

`index.html` 冒頭の `:root { --navy: #...; --gold: #...; }` を差し替え。Claude Code に **「このサイトを当団体のコーポレートカラー（HEX: #003580 / #c4002a）に変えて」** と言えば、CSS を読んで一括置換してくれる。

### 12-2. ロゴを入れる

ロゴ PNG を `assets/logo.png` に置いて、Claude Code に **「ヘッダ左上にロゴを表示して」** と頼む。スマホで縦長になりすぎないよう **最大高さ 40〜60px** に抑えるのがコツ。

### 12-3. 「▶今」ボタン（タイムライン同期）

スライド型の場合、各スライドに `time: "16:37"` を入れておけば、開催当日に「現在時刻に最も近いスライド」へ自動ジャンプするボタンが付けられる。Claude Code に **「タイムスタンプの近いスライドへジャンプする ▶今 ボタンを付けて」** で実装可能。

### 12-4. アクセス制御（社内限定）

Cloudflare Pages の **Access** 機能で「特定メールドメインのみ閲覧可」に絞れる。来賓に見せたくない場合は Cloudflare ダッシュボード → Access → Application を追加。

### 12-5. 独自ドメイン

`○○.example.jp` のような独自ドメインを当てたい場合、Cloudflare Pages ダッシュボード → Custom domains で設定。DNS が Cloudflare 管理に乗っていれば数分で反映。

---

## 13. 困ったときの相談先

- **本書の作成元**: 小松ウォールアイティ株式会社 鍛治 渉（北陸兼喜会青年部 部長）
- **元になった3案件**: 上記 §0 の URL を参照（GitHub リポは非公開、必要があれば個別ご相談）
- **Claude Code 公式ドキュメント**: https://docs.claude.com/claude-code
- **Cloudflare Pages 公式ドキュメント**: https://developers.cloudflare.com/pages

---

## 14. この手順書の改善案（次のバージョン用）

実際に使ってみての改善点・追加機能・トラブル事例を、**「§14 改善案」に追記して**、次の使い手に渡してください。マニュアルは育てるもの。

- [ ] こうしたほうが分かりやすかった
- [ ] このタイプも欲しい
- [ ] 当日こういうトラブルがあった

---

## 付録A. 作業所要時間の目安

| タイプ | データ準備 | Claude Code への依頼 | 動作確認・rev反映 | 合計 |
|---|---|---|---|---|
| A. 会議アーカイブ型 | 30分 | 30分 | 30分 | **1.5時間** |
| B. 式典マニュアル型 | 2時間（座席表整形含む）| 1時間 | 1時間 | **4時間** |
| C. スライド型大型 | 半日（pptx→PNG＋章立て整理）| 2時間 | 半日（rev3まで） | **2日** |

※「データを集める」工程が一番時間を食う。**Claude Code に書かせる時間は1〜2時間でほぼ終わる**。

---

## 付録B. 必須コマンド早見表

```powershell
# === 初回セットアップ（1回だけ） ===
npm install -g wrangler
wrangler login
wrangler pages project create プロジェクト名 --production-branch main

# === ローカル動作確認 ===
python -m http.server 8000
# → http://localhost:8000

# === デプロイ ===
wrangler pages deploy . `
  --project-name=プロジェクト名 `
  --branch=main `
  --commit-dirty=true `
  --commit-message="rev1 initial"

# === デプロイ状況確認 ===
wrangler pages deployment list --project-name=プロジェクト名

# === pptx → PNG リネーム ===
Get-ChildItem -Filter "スライド*.PNG" | ForEach-Object {
  $num = [int]($_.BaseName -replace 'スライド','')
  $newName = "slide-{0:D2}.png" -f $num
  Rename-Item -Path $_.FullName -NewName $newName
}
```

---

**この手順を踏めば、Claude Code がある限り、誰でも同じクオリティのオンラインマニュアルが作れます。**

**マニュアルは育てるもの。あなたの現場で改善点が見つかったら、本書 §14 に追記して、次の方へ渡してください。**

— 小松ウォールアイティ株式会社 / 北陸兼喜会青年部 一同