ppt-design

PPT のデザイン

各スライドは独立した 1600x900 の HTML ファイルとしてデザインし、ユーザーから依頼があった場合にのみ PPT にエクスポートします。

このリポジトリでは、実行可能なスライドの仕様は ./scripts/slide_engine/ にあります。 共有 JS マニフェストと共有レンダラーが、実行時の信頼できる唯一の情報源です。 ./styles/style_[a-j].md のファイルは、人が参照するデザイン資料であり、実行可能なマニフェストとの整合性を手動で保つ必要があります。

ワークフロー

1. トピック、対象読者、成果物を特定します。
2. ユーザーが Markdown ドキュメントを提供した場合、ドキュメントに明確に異なるページ構成が示されていない限り、各 Page X セクションを 1 枚のスライドとして扱います。
3. スタイルを選ぶ前に、style-selector.md を読みます。
4. デッキが中国語または中国語と英語の混在の場合は、bilingual-typography.md を読みます。
5. ユーザーがすでにスタイルを選んでいない場合は、2〜3 種類のスタイルを提案します。
6. 推奨する各スタイルについて、平易な言葉で説明します。
   • スタイル名
   • ビジュアルの説明を 1 行で
   • 最適なコンテンツの種類
   • スタイルの説明と推奨には、デフォルトで英語を使用します
7. background_mode を確認するか、推定します。
   • デフォルトは paper にします
   • 対応するライトスタイルでのみ white を使用できます
   • 選択したスタイルが white に対応していない場合は、その旨を伝え、paper のままにするか、対応するスタイルを推奨します
8. background-modes.md を読みます。
9. presentation-layout-rules.md を読みます。
10. html-review-checklist.md を読みます。
11. デッキが client-facing または public-stage の場合は、presentation-quality-rubric.md を読みます。
12. layout-prototypes.md を読みます。各スライドのコンテンツの役割を分類し、HTML を作成する前にレイアウトのプロトタイプを選びます。連続するスライドで同じレイアウトを繰り返してはいけません。
13. safe-zone.md を読みます。すべてのスライドでコンテンツの境界を守ります。すべての主要コンテンツはメインフレーム領域（y = 108px から y = 804px）内に配置します。chrome=bookend の場合、クロームラベルを含めるのは表紙とクロージングスライドのみです。
14. 厳密な表、組織図、フレームワーク図、その他の幾何学的な構造に配慮が必要な構成がスライドに含まれる場合は、そのスライドを作成する前に geometry-preserve.md を読みます。
15. HTML を作成する前に、選択したスタイルのファイル ./styles/style_[a-j].md を読みます。雰囲気、タイポグラフィ、装飾の方針に関するデザイン資料として扱い、実行時の動作は共有スライドエンジンで制御します。
16. 選択したスタイル固有の余白、装飾の密度、コントラスト、テンポを保ちます。すべてのスタイルを同じレイアウト密度に揃えてはいけません。
17. スライドの文面が中国語またはバイリンガルの場合は、英語のディスプレイフォントをどこでも使い回すのではなく、そのスタイルの中国語と英語の組み合わせに関する指針に従います。
18. 幾何学的な構造に配慮が必要な場合を除き、生の Markdown 書式をそのまま維持するのではなく、ページのコンテンツをスライドの階層構造に再構成します。
19. ./outputs/html/ にスライドごとに 1 つの HTML ファイルを生成します。
20. 納品前に、生成した HTML スライドをすべて確認します。これは任意ではなく、必須です。
21. 確認で見つかったレイアウト、間隔、タイポグラフィ、階層構造、幾何学的な問題を、スライドが選択したスタイルに沿う範囲で最小限の変更により修正します。
22. speaker_notes_mode が有効な場合は、発表者用のサイドカーノートファイルを生成します。
23. ユーザーが PPT を希望する場合は、HTML スライドを PNG にレンダリングし、PPTX にまとめます。

public-stage の作業では、以下のタスクパイプラインとして進めます。

1. 下書きの生成
2. 仕上げの工程
3. 監査ゲート
4. レンダリング／エクスポート

仕上げの工程を省略してはいけません。また、監査ゲートを通過する前にエクスポートしてはいけません。

