MarpとReveal.jsを同じ内容で比較してみた - Markdownスライド vs HTMLプレゼンテーション

はじめに

技術プレゼンテーションを作成する方法として、PowerPointやGoogle Slides以外にも「コードベースで管理できるスライドツール」が存在します。代表的なものとして、Markdownからスライドを生成するMarpと、HTML/JSベースのプレゼンテーションフレームワークReveal.jsがあります。

どちらが自分のユースケースに合うのか、同じコンテンツを両方のツールで作成して実際に比較してみました。

前提・環境

macOS (Apple Silicon)
Node.js 22.x
pnpm 11.x
Marp CLI 4.4.0
Reveal.js 5.1.0 (CDN経由)

Marpとは

Marpは「Markdown Presentation Ecosystem」の略で、Markdownファイルからプレゼンテーションスライドを生成するツールです。

主な特徴：

Markdownで書いたテキストがそのままスライドになる
---（水平線）でスライドを区切る
CLIでHTML / PDF / PPTX / PNG に変換可能
VS Code拡張でライブプレビュー対応
フロントマターでテーマやスタイルを設定

Reveal.jsとは

Reveal.jsは、HTML/CSS/JavaScriptベースのプレゼンテーションフレームワークです。slides.comの基盤技術としても使われています。

主な特徴：

フラグメントアニメーション（要素を1つずつ表示）
垂直スライド（ドリルダウン構造）
data-auto-animateによる滑らかなトランジション
data-line-numbersによるコードの行ハイライト
プラグインエコシステム（数式、ノート、検索など）

セットアップ

Marp

VS Code拡張 marp-team.marp-vscode をインストールすると、エディタ内でスライドのライブプレビューが使えます。CLIは以下でインストールします：

# CLIをインストール
pnpm add -D @marp-team/marp-cli

# スライドをビルド
pnpm dlx @marp-team/marp-cli slides.md -o slides.html

# PDF出力
pnpm dlx @marp-team/marp-cli slides.md -o slides.pdf

# PPTX出力
pnpm dlx @marp-team/marp-cli slides.md -o slides.pptx

# 画像出力（LinkedIn/Instagramカルーセル用）
pnpm dlx @marp-team/marp-cli slides.md --images png

出力フォーマットは拡張子で自動判定されます。PDF出力にはChrome/Chromiumが必要ですが、HTML/PPTXはそのまま動作します。

Reveal.js

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/black.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/monokai.css">
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>スライド1</section>
      <section>スライド2</section>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/highlight.js"></script>
  <script>
    Reveal.initialize({
      hash: true,
      plugins: [RevealHighlight]
    });
  </script>
</body>
</html>

CDN経由ならインストール不要で、HTMLファイル1つで完結します。ローカルインストールする場合は pnpm add reveal.js で導入できます。

同じ内容を両方で作ってみた

テスト用コンテンツとして、以前書いた「AIコーディングCLIツールのSSD書き込み問題」の記事をプレゼンテーション化しました。コードブロック、テーブル、データ比較、ナラティブな流れを含む内容で、両ツールの得意・不得意が見えやすい題材です。

今回作成したデモは以下のリポジトリで公開しています：

https://github.com/oharu121/marp-reveal-js-demo

Marpのソースコード（抜粋）

