📐 JSON駆動 HTML自動生成 汎用フロー v1

人間は「条件と目的」だけ伝える ／ AI と Code が成果物までを連結する
対象：個人の業務文書作成・部内勉強会発表用 ／ 2026-05-15
📋 目次
  1. 全体イメージ（誰が何をやるか）
  2. 人間が用意するもの：条件と目的だけ
  3. STEP 1：受け皿テンプレートで意図を言語化
  4. STEP 2：Claude と対話して config.json を生成
  5. STEP 3：Claude Code に投げて HTML 生成・公開
  6. STEP 4：完成確認とフィードバックループ
  7. 汎用化のポイント（個人実践 → 部内展開）
① 全体イメージ（誰が何をやるか）
🎯 核心アイデア：人間が伝えるのは「意図」だけ
人間 → Claude（対話）→ JSON → Claude Code → HTML → 公開URL
この一連の流れの中で、人間がやるのは「条件と目的を言語化すること」だけ。
構造化（JSON化）も、コーディングも、デプロイも、すべてAIが担う。
👤 人間（入力） 💬 Claude（対話） 🤖 Claude Code（実行） 🌐 GitHub Pages 📝 受け皿テンプレ ・何を作るか ・なぜ・誰のため 💬 対話で構造化 ・タブ構成提案 ・config.json生成 🤖 JSON→HTML生成 ・テンプレ参照 ・自動push 🌐 公開URL発行 ・自動反映 ・誰でも閲覧 💡 人間の負荷比較 人間がやる： ①「条件と目的」をテンプレに書く（5〜10分） ② Claude との対話を確認・微調整 ③ Claude Code に最終JSONを投げる（1コマンド） AIがやる： ・タブ構成の提案・JSON構造化 ・各タブのコンテンツ生成 ・セルフチェック・git push・URL発行

📌 従来との違い：「JSONを手書き」→「Claudeと対話してJSONを作る」に変わると、人間に必要なのは 意図の言語化能力 だけになる。HTML/CSS/JSの知識も、JSON記法の知識も不要。

② 人間が用意するもの：条件と目的だけ
受け皿テンプレート（汎用版）

📌 以下のテンプレートに記入するだけで、Claude が JSON 化を引き受けます。
項目は「何を・誰に・なぜ・どんな構造で・どんな雰囲気で」の5観点に集約されています。

📝 受け皿テンプレート v1（コピーして使う）
① 何を作るか 例：DX案件キックオフ・チェックリスト
② 誰のため 例：Qolony EA部門の若手コンサル
③ なぜ作る 例：新規案件着任時の抜け漏れ防止・初動の質を担保したい
④ 含めたい要素 例：1〜7日目のチェック項目、ヒアリングシート、課題台帳テンプレ
⑤ 雰囲気・トーン 例：実務的・落ち着いた色（ネイビー基調）・敬語
⑥ 任意：参考にしたいもの 例：Anthropic_Academy_Plan_Internal.html の構造

📌 テンプレート設計の意図：「タブ構成」「色」「文字数」などの構造的な決定はあえて含めない。これらは Claude との対話の中で決めるべきもの。人間が決めるのは「やりたいこと」のレイヤーまで。

③ STEP 1：受け皿テンプレで意図を言語化
1
テンプレートに記入する
👤 人間

紙でもメモアプリでも、上の受け皿テンプレを埋めるだけ。所要時間 5〜10 分。
埋まらない項目があってもOK。Claudeとの対話で補完される。

📌 埋めるコツ：「うまく書こう」とせず、メモレベルで構わない。Claudeが整理してくれる。

④ STEP 2：Claude と対話して config.json を生成
2
受け皿テンプレを Claude に渡す
👤 人間 💬 Claude
以下の条件で HTML 資料を作りたいので、Claude Code に投入できる config.json を作ってください。 ① 何を作るか： ② 誰のため： ③ なぜ作る： ④ 含めたい要素： ⑤ 雰囲気・トーン： ⑥ 参考にしたいもの（任意）： config.json は以下のスキーマで作ってください。 - title: 資料タイトル - subtitle: サブタイトル（1行） - audience: 対象読者 - purpose: 作成目的 - date: YYYY-MM-DD - primary_color: メインカラー（HEX） - accent_color: アクセントカラー（HEX） - tab_list: [{name, purpose}] の配列 - deploy: {target_repo, github_pages_url, output_filename} タブ構成は私の意図を汲んで提案してください。一度提示して、私の確認を取ってから確定してください。
期待される対話の流れ
人間

上記プロンプト＋受け皿テンプレを記入したもの

Claude

