MarpからSlidevへ乗り換えた話 — 書き方・デザイン・レイアウトを徹底比較

Marpで満足していたけど、もっと表現の幅が欲しくなった方へ。
実際に乗り換えた視点から、両者の違いをコードで比較します。

なぜSlidevに乗り換えたのか

Marpは「Markdownだけでスライドが作れる」シンプルさが魅力です。しかしプレゼンが複雑になってくると、こんな壁にぶつかります。

• レイアウトの自由度が低い（CSSを書いてもうまくいかない）
• アニメーション・インタラクションが難しい
• テーマのカスタマイズに限界を感じる

Slidevはそれらをすべて解消してくれました。Vue.js + Viteベースで動いており、スライドでありながらWebアプリとしての自由度があります。

基本的な書き方の違い

スライドの区切り方

どちらも --- でスライドを区切りますが、フロントマターの扱いが異なります。

Marp

---
marp: true
theme: default
---

# スライド1

---

# スライド2

Slidev

---
theme: default
highlighter: shiki
---

# スライド1

---

# スライド2

Slidevでは先頭のフロントマターがプレゼンテーション全体の設定、--- 以降はページ単位の設定として扱われます。

ページ単位の設定

MarpはHTMLコメント、SlidevはYAMLフロントマターをページ区切りの --- に続けて書くスタイルです。

Marp（HTMLコメントで指定）

---

<!-- _class: lead -->
<!-- _backgroundColor: #1a1a2e -->

# タイトルスライド

Slidev（各スライドにフロントマターを書く）

---
layout: center
class: text-center
---

# タイトルスライド

Slidevの方が明示的でIDEの補完も効きやすいです。

デザイン・テーマの仕組み

Marpのテーマ

Marpのテーマは単一のCSSファイルです。

/* my-theme.css */
section {
  background-color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}

section.lead h1 {
  font-size: 3em;
  color: #2c3e50;
}

---
marp: true
theme: my-theme
---

シンプルですが、複雑なレイアウトは実現しにくいです。

Slidevのテーマ

Slidevのテーマはnpmパッケージで配布されます。構成ファイルは複数あり、よりWebアプリらしい設計です。

my-theme/
├── package.json
├── layouts/        ← レイアウトコンポーネント（Vue）
│   ├── default.vue
│   └── cover.vue
├── styles/
│   └── index.css   ← Tailwind CSS or plain CSS
└── setup/
    └── shiki.ts    ← シンタックスハイライト設定

テーマの適用：

---
theme: my-theme
---

npmに公開されているテーマを使う場合：

npm install slidev-theme-penguin

背景画像の設置方法

Marp

---

<!-- _backgroundImage: url('./bg.jpg') -->
<!-- _backgroundSize: cover -->

# 背景画像つきスライド

または全スライドに一括適用する場合はCSSで：

section {
  background-image: url('./bg.jpg');
  background-size: cover;
}

Slidev

各スライドのフロントマターで指定できます。

---
background: ./images/bg.jpg
---

# 背景画像つきスライド

URLでオンライン画像も使えます：

---
background: https://source.unsplash.com/1280x720/?nature
---

# Unsplashから背景を取得

重ねてテキストを読みやすくしたい場合は class でオーバーレイを追加：

---
background: ./images/bg.jpg
class: bg-overlay
---

# テキストが読みやすい

/* styles/custom.css */
.bg-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

比較まとめ：

カラムレイアウト（2段・3段）

これがMarpとSlidevで最も差が出る部分です。

Marpのカラムレイアウト

Marpには公式のカラム機能がないため、HTMLとCSSを直書きする必要があります。

---

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">

<div>

### 左カラム
- ポイント1
- ポイント2

</div>
<div>

### 右カラム
- ポイント3
- ポイント4

</div>
</div>

Markdownの中にHTMLを書くため、インデントや空行の扱いに注意が必要で、崩れやすいです。

Slidevのカラムレイアウト

Slidevには ::left:: / ::right:: のスロット構文があります（two-cols レイアウト使用時）。

2カラム

---
layout: two-cols
---

### 左カラム
- ポイント1
- ポイント2

::right::

### 右カラム
- ポイント3
- ポイント4

2カラム（幅の比率を変える）

---
layout: two-cols
layoutClass: gap-16
---

::left::
<div class="w-2/3">

左側を広く使う

</div>

::right::
<div class="w-1/3">

右側は狭め

</div>

3カラム以上（カスタムレイアウトまたはHTMLで）

---
---

<div class="grid grid-cols-3 gap-4">

<div>

### カラム1
内容A