入力

ユーザーから提供された場合、または推論の中で明示する必要がある場合は、以下のフィールドを使用します。

• input_markdown：デッキの元となる Markdown。できれば Page 1、Page 2 などでグループ化します
• style：A-J またはスタイル名
• background_mode：paper または white
• chrome：all、bookend、または none
• geometry_mode：auto、preserve、または recompose
• presentation_scenario：brand-launch、investor-board、client-pitch、または research-brief
• quality_tier：internal、client-facing、または public-stage
• speaker_notes_mode：none、outline、または full
• brand_profile：ロゴ、フッター、パレット、フォントポリシーのブランド設定
• deliverable：html、ppt、または both

デフォルトの動作：

• input_markdown：可能であれば見出しからページ構成を推定します
• style：指定がない場合は、まず候補を推奨します
• background_mode：paper
• chrome：bookend
• geometry_mode：auto
• presentation_scenario：brand-launch
• quality_tier：public-stage
• speaker_notes_mode：outline
• deliverable：html

リポジトリに関する注意：

• ./scripts/build_template_style_cases.mjs と ./scripts/build_twitter_style_cases.mjs に含まれるデモビルダーは、固定の社内ベンチマークパイプラインです。
• 現在は chrome=bookend でレンダリングし、PNG/PPT にエクスポートする前に HTML を検証します。
• スキルのすべての入力を CLI フラグとして公開しているわけではありません。

スタイルの選択

まず style-selector.md を読んでください。

ユーザーがスタイルを選んでいない場合：

• 10 種類すべてではなく、2～3 種類だけを推奨します。
• 「素敵」や「クール」といった恣意的な好みの言葉ではなく、コンテンツに合ったものを選びます。
• スタイルの見た目と、適した素材の種類を説明します。
• 作業中の会話が別の言語であっても、スタイルの推奨文はデフォルトで英語にします。
• ユーザーが明示的に翻訳を求めない限り、生成するスライドの文面はユーザーのソース言語に保ちます。

例：

• ビジネスレポート、金融、政策、調査概要：A、D、I を優先します。
• ブランドストーリー、文化、展示、哲学、エディトリアル：B、E、F を優先します。
• クリエイティブな提案、イベント、若者向けブランド、キャンペーン、エンターテインメント：C、G、H、J を優先します。

背景モード

background-modes.md を読んでください。

以下のルールを適用します。

• paper は、そのスタイルに適している場合、紙の粒子、印刷の質感、温かみのあるオフホワイトの用紙を維持します。
• white はスライドのキャンバスをクリーンな白に切り替え、紙固有の質感、折り目、用紙のシミュレーションを取り除きます。
• white にしてもスタイルの個性は失われません。タイポグラフィ、グリッド、装飾、コントラストの仕組み、紙以外の装飾要素は維持します。
• white に対応しているのは、スタイル A、B、C、D、E、G、J のみです。
• スタイル F、H、I はダークテーマを前提としています。白基調に変更しないでください。

HTML のルール

• スライドごとに 1 つのファイルを作成します：slide_01.html、slide_02.html など。
• キャンバスサイズは 1600x900 に固定します。
• 静的な HTML、CSS、インライン SVG のみを使用します。
• スライドファイルで JavaScript を使用しないでください。
• Google Fonts 以外の外部画像を使用しないでください。
• 出力は ./outputs/html/ に保存します。
• 情報量の多い文書を読むためではなく、投影やプレゼンテーションを第一に考えてデザインします。

