PowerPointもKeynoteも使わず、ブラウザだけで動くプレゼンスライドを作れます。それがReveal.jsを使ったHTMLスライドの特徴で、AIに指示を出すことで、コードを一切書かずに完成させることができます。
このページでは、AIへの指示（プロンプト）の書き方と、実際に作成したサンプルを紹介します。
AIへの指示プロンプト
基本プロンプト（最低限の内容）
以下のプロンプトで、すぐにコードが出力されます。
Reveal.jsを使ったHTMLプレゼンを作って。
テーマはwhite、スライドは5枚、
内容は〇〇について。
完全なHTMLコードを出力して。
CDNで読み込んで外部ファイル不要にして。
2点がポイントになります。
- 「完全なHTMLコード」と明示することで、断片ではなくそのまま使えるコードが出力されます
- 「CDNで読み込んで外部ファイル不要に」と指定することで、1ファイルだけで動作する形になります
精度が上がるプロンプト
スライドの構成や使いたいスタイルを事前に決めておくと、修正の手間が大幅に減ります。
Reveal.js（5.1.0 / jsdelivr CDN）を使って、以下の内容のHTMLプレゼンテーションを1ファイルで作成してください。
外部ファイルは不要で、CSS・JSはすべてHTML内に書いてください。
テーマはwhiteを使用。言語は日本語。
【テーマ】
〇〇について
【スライド構成】
1. タイトルスライド：〇〇
2. 背景説明：〇〇
3. ポイント3点：〇〇 / 〇〇 / 〇〇
4. まとめ
【スタイル】
・強調テキストは赤字（.highlightクラス）
・2列レイアウトが必要なスライドあり（.two-colクラス）
基本プロンプトとの違いは次のとおりです。
- Reveal.jsのバージョンとCDNを明示することで、毎回同じ構成が保たれます
- スライドの構成を番号付きで渡すことで、AIが内容を考える余地をなくせます
- 使うCSSクラスを指定することで、デザインが安定します
作成サンプル — 日帰りドライブのおすすめコース
基本プロンプトを使い、「日帰りドライブのおすすめコース」をテーマに5枚のスライドを作成しました。
使用したプロンプト
Reveal.jsを使ったHTMLプレゼンを作って。
テーマはwhite、スライドは5枚、
内容は日帰りドライブのおすすめコースについて。
完全なHTMLコードを出力して。
CDNで読み込んで外部ファイル不要にして。
出力されたスライドの内容
- 1枚目（タイトル）：日帰りドライブのおすすめコース — 都心から2時間以内で行ける、厳選3ルート
- 2枚目：コース1 — 箱根・芦ノ湖コース。東名高速経由、所要約1時間30分。富士山の眺望と温泉が楽しめる定番ルートです。
- 3枚目：コース2 — 房総半島コース。東京湾アクアライン経由、所要約1時間。海鮮グルメと菜の花・ポピー畑が見どころです。
- 4枚目：コース3 — 奥多摩コース。圏央道経由、所要約1時間15分。渓谷沿いのドライブと登山・ハイキングが楽しめます。
- 5枚目（まとめ）：3コースの比較表。所要時間・見どころ・おすすめシーズンを一覧化しています。
出力されたコードをテキストエディタに貼り付け、「drive_course.html」のような名前で保存してブラウザで開くだけで完成します。インターネット接続があれば、どのPCでも同じように表示できます。
コメント