slide-creator

Slide Creator — HTML → PDF プレゼンテーション

スライドデッキを HTML で作成し、ヘッドレス Chromium を介してピクセルパーフェクトな 16:9 の PDF にエクスポートします。

出力形式: PDF — Microsoft PowerPoint (.pptx) ではありません。PDF はすべてのデバイスで正確なレイアウト、フォント、色を保持します。

なぜ HTML → PDF なのか

• CSS レイアウト（Grid/Flexbox）は、どの PPT エディターよりもはるかに柔軟です
• 完全な Web タイポグラフィ、グラデーション、SVG、アニメーション（印刷時は適切に縮退します）
• Git フレンドリーで、再現可能、スクリプト化可能
• コマンド 1 つで → 正確な 16:9 ページ寸法の PDF を生成

ワークフロー

0. シナリオの特定（新規）

他のどのステップよりも前に、プレゼンテーションのシナリオを特定します。完全なテンプレートについては references/content-scaffolding.md をお読みください。

シナリオのキーワード	使用するテンプレート
pitch / investor / fundraising	pitch-deck
conference / keynote / summit / talk	conference-keynote
product launch / launch event	product-launch
report / research / analysis	research-report
（上記のいずれにも該当しない）	どのシナリオが最適かユーザーに尋ねる

各テンプレートは次を定義します: スライド枚数、ページタイトル、ページごとに必要なコンテンツ。

0.5 バイリンガルレイアウト（必要な場合）

聴衆がバイリンガル（例: 香港、シンガポール、グローバルな中国語カンファレンス）である場合、またはユーザーが中国語 + 英語に言及した場合:

• references/content-scaffolding.md の bilingual レイアウトモードを使用します
• 見出し: 英語（大）+ 中国語サブタイトル（小さめ、--text-muted）
• 本文の箇条書き: 中国語を先に、英語は括弧書きで任意
• 香港/台湾/シンガポールの聴衆向けに、英語のみのデッキは避けてください

1. デッキの計画

シナリオテンプレートに基づいて、スライド枚数とスライドごとのコンテンツを定義します。各スライド = 1 つの <section class="slide">。

1.5 アートディレクション（構築の前にこれを実行してください）

ユーザーが特定のビジュアルスタイルを指定していない場合は、必ずこのステップを実行してください。 スタイル分類の全体像、CSS トークンテンプレート、スタイルブリーフの出力形式については、 skills/slide-creator/references/art-direction.md を参照してください。

ステップ A — 4 つの質問をする：

1. 対象 audience と場面：これは誰に向けたもので、どのような文脈ですか（投資家 / 社内チーム / 公開基調講演）？
2. ムードのキーワード：audience にどう感じてほしいですか（権威的 / エネルギッシュ / 親しみやすい / ギークでモダン）？
3. ブランドの制約：必須のブランドカラー、ロゴ、フォントはありますか？
4. 参考資料：align すべきテンプレートの参考はありますか（画像、Web リンク、既存デッキのスクリーンショット）？

ステップ B — ビジュアルスタイル選択ページを生成する： スタイルの選択肢をテキストの説明として提示しないでください — ユーザーは言葉だけではスタイルを評価できません。

参考資料の取り扱いルール：

• ユーザーが 画像ファイル / スクリーンショット を提供した場合：パレット（primary/surface/accent）を抽出し、ビジュアルからレイアウト密度、角丸の半径、タイポグラフィのトーンを確認します。
• ユーザーが Web URL を提供した場合：web_fetch を使ってデザインの手がかりを抽出します。重要 — スタイルを誤読しないために、この抽出プロトコルに従ってください：
  1. ブランド名 / ドメイン名は無視する — 製品の業界や名前からビジュアルスタイルを推測しないでください（例：「Neo」はネオンを意味しませんし、「Opera」はヨーロッパの高級感を意味しません）。
  2. コピーのトーンと語彙を読む — ページで使われている言葉がムードを明らかにします（例：「surgical precision」「quiet confidence」→ 抑制的、「unleash」「radically」→ 大胆 / 攻撃的）。
  3. 明示的な色の語彙を抽出する — 取得したテキスト内の CSS キーワード、または本文 / alt タグで言及されている色名を探します。暖色か寒色か、明るいか暗いか、落ち着いているか鮮やかか。
  4. レイアウト密度を推測する — セクションごとの語数を数えます。まばら = エディトリアル / ラグジュアリー、密 = テクニカル / ファンクショナル。
  5. 装飾モチーフを特定する — 言及されているか暗示されているもの（例：幾何学、グラデーション、写真、イラスト、ラインアート、ブルータリズム）。
  6. art-direction.md と照合する — 最も近いテンプレートを見つけ、差分を説明します（例：「スタイル G だがもっと暖かく、青を焦げたオレンジに置き換え、繊細なグリッド線を追加」）。
  7. 不確かな場合：保守的にしてください — スタイルの一致を過大に約束せず、3 つの選択肢を提示します。オプション A はあなたの最善の解釈、B はより安全でクリーン、C はより実験的です。実際のビジュアルの証拠と矛盾するスタイルを断定的に主張しないでください。