スタイルファイルで特定の詳細が指定されていない限り、以下の基本構造を使用します。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1600">
  <title>Slide Title</title>
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #e0e0e0;
      overflow: hidden;
    }
    .slide {
      position: relative;
      width: 1600px;
      height: 900px;
      overflow: hidden;
    }
    .slide::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 50;
      pointer-events: none;
    }
    .chrome-top, .chrome-bottom {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted, #999);
      z-index: 2;
    }
    .chrome-top { top: 28px; }
    .chrome-bottom { bottom: 24px; }
    .main-frame {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      top: 108px;
      bottom: 96px;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="slide">
    
    <div class="chrome-top">
      <div class="style-id">STYLE A / Swiss International</div>
      <div class="meta-id">Cover</div>
    </div>
    <div class="chrome-bottom">
      <div class="meta-id">cover-swiss-rail</div>
      <div class="page-id">01 / 05</div>
    </div>
    
    <main class="main-frame">
      
    </main>
  </div>
</body>
</html>

クロームラベル

safe-zone.md を読んでください。

以下のルールを適用します。

• chrome=bookend：表紙と終了スライドにのみ .chrome-top と .chrome-bottom を表示します。
• chrome=all：すべてのスライドに .chrome-top と .chrome-bottom を表示します。
• chrome=none：クロームラベルを完全に省略します。
• クロームの表示を切り替えても、メインコンテンツのフレームは移動しません。

スタイルの忠実性

すべてのスライドに次のルールを適用してください。

• 共有エンジンのマニフェストを実行可能な唯一の正とし、選択したスタイルファイルを人間向けのデザイン参考資料とします。
• スタイル固有の余白の使い方を維持してください。ミニマルなスタイルやエディトリアルなスタイルでは、控えめな表現を保ってください。
• 装飾の使い方を維持してください。装飾的な罫線、フレーム、アクセントは、構成を引き立てるものであり、支配するものであってはなりません。
• 密度や衝突を修正するときは、すべてのスタイルを同じテンプレートにするのではなく、コンテンツの編集、カード数の変更、局所的な間隔調整を優先してください。
• 改訂が成功しても、選択したスタイルの系統がはっきりと見て取れるようにしてください。

プレゼンテーションのタイポグラフィ

presentation-layout-rules.mdをお読みください。

すべてのスライドに次のルールを適用してください。

• プレゼンテーションを離れた位置から見ても読みやすいことを優先してください。
• テキストブロック、ラベル、数字が互いに重ならないようにしてください。
• 小さな注釈をたくさん使うよりも、大きなテキストグループを少数使うことを優先してください。
• 見出しと本文のコントラストを、サイズ、太さ、間隔で明確にしてください。
• スライドのテキスト量が多い場合は、すべてを小さくするのではなく、階層を再設計してください。
• スライドに表形式の情報が含まれる場合、ユーザーが文字どおりの高密度な表を明示的に求めていない限り、プレゼンテーションに適した構成に変換してください。

プレゼンテーション用途では、presentation-layout-rules.mdに記載されたタイポグラフィの全スケールを適用してください。8つの役割と、その最低サイズは次のとおりです。

役割	英語の最小サイズ	中国語の最小サイズ
ディスプレイタイトル	44px	40px
セクション見出し	28px	28px
本文	22px	24px
表の見出し	20px	22px
表のセル	18px	20px
補足テキスト	18px	20px
ラベル／キャプション	16px	18px
ページ番号（装飾要素のみ）	14px	14px

どの役割も最低サイズを下回らないようにしてください。コンテンツが収まらない場合は、コンテンツを減らす、スライドを分割する、または階層を再構築してください。選択したスタイルが意図的に華やか、または実験的なものである場合は、そのスタイルを維持しつつ、読みやすさも確保してください。

表とテキスト量の多いコンテンツ

presentation-layout-rules.mdをお読みください。

ユーザーが表、比較、または多くの文章を求めている場合：

• 生のスプレッドシート形式の表ではなく、再設計した比較ブロック、指標カード、タイムライン行、ラベル付きの列を基本としてください。
• 行と列による比較が主な目的であり、簡略化すると意味が失われる場合に限り、通常の表を使用してください。
• 必要に応じて、大きな表は複数のスライドに分割してください。
• 重要な値や行グループのみを強調してください。
• テキストが窮屈に見えないよう、セルやカードの内側には十分な余白を確保してください。
• 情報量が多い場合は、1枚にすべてを詰め込むのではなく、1枚につき主要なポイントを3～6個にまとめることを優先してください。

ジオメトリに影響されるコンテンツ

スライドに図、フレームワークマップ、組織図、ボックスと矢印で構成される図、または厳密な表が含まれる場合は、geometry-preserve.mdをお読みください。

次のルールを適用してください。

• geometry_mode=auto：ボックスのサイズ、コネクターの位置、または表の構造に意味がある場合は、ジオメトリを維持してください。
• geometry_mode=preserve：説明文を減らしたり、図を複数のスライドに分割したりすることになっても、構造の骨格を維持してください。
• geometry_mode=recompose：ユーザーが明示的に希望した場合に限り、コンテンツをスライドに適したカードや帯状の構成に再解釈してください。
• ジオメトリに影響されるスライドでは、スタイルの変更は表面上の見た目に限ってください。好みのレイアウトプロトタイプに合わせるためだけに、図の基本的な比率を歪めないでください。
• 図の骨格には、ボックスの比率をテキストの長さに完全に委ねず、明示的なトラック、座標、またはボックスサイズの上限を使用してください。
• コンテンツが図の中にすっきり収まらない場合は、ラベルを短くする、図を分割する、または詳細をノートに移してください。構造が誤解を招くほどジオメトリを圧縮してはいけません。

必須の HTML レビュー

html-review-checklist.mdを読んでください。

各スライドの生成後、納品前に二次レビューを行ってください。

1. 重なり、衝突、クリッピング、窮屈さがないか確認します。
2. 文字がプレゼンテーションに適した大きさか確認します。
3. テキストや表が多いコンテンツが、スライド向けに再構成されているか確認します。
4. 寸法に敏感な図や表が、意図した比率を保っているか確認します。
5. 読みやすさを調整した後も、選択したスタイルが維持されているか確認します。
6. ツールが利用できる場合は、ソースの確認だけに頼らず、HTML をレンダリングして実際の見た目を確認します。
7. PPT にエクスポートする場合は、レンダリングされた PNG のアスペクト比が最終的な PPT スライドと一致することを確認します。
8. いずれかの項目に不備があれば、HTML を修正します。

このレビューを行わずに、初稿の HTML を納品してはいけません。

PPT エクスポート

ユーザーが ppt または both を希望する場合は、同梱のスクリプトを使用します。

1. npm install で依存関係がインストールされていることを確認します。
2. HTML スライドを PNG にレンダリングします。

node .\scripts\render_slides.mjs --input .\outputs\html --output .\outputs\rendered

3. PPTX を作成します。

node .\scripts\export_ppt.mjs --input .\outputs\rendered --output .\outputs\ppt\deck.pptx

PPT エクスポートでは、忠実度を保つため、意図的に画像形式を使用します。各スライドは、16:9 のデッキ内に全画面表示の PNG として配置されます。

品質チェック

• 選択したスタイルが、コンテンツの種類やトーンに合っています。
• そのスタイルを選んだ理由をユーザーが理解できます。
• background_mode が正しく適用されています。
• 互換性のある明るいスタイルは、paper と white を切り替えられます。
• 互換性のない暗いスタイルでは、white が明示的に拒否されます。
• すべてのスライドで、ひとつのスタイルファミリー内の視覚的一貫性が保たれています。
• テキストが近くの要素と重なったり、衝突したり、クリッピングされたり、窮屈になったりしていません。
• 文字は、投影やプレゼンテーションでの使用に十分な大きさです。
• テキストや表が多いコンテンツは、適切な場合、より明確なスライド階層に再構成されています。
• 生成後に二次 HTML レビューが行われており、生成前だけの確認にとどまっていません。
• PPT の各ページで、切り抜きや拡大縮小の誤りなく HTML の構成が保たれています。
• 装飾ブロック、特に暗色や鮮やかな色のブロックが、意図的で、余白が確保され、プレゼンテーションに適した重なり方でない限り、主要な閲覧領域に侵入していません。
• 主要なコンテンツはすべて、メインフレーム領域（垂直方向の 108px～804px）内に収まっています。
• 現在の chrome モードで許可されているクロームラベルを除き、上部の予約領域（0-96px）や下部の予約領域（804-900px）にテキストが表示されていません。
• 連続するスライドで異なるレイアウトプロトタイプが使用されています。
• 10 枚のスライドで構成されるデッキでは、少なくとも 5 種類の異なるレイアウトプロトタイプが使用されています。
• 改良を加えても、すべてのデッキを同じ密度や装飾パターンに画一化せず、元のスタイルが保たれています。