Claude Code で HTML レポートワークフローを構築する—非デザイナー向け実装ガイド
非デザイナーのエンジニアが Claude Code を使い、長大で消費しにくい Markdown レポートを「一目で意思決定できる」HTML レポート生成ワークフローへ拡張・運用した実装記。前作 cornerstone ai-agent-html-output-design（設計思想・理論編）で予告した「Zenn 編集ワークフローへの統合案」を回収・実証する実装・実証編（単発）。
ターゲット読者
persona/editorial 等）を運用中。前作 ai-agent-html-output-design を読んで HTML 出力に興味を持った。
- Claude スキル / コマンド定義の編集
- Markdown レポートワークフローの基本
- HTML / CSS は「存在は知るが書けない」非デザイナー
リッチ HTML を作れず、ワークフローへの組み込み手順も分からない。
構成案
outline-
01なぜ Markdown レポートでは限界なのか 「狭いキャンバス」問題・Consumability 欠如・Thariq / Karpathy 一次資料</> ▦
-
02非デザイナーは Claude に何を頼んだのか 10 ブロック構成（A〜J）と推奨視覚効果の構成表・要件提示の仕方</> ▦
-
03確定事項と検討経緯を「色温度」で分ける 核心のデザイン原則。確定=濃色・実線／検討経緯=淡色・破線を CSS トークン化</> ▦
-
04/editorial ワークフローへどう統合したか 3 アウトプット（Issue/MD/HTML）・分析ブリーフ・単一ファイル完結</> ▦
-
05非デザイナーが今日から始める 5 ステップ 企画→テンプレ作成→組込→分析ブリーフ注入→適用と継続改善・実例 HTML リンク</> ▦
-
06まとめ：Markdown と HTML の耐久性層別化 原本=MD／意思決定支援=HTML の使い分け。「長文 HTML パラドックス」への自己言及を含む</> ▦
書き出しは「200 行の Markdown レポートを前に、承認されたのかすら一目でわからない——非デザイナーの自分が抱えた最初の壁」という体験談から入る。冒頭に Answer-first の TL;DR ブロックと前作 ai-agent-html-output-design への内部リンクを必ず配置する。
SEO 戦略
keywords · query · slug · GEO主要キーワード（重要度順 / タイトル・H2・冒頭 への配置チェック）
T = タイトル / H = H2見出し / L = リード文 への配置
slug
想定検索クエリ（検索意図）
- Claude Code HTML レポート 生成検索意図: 方法
- AI レポート Markdown HTML 移行検索意図: 比較
- 非デザイナー HTML AI 自動生成検索意図: 方法
- /editorial カスタマイズ ワークフロー検索意図: 方法
- AI レポート 消費効率 ダッシュボード検索意図: 情報収集
GEO 観点 (生成AI検索エンジン最適化)
- Answer-first（冒頭 120 字に課題→解決→得られるもの）採用
- 疑問形 H2（「なぜ〜」「何を〜」「どう〜」）3 箇所
- TL;DR ブロック + 前作への内部リンク採用
- 「長文 HTML パラドックス」への自己言及（執筆時必須）draft 申し送り
訴求ポイント
value proposition独自価値
人気 cornerstone（理論編、90 日 336PV）の唯一の実装編。再利用可能な 10 ブロックテンプレート構成表と「色温度分離」という独自デザイン原則を提示。
読者メリット
非デザイナーでも 5 ステップで再現可能。公開中の実例 HTML（reports.motowo.jp）で成果物を即確認できる。
読後にできること
自分の Markdown ワークフローを HTML 化し、確定事項と検討経緯を一目で把握できるダッシュボードを構築できる。
ライブラリアン調査
existing articles · differentiation関連度マップ（中心 = 本記事 / 距離 = 関連の強さ）
実装編
既存記事との差別化
| 観点 | 前作「ai-agent-html-output-design」 | 本記事 |
|---|---|---|
| 扱う層 | なぜ HTML が効くか（理論・パラダイムシフト） | 非デザイナーが実際にどう作ったか（実装・運用） |
| 中核コンテンツ | 6 軸比較マトリクス・4 ユースケース | 10 ブロックテンプレート構成表・色温度分離原則 |
| 差別化ポイント | 統合は「案」にとどまる | 5 ステップ再現手順 + 公開中の実例 HTMLで実証 |
| 読後の到達点 | HTML 出力の意義を説明できる | 自分のワークフローを HTML 化できる |
ポイント
「Zenn 編集ワークフローへの統合案、セキュリティチェックリスト、耐久性層別化フレームまでを一気通貫で扱う。」（前作で提示された統合は "案" の段階だった）— ai-agent-html-output-design（cornerstone・概要より）
GA データ分析
analytics/editorial-20260517-235035.md · 過去 90 日人気記事 Top 10（PV / 関連記事ハイライト）
流入キーワード × テーマ関連度（90 日 / セッション数）
| 関連度 低 | 中 | 高 | 本テーマ中心 | |
|---|---|---|---|---|
| 流入 高 | Flutter Hive (59) | Claude Grok Gemini (66) | Multi-agent collab (50) | Gemini Gal Persona (62) |
| 中 | Moonbit (39) | Vitest vs Bun (52) | Supabase (32) | Ollama num_ctx (28) |
| 低 | — | — | — | — |
示唆
最人気カテゴリ「AI Agent / LLM Orchestration」が 3,909PV で断トツ 1 位。本テーマは直球で属し、前作 cornerstone（336PV）の実装編需要の受け皿になる。実例リンク先がサイト 1 位（2,558PV）で強力なクロスリンク資産。
アクションプラン
- 冒頭で前作
ai-agent-html-output-designを内部リンクし回遊導線を確保 - 実例 HTML（reports.motowo.jp）をリンクカードで提示し成果物を即確認させる
- 「長文 HTML パラドックス」への自己言及を冒頭 TL;DR で先回り解消
連載判断
series decision意思決定プロセス
9 steps · transparent options-
Step 1 · 位置づけ
本記事の位置づけ
-
Step 2 · 連載判断
単発か連載か
-
Step 3 · 各回構成
各回のテーマ配分
-
Step 4 · タイトル
タイトル選定
-
Step 5 · slug
slug 選定
-
Step 6 · 絵文字 / topics
絵文字 / topics
-
Step 7 · ヒーロー画像
ヒーロー画像型
-
Step 8 · 最終確認
オーナーによる最終確認
-
Step 9 · 編集長承認
editor-in-chief 承認
検討経緯コメント（Issue comments 1〜4）
#1 ペルソナ検討 comment 1/4
前作 cornerstone の読者が次に抱く問いは「理論はわかった、で自分はデザインできないのにどう作るのか」。
ペルソナを「Claude Code 運用中／前作で HTML に興味／HTML/CSS は書けない非デザイナー」に絞り、課題 3 点を構成案の各 H2 と 1 対 1 対応させた。
#2 構成検討 comment 2/4
スクラップ 5 部構成を H2×6 にマッピング。2 回連載案も検討したが分割すると薄くなるため単発に確定。
- 見出しは GEO 疑問形を優先採用（Answer-first）
- 核心「色温度による確定/検討分離」を第 3 H2 として独立
- 第 4 H2 で前作の予告「統合案」を明示的に回収
#3 SEO 検討 comment 3/4
GA（90 日）で最人気カテゴリ AI Agent / LLM Orchestration 3,909PV、実例リンク先サイト 1 位 2,558PV を確認。
slug は当初 ai-agent-html-report-workflow → 編集長が前作との自己カニバリを指摘 → claude-code-html-report-workflow に変更。タイトル KW も前方化。
#4 最終決定 comment 4/4
編集長：条件付き承認 → オーナーが条件受諾。slug 再設計・KW 前方化を反映済み。
draft 申し送り：③長文 HTML パラドックス自己言及 ④冒頭 120 字 Answer-first + 前作リンク ⑤他者 Zenn/Qiita/note 引用禁止（実例 reports.motowo.jp は自リソースで可）
承認
編集長による企画承認判断
本企画は 前作の実装・実証編（単発） として承認する。ただし以下の条件を満たすこと。
- slug を前作と差別化（
claude-code-html-report-workflow）・タイトル KW を前方化する ✓ 反映済み - 「長文 HTML パラドックス」への自己言及を冒頭 TL;DR か H6 まとめに必須化（draft 申し送り）
- 冒頭 120 字を Answer-first + 前作内部リンクで構成・他者 Zenn 引用禁止を Writer に明示（draft 申し送り）
成果物 / 次のアクション
deliverables次のステップ
編集会議は完了です。下のコマンドを実行して draft フェーズへ進みます。