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

> 同じ内容のスライドをMarpとReveal.jsの両方で作成して比較。ソースの可読性（243行 vs 287行）、アニメーション、エクスポート形式、用途別の使い分けを整理します。

- Source: https://oharu121.com/ja/blog/marp-vs-revealjs-markdown-presentation-tools-comparison/
- Published: 2026-09-03T00:02:06+09:00
- Tags: Markdown, Node.js, 開発ツール

---
## はじめに

技術プレゼンテーションを作成する方法として、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は以下でインストールします：

```bash
# 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

```html
<!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のソースコード（抜粋）

```markdown
---
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をカスタマイズ
- `<!-- _class: lead -->` でタイトルスライド用のレイアウトを適用
- `<div class="columns">` で2カラムレイアウトを実現（Markdown内にHTMLを埋め込み）
- テーブル、引用、コードブロックはすべて標準Markdownのまま

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

```html
<!-- フラグメントアニメーション: 要素が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行です。

*Figure — SourceDensity: デモリポジトリから実測。タグのみの行とは、前後の空白を除いた中身が全部タグである行のことで、`</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パイプラインが自然に組めます：

```bash
# 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は、演出が成果に直結するカンファレンス登壇や技術動画で使い分ければよいでしょう。