html-slides

HTML スライド — アニメーション付き、ビューポートにフィットするプレゼンテーション

プロフェッショナルなアニメーション、ビューポートに合わせたレスポンシブな表示、厳選されたスタイルプリセットを備えた、単一ファイルで自己完結する HTML プレゼンテーションを生成します。実行時の外部依存関係はありません。CSS と JS はすべてインラインです。

アーキテクチャ

すべての HTML プレゼンテーションは、次の構造に従います。

1. 単一ファイル — インラインの CSS と JS を含む 1 つの .html ファイル（ビルドツールは不要）
2. ビューポートにフィット — 各スライドを 100vh／100dvh に固定し、overflow: hidden を設定します
3. CSS カスタムプロパティ — テーマ設定はすべて :root 変数を使用し、簡単にスタイルを変更できるようにします
4. セマンティック HTML — スライドごとに <section> を使用し、操作コントロールには <nav> を使用します
5. プログレッシブエンハンスメント — JS がなくても動作し、JS によってアニメーションが強化されます

必須のビューポートルール

すべてのプレゼンテーションに、assets/viewport-base.css のビューポート基本 CSS を適用してください。主なルールは次のとおりです。

• すべてのスライド：height: 100vh; height: 100dvh; overflow: hidden
• すべてのタイポグラフィで、レスポンシブな拡大縮小に clamp(min, preferred, max) を使用します
• 画像の最大高さは min(50vh, 400px) に制限します
• 高さ 700px、600px、500px のレスポンシブブレークポイントを設定します
• prefers-reduced-motion に対応します
• グリッドのフォールバック：grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr))

スライド内でのスクロールは許可しないでください。コンテンツが収まらない場合は、複数のスライドに分割してください。

エッジケース：負の Clamp 値 負のビューポート端の間隔（負のマージンや負のパディングなど）が必要な場合は、calc(-1 * clamp(...)) を使用します。このパターンは、値の符号を反転しながら clamp 関数のレスポンシブな動作を維持します。

iOS Safari の 100vh バグ iOS Safari の 100vh 単位にはアドレスバーが含まれるため、コンテンツがはみ出すことがあります。フォールバックチェーンでは、必ず 100vh と 100dvh（動的ビューポート高）を併用してください。最新のビューポートでは、100dvh があれば 100vh は無視されます。

アニメーションシステム

CSS ファーストのアプローチ（デフォルト）

基本として CSS アニメーションを使用します。.reveal クラスを適用し、transition-delay で遅延を段階的に設定します。

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

Intersection Observer でビューポートへの進入を検出し、.visible クラスを追加してアニメーションを開始します。

イージング：すべての登場アニメーションに --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1) を使用します。

GSAP による拡張（リクエスト時）

高度なアニメーションには、CDN から GSAP を読み込み、タイムラインベースの演出を使用します。詳しい GSAP のレシピは references/animation-patterns.md を、API リファレンスは GSAP ドキュメント を参照してください。主な統合ポイントは次のとおりです。

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js から GSAP と ScrollTrigger を読み込みます
• スライドの登場アニメーションを順番に実行するには gsap.timeline() を使用します
• レスポンシブなアニメーション動作には gsap.matchMedia() を適用します
• prefers-reduced-motion を尊重し、有効な場合はアニメーションを無効にします

位置パラメーターを使ったタイムラインでの登場 タイムラインの位置パラメーターを使うと、明示的な遅延を指定せずに表示を段階的にずらせます。例：

const tl = gsap.timeline();
tl.to('.heading', { opacity: 1, duration: 0.6 })
  .to('.subtitle', { opacity: 1, duration: 0.4 }, '<0.2') // Starts 0.2s before heading ends
  .to('.bullet', { opacity: 1, stagger: 0.1 }, '<0.15');

見出しや単語／文字の表示に使う SplitText 見出し内の個々の単語や文字をアニメーションさせます。

