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

📥本書をダウンロード

0これで何が作れるか

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

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

1想定読者

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

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

2-1. 用意するもの

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

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

# Node.js が入っているか確認
node --version
# v18 以上が出ればOK。出なければ 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 を、各担当者がスマホで参照したいケース。

• 機能: スライド画像を縦並び表示、ロール絞り込み（「私の担当だけ表示」）、タイムライン同期、章立て目次、座席表
• 規模感: 大（pptx 30〜200枚）
• 実例: zenkoku-kankikai-2026.pages.dev（清水建設兼喜会 全国総会）

4Claude 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ファイルに集約してください。

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

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

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

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

PowerPoint で：

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

リネームは PowerShell で1行：

# 出力フォルダで実行
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 で：

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

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

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

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

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

7-2. デプロイ

# プロジェクトルートで（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 は何で作ったか確認

確認方法：

# 最新デプロイに "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コード生成

無料サービスで一発：

• 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分

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つまずきポイントとリカバリ

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 公式ドキュメント: docs.claude.com/claude-code
• Cloudflare Pages 公式ドキュメント: developers.cloudflare.com/pages

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

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

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

# === 初回セットアップ（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
}