slides-to-pptx

スライドからPPTXへ

PptxGenJS を使ったオプションの PPTX エクスポート機能を備え、ブラウザー内だけで動作する、依存関係ゼロでアニメーション豊富な HTML プレゼンテーションを作成します。

基本原則

1. 依存関係ゼロ — CSS／JS をインラインで記述した単一の HTML ファイルを使用します。npm もビルドツールも不要です。
2. 説明するより見せる — 抽象的な選択肢ではなく、視覚的なプレビューを生成します。人は実物を見ることで、自分の求めるものを見つけます。
3. 独自性のあるデザイン — ありきたりな「AI スロップ」は避けます。すべてのプレゼンテーションに、オーダーメイドのような個性を持たせてください。
4. ビューポートへの適合（絶対厳守） — すべてのスライドを必ず 100vh にぴったり収めてください。スライド内でスクロールさせてはいけません。コンテンツがはみ出す場合は、複数のスライドに分割してください。
5. 段階を踏んで実行 — このワークフローを必ず厳密に段階ごとに実行してください。次のフェーズに先走ってはいけません。質問した後は、必ず停止してユーザーの入力を待ってください。

デザインの美学

ありきたりな「よくある」出力に収束しがちです。フロントエンドデザインでは、これがユーザーの言う「AI スロップ」な美学につながります。これを避け、創造的で個性があり、見る人を驚かせ、楽しませるフロントエンドを作成してください。

次の点を重視してください。

• タイポグラフィ：美しく、独自性があり、興味を引くフォントを選んでください。Arial や Inter などの一般的なフォントは避け、フロントエンドの美学を高める個性的なフォントを選びましょう。
• 色とテーマ：一貫性のある美学を徹底してください。一貫性を保つために CSS 変数を使いましょう。控えめで均等に配色されたパレットよりも、アクセントが際立つ主役色のほうが効果的です。IDE のテーマや文化的な美学を参考にしてください。
• 動き：アニメーションをエフェクトやマイクロインタラクションに活用してください。HTML では CSS のみの解決策を優先してください。React で利用できる場合は Motion ライブラリを使用してください。印象に残る効果を重視しましょう。ページの読み込み時に演出を統一し、段階的に表示する（animation-delay）ほうが、散発的なマイクロインタラクションよりも喜びを生み出します。
• 背景：単色に頼らず、雰囲気と奥行きを作り出してください。CSS グラデーションを重ねたり、幾何学模様を使ったり、全体の美学に合った背景効果を加えたりしましょう。

ありがちな AI 生成の美学を避けてください。

• 使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）
• ありきたりな配色（特に白背景に紫のグラデーション）
• 予測できるレイアウトやコンポーネントのパターン
• 文脈に応じた個性のない、型にはまったデザイン

創造的に解釈し、文脈に合わせて心からデザインされたと感じられる、意外性のある選択をしてください。ライトテーマとダークテーマ、異なるフォントや美学を使い分けましょう。世代を重ねても、Space Grotesk のようなよくある選択に収束しがちです。これを避け、既成概念にとらわれず考えることが重要です。

ビューポート適合ルール

以下の不変条件は、すべてのプレゼンテーションのすべてのスライドに適用されます。

• すべての .slide に height: 100vh; height: 100dvh; overflow: hidden; を指定してください。
• すべてのフォントサイズと間隔には clamp(min, preferred, max) を使用してください。固定の px／rem は使用しないでください。
• コンテンツコンテナには max-height の制約が必要です。
• 画像：max-height: min(50vh, 400px)
• 高さ 700px、600px、500px のブレークポイントが必要です。
• prefers-reduced-motion に対応してください。
• CSS 関数を直接否定しないでください（-clamp()、-min()、-max() は無視されます）。代わりに calc(-1 * clamp(...)) を使用してください。

生成時には viewport-base.css を読み込み、その全内容をすべてのプレゼンテーションに含めてください。

スライドごとのコンテンツ密度上限