gsap.registerPlugin(SplitText);
const split = new SplitText('.headline', { type: 'words,chars' });
gsap.from(split.chars, { 
  opacity: 0, 
  duration: 0.4, 
  stagger: 0.05,
  ease: 'back.out'
});

スライド単位のナビゲーションに使う ScrollTrigger スライドの切り替えをスクロール位置に連動させ、インタラクティブなプレゼンテーションを実現します。

gsap.registerPlugin(ScrollTrigger);
gsap.to('.slide', {
  scrollTrigger: {
    trigger: '.slide-container',
    pin: true,
    scrub: 1,
    snap: 1 / slideCount
  }
});

Remotion のスプリング物理演算からタイミングを設定 Remotion のスプリング物理演算を GSAP の弾性イージングに変換し、自然な動きを実現します。

• スムーズ（damping: 200）→ elastic.out(1, 0.1) — 控えめな弾みで、洗練された印象
• 軽快（damping: 20）→ elastic.out(1, 0.35) — はっきりとしたスプリング感で、モダンな印象
• 弾む（damping: 8）→ elastic.out(1, 0.5) — 遊び心のある弾みで、エネルギッシュな印象

アニメーション一覧

アニメーション	CSS クラス	使用例
フェード＋上方向へのスライド	.reveal	テキスト／カードの標準的な登場
スケールイン	.reveal-scale	画像、フィーチャーカード
左からスライド	.reveal-left	2 カラムコンテンツ
ぼかしから表示	.reveal-blur	背景要素、オーバーレイ
段階表示	:nth-child(n) delay	リスト、グリッド項目

アニメーションのガイドライン

• 遊び心のあるスタイル：弾むようなイージング、400～600ms、段階的な表示
• プロフェッショナルなスタイル：控えめなフェード、200～300ms、動きは最小限
• シネマティックなスタイル：1～1.5秒のゆっくりとしたフェード、視差効果、拡大縮小のトランジション
• テクニカルなスタイル：鋭く素早い動き（150～200ms）、バウンスなし

スライドナビゲーション

キーボード操作（矢印キー、スペースキー、Page Up／Down）、タッチ／スワイプ操作、任意の進行状況インジケーターを含めてください。テンプレートは references/html-template.md にあります。

スタイルプリセットの適用

親の slide-design スキルにある references/style-presets.md からスタイルプリセットの定義を読み込みます。各プリセットは CSS カスタムプロパティに対応しています。

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --accent: #4a9eff;
  --accent-secondary: #ff6b6b;
  --font-heading: 'Clash Display', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --title-size: clamp(2rem, 6vw, 5rem);
  --body-size: clamp(0.9rem, 2vw, 1.25rem);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

Google Fonts または Fontshare からフォントを読み込みます。見出しにシステムフォントを使用しないでください。

スライドタイプのテンプレート

各スライドタイプについて、references/html-template.md の HTML パターンに従ってください。主なテンプレートは次のとおりです。

• タイトルスライド — 見出し、サブタイトル、任意の背景画像を備えた全画面のヒーロー
• コンテンツスライド — 見出しと、段階的に表示される箇条書きまたは段落
• 2 カラム — 画像とテキスト、またはコードと説明を横に並べたレイアウト
• 画像重視 — 全画面表示または中央配置の画像にキャプションを重ねたもの
• コードスライド — Prism.js（CDN から読み込み）で構文をハイライトしたコードブロック
• 比較 — カードを横に並べる、または変更前／変更後のレイアウト
• 引用 — 出典表記付きの中央配置の引用ブロック
• 機能グリッド — アイコン、タイトル、説明を含む CSS Grid カード（最大 6 件）
• タイムライン — マイルストーンを横または縦に配置したレイアウト

Mermaid 図のサポート

テクニカルなプレゼンテーションでは、Mermaid の図を埋め込みます。

