html-presentation-beautifier

HTML プレゼンテーション整形ツール

AI を活用したコンテンツ構成、インテリジェントな可視化、自動品質レビューにより、ドキュメントやデータをプロフェッショナルな McKinsey スタイルの HTML プレゼンテーションに変換します。

基本原則：プロフェッショナルな McKinsey スタイルのデザインを適用しながら、元のコンテンツを 100％保持します。

プレゼンテーションのデザイン哲学

プレゼンテーションを作成する前に、次の点を検討してください。

• 対象者：誰が見るのでしょうか？（複雑さとフォーマルさを決めます）
• 核となるメッセージ：最も重要な要点は何でしょうか？
• ストーリーの流れ：スライドはどのように結論へとつながるでしょうか？
• 視覚的な階層：どのデータやインサイトを強調すべきでしょうか？

重要な原則：情報が詰め込まれた 10 枚より、明快な 20 枚のスライドを作成するほうが望ましいです。コンテンツの保持は譲れません。

このスキルを使用する場合

次のような場合に使用します。

• 「このドキュメント／レポートからプレゼンテーションを作成して」
• 「この分析をスライドに変換して」
• 「McKinsey スタイルのプレゼンテーションを生成して」
• 「このデータをプロフェッショナルに可視化して」
• 「このコンテンツから HTML スライドを作成して」

プロセスの概要

サブエージェントを使用する 6 フェーズの AI 活用ワークフロー：

フェーズ	アクション	所要時間	出力
1	ドキュメントの解析	~1 分	構造化されたコンテンツマップ
2	スライドの計画	~2 分	可視化を含むスライド計画
3	デザインの適用	~1 分	McKinsey スタイルの構成
3.5	コンテンツの可視化	~2 分	チャート／グラフィックで強化
4	HTML の生成	~3 分	単一ファイルの HTML プレゼンテーション
5	レビューと検証	~2 分	スコア付き品質レポート

合計：一般的なプレゼンテーションで約 10〜12 分

フェーズ 1：ドキュメントの解析

目標：変更を加えずに、構造、データ、結論を抽出します。

手順：

1. ソースドキュメント全体を読みます
2. ドキュメントの種類（レポート、分析、調査）を特定します
3. 構造要素を抽出します。
   • 見出しと小見出し
   • 箇条書きとリスト
   • データテーブルと数値データ
   • 主な結論と推奨事項
4. コンテンツの階層を整理します：主なトピック → サブトピック → 詳細
5. チャートに適した定量データを特定します

終了条件：ドキュメント全体の解析が完了し、コンテンツ構造が整理されていること。

---

フェーズ 2：コンテンツの構成（サブエージェントを使用）

目標：解析したコンテンツを、スライドに適した構成に変換します。

方法：Task ツールと general-purpose サブエージェントを使用します。

必須 — ファイル全体を読む：サブエージェントを呼び出す前に、フェーズ 2 のプロンプトテンプレートを確認するため、subagent-prompts.md を読んでください。

サブエージェントのタスク：

• 入力：解析済みのドキュメントコンテンツ
• 出力：スライドの種類、タイトル、コンテンツ、可視化の割り当てを含む JSON スライド計画
• 重要：コンテンツを 100％保持し、すべてのインサイト／結論に可視化を割り当てます

スライドの種類：

• TITLE：表紙スライド
• TOC：目次（スライドが 10 枚以上の場合）
• DATA_VISUALIZATION：数値データを含むスライド
• CONCEPTUAL：フレームワークのスライド（SWOT、タイムラインなど）
• CONTENT：一般的なコンテンツスライド
• CONCLUSIONS：可視化を含む主な調査結果
• INSIGHTS：可視化を含む推奨事項
• END：謝辞スライド

終了条件：すべてのスライドが定義された構造化スライド計画が完成し、コンテンツの欠落がないこと。

フェーズ 3：デザインとレイアウト

目標：McKinsey スタイルのデザインシステムを適用します。

必須 — ファイル全体を読むこと：完全なデザイン仕様を確認するため、mckinsey-design-system.md を読んでください。

追加の参考資料：