</div>
<div>

### カラム2
内容B

</div>
<div>

### カラム3
内容C

</div>
</div>

SlidevはTailwind CSSが使えるため、grid-cols-3 のような直感的なクラスで書けます。

比較まとめ：

画像の配置

Marpの画像配置

Marpは画像に独自の構文拡張があります。

<!-- 右寄せ・幅指定 -->
![right w:400](./images/photo.jpg)

<!-- 背景として配置 -->
![bg](./images/photo.jpg)

<!-- 背景を左半分に -->
![bg left](./images/photo.jpg)

<!-- 背景を右半分に・60%幅 -->
![bg right:60%](./images/photo.jpg)

Marpのbg構文はとても便利で、テキスト＋背景画像の分割レイアウトが1行で実現できます。

Slidevの画像配置

Slidevは標準Markdownの画像構文に加え、HTMLとTailwindで細かく制御します。

<!-- 基本 -->
![幅400px](/images/photo.jpg){width=400}

<!-- 右寄せ（Tailwind） -->
<img src="/images/photo.jpg" class="w-64 ml-auto" />

<!-- 中央寄せ -->
<img src="/images/photo.jpg" class="mx-auto w-1/2" />

<!-- 角丸・影つき -->
<img src="/images/photo.jpg" class="rounded-xl shadow-lg w-80" />

image-right レイアウトを使うとMarpのbg構文に近い表現が可能です：

---
layout: image-right
image: ./images/photo.jpg
---

# テキスト + 右画像

左側にテキスト、右側に画像が自動で並びます。

左画像版：

---
layout: image-left
image: ./images/photo.jpg
---

# テキスト + 左画像

比較まとめ：

動画の配置

Marpでの動画

Marpはネイティブで動画をサポートしておらず、HTMLで埋め込む必要があります。

---

<video controls width="720">
  <source src="./demo.mp4" type="video/mp4">
</video>

ただし、PDF出力時には動画は表示されません。

Slidevでの動画

SlidevはWebアプリとして動作するため、動画との相性が抜群です。

ローカルファイルの埋め込み

<video controls class="w-full rounded-lg">
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

YouTubeの埋め込み

<Youtube id="dQw4w9WgXcQ" />

幅・高さの指定も可能：

<Youtube id="dQw4w9WgXcQ" width="800" height="450" />

自動再生・ループ

<video autoplay loop muted class="w-3/4 mx-auto">
  <source src="/videos/loop-demo.mp4" type="video/mp4">
</video>

Vimeoなど外部サービス

SlidevはVueコンポーネントが使えるため、サードパーティの埋め込みコンポーネントも利用できます：

<iframe
  src="https://player.vimeo.com/video/YOUR_VIDEO_ID"
  class="w-full h-64"
  frameborder="0"
  allowfullscreen
/>

比較まとめ：

移行時のチェックリスト

乗り換えを検討している方向けに、最低限確認しておくべき点をまとめます。

環境構築

# Slidevのセットアップ
pnpm create slidev@latest

# または既存プロジェクトに追加
pnpm add @slidev/cli @slidev/theme-default

ファイル構成の変化

Marp（1ファイルで完結）        Slidev（プロジェクト構成）
slides.md                →    slides.md
                              public/        ← 画像・動画を置く
                              components/    ← Vueコンポーネント
                              styles/        ← カスタムCSS
                              package.json

よくあるつまずきポイント

1. 画像パスが変わる — Slidevでは public/ フォルダ以下に置き、/images/xxx.jpg のように絶対パスで参照
2. Marpのbg構文は使えない — layout: image-left/right に書き直す
3. テーマの適用方法が違う — CSSファイルではなくnpmパッケージ
4. プレビューにNode.jsが必要 — VS Code拡張だけでは動かない

まとめ

Marpのままで良い場合：

• シンプルなテキスト中心のスライドを素早く作りたい
• PDFとして配布することがメイン
• Node.js環境を使いたくない

Slidevに乗り換えるべき場合：

• レイアウトの自由度を上げたい
• 動画・アニメーションを多用したい
• ブラウザでインタラクティブに発表したい
• テーマをがっつりカスタマイズしたい

Slidevへの移行は最初の環境構築さえ乗り越えれば、あとはHTML/CSSの知識がそのまま活かせてとても快適です。ぜひ試してみてください。

便利なテーマ

• 学会に便利　https://mksmkss.github.io/slidev-theme-gtlabo/#layout-default

参考リンク：

• Slidev公式ドキュメント
• Marp公式ドキュメント
• Slidevテーマギャラリー