html-slides

Name: html-slides
Author: bluedusk

github.com/blueduskドキュメント9352 回インストール26 週間前に更新

リポジトリ

html-slides について

html-slidesは、ブラウザーで動作するHTMLプレゼンテーションを作成・編集するスキルです。講演や授業などのスライド制作を対象に、単一ファイル構成、ビジュアルデザイン、厳密なビューポート適合を重視します。

主な機能

01CSSとJSを含む単一HTMLファイル
02ブラウザー上で動くアニメーション
03VibeとProの作成モード
04PPTとHTMLの変換ワークフロー
05ビューポートと情報量の制約
06編集とアクセシビリティの確認

活用シーン

01テーマやメモからプレゼンを作成
02PPTXスライドをHTMLに変換
03既存のHTMLプレゼンを改善
04高さの異なるビューポートに合わせて調整

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/bluedusk/html-slides --skill html-slides

インストール後、Claude Code で/html-slidesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.gitignore

LICENSE

CLAUDE.md

README.md

CHANGELOG.md

QUICKSTART.md

RELEASE.md

bump.sh

.claude-plugin/

marketplace.json

plugin.json

.github/workflows/

pages.yml

release.yml

assets/

components.css

slides-runtime.js

dark-interactive.css

viewport-base.css

assets/themes/

binary-architect.css

dark-interactive.css

excalidraw.css

editorial-light.css

excalidraw-dark.css

docs/superpowers/plans/

2026-03-25-eval-system.md

docs/superpowers/specs/

2026-03-25-eval-system-design.md

eval/

.gitignore

EVAL.md

eval/content/

vibe-aura.md

pro-mermaid.md

pro-charts.md

pro-core.md

all-components.md

詳細

フロントエンドスライド

ブラウザー上だけで動作する、依存関係ゼロでアニメーション豊富な HTML プレゼンテーションを作成します。

エージェントの互換性

このスキルは Claude Code 向けに最適化されており、対話形式のプロンプトには AskUserQuestion を使用します。AskUserQuestion を利用できない場合（Gemini CLI、GitHub Copilot、OpenAI Codex、その他のエージェント）は、同じ質問を会話内でプレーンテキストとして尋ね、ユーザーが回答するまで次に進まないでください。

基本原則

依存関係ゼロ — CSS/JS をインラインで記述した単一の HTML ファイルを使用します。npm もビルドツールも不要です。
説明するより見せる — 抽象的な選択肢ではなく、視覚的なプレビューを生成します。人は実際に見ることで、何を望んでいるかを見つけられます。
独自性のあるデザイン — ありがちな「AI スロップ」は避けます。すべてのプレゼンテーションを、オーダーメイドのように感じられるものにしてください。
コンテンツ主導のデザイン — コンテンツに合わせて視覚表現を決めます。コンポーネントのカタログを順番に当てはめるのではなく、各スライドが伝える内容に基づいてデザインしてください。
ビューポートへの適合（絶対厳守） — すべてのスライドを必ず 100vh にぴったり収めます。スライド内でのスクロールは一切禁止です。コンテンツがはみ出す場合は、複数のスライドに分けてください。

デザインの美学

汎用的で「平均的」な出力に収束しがちです。フロントエンドデザインでは、これがユーザーの言う「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）
グラフスライド	見出し 1 つ＋グラフ 1 つ（高さ最大 50vh）＋任意のサブタイトル

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

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

ユーザーの希望を確認します。

モード A：新規プレゼンテーション — 最初から作成します。フェーズ 1 に進みます。
モード B：PPT 変換 — .pptx ファイルを変換します。フェーズ 4 に進みます。
モード C：改善 — 既存の HTML プレゼンテーションを改善します。内容を読み、理解したうえで改善します。以下のモード C の変更ルールに従ってください。
モード D：HTML 変換 — 任意の HTML ファイル（reveal.js、Marp、Google Slides のエクスポート、記事、一般的なページ）を HTMLSlides 形式に変換します。フェーズ 5 に進みます。

モード C：変更ルール

既存のプレゼンテーションを変更する場合は、最小限の変更にとどめ、ユーザーの依頼内容に関係する部分だけを変更してください。

