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

MarpとReveal.jsで同じ技術記事をプレゼンテーション化し、ソースの可読性、アニメーション、エクスポート機能を実際に比較しました。Markdownスライドの日常使いとHTMLフレームワークの演出力、それぞれの最適なユースケースを整理します。

lin-yuchen

2026.06.28

 はじめに技術プレゼンテーションを作成する方法として、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によるコードの行ハイライト
プラグインエコシステム（数式、ノート、検索など）
 セットアップ MarpVS 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書き込み問題」の記事をプレゼンテーション化しました。コードブロック、テーブル、データ比較、ナラティブな流れを含む内容で、両ツールの得意・不得意が見えやすい題材です。
 Marpのソースコード（抜粋）---
marp: true
theme: default
paginate: true
backgroundColor: #1a1a2e
color: #eee
style: |
  h1, h2, h3 { color: #e94560; }
  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のソースコード（抜粋）<!-- フラグメントアニメーション: 要素が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のソース: 244行のMarkdown
$ wc -l slides.md
244

# Reveal.jsのソース: 287行のHTML
$ wc -l index.html
287
行数だけ見ると大差ありませんが、Reveal.jsは <section>, <div>, <span> などのHTMLタグが多く、情報密度はMarpのほうが圧倒的に高いです。Marpのソースはそのままドキュメントとしても機能しますが、Reveal.jsのソースはHTMLパーサーが必要です。
 アニメーション・トランジションここが最大の差です。
Marpにはスライド内のアニメーション機能がありません。--- でスライドが切り替わるだけです。Reveal.jsでは：
フラグメント: テーブルの行を1つずつ表示、結論を段階的に明かす
垂直スライド: メインの流れを保ちつつ、詳細をドリルダウンで見せる
コード行ハイライト: data-line-numbers="1-2|4-5" でクリックごとに注目箇所を切り替え
auto-animate: スライド間で要素が滑らかに移動
技術動画（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が向いている場面

まとめ

関連記事

AWSで探す

注目のテーマ

プロダクトやサービスで探す

特集やシリーズから探す

EVENTS

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

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