🎤 部内勉強会デモ進行台本

Claude Code による「config.json 一撃自動生成」のライブデモ
所要時間：約12〜15分 ／ 想定参加者：DXコンサル部門メンバー
📋 デモ全体構成
  1. 🎬 オープニング（2分）— 何を見せるか・なぜ重要か
  2. 📄 仕込み紹介（2分）— config.json の中身を見せる
  3. ⚡ ライブ実行（5〜7分）— Claude Code に投げる
  4. 🎁 成果物公開（2分）— ブラウザでURL確認
  5. 💭 振り返り（2分）— 何が革新的だったか・展開シナリオ
🎬 ① オープニング（2分）
1
「今日見せるもの」を一文で
30秒
人間が「1ファイル（JSON）を渡すだけ」で、AIがHTML資料を作成・公開URLまで返してくれる仕組みを実演します。
今日お見せするのは、私が config.json という設定ファイルを1つ用意して、Claude Code に投げると、3〜5分で1つの完成されたHTML資料が GitHub Pages 上に公開URLとして返ってくる、というデモです。
2
「なぜこれが意味あるか」
90秒
3つの観点で価値を伝える：
  1. 業務文書の量産が現実的になる（マニュアル・チェックリスト・議事録）
  2. 「テンプレ化」より「ジェネレータ化」のほうが応用範囲が広い
  3. 最終的にはこれをGitHub Actions化すれば、人間は意図を入れるだけになる
これは単なる「便利ツール」ではなく、業務文書を作る作業そのものを再定義する取り組みです。今までExcelやWordでマニュアル作っていたものが、JSONを書くだけで構造化された見やすい資料になります。後でこれを GitHub Actions と組み合わせると、本当にJSON書くだけで成果物が出るので、人間は「何を作るか」だけ考えればよくなります。
📄 ② 仕込み紹介（2分）
3
config.json をエディタで開く
90秒
使うサンプル：demo_config_kickoff.json（DX案件キックオフ・チェックリスト）
理由：部の業務に直結している・参加者が「自分でも作りたい」と思える題材。
code C:\git\hancho-kb\demo_config_kickoff.json
中身を見ていただくと、構造はとてもシンプルです。「タイトル」「目的」「対象」「タブ構成（5タブ）」「色設定」を書いただけ。これだけです。中身の文章は一切ありません。あとはClaude Codeが自動で生成します。

📌 見せ方のコツ：JSON の "tab_list" 部分を強調する。「タブ名」と「目的」だけで、各タブ内のコンテンツはAIが補完する点を強調。

⚡ ③ ライブ実行（5〜7分）
4
Claude Code 起動
30秒
PowerShell で以下を実行（事前にウィンドウを開いておくと安全）。
cd C:\git\hancho-kb
claude --permission-mode acceptEdits
PowerShellを開いてClaude Codeを起動します。`--permission-mode acceptEdits` を付けると毎回の確認がスキップされるので、デモがスムーズです。
5
プロンプトを投げる
30秒
以下のテキストをClaude Codeに貼り付け（事前にメモ帳等に用意しておくと安全）。
@demo_config_kickoff.json を読み込んで、以下を実行してください。 1. 既存の Anthropic_Academy_Plan_Internal.html を構造のテンプレートとして参照 2. config.json の仕様に基づき、新しいHTML資料を生成 3. タブidは tab0 から連番で統一 4. doc-footer は最下部に1個のみ 5. レスポンシブ対応・overflow-x:hidden で横スクロール抑止 セルフチェック後、出力先 C:/git/hancho-docs/Kickoff_Checklist_v1.html に保存し、 cd C:/git/hancho-docs git add Kickoff_Checklist_v1.html git commit -m "auto: DX案件キックオフ・チェックリスト v1（Claude Code一撃生成）" git push 完了後、生成サイズ・セルフチェック結果・公開URLを報告してください。
6
生成中の解説（待ち時間活用）
3〜5分
AI が動いている間、画面に映る進行を解説する。沈黙にならないよう、以下のトピックを準備しておく：
  • Claude Code が「既存テンプレを読み」「JSの整合性を確認し」「コンテンツを生成」している様子
  • 「自然言語で指示できる」ことの強み・従来との違い
  • 「セルフチェック」を組み込むことで品質を担保している点
  • 失敗時のリカバリー（Ctrl+C で中断・もう一度実行可能）