スライドの編集：

最初に既存の HTML ファイルを読みます
依頼されたスライドのみを変更し、それ以外はすべてそのまま維持します
スライドを追加または削除する場合は、すべての data-slide 属性を 0 から順に振り直します
コンポーネントの種類を変更する場合（例：コードブロック → テーブル）は、component-templates.md のテンプレートを使用します
コンテンツの変更に合わせて、インラインの <script class="slide-notes"> ブロックを更新します

ビューポートへの収まり（必ず確認）：

コンテンツを追加する前に、コンテンツ量の上限に照らして確認します
画像を追加する場合：max-height: min(50vh, 400px) を指定する必要があります
テキストを追加する場合：スライドごとに箇条書きは最大 4～6 項目です。上限を超える場合は、複数のスライドに分割します
変更によってコンテンツがはみ出す場合は、コンテンツを分割し、その旨をユーザーに伝えます

変更後は必ず、以下の 8 つの仕様ルールをすべて確認してください：

<div class="deck" id="deck"> が存在する
すべてのスライドが <div class="slide"> であり、data-slide="0" から data-slide="N" まで順番に付与されている
最初のスライドに class="slide active" があり、ほかのスライドに active がない
グローバル関数 goTo()、next()、prev() が存在する
すべての CSS がインラインである（フォントのインポートを除く）
すべての JS がインラインである（CDN ライブラリ：Chart.js、Mermaid、anime.js を除く）
挿入や削除の後に番号の欠番がない
<head> 内に <meta name="generator" content="html-slides vX.Y.Z"> が存在する

編集後にルールを満たしていない場合は、保存する前に修正してください。

フェーズ 1：モードの選択

プロンプトでモード（または特定のテーマ）がすでに指定されている場合を除き、必ずユーザーにモードを選択してもらいます。

希望するモードを尋ねます（ヘッダー：「モード」）。

Vibe（クリエイティブなテーマ）— AI がコンテンツを自由に解釈し、個性の際立つビジュアルスタイルを適用します。ピッチデッキ、基調講演、非技術系のプレゼンテーションに最適です。
Pro — フリップカード、グラフ、テーブル、コードブロック、アーキテクチャフロー、画像スライドなど、構造化されたインタラクティブなコンポーネントを使用します。複数のテーマを利用できます。ユーザー提供の画像にも対応しています。技術講演、製品デモ、データを多く含むプレゼンテーションに最適です。

プロンプトでモードまたはテーマがすでに指定されている場合は、この質問を省略します。

Pro の場合： フェーズ 2A に進みます。 Vibe の場合： フェーズ 2B に進みます。

フェーズ 2A：Pro — コンテンツとテーマ

すべての質問を、1 回の AskUserQuestion 呼び出しで尋ねます。

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

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

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

質問 3 — テーマ（ヘッダー：「テーマ」）：

Obsidian（デフォルト） — 暗い背景、青／緑／オレンジのアクセント
Excalidraw Light — 手描き風、白い背景、スケッチ風の枠線
Excalidraw Dark — 手描き風、暗い背景、スケッチ風の枠線
Binary Architect — ハッカー向けの洗練されたデザイン、鋭い角、漆黒に映えるネオン

ユーザーがプロンプトですでにテーマを指定している場合は、質問 3 を省略し、そのテーマを使用します。希望がない場合は、Obsidian をデフォルトとして使用します。

質問 4 — 画像（ヘッダー：「画像」）：含める画像はありますか？選択肢：

「画像なし」 — CSS で生成したビジュアルのみ
「画像フォルダーがある」 — スキャンするフォルダーのパスを指定してください
「画像を貼り付け／提供する」 — コンテンツの確認時に画像をインラインで共有してください

ユーザーがプロンプトですでに画像を提供または貼り付けている場合は、この質問を省略し、フェーズ 3 用に画像を記録します。

編集の選択を忘れずに記録してください。フェーズ 3 に編集関連のコードを含めるかどうかが決まります。

ユーザーがコンテンツを用意している場合は、共有するよう依頼します。

