html-ppt

html-ppt — HTML PPT Studio

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

インストール

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

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

対象マシンがネットワークに接続できない場合は、CLI にローカルコピーを指定するか（npx skills add ./html-ppt-skill）、このフォルダーをエージェントのスキルディレクトリ（Claude Code の場合は ~/.claude/skills/html-ppt/）にコピーしてください。デッキはオフラインでレンダリングされます。Web フォントのみ、システムフォントにフォールバックします。README.md を参照してください。

このスキルでできること

• 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 — プレゼンターモード専用）
• 36 種類のレイアウト（templates/single-page/*.html）。リアルなデモデータ付きで、実画像を使ったレイアウトも 5 種類（single / full-bleed / image+text / gallery / before-after）含みます
• data-anim で使える 27 種類の CSS アニメーション（assets/animations/animations.css）
• data-fx で使える 20 種類の Canvas 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. 1 ページあたり 150～300 語 — 2～3 分/ページのペース
3. 書き言葉ではなく、話し言葉を使う — 「因此」→「所以」、「该方案」→「这个方案」

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

• 🔵 CURRENT — 現在のスライドのピクセルパーフェクトな iframe プレビュー
• 🟣 NEXT — 次のスライドのピクセルパーフェクトな iframe プレビュー
• 🟠 SPEAKER SCRIPT — 大きなフォントの逐字稿（スクロール可能）
• 🟢 TIMER — 経過時間 + スライドカウンター + 前へ/次へ/リセットボタン

各カードはヘッダーでドラッグでき、右下隅のハンドルでリサイズできます。カードの位置とサイズはデッキごとに localStorage に保存されます。「Reset layout」ボタンでデフォルトの配置に戻せます。

プレビューがピクセルパーフェクトな理由：各プレビューは <iframe> で、実際のデッキ HTML を ?preview=N クエリパラメータ付きで読み込みます。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. 出発点。 15 のフルデッキテンプレートのうちの 1 つ、それともゼロから？ 最も近い templates/full-decks/<name>/ を指し、合うかどうかを尋ねてください。ユーザーのコンテンツが明らかなことを示唆している場合（例：「我要做产品发布会」→ product-launch）、盲目的に尋ねるのではなく、自信を持って提案してください。

良い最初のメッセージは次のようになります：

我可以给你做这份 PPT！先确认三件事：

1. 大致内容 / 页数 / 观众是谁？
2. 风格偏好？我建议从这 3 个主题里选一个：tokyo-night（技术分享默认好看）、xiaohongshu-white（小红书风）、corporate-clean（正式汇报）。
3. 要不要用我现成的 tech-sharing 全 deck 模板打底？

それらが明確になって初めて、デッキを足場組みし、書き始めます。

クイックスタート

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

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

2. テーマを選びます。 デッキを開いて T を押すと切り替えられます。または、テーマを直接指定します （ここでの ../assets/ はプレースホルダーです。ファイル内でほかに使われているプレフィックスに置き換えてください。new-deck.sh により適切な階層が設定されています）。

   <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 を使います。 キャンバスエフェクトには <div data-fx="knowledge-graph">...</div> を使い、 <script src="../assets/animations/fx-runtime.js"></script> を含めます。 一覧は references/animations.md を参照してください。
5. デッキ全体のテンプレートを使います。 手作業でコピーせず、テンプレートからひな形を作成してください。 テンプレート内の ../../../assets/ はテンプレート自身の場所を基準とした相対パスのため、 手作業でコピーするとパスの階層が合わなくなります。

   ./scripts/new-deck.sh my-talk -t pitch-deck
   

   各フォルダーはスコープが限定された 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。 --accent の塗りつぶしの上に置くテキストは、特に間違いやすい箇所です。 アクセントカラーは #ffffff から #000000 まであるため、すべての色で読める固定の文字色はありません。 color: var(--accent-ink) を指定してください。
• 新しいレイアウトファイルを作らないでください。 既存のレイアウトを組み合わせることを優先してください。 36 種類のどれも合わない場合に限り、新しい templates/single-page/*.html を追加してください。
• スライドに画像を配置しますか？ 5 種類ある image-* レイアウトのいずれかから始め、 .img-frame を使ってください。詳しくは以下の画像を参照してください。 スライドに <img> をそのまま置くことは避けてください。 フレームのない画像はスライドの高さを考慮しないため、ほかのコンテンツがページから押し出されます。
• クローム用のスロットを守ってください。 .deck-header、.deck-footer、.slide-number と プログレスバーは、assets/base.css と runtime.js によって提供されます。
• ロゴは一度だけ宣言的に追加してください。 <body> に data-logo を指定し、 各スライドに <img> を貼り付けないでください。詳しくは以下のカスタムロゴを参照してください。
• キーボード操作を優先してください。 デッキが ← → / T / A / F / S / O / ハッシュによるディープリンクに対応するよう、 <script src="../assets/runtime.js"></script> などのランタイムを必ず含めてください。
• アセットパスの ../ の階層を手作業で変更しないでください。 assets/ への参照はすべて、 それを含むファイルからの相対パスです。templates/deck.html では ../assets/、 templates/single-page/*.html では ../../assets/、templates/full-decks/*/index.html では ../../../assets/ を使います。ファイルを別の階層にコピーすると、これらのパスは気付かないうちにすべて壊れます。 ./scripts/new-deck.sh <name> [parent] [-t <template>] からひな形を作成してください。 配置先に合ったプレフィックスが計算され、すべての参照先が解決できることも確認されます。
• 論理ページごとに .slide を1つ配置してください。 runtime.js は .slide.is-active を表示し、それ以外を非表示にします。
• ノートを用意してください。 各スライド内の <div class="notes">…</div> に発表者ノートを記述します。 S を押すとオーバーレイが開きます。
• 発表者だけに見せるテキストをスライド自体に絶対に置かないでください。 「このページでは……を示します」や 「Speaker: ここに補足……」のような説明文、または発表者向けの小さな補足文は、 表示される <p>／<span> 要素ではなく、必ず <div class="notes"> の中に入れてください。 .notes クラスはデフォルトで display:none になっており、S キーを押したときのオーバーレイにのみ表示されます。 スライドには、タイトル、箇条書き、データ、グラフ、画像など、聴衆に見せる内容だけを含めてください。