「DX案件キックオフ・チェックリスト」ですね。以下のタブ構成を提案します：
・はじめに（本資料の目的と使い方）
・Day 1-2（案件背景・体制把握）
・Day 3-5（現状調査・課題ヒアリング）
・Day 6-7（初期アウトプット・優先課題設定）
・（参考）テンプレ集
この構成でよろしければ config.json を出力します。

人間

OKです。お願いします。
（または、「Day 3-5 を Day 3-4 と Day 5-7 に分けたい」など微調整）

Claude

了解しました。config.json を出力します。
（JSON を提示・ダウンロード可能な形で返却）

📌 このフェーズの価値：人間は「タブ構成や項目」を一から考える必要がない。Claude の提案を 受け入れる／微調整する だけ。意思決定の負荷が大幅に下がる。

⑤ STEP 3：Claude Code に投げて HTML 生成・公開
3
config.json を保存して Claude Code を起動
👤 人間 🤖 Code
cd C:\git\hancho-kb # config.json を C:\git\hancho-kb\config.json に保存しておく # Claude Code 起動（確認スキップモード） claude --permission-mode acceptEdits
そして Claude Code 内で以下を投げる：
@config.json を読み込んで以下を実行してください。 1. 既存の Anthropic_Academy_Plan_Internal.html を構造のテンプレートとして参照 2. config.json の仕様に基づき、新しいHTML資料を生成 3. タブidは tab0 から連番で統一 4. doc-footer は最下部に1個のみ 5. レスポンシブ対応（overflow-x:hidden） セルフチェック後、config.json の deploy 設定通りにファイルを配置し、 git add → commit → push まで実行。 完了後、生成サイズ・セルフチェック結果・公開URLを報告してください。

📌 Claude Code がやること：JSON 読込 → HTML 生成 → セルフチェック → ファイル配置 → git push まで自動。人間は完了報告を待つだけ。

⑥ STEP 4：完成確認とフィードバックループ
4
公開 URL を確認・必要なら再生成
👤 人間

Claude Code が報告した URL をブラウザで開く（シークレットウィンドウ推奨・キャッシュ回避）。
修正したい点があれば、config.json を更新して再度 Claude Code に投げる。

よくあるフィードバック例
気になる点対応
タブを1つ追加したいconfig.json の tab_list に1行追加 → 再投入
色味を変えたいprimary_color / accent_color を変更 → 再投入
本文のニュアンスを変えたいClaude Code に「tab2 の文体をもう少し砕けたトーンに変えて」と追加指示
図解を追加したい「tab3 にフロー図を SVG で追加して」と追加指示
⑦ 汎用化のポイント（個人実践 → 部内展開）
🌐 個人の実践から、部内・組織への横展開へ
このフレームワークは、誰の業務にも適用できる。
重要なのは「受け皿テンプレートを共通化する」こと。各人が同じテンプレで意図を言語化すれば、AIの出力品質も安定する。
部内に持ち込む際の3つの段階
段階内容所要時間目安
第1段階：紹介「こういう仕組みがある」を見せる（デモ）15〜30分
第2段階：体験有志メンバーと一緒に1本作ってみる（受け皿テンプレ記入から）1時間
第3段階：定着業務マニュアル・議事録テンプレ等で実運用に組み込む1〜2週間
汎用化を進める上での注意点
  • 受け皿テンプレは「埋めやすさ」を優先：項目を増やしすぎない。5〜6項目で十分。
  • JSONスキーマは固定する：変動要素を増やすと品質がぶれる。tab_list の構造などはチームで統一。
  • テンプレ参照 HTML は1つに絞る：「これを参考に」と指示する基準ファイルを決めておく。
  • セルフチェック項目を共通化：「tab id 連番」「doc-footer 1個」「個人情報残存なし」等。

📌 最終ゴール：「受け皿テンプレに書く → Claude Code 1回起動 → 公開URL」の3ステップで誰でも業務文書を量産できる状態。さらに先には GitHub Actions による完全自動化（フォーム入力だけで完結）が見える。

🎯 まとめ：このフローが意味すること

📌 従来：「資料を書く」＝コンテンツ作成・構造設計・体裁調整・公開作業 すべてを人間が担う

📌 本フロー：「資料を書く」＝意図を言語化するだけ。構造化・コーディング・公開は AI が担う

📌 人間に残るタスク：「何を作るか」「なぜ作るか」の判断、AIが出した提案の評価・選択、最終的な意味づけ

💡 部内勉強会で伝えるべき1つのメッセージ
「AI は作業を肩代わりする。しかし、作るかどうか、何を作るかの判断は、私たちが持つ」

このフローを実践することで、業務文書作成にかかる時間を 80% 削減しながら、本来人間がやるべき意図の設計と意味づけに集中できるようになる。
JSON駆動 HTML自動生成 汎用フロー v1 ／ 個人実践から部内展開へ ／ 2026-05-15