html-presentation

HTML プレゼンテーションスキル

ドキュメント、アウトライン、または自由形式のコンテンツを、キーボード操作とスクロール操作で移動できる、洗練された自己完結型の HTML スライドプレゼンテーションに変換します。

このスキルが起動する条件

• ユーザーがドキュメントを提供し、HTML で「プレゼンテーション」「スライド」「デッキ」を作成するよう依頼した場合
• ユーザーがメモ、アウトライン、コンテンツをブラウザーで表示できるスライドに変換するよう依頼した場合
• ユーザーが Reveal.js またはスクロールベースの HTML プレゼンテーションを希望した場合
• ユーザーが PowerPoint ではなくブラウザーからプレゼンテーションを行いたいと述べた場合

ステップ 0：要件を確認する

何かを生成する前に、以下の項目についてユーザーが指定しているか確認します。不足している項目があれば、簡潔なメッセージ 1 通ですべて確認します。確認は 1 回までとし、ユーザーが指定しないことを選んだ項目には、妥当な既定値を使用します。

必須の情報（不足している場合は確認）：

パラメーター	確認する内容	未指定の場合の既定値
ナビゲーション方式	「スライドは左から右（横方向）に進めますか、それとも上から下へスクロールしますか？」	horizontal
テーマ	「どのようなビジュアルスタイルにしますか？選択肢：dark-editorial（暗い背景、セリフ体の見出し、エディトリアルな雰囲気）、light-minimal（白を基調としたすっきりしたサンセリフ体）、corporate（ネイビーと白を基調にしたプロフェッショナルなスタイル）、hacker（黒地にターミナル風の緑、等幅フォント）」	dark-editorial
対象者とトーン	「誰に向けたものですか？（例：投資家、エンジニア、カンファレンスの参加者、社内チーム）」	コンテンツから推測
スライド枚数の希望	「おおよそ何枚のスライドにしますか？」	コンテンツの密度に応じて自動決定
ブランディング	「ヘッダーに使用するロゴのテキスト、タグライン、アクセントカラーはありますか？」	なし
CTA／クロージング	「最後のスライドに行動喚起、リンク、連絡先情報を含めますか？」	なし

ユーザーがドキュメントを提供し、「これをプレゼンテーションにして」のように依頼した場合、不足している項目をすべてまとめて一度に確認します。「見栄えよくしてくれればいい」と言われた場合は、既定値を使用して進めます。

ステップ 1：元のドキュメントを分析する

アップロードされたドキュメント、または提供されたコンテンツを読みます。以下を特定します。

1. 論理的なセクション — スライドまたはスライドグループにします
2. 主要なデータポイント — 数値、指標、割合には、指標／統計用のスライドレイアウトを使用します
3. リストと比較 — 機能一覧、長所と短所には、カードグリッドまたは比較表を使用します
4. 引用や推薦文 — 引用ブロックのレイアウトを使用します
5. 順序のあるプロセス — ワークフローやタイムラインには、ワークフロー／タイムライン用のスライドレイアウトを使用します
6. タイトルと結論 — 最初と最後のスライドには、特別なデザインを適用します

HTML を書き始める前に、コンテンツのセクションとスライドの種類を対応付けた構成を頭の中で作成します。

ステップ 2：スライドレイアウトを選択する

各スライドでは、次のレイアウトパターンのいずれかを使用します。見た目に変化をつけるために組み合わせてください。同じレイアウトを3枚以上連続して使用しないでください。

レイアウト	使用する場面	CSS クラス
タイトル	オープニングスライド、セクションの区切り	slide--section slide--center
分割	テキストと補足コンテンツを横並びにする	split or split--60-40
グリッドカード	関連項目が3～6個ある場合（機能、リスク、コンポーネント）	grid-2、grid-3、grid-4
指標	強調する主要な数値や統計	metric 項目を含む metrics
引用	専門家の引用、推薦文、重要な発言	quote-block
ワークフロー	順次進行するプロセス、パイプライン、アーキテクチャ	矢印コネクターを含む workflow
比較表	機能の比較、変更前と変更後	comparison-table
タイムライン	時系列の出来事、ロードマップのフェーズ	timeline
リスト	順序付きまたは順序なしの要点	list、list--check、list--numbered
CTA／クロージング	リンクと連絡先を含む最後のスライド	slide--section slide--center + contact-grid

ステップ 3：HTML を生成する

コードを書く前に、このスキルの references ディレクトリから適切なテーマとテンプレートのファイルを読み込んでください。

1. 必ず references/THEMES.md を読み込み、選択したテーマの CSS 変数とスタイルを確認します
2. 必ず references/TEMPLATES.md を読み込み、各スライドレイアウトの HTML パターンを確認します
3. 必ず references/NAVIGATION.md を読み込み、選択したナビゲーションモードに適した JS の初期化方法を確認します

その後、プレゼンテーションを単一の自己完結型 HTML ファイルとして組み立てます。

ファイル構成

