Image Narrative デッキ
+7
Codex
CursorHTML プレゼンのスタイル
フィルタータブ：すべて · ピッチ・ビジネス · 研究・教育 · ブランド・クリエイティブ
HTML スライドを選ぶ理由
スクリーンショットではなく本物の HTML
どのサイズでも鮮明で、エージェントが編集しやすい。
デッキスタジオで編集
クリックで書き換え、移動、並べ替え。
PowerPoint に書き出す
ファイルが必要なときは編集可能な PPTX で。
HTML プレゼンと PPT ファイルの比較
| Aspect | HTML プレゼン | PPTX ファイル |
|---|---|---|
| 開けるアプリ | あらゆるブラウザ | PowerPoint、Keynote |
| エージェントが直接編集 | はい | いいえ |
| CSS モーションと Web フォントをフル活用 | はい | いいえ |
| リンクで共有 | はい | いいえ |
AI エージェントで HTML スライドを作る方法
スタイル選びから発表まで3ステップ。
ステップ 1HTML スライドのスタイルを選ぶ
デッキスタイルを選び、インストール前に実際のスライドをプレビューします。
発表内容に合ったスタイルを選びます。図を主役にした研究発表デッキ、ローンチ向けの大胆なエディトリアルデッキ、クライアント向け報告の落ち着いたコンサル風ストーリー構成など。各 Skill ページで実際のスライドを確認できるので、インストール前に仕上がりがわかります。
スライド Skill を見る
ステップ 2Skill をインストールして発表内容を伝える
インストール用プロンプトを Claude Code か Codex に貼り付け、テーマ、聞き手、スライド枚数を伝えます。
Read https://skillry.dev/skills/<slug>/install.md and follow the instructions to install the skill.Claude Code、Codex などのエージェントに Skill をインストールし、テーマ、対象者、スライド枚数、参照するファイルを伝えます。エージェントが選んだスタイルで HTML デッキを書きます。
ステップ 3HTML スライドで発表するか PPTX に書き出す
ブラウザからフルスクリーンで発表するか、編集可能な PPTX を書き出します。
デッキスタジオを開いて、テキストの書き換え、ブロックの移動、スライドの並べ替えを行います。ブラウザからフルスクリーンで発表するか、PowerPoint ファイルが必要な人がいれば編集可能な PPTX を書き出しましょう。関連
Codex Skills
HTML スライドとは？
HTML プレゼンと PowerPoint ファイルの比較
HTML プレゼンとは、スライドを1枚ずつ表示する Web ページの集まりです。どのブラウザでも開け、どの画面でも鮮明に拡大縮小でき、Web フォント、CSS レイアウト、モーションに対応しています。スライドがコードなので、AI エージェントは他のファイルと同じように簡単に書き、スタイルを変え、更新できます。だからこそ、エージェントが作るデッキにはバイナリ形式の PowerPoint ファイルより HTML スライドが向いているのです。
HTML から PPTX へ：スライドを書き出す
どちらか一方の形式を選ぶ必要はありません。画面を自分で管理できるときはブラウザから HTML 版で発表し、クライアント、カンファレンス、同僚が PowerPoint ファイルを必要とするときはデッキスタジオから編集可能な PPTX を書き出しましょう。
HTML スライドのフレームワークと AI Skill の比較
Slidev、reveal.js、Marp は、スライドをコードで書くための人気のオープンソースツールです。Slidev は Markdown を Vue コンポーネントと開発者向けエディターでスライドに変換し、reveal.js は HTML、CSS、JavaScript で構築する HTML プレゼンフレームワーク、Marp はシンプルな Markdown をスライドに変換して PDF、PPTX、HTML に書き出せます。自由に制御できる反面、すべてのスライドを自分でデザインする必要があります。HTML スライド Skill はその一段上に位置し、エージェントがブリーフから完成されたデザインでデッキを書き、デッキスタジオで編集して編集可能な PPTX を書き出します。発表を手作りしたいならフレームワークを、デザイン済みのデッキを素早く作りたいなら Skill を使いましょう。
| ツール | 概要 | ライセンス |
|---|---|---|
| Slidev | Markdown + Vue のスライドフレームワーク | MIT |
| reveal.js | HTML プレゼンフレームワーク | MIT |
| Marp | Markdown スライドのエコシステム | MIT |
| HTML スライド Skill | エージェントが書くデザイン済みデッキ、PPTX 書き出し対応 | Skillry ライセンス |
HTML スライドに関する FAQ
HTML スライドとは？
HTML スライドとは、Web ページとして作られたプレゼンテーションです。各スライドは HTML と CSS でレイアウトされ、ブラウザでフルスクリーン表示されるため、Web フォント、レスポンシブレイアウト、CSS モーションを使えます。シンプルなファイルなので、AI エージェントが直接書いて編集できます。
HTML スライドをパワポに変換できますか？
はい。Skillry のスライド Skill には編集可能な PPTX を書き出せるデッキスタジオが含まれているので、PowerPoint で発表する同僚もデッキの作業を続けられます。テキストは編集可能なまま、画像は個別のオブジェクトとして保たれます。
HTML プレゼンはオフラインで使えますか？
デッキのファイルがプロジェクト内にあれば、インターネット接続なしでブラウザからローカルで開けます。スタイルが CDN から Web フォントを読み込む場合は、完全にオフラインで使えるようフォントのローカルコピーを含めてください。
HTML スライドを作れるエージェントは？
Claude Code、Codex、Cursor、Antigravity、OpenCode、GitHub Copilot など、SKILL.md 形式を読み込めるすべてのエージェントです。同じ HTML スライド Skill なら、どのエージェントでも同じデザインになります。
HTML デッキのスライドは何枚まで作れますか？
スライド枚数はリクエストで指定します。何枚を指定しても、Skill が表紙、セクション、本文、締めくくりのレイアウトの一貫性を保ち、後からデッキスタジオでスライドを追加・削除することもできます。
HTML スライド Skill に画像 API は必要ですか？
Skill によって異なります。多くのスライド Skill は独自の画像ライブラリーを同梱し、デフォルトでそれを再利用します。手持ちの写真やグラフも常に優先されるため、画像 API なしでもデッキを仕上げられます。テーマに合わせて新しい画像を生成する場合は、Codex の GPT Image のようなエージェント内蔵の画像生成ツールを使います。内蔵ツールのないエージェントでは、fal に対応した Skill に自分の FAL_KEY が必要です。API キーが必要な Skill は Skill ページに表示されています。