画像が提供された場合（フォルダーまたはインライン）：

各画像を確認する — Read ツールを使用します（Claude はマルチモーダルです）
評価する — 画像ごとに、何が写っているか、使用可能かどうか（理由も含む）、主要な色を確認します
配置を計画する — Image Slide コンポーネントのテンプレートを使って、画像をスライドに割り当てます。ロゴはタイトルスライドまたはクロージングスライドに配置します。スクリーンショットや図には専用の画像スライドを用意します。
必要に応じて処理する — サイズが大きすぎる画像（>1MB）はリサイズします。角丸のテーマでは、ロゴを円形に切り抜きます。references/html-template.md の Image Pipeline を参照してください。
assets/ にコピーする — HTML ファイルと同じ場所に assets/ フォルダーを作成し、画像を配置します。相対パスの src="assets/..." を使用します。

その後、フェーズ 3 に進みます。

各テーマで使用するコンポーネントとナビゲーションは共通で、変わるのはビジュアルスタイルのみです。テーマファイルは assets/themes/ にあります。

フェーズ 2B：Vibe — コンテンツとスタイルの確認

これは「説明するより、見せる」フェーズです。 デザインの好みを言葉で表現するのが難しい人は多くいます。

ステップ 2B.1：コンテンツの確認

すべての質問を、1 回の AskUserQuestion 呼び出しで尋ねます。

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

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

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

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

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

編集の選択を忘れずに記録してください。フェーズ 3 に編集関連のコードを含めるかどうかが決まります。

ユーザーがコンテンツを用意している場合は、共有するよう依頼します。

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

ユーザーが「画像なし」を選択した場合 → ステップ 2B.3 に進みます。

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

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

プレビューでのロゴ： 使用可能なロゴが特定された場合は、ステップ 2B.4 の各スタイルプレビューに埋め込みます（base64）。

ステップ 2B.3：スタイルの選択方法

どのように選択するかを尋ねます（ヘッダー：「スタイル」）：

「選択肢を見せてください」（推奨）— 雰囲気に合わせて 3 つのプレビューを生成します
「希望するものが決まっています」— プリセットリストから直接選択します

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

ステップ 2B.4：雰囲気の選択

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

感銘／自信 — プロフェッショナルで信頼できる
興奮／活気 — 革新的で大胆
落ち着き／集中 — 明快で思慮深い
感動／心を動かす — 感情に訴え、記憶に残る

ステップ 2B.5：雰囲気に合うプリセットのプレビュー

説明するのではなく、見せてください。 プリセット名を列挙する代わりに、視覚的なプレビューを生成します。

利用可能なプリセットとその仕様を確認するため、STYLE_PRESETS.md を読みます。
以下の雰囲気に合うプリセットから ランダムに 3 つ選び、それぞれ 1 枚のスライドの HTML プレビューを生成します。プレビューを .claude-design/slide-previews/ に保存して開きます。
ユーザーに 1 つ選んでもらいます（ヘッダー：「スタイルを選択」）：
- 選択肢：「1」／「2」／「3」／「別の 3 つを表示」／「希望するものが決まっています」

雰囲気 → プリセットプール：

感銘／自信： Obsidian、Bold Signal、Electric Studio、Dark Botanical、Editorial Light

興奮／活気： Creative Voltage、Neon Cyber、Binary Architect、Terminal Green、Split Pastel

落ち着き／集中： Notebook Tabs、Paper & Ink、Swiss Modern、Excalidraw Light、Pastel Geometry

感動／心を動かす： Dark Botanical、Vintage Editorial、Excalidraw Dark、Pastel Geometry

「別の 3 つを表示」の場合 — 同じプールから異なるプリセットを 3 つ選びます（前の選択で選ばれたものは避けます）。プール内のプリセットを使い切った場合は、残りを表示します。

「希望するものが決まっています」の場合 — 選択した雰囲気のカテゴリーに属するプリセットをすべて表示し、名前で選んでもらいます。

「要素を組み合わせる」の場合 — 具体的な希望を尋ねます。

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

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

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

コンテンツ分析（Pro および Vibe）