画像

templates/single-page/ にある5つのレイアウトでは、実際の画像を使用します。ページに載せる画像の数に応じて選んでください。

用意する画像…	使用するもの	理由
スクリーンショット／図／グラフが1つ	image-single.html	.img-frame.contain — 余白を付けて表示し、決して切り抜きません
ページの主役となる写真が1枚	image-full-bleed.html	スライド全体に表示し、グラデーションのスクリーンでタイトルを読みやすく保ちます
画像と主張が1つずつ	image-text-split.html	50/50。画像を右側に移動するには .split に flip を追加します
画像が3～6枚	image-gallery.html	均一なグリッド。フレームが画像ごとの縦横比の違いを補正します
変更前と変更後	image-compare.html	両側が同じサイズで、それぞれの下に結論を表示します

image-grid.html と image-hero.html はこの一覧には含まれません。これらは <img> を含まない、グラデーションのプレースホルダーを使ったレイアウトです。画像を用意せずに、ベントーウォールのような構成にしたい場合に使用します。

5つすべてが、assets/base.css の1つのプリミティブを基盤にしています。

<figure class="img-frame"><img src="shot.png" alt=""></figure>
<figure class="img-frame contain" style="--img-ratio:4/3"><img src="diagram.svg" alt=""></figure>

• .img-frame がアスペクト比と切り抜きを管理し、<img> は object-fit: cover でフレームいっぱいに表示されます。そのため、どのような形の写真に差し替えてもレイアウトが崩れません。
• .img-frame.contain は切り抜きの代わりに余白を付けて表示します。スクリーンショット、図、ロゴには必ず使用してください。
• --img-ratio（デフォルトは 16/10）と --img-pos（object-position）で調整できます。
• .img-scrim ／ .img-cap ／ .img-tag は、それぞれスクリーン、キャプション、隅のピル型ラベルです。
• デッキから参照する画像は、デッキ内の index.html を基準に解決されます。examples/my-talk/shot.png のように、デッキのフォルダー内に配置してください。
• assets/demo-images/ には、これらのレイアウトで使用されるプレースホルダー画像があります。手書きの SVG で、1つあたり約1 KBです。ネットワーク接続は不要です。

カスタムロゴ

会社や製品のロゴをデッキに付けるには、<body> に一度だけ指定します。

<body data-logo="logo.svg"
      data-logo-position="bottom-right"
      data-logo-size="40px">

属性	デフォルト	備考
data-logo	—	デッキ内の HTML ファイルを基準とする画像 URL。必須です。
data-logo-position	top-right	top-left ／ top-right ／ bottom-left ／ bottom-right
data-logo-size	44px	任意の CSS の長さ。ロゴの高さを設定し、幅はアスペクト比に従います
data-logo-opacity	.9	完全な不透明度にするには 1 を指定します
data-logo-alt	""	代替テキスト

• <section class="slide" data-no-logo> を使うと、特定のスライドでは表示を省略できます。通常は表紙や、独自のブランディングを含む全面画像スライドで使用します。
• .deck-logo の --logo-inset-x ／ --logo-inset-y で余白を微調整できます。
• クロームのスロット内や、4つのプリセットでは対応できない場所に配置したい場合は、手動で配置します。

  <div class="deck">
    <img class="deck-logo" data-pos="bottom-left" src="logo.svg" alt="">
  

  この方法では JS は不要です。base.css がどちらの方法も同じようにスタイル設定します。
• ロゴはプレゼンタープレビューと、印刷／PDF エクスポートのすべてのページに表示されます（印刷時に非表示になるヘッダー／フッター／進捗状況のクロームとは異なります）。data-no-logo を指定したスライドも同様に省略されます。ページごとの印刷は runtime.js と @media print で描画されます。runtime を省略したデッキでも画面上にはロゴが表示されますが、PDF では1ページにしか表示されません。

執筆ガイド

ファイル構成、命名規則、アウトラインからデッキへの変換方法、対象者に応じたレイアウトとテーマの選び方、中国語と英語を併記したデッキの作成方法、エクスポート方法については、references/authoring-guide.md の手順ガイドを参照してください。

カタログ（必要に応じて読み込む）

• references/themes.md — 36種類のテーマと使用場面。
• references/layouts.md — 36種類のレイアウトタイプ。
• references/animations.md — CSS アニメーション27種類とキャンバス FX アニメーション20種類。
• 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)
│   ├── demo-images/*.svg    (tiny offline placeholders for the image-* layouts)
│   ├── 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 36 layouts)
│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
│   ├── full-decks-index.html      (gallery of all 15 full-deck templates)
│   ├── full-decks/<name>/         (15 scoped multi-slide deck templates)
│   └── single-page/*.html         (36 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
swipe left / right (touch)              navigate — phones and tablets, no keyboard needed
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]>。