editorial-pptx-deck

エディトリアルな PPTX デッキ

洗練された、エディトリアル・ミニマリストスタイルのスライドデッキを作成し、編集可能な PPTX にエクスポートします。最終成果物は .pptx のみ です。HTML スライドはビルド用ソースであり、PDF／HTML ビューアーは生成しません。

仕組み

スライドは制約付き HTML（スライドごとに 1 ファイル）で作成し、scripts/html2pptx.js が各 DOM 要素をネイティブの PowerPoint オブジェクト（ダブルクリックして実際に編集できるテキストボックス）に変換します。本文領域は 1280px × 720px = 960pt × 540pt（LAYOUT_WIDE）に固定されています。

ビルドのワークフロー

このチェックリストをコピーして、進捗を記録してください。

- [ ] 1. Scaffold project (shared/ assets/ slides/ output/)
- [ ] 2. Plan narrative → map each slide to a template type
- [ ] 3. Write slides/NN-name.html from templates (edit text only)
- [ ] 4. check_overflow → fix any slide that isn't exactly 1280x720
- [ ] 5. Export PPTX (only)
- [ ] 6. Clean up build source (keep only the .pptx)

1. 足場を作成します。 作業プロジェクト内に shared/、assets/、slides/、output/ を作成します。このスキルの shared/tokens.css を、プロジェクトの shared/ にコピーします。このスキルの assets/ から、使用する写真だけをプロジェクトの assets/ にコピーします。依存関係は一度だけ準備します。

npm i pptxgenjs playwright sharp && npx playwright install chromium

2. 計画します。 元のコンテンツをスライドのリストにします。各スライドは、テンプレートの種類のいずれかを使用します。一般的なデッキの構成は、表紙 →（区切り → コンテンツスライド 1～3 枚）× セクション → クロージングです。このスタイルは余白を活かすため、テキストは簡潔にします。

3. スライドを作成します。 templates/ から最も近いテンプレートを slides/NN-name.html にコピーし、テキストを置き換えます。ルール：

• <link rel="stylesheet" href="../shared/tokens.css"> はそのまま残します。
• タイトルにはセリフ体を使用し、それ以外はすべてサンセリフ体を使用します（トークンで設定済みです）。
• 赤のアクセントは 1 色だけ使用します。コントラストをつけるためのダークパネル（--ink-panel）は控えめに使い、アクセントにはゴールドの #C9A24B だけを使用します。
• 写真は <img> で配置します（CSS の background-image は使用しないでください）。写真ライブラリを参照してください。

4. 収まりを確認します。 はみ出したスライドは PPTX でクリップされます。

node scripts/check_overflow.mjs --slides slides

OVERFLOW と表示された箇所はすべて修正し（テキストを短くするか、配置を調整します）、すべてが 1280x720 と報告されるまで確認してください。

5. PPTX のみエクスポートします。

node scripts/export_deck_pptx.mjs --slides slides --out output/DeckName.pptx

スライドはファイル名（01-…、02-…）の順に並びます。PDF／HTML へのエクスポートは実行しないでください。成果物は PPTX のみです。

6. クリーンアップします。 slides/ 内の HTML ファイルと一時ファイルをすべて削除し、output/DeckName.pptx だけが残るようにします（ユーザーが引き続き編集する場合は、再利用可能な shared/ と assets/ も残します）。

デザインシステム

shared/tokens.css で定義されています。新しい色は作成しないでください。

トークン	HEX	用途
--ink	#1A1A1A	タイトルと本文の主要テキスト
--soft	#555555	本文の補足テキスト
--muted	#8C8C8C	ラベル、注記、ページ番号
--red	#C8102E	唯一のアクセント：バー、キッカー、キーワード、下線
--red-deep	#A00C24	表の否定的な強調
--red-pale	#FBE9EC	接続チップ（例：「→」の円）
--box	#F4F3F1	薄い色のカード／ゼブラ行
--line	#E4E2DE	極細の区切り線
--ink-panel	#1C1C1C	コントラスト用のダークパネル
gold	#C9A24B	ダークパネル上のアクセント のみ
background	#FFFFFF	ページ

• 書体： h*／タイトルには Georgia のセリフ体、それ以外にはすべて Arial／Helvetica のサンセリフ体を使用します。
• シグネチャー： タイトルの左側に細い赤の縦線を置き、その上に文字間を広げた小さな赤のキッカーを配置します。下部中央には小さなページ番号を置きます。
• ブランドの差し替え： 他社に合わせるには、tokens.css の --red（必要に応じて --ink-panel／gold も）を変更します。それ以外は変更しません。

写真ライブラリ

写真はこのスキルの assets/ にあります。縦向きの画像は、右側約40％の区切り／表紙パネルに使用します（object-fit:cover）。横向きの画像は、全面表示の表紙に適しています。

ファイル	向き	おすすめの用途
sail.png	縦 589×1024	区切り／表紙の右側パネル（デフォルト）
lighthouse-cliff.png	縦 627×1024	区切り／表紙の右側パネル
staircase.png	縦長 312×1024	落ち着いた／抽象的な区切り帯
mast.png	細長 208×1024	細い区切り帯
hiker-clouds.png	細長 225×1024	細い区切り帯
lighthouse-sunset.png	横 1024×721	全面表示の表紙／上部帯
sailboat-deck.png	横 1024×721	全面表示の表紙／上部帯

写真を差し替えるには、<img src="../assets/….png"> を変更します。統一感を保つため、すべての区切りで同じ写真（または同じモチーフ）を使用してください。ユーザーは独自の画像を assets/ に追加することもできます。

テンプレートカタログ

templates/ にあります（それぞれ、オーバーフローに対応した完全な 1280×720 スライドです）。

ファイル	種類
01-cover.html	分割表紙：左側にセリフ体のタイトル、右側に縦向きの写真
02-divider.html	セクション区切り：キッカー＋セリフ体のタイトル＋赤いバー、右側に縦向きの写真
03-three-column.html	キッカー／タイトル＋要点の一文＋3列＋結果の帯
04-mapping.html	「相手の要望 → 私たちの対応」をコネクターチップ付きで示す2列構成
05-compare-table.html	3列の比較表、ゼブラストライプの行
06-dark-contrast.html	2つのパネル（ライトとダーク）＋セリフ体のフッター文
07-pipeline.html	番号付きの横方向ステップパイプライン＋ダークな出力バー
08-closing.html	クロージングピッチ：番号付きのセリフ体の文＋右側に縦向きの写真

厳守事項

これらに違反すると、HTML→PPTX 変換に失敗したり、表示が崩れたりします。詳細と修正方法は reference.md を参照してください。

1. テキストは <p>／<h1>～<h6> の内側にのみ記述してください（<div> 内にテキストを直接置かないでください）。
2. CSS グラデーションは使用しないでください。
3. background／border／box-shadow は <div> にのみ指定してください。テキストタグには指定しないでください。
4. background-image は使用せず、<img> を使用してください。
5. インラインタグ（span／em／strong）にはマージンを設定できません。
6. 本文領域は 1280×720 を維持してください。はみ出しは許可されません。