HTML を作成する前に、コンテンツを分析し、各スライドを計画します。各スライドについて、以下を決定します。

目的 — このスライドでは何を伝えますか？
コンテンツ要素 — このスライドには具体的に何を載せますか？
視覚的な表現 — 視覚的に提示する最適な方法は何ですか？

重要な原則： 2 枚のスライドで内容が似ている場合（例：どちらもステータス項目を含む 4 つのロードマップテーマ）、すべてに同じ表現方法を使わないでください。異なるレイアウト、異なるコンポーネントタイプ、異なる視覚的な比喩を使って表現に変化をつけます。繰り返しは関心を損ないます。

この分析は内部で行います。計画をユーザーに提示しないでください。

サポートファイル

生成する前に、選択したスタイルに応じて以下のサポートファイルを読んでください。

クリエイティブプリセット（プリセット 1〜12）の場合：

html-template.md — HTML のアーキテクチャと JavaScript の機能
viewport-base.css — 必須の CSS（全文を含めてください）
animation-patterns.md — 選んだ雰囲気に合わせたアニメーションのリファレンス
libraries.md — 図表とアニメーション用の CDN ライブラリ（コンテンツで必要な場合に使用してください）

Pro モード（構造化コンポーネントモード）の場合：

component-templates.md — チャート、コードブロック、カード、テーブル、画像のコンポーネントスタイルのリファレンス。デザインでこれらの要素を使う場合のスタイルガイドとして使用してください。順番に試すためのメニューではありません。
components.css — 共通コンポーネント CSS（<style> にそのままコピーしてください）
assets/themes/ のテーマ CSS — <style> にそのままコピーし、components.css より前に配置してください
slides-runtime.js — ナビゲーション用 JS（<script> にそのままコピーしてください）
Excalidraw テーマでは、手描き風の外観に CSS のみを使用します。テーマ CSS（excalidraw.css / excalidraw-dark.css）が、ハッチング塗りつぶし、ずらした影、角丸をすべて CSS で処理するため、JavaScript は不要です。
libraries.md — 図表用の CDN ライブラリ（Mermaid.js）、連動アニメーション用ライブラリ（anime.js）。コンテンツで必要な場合に使用してください。
いずれかのスライドで Chart コンポーネントを使う場合は、<style> より前に <head> 内へ Chart.js CDN を追加してください：<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

利用可能な Pro テーマ（ユーザーがプロンプトで指定します。デフォルト：Obsidian）：

テーマ	ファイル	雰囲気
Obsidian（デフォルト）	`assets/themes/dark-interactive.css`	暗い背景、青／緑／オレンジのアクセント
Excalidraw Light	`assets/themes/excalidraw.css`	手描き風、白い背景、スケッチ風の境界線
Excalidraw Dark	`assets/themes/excalidraw-dark.css`	手描き風、暗い背景、スケッチ風の境界線
Editorial Light	`assets/themes/editorial-light.css`	明るく、エディトリアルで、テクノロジーを感じさせるミニマルなデザイン
Binary Architect	`assets/themes/binary-architect.css`	ハッカーエリート風、鋭角、漆黒の背景にネオン

重要な要件：

単一の自己完結型 HTML ファイルとし、CSS／JS はすべてインラインにしてください
Vibe モードの場合：viewport-base.css の内容をすべて <style> ブロックに含めてください。重要：viewport-base.css を貼り付けた後に、.slide の位置指定やレイアウトを再定義しないでください。このファイルでは、すでに .slide に position: relative、scroll-snap-align、フレックスレイアウトが定義されています。その後で .slide { position: absolute; opacity: 0; } を追加すると競合し、スライドが空白になったり重なったりします。上に追加するのは、色、背景、タイポグラフィ、アニメーションなどの視覚スタイルだけにしてください。
Pro モードの場合：選択したテーマ CSS と components.css を <style> ブロックに、slides-runtime.js を <script> ブロックに含めてください
Fontshare または Google Fonts のフォントを使用してください。システムフォントは使用しないでください
各セクションを説明する詳細なコメントを追加してください
すべてのセクションに、明確な /* === SECTION NAME === */ コメントブロックを付けてください
必ずスピーカーノートを生成してください — 下記の「スピーカーノート」を参照してください