今、Claude Code がやっているのは：①既存のテンプレを読み込み、②JSON設定を読み込み、③タブ構成を組み立て、④各タブの本文を生成し、⑤セルフチェックを走らせる、という流れです。私が個別に指示しなくても、これらすべてを自動で実行してくれます。
🎁 ④ 成果物公開（2分）
7
完了報告を確認
30秒
Claude Code から「サイズ・セルフチェック・公開URL」が返ってくる。これを確認してブラウザに切り替える。
8
ブラウザで公開URLを開く
90秒
シークレットウィンドウで開くとキャッシュの心配なし。
見せどころ：
  • タブが7つ（または指定数）正しく動く
  • 各タブのコンテンツがちゃんと生成されている
  • デザインが整っている
  • これがJSON 1ファイルだけから生まれた事実
できました。これが今、生まれたばかりのHTMLです。タブをクリックしてみると、各章ちゃんと内容が入っています。私はJSON書いただけで、本文一文字も書いていません。
💭 ⑤ 振り返り（2分）
9
何が革新的だったか
60秒
3つのキーメッセージで締める：
  1. 「テンプレを埋める」から「テンプレを生成する」への質的変化
  2. JSON 1ファイル＝再現性・バージョン管理可能
  3. これを GitHub Actions 化すれば「JSON push だけ」で公開まで完結
10
業務への展開シナリオ
60秒
参加者の頭の中に「自分の業務でも使える」と植える：
  • 新規案件キックオフのチェックリスト
  • 議事録テンプレート
  • 業務マニュアル
  • 研修資料
  • 提案書のドラフト
今日は「DX案件キックオフ」で見せましたが、JSON書き換えるだけで、どんなテーマでも同じことができます。議事録、マニュアル、提案書、何でも。ご希望あれば一緒に config.json 作りましょう。
⚠️ デモ前チェックリスト
項目内容
環境PowerShell起動済み・C:/git/hancho-kb に cd 済み
config.json事前に C:/git/hancho-kb/demo_config_kickoff.json を配置
プロンプトメモ帳等に投げるプロンプトを準備（コピペ可能な状態に）
ネット接続GitHub Pages の反映には1〜2分かかるので余裕を見る
ブラウザシークレットウィンドウを別途用意（キャッシュ回避）
Claude Code起動事前に1回起動して動作確認しておく（無料枠制限注意）
失敗時の保険事前に同じ手順で生成済みの公開URLを用意（バックアップ）
🛡️ リスク管理（デモ失敗時の対処）
失敗パターン対処法
Claude Code が動かない事前に生成しておいた URL を見せる「あらかじめ用意したものですが…」
生成が遅い（10分超）「実際は3〜5分で終わります」と説明しつつ振り返りパートへ前倒し
生成結果がおかしい「セルフチェックでこういうケースも検出できます」とポジティブに転換
git push失敗「ローカルでは生成済みです」とローカルファイルを開いて見せる
ブラウザでキャッシュ問題シークレットウィンドウに切り替えて表示
📁 デモ用ファイル一式

📌 サンプル config.json を3パターン用意しました。デモのテーマに応じて使い分け可能です。

  • demo_config_kickoff.json — DX案件キックオフ・チェックリスト（5タブ／部の業務に直結／推奨）
  • demo_config_meeting.json — 議事録ナビゲーター（3タブ／全員に共感／短時間向け）
  • demo_config_simple.json — Claude入門5分ガイド（3タブ／AI初心者向け・最もシンプル）
🎯 デモを成功させるコツ

📌 原則：「初めて見る人が興奮するポイント」を意識する。
・JSON が短いほどインパクトが大きい（少ない入力で多くの出力）
・タブが多いほど「これ全部AIが書いた」が刺さる
・実用テーマほど「自分の業務でも使えそう」と感じる

📌 事前リハーサル：本番と同じ手順で1〜2回は通しで実施。所要時間の感覚と、AIの応答パターンを把握しておく。

📌 禁忌：「完璧に動くこと」を期待しすぎない。AIのデモは「半分動けば成功」「動かなくても話術でカバー」が王道。

部内勉強会デモ進行台本 ／ Claude Code 自動生成 ライブ実演 ／ 2026-05-15