スライドの種類	コンテンツの上限
タイトルスライド	見出し 1 つ ＋ サブタイトル 1 つ ＋ 任意のタグライン
コンテンツスライド	見出し 1 つ ＋ 箇条書き 4～6 項目、または見出し 1 つ ＋ 段落 2 つ
機能一覧スライド	見出し 1 つ ＋ カード最大 6 枚（2x3 または 3x2）
コードスライド	見出し 1 つ ＋ コード 8～10 行
引用スライド	引用 1 つ（最大 3 行）＋ 出典
画像スライド	見出し 1 つ ＋ 画像 1 枚（高さ最大 60vh）

コンテンツが上限を超える場合は、複数のスライドに分割してください。詰め込まず、スクロールさせないでください。

フェーズ 0：モードの判定

ユーザーの要望を判断します。

• モード A：新規プレゼンテーション — ゼロから作成します。フェーズ 1 に進みます。
• モード B：PPT 変換 — .pptx ファイルを変換します。フェーズ 4 に進みます。
• モード C：改善 — 既存の HTML プレゼンテーションを改善します。内容を読み、理解して、改善します。以下のモード C の変更ルールに従ってください。

モード C：変更ルール

既存のプレゼンテーションを改善する際、ビューポートに収めることが最大のリスクです。

1. コンテンツを追加する前に： 既存の要素数を数え、密度の上限を超えていないか確認します
2. 画像を追加する場合： max-height: min(50vh, 400px) を必ず設定します。スライドにすでに最大量のコンテンツがある場合は、2 枚のスライドに分割します
3. テキストを追加する場合： 1 枚のスライドにつき箇条書きは最大 4～6 項目です。上限を超える場合は、続きのスライドに分割します
4. 変更後は必ず確認： .slide に overflow: hidden が設定されていること、新しい要素で clamp() を使用していること、画像にビューポート相対の最大高さが設定されていること、コンテンツが 1280x720 に収まることを確認します
5. 事前に再構成： 変更によってはみ出しが発生する場合は、自動的にコンテンツを分割してユーザーに伝えます。依頼されるまで待たないでください

既存のスライドに画像を追加する場合： まず画像を新しいスライドに移動するか、ほかのコンテンツを減らします。既存のコンテンツがすでにビューポートを埋めているか確認せずに、画像を追加してはいけません。

---

フェーズ 1：コンテンツの確認（新規プレゼンテーション）

ユーザーのメッセージとコンテンツから言語を判定します。ワークフロー全体を通して、同じ言語で応答してください。

質問はすべて一度に尋ねてください。 ユーザーが一度にすべて回答できるようにします。

質問 1 — 目的（ヘッダー：「目的」）： このプレゼンテーションは何に使いますか？ 選択肢：ピッチデッキ／授業・チュートリアル／カンファレンストーク／社内プレゼンテーション

質問 2 — 長さ（ヘッダー：「長さ」）： スライドはおよそ何枚ですか？ 選択肢：短め 5～10 枚／標準 10～20 枚／長め 20 枚以上

質問 3 — コンテンツ（ヘッダー：「コンテンツ」）： コンテンツは用意できていますか？ 選択肢：すべて用意済み／大まかなメモ／トピックのみ

質問 4 — インライン編集（ヘッダー：「編集」）： 生成後にブラウザー上でテキストを直接編集する必要がありますか？ 選択肢：

• 「はい（推奨）」 — ブラウザー上でテキストを編集でき、localStorage に自動保存し、ファイルをエクスポートできます
• 「いいえ」 — プレゼンテーションのみで、ファイルサイズを小さく保てます

ユーザーの編集に関する選択を覚えておいてください。フェーズ 3 で編集関連のコードを含めるかどうかが決まります。

ユーザーにコンテンツがある場合は、共有してもらいます。

🛑 重要：ここで停止して待ってください。上記の質問への回答を待つ必要があります。ユーザーが返信するまで、フェーズ 2 または 3 に進んではいけません。

ステップ 1.2：画像の評価（画像が提供された場合）

ユーザーが「画像なし」を選んだ場合 → フェーズ 2 に進みます。

ユーザーが画像フォルダーを提供した場合：

