ppt-html-authoring

単一ページの PPT 作成

次の情報をもとに作成します。

• 対象のスライドディレクトリ（通常は .pptwork/<deck>/<slide-name>/）
• アウトラインの項目 1 つ（pageType、assetId、主要な内容、出典、トランジション）
• デッキの exportMode（raster または editable）

次のファイルを作成します。

• design.md — フロントマターに title と layout を記述し、続けて ## Content、## Note、## Design を記述します（3 つのセクションはすべて空欄にしないでください）。
• slide.html — 単一ファイルで自己完結させ、## Note のテキストを <script type="application/json" id="ppt-speaker-notes-json"> アイランドにも反映します。

対象外： ページ間の計画（ppt スキルのストーリー計画フェーズを使用）、スクリーンショットとビジュアル QC（ppt スキルの screenshot.mjs とビジュアル QC リファレンスを使用）、エクスポート（export.mjs を使用）、ウェブ検索（ホストアプリの webfetch / websearch を使用）。

ファイル仕様

design.md

• フロントマター：
  • title（必須）
  • layout（必須。使用したレイアウトに一致する、短い英語の識別子）
• 本文は 3 つのセクションで構成し、すべて空欄にしないでください。
  • ## Content — 人が読める言葉でページの内容を記述します。結論を示す完全文のタイトルに、補足の箇条書きまたは短い段落を加えます。
  • ## Note — 箇条書きではなく、自然な文章で発表者ノートを記述します。
  • ## Design — レイアウトを選んだ理由、前ページからのトランジション、データソース、TBD マーカーなど、ビジュアル面および実装面のメモを記述します。
• 空のプレースホルダーは使用しないでください。「これは導入ページです」では不十分です。
• 詳細なスキーマ → references/design-md-spec.md

slide.html

• 単一ファイルで自己完結させる必要があります。CSS は <style> に、JS は <script> に記述します。
• 画像：base64 をインラインで埋め込むか、https CDN を使用します。ローカル相対パス（<img src="assets/...">、<link href="...">）は禁止です。<iframe srcdoc> のプレビューや静的サーバーベースのレンダラーでは、サイドカーファイルが HTML の隣に配置されていない限り、読み込めません。
• フォント、chart.js、d3 など：https CDN から読み込みます。
• ## Note の内容を <script type="application/json" id="ppt-speaker-notes-json">…</script> ノードにも反映します。エクスポートした PPTX に発表者ノートを含める方法はこれだけです。
• スライドを PowerPoint のキャンバスサイズで正しくレンダリングするには、html, body { width: 1280px; height: 720px; overflow: hidden; } を設定します。
• 厳格なルールとよくある注意点 → references/slide-html-rules.md （必読）。
• exportMode=editable の場合は、さらに references/editable-html-rules.md に従います。

ワークフロー

1. コンテキストを読む

アウトラインの項目（pageType / assetId / 主要な内容 / 出典 / トランジション）、 既存のスライドのひな形（design.md は空のテンプレートで、slide.html には <html> の head / tail だけがある場合があります）、および exportMode を確認します。

2. レイアウトを調べる（アセットの仕様）

アウトラインに assetId が指定されている場合は、姉妹の ppt スキルにある ../ppt/assets/<bucket>/index.json を調べ、一致する 記述子を確認します。

確認するもの	目的
index.json エントリの htmlPath	HTML リファレンスのパスを特定します
index.json エントリの materialDir / zones / authoringHints	レイアウトのスロット構成を把握します
解決された html/<id>.html	構成（バージョンセーフエリア、列、階層）を参考にします
specs/<id>.json の zones	スロットごとの構造化された説明を取得します（任意）

デフォルトのバケットは、姉妹の ppt スキルにある ../ppt/assets/corporate-light/ と ../ppt/assets/claude-warm/ です（各 5 種類のレイアウト）。 アウトラインに assetId が指定されている場合は、index.json と一致する html/<id>.html を確認します。バケットが設定されていない場合は、この手順を省略し、 references/slide-html-rules.md と references/ppt-best-practices.md を構成ガイドとして 参照しながら、slide.html を一から作成します。

assetId を独自に選んではいけません。これはストーリー計画で決定する事項です。 アウトラインには assetId がすでに指定されているか、「プリセットなし、一からデザイン」と明記されています。

3. テンプレートの HTML をそのままコピーしない

構成（バージョン用のセーフエリア、カラム、階層、配置枠）だけを参考にします。「Acme Corp」「2024 Q3 revenue」「scene illustration」など、すべてのプレースホルダー文言をページの実際の内容に置き換えてください。完成したスライドにプレースホルダーが残るのは、作成時によくある失敗のひとつです。