発表者ノート（必須）

発表者ノートは、各スライドに非表示の JSON ブロックとしてインラインで埋め込まれています。スライドの移動時にブラウザーの開発者コンソールに表示されます。DevTools を開き、別のウィンドウに切り離すと、発表者ビューとして使えます。

すべてのスライドには、最後の子要素として <script type="application/json" class="slide-notes"> ブロックを含める必要があります。

<div class="slide" data-slide="0">
  
  <script type="application/json" class="slide-notes">
  {"title":"Introduction","script":"HTML Slides lets you create beautiful presentations without design skills.","notes":["Zero dependencies","Works with 4 AI agents"]}
  </script>
</div>

形式： 各スライドノートブロックには、以下を含めます。

title — スライドの見出し（コンソール表示および発表者向けアプリ用）
script — このスライドで発表者が声に出して読む内容。自然で会話的、かつプロフェッショナルな口調にします。コンポーネントの説明ではなく、発表者が聴衆に実際に話す言葉にしてください。
notes — スライドが伝える要点をまとめた箇条書き。各ノートでは、スライドの内容から話題を1つ取り上げます。

スクリプトの口調： 発表者が聴衆に自然に話しかけているように書いてください。会話的でありながら、プロフェッショナルな口調にします。例：

良い例：「これが他と違う点です。すべてが1つの HTML ファイルに収まっています。ビルド手順もフレームワークも不要です。開いて、そのまま発表できます。」
悪い例：「このスライドでは、背景に光るブロブを配置した Statement コンポーネントを使い、主な価値提案を表示しています。」

ノートの内容： スライドが実際に伝えている内容を要約し、どのように作られているかは説明しないでください。例：

良い例：["単独で動作する HTML ファイル1つ", "ビルドツールやフレームワーク不要", "どのデバイスでもオフラインで動作"]
悪い例：["中央に大きなテキスト", "背景の光るブロブ", "fadeInUp アニメーション"]

コンソール出力： スライドが切り替わるたびに、ナビゲーション JS がスタイル付きの書式でノートをコンソールに出力します。発表者は DevTools（F12）を開いて別のウィンドウに切り離し、発表中にノートを読みます。より充実した体験を提供する HTML Slides 発表者アプリへのリンクも表示されます。

絶対に含めないでください：

話し方の指示（「ここで間を置く」「ゆっくり話す」）
切り替えの合図（「次のスライドへ進む」）
発表に関する助言（「ここを強調する」「時間がなければ飛ばす」）
メタ的なコメント（「これはまとめのスライドです」）

例 — 4枚のフリップカードで AI エージェントの機能を紹介するスライド：

{
  "title": "Four Core Capabilities",
  "script": "Agents need four things working together: reasoning, memory, tools, and evaluation.",
  "notes": [
    "Reasoning — choose the next step",
    "Memory — carry context across steps",
    "Tools — take actions in the real world",
    "Evaluation — detect errors, confirm completion"
  ]
}

例 — 「3.2倍高速、インシデント47％減、満足度89％」を示す統計スライド：

{
  "title": "By the Numbers",
  "script": "AI-assisted development delivers measurable improvements across speed, quality, and satisfaction.",
  "notes": [
    "3.2x faster code review",
    "47% fewer production incidents",
    "89% developer satisfaction"
  ]
}

フェーズ4：PPT 変換

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

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

フェーズ5：HTML 変換（モード D）

既存の HTML ファイルを、仕様に準拠した HTMLSlides プレゼンテーションに変換します。

Step 5.1: 入力を分析する

HTML ファイルを読み込み、ソースを分類します。フレームワークの検出パターンについては、conversion-patterns.md を読み込みます。