1. スキャン — すべての画像ファイル（.png、.jpg、.svg、.webp など）を一覧表示します
2. 各画像を確認 — Read ツールを使用します（Claude はマルチモーダルです）
3. 評価 — 画像ごとに、何が写っているか、使用可能か使用不可か（理由も含む）、表すコンセプト、主要な色を確認します
4. アウトラインを共同で設計 — 選定した画像をテキストとともにスライド構成に反映します。「先にスライドを計画してから画像を追加する」のではなく、最初から両方を踏まえて設計します（例：スクリーンショット 3 枚 → 3 枚の機能紹介スライド、ロゴ 1 つ → タイトル／締めくくりスライド）
5. 確認（ヘッダー：「アウトライン」）：「このスライドのアウトラインと画像の選定でよろしいですか？」 選択肢：問題ありません／画像を調整／アウトラインを調整

🛑 重要：プレゼンテーションを生成する前に、アウトラインを確認するまでここで停止して待ってください。

プレビューでのロゴ： 使用可能なロゴが見つかった場合は、それを base64 形式でフェーズ 2 の各スタイルプレビューに埋め込みます。ユーザーは自分のブランドを 3 種類のスタイルで確認できます。

---

フェーズ 2：スタイルの確認

ここでは「説明するより、見せる」ことが重要です。 多くの人は、デザインの好みを言葉で説明できません。

ステップ 2.0：スタイルの選択方法

どの方法で選びたいか尋ねます（ヘッダー：「スタイル」）。

• 「選択肢を見せて」 （推奨）— ムードに基づいてプレビューを3つ生成します
• 「希望は決まっている」 — プリセット一覧から直接選択します

直接選択の場合： プリセット選択画面を表示し、フェーズ 3 に進みます。利用可能なプリセットは STYLE_PRESETS.md で定義されています。

🛑 重要：ここで必ず停止し、ユーザーがスタイルの選択方法を選ぶまで待ってください。ユーザーの選択をシミュレートしないでください。

ステップ 2.1：ムードの選択（ガイド付きの探索）

次の質問をします（ヘッダー：「雰囲気」、複数選択可、最大2つ）。 オーディエンスにどのような印象を与えたいですか？選択肢：

• 感心・自信 — プロフェッショナルで信頼できる印象
• 高揚・活気 — 革新的で大胆な印象
• 穏やか・集中 — 明快で思慮深い印象
• 感動・心を動かす — 感情に訴え、記憶に残る印象

🛑 重要：ここで必ず停止し、ユーザーがムードを選択するまで待ってください。返答があるまでプレビューの生成に進まないでください。

ステップ 2.2：スタイルプレビューを3つ生成

ムードに基づいて、タイポグラフィ、色、アニメーション、全体的な美しさがわかる、異なる1枚スライドのHTMLプレビューを3つ生成します。利用可能なプリセットとその仕様については、STYLE_PRESETS.md を読みます。

ムード	おすすめのプリセット
感心・自信	Bold Signal、Electric Studio、Dark Botanical
高揚・活気	Creative Voltage、Neon Cyber、Split Pastel
穏やか・集中	Notebook Tabs、Paper & Ink、Swiss Modern
感動・心を動かす	Dark Botanical、Vintage Editorial、Pastel Geometry

プレビューを .claude-design/slide-previews/（style-a.html、style-b.html、style-c.html）に保存します。それぞれ自己完結型の約50〜100行とし、アニメーション付きタイトルスライドを1枚表示します。

各プレビューを自動的にユーザーに表示します。

ステップ 2.3：ユーザーによる選択

次の質問をします（ヘッダー：「スタイル」）。 どのスタイルプレビューが好みですか？選択肢：スタイル A：[名前] / スタイル B：[名前] / スタイル C：[名前] / 要素を組み合わせる

「要素を組み合わせる」を選択した場合は、具体的な希望を尋ねます。

🛑 重要：ここで必ず停止し、ユーザーが希望するスタイルを選択するまで待ってください。ユーザーが明示的に選択するまでフェーズ 3 に進まないでください。

---

フェーズ 3：プレゼンテーションの生成

フェーズ 1 のコンテンツ（テキスト、またはテキストと厳選した画像）とフェーズ 2 のスタイルを使用して、プレゼンテーション全体を生成します。