4. 先に design.md を書く

Content → Note → Design の順に記述します。

• ## Content：結論を示す完全文のタイトル（名詞句ではありません）＋補足する箇条書き／短い段落。
• ## Note：スピーカーノート。箇条書きではなく、自然な文章で記述します。
• ## Design：レイアウトを選んだ理由、切り替えの手がかり、データソース、TBD マーカー。

5. 次に slide.html を書く

Content セクションをもとに HTML を作成します。データが適している場合は、プレーンテキストよりもビジュアルを優先してください。

• 傾向／割合／比較 → Chart.js（references/diagram-and-chart.mdを参照）。
• フロー／アーキテクチャ／システム境界 → インライン SVG。
• 装飾画像 → base64 でインライン化。大きな画像（>2MB）は圧縮するか、リモート CDN を使用します。
• アイコン → リモートの https SVG アイコンライブラリ（Heroicons、Lucide、Feather、Tabler など）を使用するか、単一のインライン SVG を貼り付けます。

exportMode=editable の場合、HTML は PowerPoint ネイティブのオブジェクトとして記述します。重要な文言には実際のテキストノードを使い、カードには単色塗りのシンプルな図形を使い、実際の表を作成し、Chart.js のデータを抽出可能にし、背景の装飾は分離します。重要なテキストを SVG／canvas／画像／疑似要素の中に配置しないでください。

6. Note を HTML に同期する

## Note のテキストを、次の <script type="application/json" id="ppt-speaker-notes-json">…</script> アイランドに反映します。スピーカーノートをエクスポートされた PPTX に取り込む方法は、これだけです。

7. 外部の事実が必要な場合

1 つのページに数値／事実／引用／競合データのいずれかが 1 件足りない場合：

• ホストアプリに組み込まれている webfetch／websearch ツールを使用します。このスキルには独自のウェブツールは含まれていません。
• 調査結果を .pptwork/<deck>/materials/research.md に追記します（スライド間でメインコンテキストが汚染されないようにします）。
• ## Design で、事実の出典を source: research.md §<timestamp> として記載します。
• 数値を捏造しないでください。

8. 自己チェック

• <img src="assets/...">／<link href="..."> の相対パスはありますか？base64 に変換するか、リモート https を使用してください。
• Note セクションは HTML に同期されていますか？
• data-id／data-role 属性は、後から edit／patch 形式で修正できるほど安定していますか？

参考資料（必要に応じて参照）

作業	参照資料
design.md の作成	references/design-md-spec.md
slide.html の作成／編集	references/slide-html-rules.md（必須）
編集可能なデッキ HTML の作成	references/editable-html-rules.md
チャート、インライン SVG、図の追加	references/diagram-and-chart.md
タイポグラフィ、フォントサイズ、配置、視覚的な焦点	references/ppt-best-practices.md

判断ルール

• ユーザーが「文を少し直して」と言った場合 → edit／patch を使って、該当する data-id ノードを変更し、外側の構造はそのまま保ちます。
• ユーザーが「レイアウトを作り直して」と言った場合 → slide.html 全体を書き直しますが、design.md の説明はそのまま保ちます。
• 既存のラスター画像／複雑な HTML のデッキに、編集可能な出力が必要になった場合 → editable-html-rules.md に従い、言語モデルで各ページを書き直します。ルールベースのみのコンバーターに頼らないでください。
• 内容の本質が割合／傾向／比較の場合 → チャートを先に配置し、生の数値を列挙しないでください。
• 内容の本質がフロー／アーキテクチャ／境界の場合 → インライン SVG を先に配置し、段落を並べすぎないでください。
• 背景画像／ブランド画像が必要な場合 → base64 でインライン化します。大きな画像（>2MB）は先に圧縮するか、リモート CDN を使用します。
• データが不足している場合 → ホストの webfetch／websearch を使用し、数値を捏造しないでください。

よくある落とし穴

• 完成したページにテンプレートのプレースホルダー文言を残してしまう（関係のないデッキに「Acme Corp Case」と書かれているなど）。
• グラフがなく、「数字＋段落」だけのデータページ。
• image-slot に「シーンのイラスト」というプレースホルダーを残してしまう — サムネイルが空に見えます。
• <img src="assets/diagram.png"> の相対パスを使ってしまう — iframe のプレビューが壊れます。
• Note を #ppt-speaker-notes-json に反映し忘れる — エクスポートした PPTX のスピーカーノートが空になります。
• タイトルを結論文ではなく、「AI Agent market」のような名詞句にしてしまう。
• 簡単に情報を取得する、またはユーザーに尋ねる代わりに、数字をでっち上げてしまう。