• assets/LAYOUTS_INDEX.md — 構造例と設定パラメーターを含むレイアウトタイプのインデックス
• assets/layouts/*.html — 参考用の実際のレイアウト例ファイル

このフェーズでは、ほかの参考ファイルを読み込まないでください。

主な作業：

1. 各スライドタイプに適したレイアウトを選択する
2. McKinsey のカラーパレット（#F85d42、#556EE6、#34c38f など）を適用する
3. タイポグラフィの階層を設定する（タイトル 48-64px、サブタイトル 28-36px、本文 16-20px）
4. 余白を最適化する（パディング 40-60px、要素間隔 20-30px）
5. レスポンシブデザインを確保する（1200px、768px、モバイルのブレークポイント）

完了条件：すべてのスライドに、一貫した McKinsey スタイルのブランドデザインが適用されていること。

---

フェーズ 3.5：コンテンツのビジュアル表現の改善（サブエージェントを使用）

目標：テキストのみのリストを避け、適切なチャートやグラフィックを使ってコンテンツを見やすくします。

進め方：general-purpose サブエージェントと Task ツールを使用します。

必須 — ファイル全体を読むこと：完全なビジュアル化の判断ツリーを確認するため、chart-selection-guide.md を読んでください。

追加の参考資料：

• assets/COMPONENTS_INDEX.md — CSS クラス、Chart.js の設定、コンポーネント選択の判断ツリーを含む完全なコンポーネントインデックス
• assets/components/*.html — 参考用の実際のコンポーネント例ファイル

このフェーズでは、ほかの参考ファイルを読み込まないでください。

サブエージェントのタスク：

• 入力：フェーズ 2 で作成した構造化スライドプラン
• 出力：具体的なビジュアル化タイプを割り当てた、改善済みスライドプラン
• 手順：コンテンツ構造を分析 → ビジュアル化タイプを対応付け → 例のファイルを参照

9 種類のコンテンツ構造：

1. 段階型（递进型）→ progression、timeline、flowchart
2. 時系列型（时间序列型）→ timeline、strategy-roadmap
3. 並列型（并列型）→ emphasis-box、mindmap、matrix
4. 階層型（层级型）→ pyramid、inverted-pyramid
5. 比較型（对比型）→ comparison、pros-cons、venn-diagram
6. フレームワーク型（分析框架型）→ swot、ansoff、5w1h、competitive-4box
7. 変換型（转化流程型）→ funnel、value-stream
8. 循環型（循环型）→ cycle、circular-flow
9. 因果型（因果型）→ problem-solution、pareto、gauge

例ファイルの場所：assets/components/*.html および assets/layouts/*.html（例：flowchart-example.html、pyramid-chart-example.html）

完了条件：すべてのコンテンツスライドが適切なビジュアル表現で改善されており、インサイトにプレーンテキストの箇条書きを使用していないこと。

---

フェーズ 4：HTML の生成（サブエージェントを使用）

目標：単一ファイルで完結する HTML プレゼンテーションを生成します。

進め方：4 つのサブステップを実行する general-purpose サブエージェントと Task ツールを使用します。

必須 — ファイル全体を読むこと：テンプレートの使用方法をすべて確認するため、template-guide.md を読んでください。

追加の参考資料：

• assets/INDEX.md — ディレクトリ構成とクイックスタートガイドを含むマスターインデックス
• assets/LAYOUTS_INDEX.md — 構造例と設定パラメーターを含むレイアウトタイプのインデックス
• assets/layout-template.html — 1 列、2 列、3 列およびカードグリッドの例を含むレイアウトテンプレート
• assets/component-template.html — チャートと図の例を含むコンポーネントテンプレート

必須 — ファイル全体を読むこと：フェーズ 4 のプロンプトテンプレートを確認するため、subagent-prompts.md を読んでください。

このフェーズでは、ほかの参考ファイルを読み込まないでください。

4 ステップの手順：

ステップ 4.1：テンプレートの選択

• スライド #1 → templates/cover-slide-template.html
• スライド #2 → templates/toc-slide-template.html（スライドが 10 枚以上の場合）
• スライド #3～#N-1 → templates/content-slide-template.html
• スライド #N → templates/end-slide-template.html

注意：追加のレイアウト例として assets/layouts/ も参照し、レイアウト選択の指針として assets/LAYOUTS_INDEX.md を確認してください。

ステップ 4.2：コンテンツ分析とチャートの選択

• DATA_VISUALIZATION スライドの場合：chart_type フィールド（bar、line、pie、doughnut、radar、polarArea、bubble、scatter）を使用します
• それ以外のスライドの場合：visualization_type フィールド（pyramid、timeline、flowchart、mindmap など）を使用します
• 対応する assets/components/*.html および assets/layouts/*.html のサンプルファイルから CSS と HTML をコピーします
• 重要：チャートコンポーネントの詳細は assets/COMPONENTS_INDEX.md、レイアウト設定は assets/LAYOUTS_INDEX.md を参照してください

追加の最適化のヒント：

• レイアウト構造の参考として assets/layout-template.html を使用します
• コンポーネント構造の参考として assets/component-template.html を使用します
• すべてのチャートは、コンテナ内で幅を 100% にする必要があります
• チャートページのチャートには、2 列または 3 列のレイアウトを使用します（1 列は不可）

ステップ 4.3：最適化の適用

• テンプレート構造をコンテンツに統合します
• McKinsey のデザインシステム（正確な色、フォント、レイアウト）を適用します
• スライド計画のテキストを正確に挿入します（データの精度を保持します：1723.5 ではなく 1723.498）
• McKinsey の色を使用して Chart.js のチャートを初期化します
• assets/ のコンセプトに基づくビジュアライゼーションを実装します

ステップ 4.4：HTML ファイルの出力

• 完全な単一ファイルの HTML を組み立てます
• すべての CSS を <style> タグ内に記述します
• すべての JavaScript を <script> タグ内に記述します
• Chart.js CDN を含めます：https://cdn.jsdelivr.net/npm/chart.js
• 次の名前で保存します：{original_filename}_beautified.html

完了基準：ブラウザーで開ける、完成した HTML プレゼンテーションファイルが生成されていること。

---

フェーズ 5：レビューと検証（サブエージェントを使用）

目標：生成された HTML の品質、完全性、準拠性を自動的にレビューします。

方法：Task ツールを使用して、./agents/html-presentation-reviewer.md の html-presentation-reviewer エージェントを呼び出します。

呼び出し方法：

Use Task tool to call html-presentation-reviewer agent with:
- Generated HTML file path
- Source document path
- Request comprehensive review report

レビュー項目：

1. コンテンツの完全性（重大） - 100% の保持を検証
2. コード品質 - HTML/CSS/JS の妥当性
3. McKinsey スタイルへの準拠 - デザイン基準の確認
4. チャートの妥当性 - ビジュアライゼーションの正確性
5. インタラクティブ性 - 機能のテスト

スコアの解釈：

• スコア ≥85：承認。改善は任意です
• スコア 75-84：許容範囲。重大な問題に対処してください
• スコア <75：再生成が必要です

完了基準：HTML プレゼンテーションがレビューされ、詳細なレポートとともに承認されていること。

---

インタラクティブ機能

生成されるプレゼンテーションには、次の機能が含まれます。

• ナビゲーション：前へ／次へボタン、スライドカウンター、矢印キー（←/→）、スペースキー（次へ）
• 全画面表示：切り替えボタン、Escape キーで終了
• キーボードショートカット：Home キー（最初のスライド）、End キー（最後のスライド）
• レスポンシブデザイン：デスクトップ、タブレット、モバイル向けレイアウト
• チャートのインタラクティブ機能：ホバーツールチップ、凡例の切り替え

---

絶対に行わないこと

コンテンツの完全性：

• 元のコンテンツや結論を絶対に変更しないでください。100% 保持してください
• コンテンツを絶対に削除、省略、または除外しないでください
• 絶対に要約や圧縮をしないでください。詳細をすべて表示してください
• リストを絶対に途中で切らないでください。ソースに 15 項目ある場合は、15 項目すべてを表示してください
• 絶対に言い換えないでください。ソースの表現をそのまま使用してください
• 捏造したデータを絶対に追加しないでください。ソースのデータのみを使用してください

デザイン基準：

• McKinsey の配色（#F85d42、#556EE6、#34c38f、#50a5f1、#f1b44c、#74788d）から絶対に逸脱しないでください
• 一貫性のないタイポグラフィを絶対に使用しないでください。階層を維持してください
• 結論やインサイトを、単なるテキストの箇条書きで絶対に提示しないでください。必ずビジュアライゼーションを使用してください
• ありきたりな AI デザイン（紫のグラデーション、Inter フォント、デフォルトの角丸）を絶対に使用しないでください

品質：

• 見た目のためにコンテンツを犠牲にしないでください。不完全な 10 枚より、情報量の多い 20 枚のほうが適切です
• フェーズ 5 のレビューを絶対に省略しないでください。品質検証は必須です

---

クイックスタートの例

ユーザーリクエスト：「このレポートからマッキンゼー風のプレゼンテーションを作成してください」

ワークフロー：

1. 解析（フェーズ 1）：レポートを読み、構成を抽出します
2. 計画（フェーズ 2）：サブエージェントを呼び出す → スライドプランを取得します
3. デザイン（フェーズ 3）：デザインシステムを読み込む → マッキンゼーのスタイルを適用します
4. ビジュアル化（フェーズ 3.5）：サブエージェントを呼び出す → チャートやグラフィックで内容を強化します
5. 生成（フェーズ 4）：サブエージェントを呼び出す → HTML ファイルを作成します
6. レビュー（フェーズ 5）：レビュアーエージェントを呼び出す → 品質レポートを取得します

出力：プロフェッショナルなビジュアル、品質スコア、推奨事項を含む report_beautified.html。

---

リソース

詳細なガイドはすべて references/ にあります。

• デザインシステム：mckinsey-design-system.md - 色、タイポグラフィ、レイアウト
• テンプレート：template-guide.md - 4 種類のテンプレートの使用手順
• チャートの選択：chart-selection-guide.md - ビジュアル化のための判断ツリー
• サブエージェントのプロンプト：subagent-prompts.md - すべてのフェーズに最適化されたプロンプト

インデックスファイル（v2.0 で追加）：

• assets/COMPONENTS_INDEX.md - CSS クラス、Chart.js の設定、選択判断ツリーを含む、チャートおよび図表コンポーネントの完全なインデックス
• assets/LAYOUTS_INDEX.md - 構造例、設定パラメーター、レイアウト選択判断ツリーを含む、レイアウトタイプの完全なインデックス
• assets/INDEX.md - ディレクトリ構成とクイックスタートガイドを含むマスターインデックス

assets/ 内のビジュアル化の例：

コンポーネント（assets/components/*.html）：

• チャートの例：chart-examples.html、mckinsey-label-bar-example.html、pareto-chart-example.html
• 特殊なチャート：pyramid-chart-example.html、funnel-chart-example.html、gauge-chart-example.html
• 図表：swot-analysis.html、ansoff-matrix.html、5w1h.html、competitive-4box.html
• フローチャート：flowchart.html、mindmap.html、timeline.html、swimlane.html

レイアウト（assets/layouts/*.html）：

• カバーレイアウト：01-cover-page.html、NEW_01-cover-page.html
• コンテンツレイアウト：05-chart-text.html、NEW_02-content-page-chart-insights.html
• 特殊なレイアウト：07-radar-card-layout.html、08-table-of-contents.html
• 新しいレイアウト：NEW_03-content-page-text-only.html、NEW_04-content-page-three-charts.html

ガイド（assets/guides/）：

• コンポーネントの完全な一覧については、assets/guides/CHART_EXAMPLES_INDEX.md を参照してください
• 詳細なビジュアル化ガイドについては、assets/guides/INSIGHT_VISUALIZATION_GUIDE.md を参照してください
• テンプレートの使用例については、assets/guides/TEMPLATE_USAGE_GUIDE.md を参照してください
• 最適化の手法については、assets/guides/HTML_OPTIMIZATION_GUIDE.md を参照してください

---

コンテンツ整合性の検証（必須）

プレゼンテーションを完成させる前に、コンテンツが 100% 保持されていることを確認してください。

チェックリスト：

• セクション数が一致している（ソースとプレゼンテーション）
• 箇条書きの項目数が一致している
• データポイント数が一致している
• 結論の数が一致している
• 正確な文言が保持されている（言い換えなし）

いずれかの数が一致しない場合は、再生成してください。

注意すべき兆候：

• 完全なリストの代わりに「重要なポイント」を使用している
• 「上位 N 項目」のみを表示するチャート
• ソースと一致しない箇条書きの項目数
• ソースの文言と正確に一致しない表現