ソースの種類	検出方法	抽出方法
reveal.js	`<div class="reveal">` + `<section>` 要素	セクションを 1 対 1 でスライドに対応させる
Marp	`` または `class="marpit"`	Marp のスライドを 1 対 1 で対応させる
impress.js	`<div id="impress">` + `div.step`	ステップを 1 対 1 でスライドに対応させる
Slidev	`class="slidev-layout"` または Slidev 固有のクラス	レイアウトを 1 対 1 でスライドに対応させる
Google Slides	Google 固有のクラスを含む、深くネストされた div	構造からテキストと画像を抽出する
HTMLSlides（一部準拠）	7 つの仕様ルールの一部には準拠しているが、すべてには準拠していない	準拠していない箇所のみ修正する
記事／ブログ	`<article>`、`<main>`、または見出しで構造化された HTML	見出しで分割する
汎用 HTML	上記のいずれにも該当しない	見出しで分割し、構造を分析する

7 つの仕様ルールに照らして準拠状況を監査します。すべてに準拠している場合は、ファイルがすでに準拠しており、変換は不要であることをユーザーに伝えます。一部のみ準拠している場合は、準拠していないルールのみを修正することを提案します。

コンテンツの内訳をユーザーに報告します。スライド数、コンテンツの種類、外部依存関係、推定出力スライド数を含めます。作業を進める前に確認を求めます。

Step 5.2: コンテンツを抽出する

スライドフレームワーク（reveal.js、Marp、impress.js、Slidev）の場合：

既存のスライドを HTMLSlides のスライドに 1 対 1 で対応させる
各スライドからタイトル、本文、画像、コードブロックを抽出する
スライドの順序を保持する
ソーススライドが密度の上限を超える場合は分割する

記事／ブログ投稿／汎用 HTML の場合：

見出しの境界（h1/h2 = 新しいスライド）でコンテンツを分割する
最初の見出しをタイトルスライドにする
関連する段落、リスト、画像を最も近い見出しの下にまとめる
コードブロック → コードスライド、表 → 表スライド、引用 → 引用スライド
長いリストは複数のスライドに分割する（1 スライドあたり最大 6 項目）

一部準拠の HTMLSlides ファイルの場合：

既存のスライド構造を維持する
準拠していない特定のルールのみ修正する

依存関係の処理：

外部 CSS → インライン化する。外部 JS → フレームワークの JS を削除し、コンテンツの JS は残す。
画像 → URL を維持し、max-height: min(50vh, 400px) を適用する。
フォント → Google Fonts / Fontshare は維持し、それ以外は置き換える。

Step 5.3: スタイルを選択する

Phase 1 と同様に、Vibe または Pro を尋ねます。デフォルトは Pro です。その後、選択に応じて Phase 2A または 2B に従います。

Step 5.4: 生成する

Phase 3 と同様に、適切な補助ファイルを読み込んで生成します。コンポーネントのテンプレートが適している場合は、スタイルの参考として使用し、各スライドの内容に基づいてデザインします。

各スライドには、必ずインラインのスピーカーノートを埋め込みます。ソースにスピーカーノートがある場合は、インラインの <script class="slide-notes"> ブロックとして保持します。

Step 5.5: 検証して保存する

保存する前に、8 つの仕様ルールすべてに準拠していることを確認します。準拠していないものがあれば修正します。HTML ファイルを保存します。

Phase 6: 納品

クリーンアップ — .claude-design/slide-previews/ が存在する場合は削除します
開く — open [filename].html を使ってブラウザーで開きます
要約 — 次の内容をユーザーに伝えます：
- ファイルの場所、スタイル名、スライド数
- ナビゲーション：矢印キー、Space、スクロール／スワイプ、ナビゲーションドットのクリック
- スピーカーノート：DevTools（F12）を開き、別ウィンドウに切り離します。スライドが切り替わるたびにノートがコンソールに表示されます
- カスタマイズ方法：色は :root CSS 変数、タイポグラフィはフォントリンク、アニメーションは .reveal クラスで設定します
- インライン編集が有効な場合：左上隅にマウスを合わせるか E を押して編集モードに入り、テキストをクリックして編集し、Ctrl+S で保存します

Phase 7: 共有とエクスポート（任意）

納品後、次のように尋ねます：「このプレゼンテーションを共有しますか？公開 URL へのデプロイ、または PDF としてのエクスポートができます。」