画像が提供されている場合、スライドの概要にはステップ 1.2 でそれらがすでに組み込まれています。画像がない場合は、CSS で生成したビジュアル（グラデーション、図形、パターン）によって視覚的な魅力を加えます。この方法も完全にサポートされている標準的な選択肢です。

生成する前に、次の参考ファイルを読んでください。

• html-template.md — HTML の構造と JavaScript の機能
• viewport-base.css — 必須の CSS（すべて含めてください）
• animation-patterns.md — 選択した雰囲気に合わせたアニメーションの参考資料

主な要件：

• 自己完結型のHTMLファイルを1つ作成し、CSSとJavaScriptはすべてインラインにします
• viewport-base.css の内容をすべて <style> ブロックに含めます
• Fontshare または Google Fonts のフォントを使用します。システムフォントは使用しないでください
• 各セクションの説明を詳細なコメントで記述します
• すべてのセクションに、明確な /* === SECTION NAME === */ コメントブロックを付けます
• コンテンツの言語に基づいて <html lang="..."> を設定します（例：中国語は zh-CN、英語は en、日本語は ja）

---

フェーズ 4：PPT への変換

PowerPoint ファイルを変換する場合：

1. コンテンツを抽出する — python scripts/extract-pptx.py <input.pptx> <output_dir> を実行します（必要に応じて python-pptx をインストールします：pip install python-pptx）
2. ユーザーに確認する — 抽出したスライドタイトル、コンテンツの要約、画像の数を提示します
3. スタイルを選択する — フェーズ 2 に進み、スタイルを探します
4. HTML を生成する — すべてのテキスト、画像（assets/ 内）、スライドの順序、発表者ノート（HTML コメントとして）を保持しながら、選択したスタイルに変換します

🛑 重要：HTML の生成後は必ず停止し、ユーザーのフィードバックを待ってください。PPTX のエクスポートに自動的に進まないでください。

フェーズ 5：PPTX へのエクスポート

HTML プレゼンテーションを生成した後、PPTX にエクスポートするかユーザーに尋ねます。希望する場合は、次のように尋ねます。

質問：エクスポート形式 編集可能なネイティブ PPTX と高忠実度のスクリーンショット PPTX のどちらにしますか？選択肢：

• 「ネイティブテキスト／図形」（ファイルサイズは小さく、テキストを編集できますが、フォントやレイアウトが HTML と少し異なる場合があります）
• 「スクリーンショット」（ファイルサイズは大きく、テキストは編集できませんが、元の HTML のデザインとフォントを 100％保持できます）

選択に応じて、以下の該当するセクションに従います。

オプション A：ネイティブ PPTX（PptxGenJS を使用）

依存関係

npm install pptxgenjs

PPTX 生成ルール

生成する前に、次の補足ファイルを読んでください。

• html2pptx.md — HTML から PPTX への変換に関する詳細ガイド
• ooxml.md — OOXML 技術リファレンス
• generate-pptx.js — リファレンス実装

基本構造

const PptxGenJS = require('pptxgenjs');

// Create presentation
const pptx = new PptxGenJS();


// Metadata
pptx.author = 'Author Name';
pptx.title = 'Presentation Title';

// Layout (16:9)
pptx.defineLayout({ name: 'CUSTOM', width: 13.33, height: 7.5 });
pptx.layout = 'CUSTOM';

重要な注意事項

1. カラーコード — PptxGenJS では # を付けません。

// ✅ Correct
{ color: '10B981' }
{ fill: 'F9FAFB' }

// ❌ Wrong (may corrupt file)
{ color: '#10B981' }
{ fill: '#F9FAFB' }

2. フォント — コンテンツの言語に合わせます。

// Chinese
{ fontFace: 'Noto Sans SC' }
// English
{ fontFace: 'Arial' }
// Japanese
{ fontFace: 'Noto Sans JP' }

3. 改行 — \n を使用します。

slide.addText('第一行\n第二行', { ... });

4. 絵文字 — 環境によっては表示されない場合があります。重要な情報には代替としてテキストを使用してください。

ファイルの保存

pptx.writeFile({ fileName: 'output/presentation.pptx' })
  .then(fileName => console.log(`Created: ${fileName}`));

カラーパレット