---
marp: true
theme: default
paginate: true
backgroundColor: #1a1a2e
color: #eee
style: |
  th { background: #e94560; color: white; }
  .columns { display: flex; gap: 2em; }
  .columns > div { flex: 1; }
---

<!-- _class: lead -->

# AI Coding CLIs Are Killing Your SSD?

---

## The Incident

> OpenAI's Codex CLI was found writing **640TB/year** to SSDs

- Trace-level logging to `~/.codex/logs_2.sqlite`
- **37TB** written in just 21 days

---

## Why This Matters

<div class="columns">
<div>

### Consumer SSD Lifespan

| SSD | TBW Rating |
|-----|-----------|
| Samsung 990 PRO 1TB | ~600 TBW |

</div>
<div>

### Codex Impact

- **640 TB/year** write rate
- Exceeds warranty in **< 1 year**

</div>
</div>

ポイント：

フロントマターの style: ブロックでCSSをカスタマイズ
 でタイトルスライド用のレイアウトを適用
<div class="columns"> で2カラムレイアウトを実現（Markdown内にHTMLを埋め込み）
テーブル、引用、コードブロックはすべて標準Markdownのまま

Reveal.jsのソースコード（抜粋）

<!-- フラグメントアニメーション: 要素が1つずつ表示される -->
<section data-auto-animate>
  <h2>Cross-Tool Comparison</h2>
  <table>
    <thead><tr><th>Tool</th><th>SSD Issue</th></tr></thead>
    <tbody>
      <tr class="fragment"><td>Codex CLI</td><td><span class="status-bad">Critical</span></td></tr>
      <tr class="fragment"><td>Claude Code</td><td><span class="status-warn">Past issues</span></td></tr>
      <tr class="fragment"><td>Gemini CLI</td><td><span class="status-ok">None</span></td></tr>
    </tbody>
  </table>
</section>

<!-- 垂直スライド: ↓キーでドリルダウン -->
<section>
  <section>
    <h2>Claude Code: Past Bugs</h2>
    <p><small>Press ↓ for each bug</small></p>
  </section>
  <section>
    <h3>Bug 1: Debug Log Infinite Loop</h3>
    <p class="fragment">Logger records ops taking >75ms</p>
    <p class="fragment">→ Debug file grows large</p>
    <p class="fragment">→ <span class="status-bad">42GB in 7 days</span></p>
  </section>
</section>

<!-- コードの行ハイライト: クリックで注目箇所が切り替わる -->
<section>
  <pre><code class="language-bash" data-line-numbers="1-2|4-5|7-12">
$ du -sh ~/.claude/debug
2.8M    ~/.claude/debug          # Normal

$ du -sh ~/.claude/file-history
12M     ~/.claude/file-history   # Normal

$ du -sh ~/.claude/*/  | sort -hr | head -5
866M    plugins/
434M    projects/
266M    security/
 12M    file-history/
2.8M    debug/
  </code></pre>
</section>

ポイント：

class="fragment" で要素を1つずつ表示するアニメーション
<section> のネストで垂直スライド（ドリルダウン）を実現
data-line-numbers="1-2|4-5|7-12" でコードの行をステップごとにハイライト
data-auto-animate でスライド間の滑らかなトランジション
data-background-gradient でスライドごとに背景を変更

比較結果

ソースの可読性

Marpのソースはそのまま読めるMarkdownです。GitHubでプレビューしても、VS Codeで開いても、内容が把握できます。

# Marpのソース: 243行のMarkdown
$ wc -l slides.md
243

# Reveal.jsのソース: 287行のHTML
$ wc -l index.html
287

行数だけ見ると大差ありませんが、その行が何を持っているかで見ると逆転します。中身がHTMLタグだけの行を数えると、Reveal.jsは287行のうち115行、40%をタグだけに使っています。Marpは243行のうち19行です。タグと空行を除くと、Marpのほうが総行数は少ないのに内容の行は多いという結果になります。162行対152行です。

デモリポジトリから実測。タグのみの行とは、前後の空白を除いた中身が全部タグである行のことで、</section> や <div class="columns"> などが該当します。

これが、Marpのソースはそのままドキュメントとしても機能し、Reveal.jsのソースにはHTMLパーサーが必要になる理由です。

アニメーション・トランジション

ここが最大の差です。

Marpにはスライド内のアニメーション機能がありません。--- でスライドが切り替わるだけです。

Marpのデッキを送っていく様子。1回の操作でスライドがまるごと次の1枚に入れ替わり、スライドの中では何も動きません。比較表も最初から全部表示されます。

Reveal.jsでは：

フラグメント: テーブルの行を1つずつ表示、結論を段階的に明かす
垂直スライド: メインの流れを保ちつつ、詳細をドリルダウンで見せる
コード行ハイライト: data-line-numbers="1-2|4-5" でクリックごとに注目箇所を切り替え
auto-animate: スライド間で要素が滑らかに移動

同じ内容をReveal.jsで。同じ比較表の行がクリックごとに1行ずつ現れるので、聴衆は次が出る前に各ツールの判定を読めます。

技術動画（Fireship風のコード解説）やカンファレンス登壇では、この差が決定的です。

エクスポート

出力形式	Marp	Reveal.js
HTML	組み込み	組み込み
PDF	組み込み（Chrome必要）	別途ツール必要（decktape等）
PPTX	組み込み	非対応
PNG/JPG画像	組み込み (`--images`)	非対応

MarpのPPTX出力は、PowerPointを使う関係者にファイルを渡す必要がある場面で便利です。--images png はSNSカルーセル投稿にそのまま使えます。

CI/CDとの相性

Marpはmd → html/pdf/pptx のCLIパイプラインが自然に組めます：

# GitHub Actionsでスライドを自動ビルド
pnpm dlx @marp-team/marp-cli slides.md -o dist/slides.html

Reveal.jsは静的HTMLなのでビルドステップ自体は不要ですが、PDFエクスポートの自動化にはheadlessブラウザが必要です。

テーマとスタイリング

Marpはフロントマターの style: ブロックでCSSをスコープ指定できます。制約はありますが、色、フォント、テーブルスタイル、背景など基本的なカスタマイズは十分可能です。

Reveal.jsはフルのCSS/JSが使えるため、天井がありません。CSS変数 (--r-heading-color など) でテーマを簡単に調整でき、複雑なレイアウトも自由自在です。

ユースケース別の使い分け

Marpが向いている場面

週次ミーティング / スプリントレビュー: Markdownで素早く作成、Git管理、差分追跡
社内ドキュメントのスライド化: 既存のMarkdownドキュメントに --- を入れるだけでスライドに
LinkedIn / Instagram のカルーセル投稿: --images png で各スライドを画像出力
CI/CDでの自動ビルド: CLIパイプラインに自然に組み込み
チームでの共同編集: Markdownなのでレビューしやすく、マージコンフリクトも解消しやすい

Reveal.jsが向いている場面

カンファレンス登壇: フラグメントアニメーション、垂直スライドで聴衆の注目を制御
技術動画の収録: コード行ハイライトのステップ実行がFireship風の解説に最適
インタラクティブなデモ: JSプラグインで動的なコンテンツを埋め込み可能
凝ったビジュアル演出が必要な場面: 背景グラデーション、カスタムアニメーション

まとめ

観点	Marp	Reveal.js
作成速度	速い	中程度
ソースの可読性	優秀（Markdown）	低い（HTML）
アニメーション	なし	豊富
コードハイライト制御	基本的	行単位のステップ実行
エクスポート	HTML/PDF/PPTX/画像	HTML（他は別途ツール）
Git管理との相性	優秀	可能だが差分が見にくい
ビジュアルの自由度	中程度	制限なし

結論として、両者は競合するツールではなく、用途が異なります。

Marp = 日常のスライド: ドキュメントの延長としてのプレゼンテーション。書いて、バージョン管理して、必要に応じてPPTXやPNGに変換する
Reveal.js = ここぞの発表: アニメーションとインタラクションで聴衆の体験を作り込む

個人的には、日常業務の8割はMarpで十分カバーできると感じました。コードベースにMarkdownファイルとして同梱できるのが最大の利点で、プレゼンテーションも「コードと一緒にバージョン管理する成果物」として扱えます。Reveal.jsは、演出が成果に直結するカンファレンス登壇や技術動画で使い分ければよいでしょう。

MarpとReveal.jsを同じ内容で比較してみた - Markdownスライド vs HTMLプレゼンテーション

はじめに

前提・環境

Marpとは

Reveal.jsとは

セットアップ

Marp

Reveal.js

同じ内容を両方で作ってみた

Marpのソースコード（抜粋）

Reveal.jsのソースコード（抜粋）

比較結果

ソースの可読性

アニメーション・トランジション

エクスポート

CI/CDとの相性

テーマとスタイリング

ユースケース別の使い分け

Marpが向いている場面

Reveal.jsが向いている場面

まとめ

TypeScript の言語サーバーが正しいファイルに TS5097 を出した — .ts を消したらスクリプトが壊れた話

Markdownを出所にGitで仕様書を管理する — PDFはWeasyPrintで都度生成

CommonMark のフランキング規則が日本語と中国語のページに ** を出力する

Python の yield で動作中の AI エージェントに入力をストリーミングする — return との違いと Node.js での実装

Astroのコンテンツコレクションだけでブログを運用する — CMSを捨て、MDXを選び、外部キーを型で置き換えた話

転載で読者を増やしつつ自分の記事を主にしておく — rel=canonicalと全文RSS

はじめに

前提・環境

Marpとは

Reveal.jsとは

セットアップ

Marp

Reveal.js

同じ内容を両方で作ってみた

Marpのソースコード（抜粋）

Reveal.jsのソースコード（抜粋）

比較結果

ソースの可読性

アニメーション・トランジション

エクスポート

CI/CDとの相性

テーマとスタイリング

ユースケース別の使い分け

Marpが向いている場面

Reveal.jsが向いている場面

まとめ

この記事をシェア

関連記事

TypeScript の言語サーバーが正しいファイルに TS5097 を出した — .ts を消したらスクリプトが壊れた話

Markdownを出所にGitで仕様書を管理する — PDFはWeasyPrintで都度生成

CommonMark のフランキング規則が日本語と中国語のページに ** を出力する

Python の yield で動作中の AI エージェントに入力をストリーミングする — return との違いと Node.js での実装

Astroのコンテンツコレクションだけでブログを運用する — CMSを捨て、MDXを選び、外部キーを型で置き換えた話

転載で読者を増やしつつ自分の記事を主にしておく — rel=canonicalと全文RSS