選択肢：URL にデプロイ／PDF にエクスポート／両方／結構です

ユーザーが断った場合は、ここで終了します。

7A：ライブ URL にデプロイする（Vercel）

プレゼンテーションを、共有可能な固定 URL にデプロイします。どのデバイスでも動作します。

前提条件を確認する — npx vercel --version を実行します。見つからない場合は、まず Node.js が必要です。
ログイン状態を確認する — npx vercel whoami を実行します。ログインしていない場合は、次の手順を案内します。
- https://vercel.com/signup で無料アカウントを登録します
- vercel login を実行して認証します
デプロイする — 次を実行します。
```
bash scripts/deploy.sh <path-to-presentation>
```
単一の HTML ファイル、または index.html を含むフォルダーを指定できます。
URL を共有する — ユーザーにライブ URL を伝え、どのデバイスでも動作することと、後から https://vercel.com/dashboard で削除できることを伝えます。

必要なもの： Node.js + Vercel アカウント（無料プラン）

7B：PDF にエクスポートする

各スライドをスクリーンショットとしてキャプチャし、1 つの PDF にまとめます。アニメーションは保持されず、静止画になります。

実行する：
```
bash scripts/export-pdf.sh <path-to-html> [output.pdf]
```
出力先を指定しない場合は、HTML ファイルと同じ場所に保存されます。
処理内容： Playwright がヘッドレスブラウザーを開き、各スライドを 1920x1080 でスクリーンショット撮影して PDF を作成します。初回実行時に Playwright と Chromium が自動的にインストールされます。
大きなファイル： PDF が 10MB を超える場合は、コンパクトモードを提案します。
```
bash scripts/export-pdf.sh <path-to-html> [output.pdf] --compact
```
1280x720 でレンダリングするため、通常は 50～70% 小さくなります。

必要なもの： Node.js（Playwright は自動インストール）

補助ファイル

ファイル	用途	読み込むタイミング
STYLE_PRESETS.md	色、フォント、シグネチャー要素を含む厳選されたビジュアルプリセット	フェーズ 2（スタイルの選択）
viewport-base.css	必須のレスポンシブ CSS — すべてのプレゼンテーションにコピーします（プリセット 1～12）	フェーズ 3（生成）
html-template.md	HTML 構造、JS 機能、コード品質基準（プリセット 1～12）	フェーズ 3（生成）
animation-patterns.md	CSS/JS アニメーションのスニペットと、効果と印象の対応ガイド（プリセット 1～12）	フェーズ 3（生成）
component-templates.md	コンポーネントのスタイルリファレンス — デザインでこれらの要素を使う場合に参照します	フェーズ 3（Pro）
components.css	すべての Pro テーマで共通のコンポーネント CSS — そのままコピーします	フェーズ 3（Pro）
themes/	テーマ CSS ファイル（dark-interactive、excalidraw、excalidraw-dark、editorial-light、binary-architect）— いずれか 1 つを選択します	フェーズ 3（Pro）
slides-runtime.js	ナビゲーション JS — そのままコピーします	フェーズ 3（Pro）
libraries.md	CDN ライブラリ：Mermaid.js（図）、anime.js（アニメーション）、Chart.js（グラフ）	フェーズ 3（必要なコンテンツがある場合）
presentation-layer.md	共通仕様：スライド構造、スピーカーノート、8 つの検証ルール、ナビゲーション	フェーズ 3（参照）
scripts/extract-pptx.py	PPT コンテンツ抽出用の Python スクリプト	フェーズ 4（PPT 変換）
conversion-patterns.md	フレームワーク検出パターンと抽出ルール	フェーズ 5（HTML 変換）
scripts/deploy.sh	スライドを Vercel にデプロイしてすぐに共有	フェーズ 7（共有）
scripts/export-pdf.sh	スライドを PDF にエクスポート	フェーズ 7（共有）

Markdown 対応

ログインしてコメント

基本情報

作者: bluedusk
リポジトリ: bluedusk/html-slides
カテゴリ: ドキュメント
インストール数: 52
GitHub スター: 93

問題を報告