フェーズ 2 で選択したスタイルの色を使用してください。 以下の表は、あくまで代替用の参考です。

用途	カラーコード	説明
プライマリ	2563EB	メインのアクセント
成功	10B981	肯定／完了
警告	F59E0B	注意／優先事項
危険	EF4444	否定／未達
ニュートラル	6B7280	セカンダリテキスト
背景	F9FAFB	背景
プライマリテキスト	111827	メインテキスト
セカンダリテキスト	6B7280	セカンダリテキスト
境界線	E5E7EB	境界線／区切り線

重要： PPTX の色は、必ず HTML プレゼンテーションのスタイルから取得してください。特定のスタイルが選択されている場合、上記のパレットを既定として使用しないでください。

オプション B：スクリーンショット PPTX（Playwright を使用）

ピクセル単位で忠実なスクリーンショット形式のプレゼンテーションを希望する場合：

依存関係

npm install playwright pptxgenjs

スクリーンショット生成ルール

1. playwright を使用してヘッドレスブラウザーを起動する Node.js スクリプトを作成します。
2. スクリプトで生成した HTML ファイルを開きます。
3. 最初のアニメーションが終了するまで待機します（例：await page.waitForTimeout(2000)）。
4. すべてのスライドを順に表示します（プレゼンテーションのナビゲーション JS を呼び出す方法（例：await page.evaluate(() => app.goToSlide(i))）、またはキーボードイベントをシミュレートする方法（例：await page.keyboard.press('ArrowDown')）を使用します）。
5. 各スライドに移動した後、キャプチャする前に、遷移や表示のアニメーションが完了するまで待機します（await page.waitForTimeout(1500)）。
6. ビューポートのスクリーンショットを撮影します（const buffer = await page.screenshot()）。
7. pptxgenjs を使用して新しいプレゼンテーションを作成し、スクリーンショットごとにスライドを追加して、スクリーンショットをスライドの背景または全画面サイズの画像として設定します。
8. .pptx ファイルを保存します。

---

フェーズ 6：納品

1. クリーンアップ — .claude-design/slide-previews/ が存在する場合は削除します
2. 開く — open [filename].html を使用してブラウザーで起動します
3. 概要を伝える — ユーザーに次の情報を伝えます。
   • ファイルの場所、スタイル名、スライド数
   • ナビゲーション方法：矢印キー、Space、スクロール／スワイプ、ナビゲーションドットのクリック
   • カスタマイズ方法：色には :root CSS 変数、タイポグラフィにはフォントリンク、アニメーションには .reveal クラスを使用します
   • インライン編集が有効な場合：左上の角にカーソルを合わせるか、E キーを押して編集モードに入ります。テキストをクリックして編集し、Ctrl+S で保存します
   • PPTX をエクスポートした場合：
     • PPTX ファイルの場所とファイルサイズ
     • PowerPoint／WPS／Keynote で開いて確認するよう案内します
     • 最適な表示のため、適切なフォント（例：中国語の場合は Noto Sans SC）のインストールを推奨します
     • 絵文字アイコンは、すべての PowerPoint バージョンで表示されるとは限らないことを伝えます
4. 確認する — 調整したい点があるかユーザーに尋ねます

---

参考ファイル

ファイル	目的	参照するタイミング
STYLE_PRESETS.md	色、フォント、特徴的な要素を含む、厳選された12種類のビジュアルプリセット	フェーズ2（スタイルの選択）
viewport-base.css	必須のレスポンシブCSS — すべてのプレゼンテーションにコピーします	フェーズ3（生成）
html-template.md	HTML構造、JS機能、コード品質基準	フェーズ3（生成）
animation-patterns.md	CSS/JSアニメーションのスニペットと、効果と印象のガイド	フェーズ3（生成）
scripts/extract-pptx.py	PPTコンテンツ抽出用のPythonスクリプト	フェーズ4（変換）
html2pptx.md	HTMLからPPTXへの変換に関する詳細ガイド	フェーズ5（PPTXエクスポート）
ooxml.md	OOXML技術リファレンス	フェーズ5（PPTXエクスポート）
generate-pptx.js	PptxGenJSのリファレンス実装	フェーズ5（PPTXエクスポート）