html-ppt

html-ppt — HTML PPT Studio

静的ファイルとして、プロ品質のHTMLプレゼンテーションを作成します。テーマファイル1つで1つの見た目を定義します。レイアウトファイル1つで1種類のページを定義します。アニメーションクラス1つで1つの登場エフェクトを定義します。すべてのページで、assets/base.css にあるトークンベースのデザインシステムを共有します。

インストール

npx skills add https://github.com/lewislulu/html-ppt-skill

コマンドは1つで、ビルドは不要です。CDNのWebフォントのみを使用する、純粋な静的HTML/CSS/JSです。

このスキルでできること

• 36種類のテーマ（assets/themes/*.css） — minimal-white、editorial-serif、soft-pastel、sharp-mono、arctic-cool、sunset-warm、catppuccin-latte/mocha、dracula、tokyo-night、nord、solarized-light、gruvbox-dark、rose-pine、neo-brutalism、glassmorphism、bauhaus、swiss-grid、terminal-green、xiaohongshu-white、rainbow-gradient、aurora、blueprint、memphis-pop、cyberpunk-neon、y2k-chrome、retro-tv、japanese-minimal、vaporwave、midcentury、corporate-clean、academic-paper、news-broadcast、pitch-deck-vc、magazine-bold、engineering-whiteprint
• 15種類のフルデッキテンプレート（templates/full-decks/<name>/） — スコープ付きの.tpl-<name> CSSを含む、複数スライド構成の完全なデッキです。実際のデッキから抽出した8種類（xhs-white-editorial、graphify-dark-graph、knowledge-arch-blueprint、hermes-cyber-terminal、obsidian-claude-gradient、testing-safety-alert、xhs-pastel-card、dir-key-nav-minimal）と、7種類のシナリオ用ひな形（pitch-deck、product-launch、tech-sharing、weekly-report、xhs-post 3:4、course-module、presenter-mode-reveal — 発表者モード専用）
• 31種類のレイアウト（templates/single-page/*.html）。リアルなデモデータ付きです
• data-animで使える27種類のCSSアニメーション（assets/animations/animations.css）
• data-fxで使える20種類のキャンバスFXアニメーション（assets/animations/fx/*.js） — particle-burst、confetti-cannon、firework、starfield、matrix-rain、knowledge-graph（力指向）、neural-net（パルス）、constellation、orbit-ring、galaxy-swirl、word-cascade、letter-explode、chain-react、magnetic-field、data-stream、gradient-blob、sparkle-trail、shockwave、typewriter-multi、counter-explosion
• キーボードランタイム（assets/runtime.js） — 矢印キー、T（テーマ）、A（アニメーション）、F/O、S（発表者モード：CURRENT／NEXT／SCRIPT／TIMERカードを表示するマグネティックカードポップアップ）、N（ノートドロワー）、R（発表者モードでタイマーをリセット）
• FXランタイム（assets/animations/fx-runtime.js） — スライド表示時に[data-fx]を自動初期化し、スライド終了時にクリーンアップします
• テーマ／レイアウト／アニメーション／フルデッキのギャラリーを紹介するショーケースデッキ
• PNGエクスポート用のヘッドレスChromeレンダリングスクリプト

使用する場面

ユーザーがスライド形式の出力を求めている場合や、テキストやノートを見やすいデッキにしたい場合に使用します。ゼロから作成するよりも、こちらを優先してください。

🎤 プレゼンターモード（演者モード＋逐語スクリプト）

ユーザーが 演講／分享／讲稿／逐字稿／speaker notes／presenter view／演讲者视图／提词器 のいずれかに言及した場合、または「我要去给团队讲 xxx」「要做一场技术分享」「怕讲不流畅」「想要一份带逐字稿的 PPT」のようなことを言った場合は、presenter-mode-reveal のフルデッキテンプレートを使用し、各スライドの <aside class="notes"> に150～300語の逐語スクリプトを記述してください。

3つのスピーカースクリプト作成ルールを含む、執筆ガイドの全文はreferences/presenter-mode.mdを参照してください。

1. 講演原稿ではなく、合図にする — 核となる語句を太字にし、つなぎの文は独立した段落にする
2. 各ページ150～300文字 — 1ページあたり2～3分のペース
3. 話し言葉を使い、書き言葉は避ける — 「因此」→「所以」、「该方案」→「这个方案」

すべてのフルデッキテンプレートは、Sキーによるプレゼンターモードに対応しています（runtime.js に組み込まれています）。Sキーを押すと、4つのマグネット式カードを備えた新しいポップアップウィンドウが開きます。

• 🔵 CURRENT — 現在のスライドをピクセル単位で忠実に再現したiframeプレビュー
• 🟣 NEXT — 次のスライドをピクセル単位で忠実に再現したiframeプレビュー
• 🟠 SPEAKER SCRIPT — 大きなフォントで表示する逐語スクリプト（スクロール可能）
• 🟢 TIMER — 経過時間＋スライドカウンター＋前へ／次へ／リセットボタン

各カードはヘッダーをドラッグして移動でき、右下のハンドルをドラッグしてサイズ変更できます。カードの位置とサイズは、デッキごとにlocalStorageへ保存されます。「Reset layout」ボタンを押すと、デフォルトの配置に戻ります。

プレビューがピクセル単位で忠実に再現される理由：各プレビューは、?preview=Nクエリパラメーターを指定して実際のデッキHTMLを読み込む<iframe>です。runtime.jsがこれを検出し、クロームなしでスライドNだけを表示します。そのため、プレビューはオーディエンス向け表示と同じCSS、テーマ、フォント、ビューポートを使用し、色とレイアウトが確実に一致します。

スムーズなナビゲーション：スライドが切り替わると、プレゼンターウィンドウは各iframeにpostMessage({type:'preview-goto', idx:N})を送信します。iframeはスライド間で.is-activeを切り替えるだけなので、再読み込みもちらつきもありません。2つのウィンドウはBroadcastChannelでも同期されます。

すべてのスライドに適切な逐語スクリプトの例があり、この機能を前提に一から設計されているのはpresenter-mode-revealだけです。

プレゼンターウィンドウのキーボード操作：← →で移動（オーディエンス側と同期） · Rでタイマーをリセット · Escでポップアップを閉じる。 オーディエンスウィンドウのキーボード操作：Sでプレゼンターを開く · Tでテーマを切り替える · ← →で移動（プレゼンター側と同期） · Fで全画面表示 · Oで概要を表示。

作成を始める前に、必ず確認または提案する

**3つのことを把握するまで、スライドの作成を始めないでください。**ユーザーに直接尋ねるか、すでに十分な内容が提示されている場合は、適切なデフォルト案を提案して確認してください。

1. **内容と対象者。**デッキのテーマ、スライドの枚数、対象者（エンジニア／経営幹部／小红书の読者／学生／VC）は誰ですか？
2. **スタイル／テーマ。**36種類のテーマのうち、どれが合いますか？決まっていない場合は、雰囲気に合わせて候補を2～3個提案してください。
   • ビジネス／投資家向けピッチ → pitch-deck-vc、corporate-clean、swiss-grid
   • 技術共有／エンジニアリング → tokyo-night、dracula、catppuccin-mocha、terminal-green、blueprint
   • 小红书の画像投稿 → xiaohongshu-white、soft-pastel、rainbow-gradient、magazine-bold
   • 学術／レポート → academic-paper、editorial-serif、minimal-white
   • エッジの効いた／サイバー／ローンチ向け → cyberpunk-neon、vaporwave、y2k-chrome、neo-brutalism
3. **出発点。**14種類のフルデッキテンプレートのいずれかを使うか、それとも一から作成しますか？最も近いtemplates/full-decks/<name>/を案内し、合っているか確認してください。ユーザーの内容から明らかな候補（例：「我要做产品发布会」→product-launch）がある場合は、やみくもに尋ねず、自信を持って提案してください。

最初のメッセージの例：

このPPTを作成できます！まず3点確認させてください。

1. 内容の概要／ページ数／対象者は誰ですか？
2. 希望するスタイルはありますか？次の3つのテーマがおすすめです：tokyo-night（技術共有で使いやすい定番）、xiaohongshu-white（小红书風）、corporate-clean（正式な報告向け）。
3. 既存のtech-sharingフルデッキテンプレートをベースにしますか？

これらが明確になってから、デッキのひな形を作成し、執筆を始めてください。

クイックスタート

1. 新しいデッキを作成します。 リポジトリのルートから実行します。

   ./scripts/new-deck.sh my-talk
   open examples/my-talk/index.html
   

2. テーマを選びます。 デッキを開き、Tを押して切り替えます。または、直接指定します。

   <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
   

   カタログはreferences/themes.mdを参照してください。
3. レイアウトを選びます。 templates/single-page/内のファイルから <section class="slide">...</section>ブロックをコピーして、デッキに貼り付けます。デモデータを置き換えてください。 カタログはreferences/layouts.mdを参照してください。
4. アニメーションを追加します。 任意の要素にdata-anim="fade-up"（またはclass="anim-fade-up"）を設定します。 <ul>やグリッドでは、順番に表示するためにanim-stagger-listを使用します。 キャンバスFXには、<div data-fx="knowledge-graph">...</div>を使い、 <script src="../assets/animations/fx-runtime.js"></script>を含めます。 カタログはreferences/animations.mdを参照してください。
5. デッキ全体のテンプレートを使います。 templates/full-decks/<name>/を examples/my-talk/にコピーして、出発点として使用します。各フォルダーはスコープ付きCSSを含む自己完結型です。 カタログはreferences/full-decks.md、ギャラリーはtemplates/full-decks-index.htmlを参照してください。
6. PNGにレンダリングします。

   ./scripts/render.sh templates/theme-showcase.html       # one shot
   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides
   

作成ルール（重要）

• 必ずテンプレートから始めてください。 スライドをゼロから作成しないでください。まずtemplates/single-page/から最も近いレイアウトをコピーして、内容を置き換えます。
• 色は直接指定せず、トークンを使ってください。 すべての色、角丸、シャドウは、assets/base.cssで定義され、テーマによって上書きされるCSS変数を使用してください。 良い例：color: var(--text-1)。悪い例：color: #111。
• 新しいレイアウトファイルを作らないでください。 既存のものを組み合わせて使ってください。30種類のどれにも当てはまらない場合に限り、新しいtemplates/single-page/*.htmlを追加してください。
• クロームのスロットを適切に使用してください。 .deck-header、.deck-footer、.slide-number、プログレスバーはassets/base.cssとruntime.jsによって提供されます。
• キーボード操作を優先してください。 デッキが← → / T / A / F / S / O / ハッシュ値によるディープリンクに対応できるよう、必ず<script src="../assets/runtime.js"></script>を含めてください。
• 論理ページごとに.slideを1つ配置してください。 runtime.jsによって.slide.is-activeが表示され、それ以外は非表示になります。
• ノートを用意してください。 各スライド内の<div class="notes">…</div>で発表者ノートを囲みます。Sキーを押すとオーバーレイが開きます。
• スライド自体に、発表者だけが見るテキストを絶対に入れないでください。 「このページでは……を紹介します」や「発表者：ここで補足できます……」のような説明文、また発表者向けの短い解説は、必ず<div class="notes">内に入れてください。スライド上に表示される<p>や<span>要素に入れてはいけません。.notesクラスはデフォルトでdisplay:noneに設定されており、Sキーのオーバーレイでのみ表示されます。スライドには、タイトル、箇条書き、データ、チャート、画像など、聴衆に見せる内容のみを含めてください。

執筆ガイド

references/authoring-guide.mdでは、ファイル構造、命名規則、アウトラインからデッキへの変換方法、聴衆に応じたレイアウトとテーマの選び方、中国語と英語のデッキの作成方法、エクスポート方法を、手順に沿って説明しています。

カタログ（必要に応じて参照）

• references/themes.md — 36種類すべてのテーマと使用場面。
• references/layouts.md — 31種類すべてのレイアウト。
• references/animations.md — 27種類のCSSアニメーションと20種類のキャンバスFXアニメーション。
• references/full-decks.md — 15種類すべてのデッキ全体用テンプレート。
• references/presenter-mode.md — 発表者モードと台本作成ガイド（技術発表・講演では必読）。
• references/authoring-guide.md — ワークフロー全体。

ファイル構造

html-ppt/
├── SKILL.md                 (this file)
├── references/              (detailed catalogs, load as needed)
├── assets/
│   ├── base.css             (tokens + primitives — do not edit per deck)
│   ├── fonts.css            (webfont imports)
│   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
│   ├── themes/*.css         (36 token overrides, one per theme)
│   └── animations/
│       ├── animations.css   (27 named CSS entry animations)
│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│   ├── deck.html                  (minimal 6-slide starter)
│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
│   ├── layout-showcase.html       (iframe tour of all 31 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
│   └── single-page/*.html         (31 layout files with demo data)
├── scripts/
│   ├── new-deck.sh                (scaffold a deck from deck.html)
│   └── render.sh                  (headless Chrome → PNG)
└── examples/demo-deck/            (complete working deck)

PNGへのレンダリング

scripts/render.shは、ヘッドレスChromeの/Applications/Google Chrome.app/Contents/MacOS/Google Chromeを呼び出します。複数スライドをキャプチャする場合、runtime.jsが#/Nのディープリンクを提供し、render.shが1..Nを順番に処理します。

./scripts/render.sh templates/single-page/kpi-grid.html        # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 slides, custom dir

キーボード操作早見表

←  →  Space  PgUp  PgDn  Home  End    navigate
F                                       fullscreen
S                                       open presenter window (magnetic cards: current/next/script/timer)
N                                       quick notes drawer (bottom overlay)
R                                       reset timer (in presenter window)
?preview=N                              URL param — force preview-only mode (single slide, no chrome)
O                                       slide overview grid
T                                       cycle themes (reads data-themes attr)
A                                       cycle demo animation on current slide
#/N in URL                              deep-link to slide N
Esc                                     close all overlays

ライセンスと作者

MIT。Copyright (c) 2026 lewis <[email protected]>.