1. Mermaid CDN を含めます：https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.0/mermaid.min.js
2. 図には <pre class="mermaid"> ブロックを使用します
3. フローチャート、シーケンス図、クラス図、ER 図に対応します
4. プレゼンテーションの配色に合ったテーマ変数でスタイルを設定します

PDF エクスポートのサポート

ブラウザーの印刷機能から PDF にエクスポートするための任意の印刷用スタイルシートを含めます。

@media print {
  .slide { page-break-after: always; height: 100vh; }
  .nav, .progress { display: none; }
  .reveal { opacity: 1; transform: none; }
}

アンチパターン

次のようなよくある間違いを避けてください。

• スライド内でスクロールする（常に overflow: hidden を指定します）
• 見出しにシステムフォントを使う（常にウェブフォントを読み込みます）
• ありきたりな「AI スロップ」風の見た目（紫のグラデーション、どこでも Inter を使うなど）
• インラインスタイル（CSS カスタムプロパティを使用します）
• prefers-reduced-motion への対応漏れ
• サイズ制約のない画像
• 機能グリッドに 7 件以上の項目を配置する

説明するより、見せる

視覚的なコミュニケーションの原則を体現します。視覚的な重みと意図を持たせて指示を強化してください。

• 「大胆にする」 — フォントのウェイトを上げると同時に、サイズも大きくし、アクセントカラーを組み合わせます。本当に大胆な要素は、階層の中で際立つものです。
• 「目立たせる」 — z-index による重ね合わせ、scale 変換、対照的な色を同時に組み合わせます。際立たせるには、この 3 つすべてが必要です。
• 「1 枚のスライドに 1 つのアイデア」 — 内容が収まらない場合は、スライドを分割します。フォントを最小サイズの基準より小さくしてはいけません。情報を詰め込みすぎるのはデザイン上の失敗です。
• 視覚的階層のルール：最も重要な要素は、補助要素の 3 倍のサイズ にします。見出しが 3rem なら、本文テキストは約 1rem にします。この比率を一貫して適用してください。

背景色を切り替えるスライドデッキ

プロフェッショナルなプレゼンテーションでは、スライドのグループごとに背景色を切り替えることがよくあります。次のように実装します。

• 各 <section> に data-theme 属性を定義します（例：data-theme="coral"、data-theme="dark"、data-theme="cream"）
• 各テーマを [data-theme="coral"] { --bg-primary: #E8845C; --text-primary: #fff; } のように CSS カスタムプロパティの上書きに対応付けます
• 背景色を変えても、フォントとレイアウトの一貫性を保ちます
• セクションの切り替わりを示すため、対照的な背景色を使用します（例：デモセクションには黒、インフォグラフィックにはクリーム色）

インライン編集モード

生成された HTML では、テキスト要素に contenteditable="true" 属性を指定できます。これにより、ユーザーは発表前にブラウザー上でスライドを直接編集できます。

インライン編集を有効にするには、テキスト要素に contenteditable="true" を追加します。

<h1 contenteditable="true">Edit this headline</h1>
<p contenteditable="true">Edit this paragraph</p>

視覚的なフィードバックを表示するには、この CSS を追加します。

[contenteditable]:hover {
  outline: 2px dashed var(--accent);
  cursor: text;
}

[contenteditable]:focus {
  outline: 2px solid var(--accent);
}

ユーザーは編集可能な要素をクリックしてその場で変更し、エクスポートせずに発表できます。読み取り専用モードにする場合は、contenteditable="false" で無効にしてください。

追加リソース

リファレンスファイル

• references/html-template.md — ナビゲーションとすべてのスライドタイプのテンプレートを含む、完全な HTML ボイラープレート
• references/animation-patterns.md — タイミングとイージングを含む、CSS および GSAP アニメーションのレシピ

アセットファイル

• assets/viewport-base.css — 必須のビューポート CSS（すべてのプレゼンテーションに含めてください）

スクリプトファイル

• scripts/extract-pptx.py — PPTX ファイルからテキスト、画像、ノートを抽出し、HTML 変換用の JSON に出力します