• ユーザーが両方を提供した場合：画像の手がかりを優先し、URL の手がかりを次に優先します。
• 参考資料が提供されない場合：組み込みのスタイル分類のデフォルトを使用します。

次に：

1. output/style-picker/index.html を作成します — 3 つの横並びのミニスライドプレビュー（16:9 のアスペクト比）を備えた単一ページで、それぞれが実際の CSS（色、フォント、レイアウト、装飾要素）で完全にレンダリングされます。各プレビューは、カラーチップではなく実際のスライドのように見える必要があります。
2. これら 3 つのオプションを次のように構築します：(A) 参考資料に忠実、(B) より安全なコーポレート系のバリエーション、(C) より大胆なクリエイティブ系のバリエーション。
3. preview(action='serve') でディレクトリを配信し、プレビューの URL を表示します。
4. 各カードの下にラベルを付けます：スタイル名 + 一行の説明。
5. ユーザーがクリックして選択を示せるように onclick ハイライトを追加します。

ユーザーは「A を選択」/「B がいい」/「A+C をブレンド」などと言って選びます。

ステップ C — style-brief.md を生成する： ユーザーがスタイルを選択したら、プロジェクトディレクトリに style-brief.md（テンプレートは art-direction.md 内）を書き込みます。 以降のすべての HTML/CSS 作業はこのブリーフに従う必要があります。

ステップ D — ブランドアセット（ロゴ / 色）を尋ねる： ユーザーがスタイルを選んだ後、次のように尋ねます：

「含めたいロゴやブランドカラーはありますか？画像ファイルをアップロードしていただければ、スライド全体にロゴを埋め込みます。」

ロゴがアップロードされた場合：HTML に base64 として埋め込み（bash で base64.b64encode を使用）、左上または右上の角に高さ 60px 以下で配置します。 ブランドカラーが指定された場合：CSS トークンブロックの --accent をユーザーの色で上書きします。

2. テーマを選択する

アートディレクションが完了している場合、style-brief.md がテーマ仕様です — この表はスキップしてください。 そうでない場合は、簡易的なフォールバックとして以下を使用してください:

スタイル	背景	アクセント	フォント	ムード
ダークテック	#000 / #0a0a0a	明るいオレンジ/ブルー/グリーン	Inter, Space Grotesk	大胆、モダン
ライトクリーン	#fff / #f8f8f8	ネイビー、ティール、コーラル	Inter, DM Sans	プロフェッショナル、ミニマル
グラデーション	ダークグラデーション	鮮やかなアクセント	任意のサンセリフ	クリエイティブ、エネルギッシュ
コーポレート	#1a1a2e / 白	ブランドカラー	システムフォント	信頼感、フォーマル
プレイフル	ソフトパステル	温かみのあるポップカラー	Nunito, Poppins	フレンドリー、カジュアル

3. HTML + CSS を構築する

index.html + styles.css を含むプロジェクトディレクトリを作成します。

assets/base.css から始めてください — 色やフォントを含まない構造的なスケルトン(スライドの寸法、印刷ルール、レイアウトヘルパー)です。その上にテーマを重ねます:

/* Example theme layer — customize freely */
body {
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: #000;
}
.slide { background: #0a0a0a; }
.slide-tag { background: rgba(0,120,255,0.15); color: #0078ff; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

必須の構造ルール(base.css 内 — 削除しないでください):

.slide { width: 1280px; height: 720px; page-break-after: always; overflow: hidden; }
@page { size: 1280px 720px; margin: 0; }

重要なルール:

• px 単位を使用してください — スライドの寸法に vh/vw/rem/% は決して使用しないでください
• Google Fonts: <head> 内で <link> を使用してください。エクスポートスクリプトはネットワークアイドルを待機します
• Viewport meta: <meta name="viewport" content="width=1280">
• コンテンツは 720px の高さに収める必要があります — はみ出した部分はクリップされます

4. プレビュー(オプション)

エクスポート前にブラウザでプレビューするには preview(action='serve') を使用します。

5. PDF にエクスポートする

python3 skills/slide-creator/scripts/export_pdf.py --dir <project-dir> --output output/<name>.pdf

オプション:

• --dir — index.html を含むディレクトリ(必須)
• --output / -o — 出力 PDF のパス(デフォルト: <dir>/deck.pdf)
• --width — スライドの幅(px)(デフォルト: 1280)
• --height — スライドの高さ(px)(デフォルト: 720)

6. 検証する

スクリプトはスライド数を出力し、出力パスを確認します。追加のチェック:

import fitz
doc = fitz.open("output/deck.pdf")
print(f"Pages: {doc.page_count}")
for p in doc:
    r = p.rect
    print(f"  {r.width*96/72:.0f}x{r.height*96/72:.0f}px")

スタイルガイドライン

• デフォルトのブランドはありません — すべてのデッキに、その内容に合わせたテーマが適用されます
• アートディレクションファーストのワークフローを優先してください(質問 → 参考資料 → ユーザーの選択 → style-brief.md)
• ユーザーに好みを尋ねてください: ダーク/ライト、アクセントカラー、フォント、ムード
• 各スライドには明確な視覚的階層を持たせてください: タグ → タイトル → コンテンツ
• テキストは簡潔にしてください — スライドは視覚的なものであり、ドキュメントではありません
• 奥行きを出すために、テーマカラーの放射状グラデーションとともに .bg-glow を使用してください
• デフォルトではスタイル探索に web_search を使用しないでください。ユーザーが提供する参考画像/リンクと art-direction.md 内のテンプレートを優先してください。
• ユーザーが参考リンクを提供した場合は、web_fetch を使用してデザインの手がかり(色調 / ボイス / レイアウト)を抽出しますが、最終的な CSS はローカルテンプレートとトークン変数を使用して実装してください。
• ユーザーが「アートディレクションのアドバイス / スタイルのアドバイス」を求めた場合は、常に視覚的なスタイルピッカープレビューページ(3 つのオプション)を生成してください — テキストのみの説明に頼らないでください。
• 選択したスタイルブリーフに厳密に従って HTML を構築し、その後 PDF をエクスポートしてください(ユーザーが明示的にオプトアウトしない限り、ブリーフをスキップしないでください)
• スタイルが選択されたら、構築前に必ずロゴ / ブランドアセットについて確認してください
• HK/TW/SG/バイリンガルのオーディエンス向けには、ユーザーが英語のみと指定しない限り、デフォルトでバイリンガルレイアウトにしてください

スタイルの微調整(スタイル選択後)

ユーザーが「プライマリカラーを赤に変更して」/「フォントを切り替えて」/「角丸を大きくして」と言った場合、アートディレクションをやり直さないでください。 代わりに、styles.css 内の --accent / --font-head / --radius CSS 変数を直接修正してください。 完全に異なるスタイルをユーザーが希望する場合にのみ、アートディレクションをやり直してください。

注意点

• Chromium: コンテナ起動時に workspace/setup.sh 経由でプリインストールされます（約 641 MB が ~/.cache/ms-playwright/ にキャッシュされます）。エクスポートのたびに playwright install を実行しないでください — 同じブラウザを再ダウンロードしてしまいます。export_pdf.py が Executable doesn't exist で失敗した場合にのみ実行し、その場合にはコマンドを workspace/setup.sh にも追記して永続化してください。

• フォント: Google Fonts には HTTP が必要です — エクスポートスクリプトがローカルサーバーを自動的に起動します

• 絵文字のレンダリング: ヘッドレス Chromium には絵文字フォントがない場合があります — 代わりに SVG アイコンを使用してください

• 大きな画像: base64 として埋め込むか、相対パスを使用してください（ローカルサーバーがプロジェクトディレクトリを配信します）

• スライドのはみ出し: 高さ 720px を超えるコンテンツはクリップされます — 範囲内で設計してください

• ⚠️ PDF のテキストが選択できない（2026 年検証済み）: テキストを含む任意の祖先要素に filter / backdrop-filter CSS を適用すると、PDF エクスポート時に Chromium がそのレイヤーをビットマップにラスタライズします — 子テキストはすべてピクセルになり、選択できなくなります。修正: テキストを保持するコンテナには絶対に filter/backdrop-filter を適用しないでください。テキストの子要素を持たない空の装飾用 <div> 要素（例: .blur-layer、.glow-overlay）にのみ適用してください。テキストの親要素に対する mix-blend-mode にも同じルールが適用されます。エクスポート前チェックリスト: HTML 内で非装飾要素に適用された filter/backdrop-filter を検索し、それらを削除してください。

• ⚠️ フッター / 出典表記 — 標準コンポーネント + 厳格な下部セーフエリア契約を使用（2026 年検証済み）: 場当たり的なフッターのマークアップは、スライド間で位置が不整合になる原因となります。すべての出典引用、ページ番号、免責事項には、必ずこの .slide-footer パターンを使用してください。

  厳格なレイアウト契約（省略しないでください）:

  • カバー以外のすべてのスライドには、フッター用のスペースを確保する専用のコンテンツラッパー（例: .slide-body）が必要です。
  • 厳格なルール: .slide-body は下部セーフエリア >= 96px（デフォルト 96px）でフッター用のスペースを確保する必要があります。例: .slide-body { padding: 52px 72px 96px; }。
  • フッターは通常フローから外す必要があります: position: absolute; bottom: 24px、.slide 直下で .slide-body の兄弟要素として配置します。
  • 出典/免責事項のテキストを .slide-body の内部に配置しないでください。
  • カバーページは .slide-footer を持たない場合に限り例外とできます。

  これにより物理的な分離が強制されます: 本文コンテンツ領域は確保されたフッター用レーンより上で終わり、フッターはキャンバス下部のレーンにとどまるため、コンテンツの密度に関係なく両者が重なることはありません。

  <footer class="slide-footer">
    <span class="footer-source">Source: CoinGecko · Coinglass · DefiLlama</span>
    <span class="footer-page">03 / 12</span>
  </footer>
  

  .slide-footer {
    position: absolute;
    bottom: 24px; left: 48px; right: 48px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: rgba(255,255,255,0.35);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
    z-index: 2;
  }
  .slide > *:not(.bg-glow):not(.slide-footer) {
    position: relative;
    z-index: 1;
  }
  .slide-body { padding-bottom: 96px; }
  

  インフロー / position: relative のフッターは絶対に使用しないでください — スライドのコンテンツの高さが変わると位置がずれます。また、.slide-footer を汎用の .slide > * スタッキングルールから除外してください。そうしないと、CSS の順序によってフッターのレイヤリングが誤って上書きされる可能性があります。 検証チェックリスト（エクスポート前に必須）:

  1. カバー以外のすべてのスライドが .slide-body と .slide-footer を兄弟要素として持つこと。
  2. .slide-body の下部パディングが >=96px であること。
  3. 出典/免責事項のテキストが .slide-footer の内部にのみ現れ、本文コンテナ内には決して現れないこと。

• ⚠️ z-index / 装飾オーバーレイのバグ（2026 年検証済み）: .bg-glow やその他の装飾用疑似レイヤーは z-index: 0 で配置し、実際のスライドコンテンツにはすべて明示的に z-index: 1 を指定する必要があります。.bg-glow が（::before/::after 疑似要素ではなく）.slide > * の兄弟要素である場合は、コンテンツが視覚的に埋もれないようにするため、このルールを追加してください:

  .slide > *:not(.bg-glow) { position: relative; z-index: 1; }
  .bg-glow { position: absolute; z-index: 0; pointer-events: none; }
  

  失敗モード: ブラウザのプレビューでは問題なく見えても、PDF エクスポートではコンテンツが下部に押し出されて表示されるか、見えなくなります（ブラウザのコンポジットは、Chromium の印刷パスよりも z 順序を寛容に処理します）。