<!DOCTYPE html>
<html lang="en">
  <head>
    
    
  </head>
  <body>
    
    
  </body>
</html>

主なルール

1. 単一ファイル — すべてをインラインにします。外部 CSS／JS ファイルは使用せず、CDN リソース（Google Fonts、Reveal.js、Lucide アイコン）のみ使用できます。
2. CDN 依存関係（横スクロールモード）：
   • https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css
   • https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.js
   • https://cdn.jsdelivr.net/npm/[email protected]/plugin/highlight/highlight.js（コードブロックがある場合）
   • https://cdn.jsdelivr.net/npm/[email protected]/plugin/highlight/monokai.css（コードブロックがある場合）
   • https://unpkg.com/lucide@latest（アイコン用）
3. 縦スクロールモード — Reveal.js の CDN 依存関係は不要です。カスタム CSS の scroll-snap とバニラ JS を使って、キーボード／スクロール操作によるナビゲーションを実装します。
4. Google Fonts — テーマに合ったフォントを読み込みます。パフォーマンス向上のため、必ず <link rel="preconnect"> を使用してください。
5. レスポンシブ対応 — 1400px、1024px、768px のブレークポイントにメディアクエリーを含めます。
6. フラグメントアニメーション — 横スクロールモードでは、段階的に表示する要素に class="fragment" を使用します。縦スクロールモードでは、intersection observer によるフェードインアニメーションを使用します。
7. スライド番号 — 常に現在のスライド番号を表示します。
8. キッカーテキスト — 編集的な雰囲気を出すため、各コンテンツスライドに 01 // セクション名 のような番号付きキッカーを付けます。
9. ヘッダーバー — タイトル／セクションスライドを除く各コンテンツスライドに、アイコンとセクションラベルを含むヘッダーを付けます。

横スクロールモード：Reveal.js の設定

Reveal.initialize({
  hash: true,
  slideNumber: true,
  controls: true,
  controlsLayout: "bottom-right",
  progress: true,
  center: false,
  transition: "slide",
  width: "100%",
  height: "100%",
  margin: 0.04,
  navigationMode: "linear",
  autoAnimate: true,
  autoAnimateDuration: 0.7,
  plugins: [RevealHighlight], // only if code blocks present
});

垂直スクロールモード：ナビゲーションの動作

• 各スライドは、scroll-snap-align: start を指定したビューポート全体を占めるセクションです
• 矢印キー（上／下／左／右）でスライド間を移動できます
• マウスホイールでスライド間をスクロールできます（デバウンスあり）
• Page Up／Down、Home／End に対応しています
• 画面下部のプログレスバーに現在位置が表示されます
• スライド間はスムーズにスクロールします
• モバイルでのタッチスワイプに対応しています

ステップ 4：出力ファイルに書き込む

1. 適切な出力パス（例：./presentation.html、またはユーザーが指定した場所）に HTML ファイルを作成します
2. ファイルをユーザーに提示します

コンテンツが多い場合（15 枚を超えるスライド）は、段階的に作成します。まず骨組みを書き、その後、スライドの内容を分割して追記します。

エラー処理

問題	原因	対処
CDN の読み込みに失敗する（Reveal.js、Lucide、Google Fonts）	ネットワークが利用できないか、CDN が停止している	インラインのスタイル／スクリプトに切り替えます。Reveal.js のコアをインラインで埋め込み、Lucide アイコンをインライン SVG パスに置き換え、システムフォントのスタック（system-ui, -apple-system, sans-serif）を使用します
スライドのビューポートからコンテンツがはみ出す	テキストが多すぎるか、スライド上の要素が多すぎる	スライドを 2 枚に分け、補足情報を次のスライドに移すか、文章を箇条書きにします
フォントが正しく表示されない、または読み込まれない	Google Fonts CDN がブロックされているか、読み込みが遅い	フォントファミリーのスタックにシステムフォントのフォールバックを追加します：'Font Name', system-ui, Georgia, serif
Reveal.js の初期化に失敗する	スクリプトの読み込み順序に問題があるか、プラグインが不足している	CDN のスクリプトタグが Reveal.initialize() より前にあることを確認し、ブラウザーのコンソールで 404 エラーを確認します

品質チェックリスト

納品前に、次の項目を確認します。

• すべてのスライドがはみ出すことなく表示される（コンテンツがビューポート内に収まっている）
• 矢印キーとマウススクロールの両方でナビゲーションできる
• スライド番号が表示される
• フラグメントアニメーション（水平）またはフェードイン（垂直）が動作する
• リンクがクリックできる（Reveal.js で pointer-events: auto が設定されている）
• コードブロックに構文ハイライトが適用されている（コードブロックがある場合）
• 3 つすべてのブレークポイントでレスポンシブに表示される
• アイコン参照が壊れていない（Lucide アイコンが初期化されている）
• すべてのスライドでキッカーの番号が一貫している
• タイトルスライドと締めくくりのスライドで、それぞれ異なるビジュアル表現が使われている