reveal.js：テーマ、エクスポート、そして代替ツールとの比較
reveal.js は GitHub スター 71.9k を誇るオープンソースの HTML プレゼンテーションフレームワークです。スライドを HTML または Markdown で書き、あらゆるブラウザで発表できます。本記事は率直なガイドです。テーマ・テンプレート・サンプルの仕組み、PDF や PowerPoint へのエクスポートの実際の挙動、Slidev や Marp との比較、そして agent-native なデザインワークスペースがどこで役立つのかを解説します。
コードを書いていて、なおかつ発表をする必要があるなら、あなたはおそらく reveal.js に行き着いたことがあるはずです。これまで見てきた開発者カンファレンスのスライドの多くを支えているのが、このオープンソースのフレームワークです。各スライドを HTML または Markdown で書くと、それがあらゆるブラウザで Web ページとして動作します——テーマ、トランジション、フラグメントアニメーション、発表者ノート、そしてネイティブの PDF エクスポートを標準搭載しています。GitHub スター 71.9k と MIT ライセンスを備え、「PowerPoint を開かずにスライドを作るには？」への標準的な答えになっています。
本記事はその率直な地図です。reveal.js とは実際に何なのか、テーマ・テンプレート・サンプルがどう組み合わさるのか、PDF や PowerPoint へのエクスポートが実際にどう振る舞うのか（落とし穴があります）、他のオープンソースの対抗馬とどう並ぶのか、そして——ほとんどの記事が省く部分ですが——このようなフレームワークが適切なツールでなくなり、別の何かが引き継ぐのはどこなのかを解説します。AI とエージェントによるスライド作成ワークフローの選択肢を検討しているなら、reveal.js が何であって何でないのかを正確に知っておくと役立ちます。
reveal.js とは
reveal.js は自らを「The HTML Presentation Framework」と称しており、その説明は的確です。開いてクリックして操作するアプリではなく、HTML ファイルに組み込む JavaScript ライブラリです。各スライドは <section> 要素で、section を入れ子にすると縦方向のスライドになります。すべてを CSS でスタイリングし、data 属性でトランジションやフラグメントを組み込み、ブラウザでページを開いて発表します。出力がまさに Web ページなので、Web でできること——ライブコード、埋め込み動画、iframe、WebGL、あなた自身のコンポーネント——は何でもスライド上に置けます。
トレードオフは定義そのものに表れています。これは開発者向けのフレームワークであって、GUI ではありません。あなたのツールはコードエディタとブラウザであって、ドラッグハンドル付きのキャンバスではありません。だからこそ開発者に愛されるのです——完全なバージョン管理、完全な CSS 制御、独自ファイル形式なし——そしてだからこそ、コードを書かない人ははじき返されます。しかも本当に無料です。アカウント不要、ウォーターマークなし、エクスポート上限なし、席数課金なし。HTML はあなたのものです。
テーマ、テンプレート、サンプル
reveal.js まわりの検索の多くは、実のところ、ゼロからデザインせずに見栄えよくするにはどうするか、という話です。というわけで、各要素がどう組み合わさるのかを説明します。
reveal.js のテーマは組み込みの出発点です。フレームワークには既製のテーマ一式——Black、White、League、Beige、Sky、Night、Serif、Simple、Solarized など——が付属し、スタイルシートのリンクを 1 か所変えるだけで切り替えられます。テーマは単なる CSS なので、「カスタム reveal.js テーマ」とは、フォント・色・見出しスタイルを設定する Sass/CSS ファイルを書く（あるいはフォークする）ことを意味します。テーマストアはありません。あなたが編集するのはスタイルシートです。
reveal.js のテンプレートやサンプルは、単一の公式ギャラリーではなく、主にコミュニティの中にあります。リポジトリにはサンプルのデッキが同梱され、ドキュメントサイト（revealjs.com）自体がソースを読める reveal.js のデッキであり、GitHub にはスターターテンプレート、ボイラープレート、フレームワークのラッパーがあふれています。「reveal js examples」を探しているなら、最も情報量が多いのは公式サイト自身のソースです——ほぼすべての機能を実地でデモしています。初心者向けの注意点：ここでの「テンプレート」は、内容を埋めていくデザインファイルではなく、クローンして編集するコードリポジトリです。
PowerPoint と PDF へのエクスポート
PDF エクスポートは一級市民の組み込み機能で、きちんと機能します。デッキの URL に ?print-pdf を付け、ブラウザの印刷ダイアログを開いて「PDF として保存」を選ぶと、reveal.js が各スライドをそれぞれ 1 ページに整えます。これがクリーンでサポートされた経路であり、得られる PDF はスライドそのままの見た目になります。
reveal.js を PowerPoint にエクスポートするところは、期待値の管理が必要な領域です。編集可能な PowerPoint ファイルを生成するネイティブの「.pptx として保存」はありません。現実的な経路は PDF → PPTX 変換で、その変換は非可逆です。各スライドは PowerPoint 上で、編集可能なテキストボックス・図形・レイアウトではなく、フラットな画像として届きます。ですから、後工程で誰かがあなたのデッキを PowerPoint で開いて編集する必要がある場合——見出しを打ち直す、グラフのスタイルを変える、箇条書きを組み替える——reveal.js はそれを与えてくれるツールではありません。ブラウザから発表するために作られており、その編集可能なソースは .pptx ではなく HTML です。始める前にこれを知っておけば、同僚に「あの PowerPoint」を求められた日の痛い驚きを避けられます。
reveal.js の代替と、その比較
スライドをコードとして書く方法は reveal.js だけではありません。最も近いオープンソースの代替——人々が「reveal.js の代替」と言うときに指すもの——は Slidev と Marp です。そして正直に言えば、Open Design は真っ向から競合するのではなく、まったく別のレイヤーに位置しています。
| ツール | 執筆方法 | 編集可能な .pptx | テンプレート化 | ライセンス |
|---|---|---|---|---|
| reveal.js | HTML または Markdown | 不可（PDF→PPTX は非可逆な画像） | テーマ = CSS/Sass；コミュニティテンプレート | MIT |
| Slidev | Markdown + Vue | 不可（画像/PDF エクスポート） | Vue コンポーネント + テーマ | MIT |
| Marp | Markdown のみ | 不可（PDF/PPTX は画像） | Markdown テーマ（CSS） | MIT |
| Open Design | エージェントに説明する | 可——デザインシステムに沿った編集可能な出力 | ファーストパーティのデッキテンプレート | Apache-2.0 |
Slidev は思想的に最も近い兄弟です。Markdown を主体に据え、その下に Vue コンポーネントを敷くことで、reveal.js の生の HTML の自由度をいくらか手放す代わりに、より構造化され開発者にとって扱いやすい執筆フローを得ています。Vue/Vite の世界に住んでいて、ライブコーディングのデモをしたいなら、Slidev が自然な選択です。Marp は逆方向へ進みます——Markdown のみ、意図的にミニマル、コンポーネントなし——これにより、スライドがほぼテキストで、フレームワークのことを一切考えたくないときに最速の経路になります。
3 つとも同じ根本形状を持つコードファーストのフレームワークです。デッキを書き、ブラウザで発表し、編集可能な PowerPoint 出力は本質的な狙いではありません。これらの間で選ぶことは、主にどの執筆面を望むか（生の HTML、Vue の Markdown、素の Markdown）の問題であって、どれか 1 つにあって他にない機能の問題ではありません。
Open Design が位置づくところ
ここで率直な境界線を引きます。reveal.js はデッキを書くことを求めます——すべてのスライドを、コードで。手作りの HTML 制御が欲しいならこれは長所であり、それが目的ならここにあるどれもそれを置き換えません。
Open Design は別のレイヤーであり、しかも私たちが作っている製品なので、その前提で読んでください。これはオープンソース（Apache-2.0）、ローカルファースト、キー持ち込み方式の Agent-Native Design Workspace で、あなたがすでに使っているコーディングエージェント——Claude Code、Codex、Cursor——の外側に位置します。HTML を手書きする代わりに、欲しいデッキを説明すると、エージェントがデザインシステムに沿って編集可能なものを生成します。だから最初からブランドに沿って仕上がり、レンダリング済みの成果物として凍りつくのではなく、編集可能なまま保たれます。Open Design は、そこから始められるファーストパーティのデッキテンプレートも提供しています。
完全な CSS 制御でスライドをコードとして書きたいなら、Open Design は reveal.js の代替にはなりません——そこは reveal.js の本拠地であり、そこでの出来は見事です。Open Design が向いているのは、マークアップを書くよりエージェントにブリーフを渡したい、出力を多数のデッキにわたって 1 つのデザインシステムに合わせたい、最後に自分が所有する編集可能なファイルが欲しい、というケースです。デッキそのものがあなたの書くコードであるときは reveal.js に手を伸ばし、デッキがエージェントがあなたのために生み出す多くのブランド準拠の出力の 1 つであるときはワークスペースに手を伸ばしてください。
FAQ
reveal.js は無料ですか？ はい。reveal.js は MIT ライセンスのオープンソースです——商用利用も無料で、アカウント不要、ウォーターマークなし、エクスポート制限なし。HTML は自分でホストします。
reveal.js のテーマはどう追加・変更しますか？ reveal.js には組み込みテーマ（Black、White、League、Sky、Night、Serif など）が付属し、スタイルシートのリンクを 1 か所変えるだけで入れ替えられます。カスタムテーマとは、自分のフォントと色を持つ CSS/Sass ファイルを書くかフォークすることを意味します——閲覧できるテーマストアはありません。
reveal.js を PowerPoint にエクスポートできますか？ 編集可能な .pptx にはできません。reveal.js は PDF へはきれいにエクスポートできます（?print-pdf を付けて、ブラウザから PDF に印刷します）。その PDF を PowerPoint に変換することは可能ですが非可逆です——各スライドは編集可能なテキストや図形ではなく、フラットな画像として落ちます。編集可能な PowerPoint が必要なら、reveal.js は適切なソースではありません。
reveal.js と Slidev と Marp——どれを使うべき？ 3 つともオープンソース、コードファースト、MIT ライセンスです。生の HTML 制御には reveal.js、Markdown と Vue コンポーネント（ライブデモに最適）には Slidev、最もシンプルな Markdown のみのデッキには Marp を選びましょう。どれも編集可能な PowerPoint 出力は狙っていません。
reveal.js を使うにはコードが書けないといけませんか？ 実質的には、はい。reveal.js は開発者向けのフレームワークです——ドラッグ＆ドロップの GUI ではなく、テキストエディタで HTML、Markdown、CSS を扱います。代わりに平易な言葉でデッキを説明したいなら、それこそ Open Design のような agent-native なワークスペースが埋める空白です。
まとめ
reveal.js は 71.9k のスターにふさわしい存在です。無料で、MIT ライセンスで、HTML ネイティブに、ブラウザがある場所ならどこでも動くスライドを作れ、本物のテーマ、クリーンな PDF エクスポート、完全な CSS 制御を備えています。ただし目を開いて臨んでください——これはあなたが中で書くフレームワークであって、クリックして進むアプリではなく、「編集可能な PowerPoint へのエクスポート」はやってくれることではありません。デッキをコードとして書きたいなら、reveal.js（あるいは Slidev / Marp）は素晴らしい住処です。デッキを説明して、編集可能でブランドに沿った、自分が所有する成果をエージェントに生成させたいなら、そこで Agent-Native Design Workspace が引き継ぎます。