Slidevの使い方完全ガイド｜開発者向けMarkdownスライド作成ツールの導入・アニメーション＆PDF出力手順

「技術勉強会や社内LTでスライドを発表したいけれど、PowerPointでの図形配置やフォント調整に時間がかかってしまう……」
「ソースコードを美しくシンタックスハイライトし、スマートにステップ表示できるプレゼンツールを探している」

エンジニアやWeb開発者の間でこのような課題を解決するデファクトスタンダードとして急速に注目を集めているのが、Slidev（スライデブ）です。

Slidevは、Vue.jsやViteの開発者として知られるAnthony Fu氏が開発した、Web開発者のためのMarkdownプレゼンテーションツールです。Markdownで箇条書きを書く直感的な操作感と、Vue 3 / Viteの強力なエコシステム（コンポーネント連携、洗練されたアニメーション、Shikiによる美しいコード装飾）が見事に融合しています。

本記事では、Slidevの基本概念からMarp・Reveal.jsとの比較、ブラウザでの即時体験、ローカル環境の構築、実践的なスライド記法（2カラム、クリックアニメーション、Mermaidダイアグラム）、発表者モード、そしてPlaywrightによるPDF/PPTX出力まで、実務で役立つノウハウを徹底解説します。

Slidev（スライデブ）とは？開発者のための次世代Markdownプレゼンツール

Slidev（スライデブ）は、「開発者が最も快適に、最も美しいスライドを最速で作る」ことを目指して設計された次世代のMarkdownスライド作成ツールです。

従来のMarkdownスライドツールでは難しかった「洗練されたクリック連動アニメーション」や「インタラクティブなUIコンポーネントの埋め込み」が、Markdownの記法を損なうことなくシームレスに実現できます。

MarpやReveal.jsとの違い・比較表（Vite/Vue3ベース、圧倒的な表現力）

Markdownでスライドを作成できるツールとしては、SlidevのほかにMarpやReveal.jsが広く知られています。それぞれの特徴と違いを比較表にまとめました。

ツール全体の選び方や他のツール（Remark等）との詳細な機能比較については、当サイトの親ピラー記事である「Markdownスライドツール徹底比較ガイド」でも詳しく解説しています。

また、より手軽にVS Code完結で作りたい方は、「Marp使い方完全ガイド」も併せて参考にしてください。

なぜエンジニアのLT・勉強会スライド作成で大人気なのか？

Slidevが多くのWebエンジニアや登壇者に支持されている理由は、主に以下の3点に集約されます。

1. Shikiによる極上のシンタックスハイライト: VS Codeと同じ構文解析エンジン「Shiki」を採用しているため、行番号表示、特定行のフォーカス、差分（diff）ハイライトが驚くほど美しく表示されます。
2. Viteによる爆速ライブリロード（HMR）: スライドのテキストを変更した瞬間、ミリ秒単位でプレビュー画面へ反映されるため、思考を一切中断させません。
3. Vueコンポーネント＆Tailwind CSSの自由度: グラフライブラリや自作のVueコンポーネントをスライド内に直接配置でき、デザインの微調整もTailwind CSSのユーティリティクラスで即座に完結します。

Slidevの導入と初期セットアップ（オンライン体験＆ローカル導入）

Slidevは、環境構築を行わずにWebブラウザ上で即座に体験する方法と、ローカルのターミナルからプロジェクトを作成する方法の2通りが用意されています。

ブラウザだけで今すぐ試せる「Play Online」の手順

「まずはインストールなしで使用感を確かめたい」という場合は、公式が提供しているオンラインプレイグラウンドを活用するのが最も手軽です。

1. ブラウザで公式オンラインプレイグラウンド（sli.dev/play）にアクセスします。
2. 画面左側にMarkdownエディタ、右側にリアルタイムプレビューが表示されます。
3. エディタ上のテキストを書き換えると、即座にスライドの見た目が更新されることが確認できます。

npm / pnpm によるローカル環境構築とスライドプロジェクトの立ち上げ

本格的にLTや登壇用スライドを作成する場合は、ローカル環境にプロジェクトを作成します。Node.js（LTSバージョン推奨: v18以上）がインストールされているターミナルで、以下のコマンドを実行します。

# npm を使用する場合
npm init slidev@latest

# pnpm を使用する場合
pnpm create slidev

# yarn を使用する場合
yarn create slidev

コマンドを実行すると、対話形式でプロジェクト名（フォルダー名）を尋ねられます。

✔ Project name: my-slidev-presentation
✔ Install and start it now? yes

セットアップが完了すると、自動的に依存パッケージがインストールされ、ローカル開発サーバーが起動します。

  public slide show   > http://localhost:3030/
  presenter mode      > http://localhost:3030/presenter

ブラウザで http://localhost:3030/ を開くと、美しいサンプルスライドが表示されます。

プロジェクトの基本構成

生成されたディレクトリの中核を担うのは、メインのスライドファイルである slides.md です。

my-slidev-presentation/
├── slides.md          # スライド本文を記述するメインMarkdownファイル
├── package.json       # プロジェクト設定と実行スクリプト
├── node_modules/      # 依存ライブラリ
└── components/        # 自作Vueコンポーネントを配置するディレクトリ（任意）

以降は、この slides.md を普段お使いのエディタで編集していくだけでスライドが仕上がっていきます。

VS Code専用拡張機能「Slidev」の導入とライブプレビュー

普段エディタとしてVisual Studio Code（VS Code）を使用している場合は、公式拡張機能「Slidev」をインストールすると作業効率が劇的に向上します。

1. VS Codeの拡張機能マーケットプレイスで「Slidev」を検索してインストールします。
2. slides.md を開くと、アクティビティバー（左端アイコン）にSlidevの専用アイコンが表示されます。
3. エディタ内またはサイドバーでスライドの目次一覧が表示され、クリックしたスライドへ瞬時にジャンプできるほか、組み込みブラウザでのライブプレビューも可能です。

【実践】SlidevのMarkdownスライド作成テクニック

Slidevでは、Markdownファイルの中にYAML形式のFrontmatterや専用のディレクティブを記述することで、高度なレイアウトやアニメーションを実現します。

スライド区切り記法（—）とFrontmatter（theme, layout, background）

スライドを次のページに区切るには、Markdown標準の水平線記法である --- を使用します。

また、ファイルの最上部（1ページ目）にはスライド全体の共通設定をFrontmatterで指定できます。

---
theme: default
title: Slidev実践入門
info: |
  社内LT会用スライド資料
  作成者: マーク先生
highlighter: shiki
drawings:
  persist: false
transition: slide-left
---

# Slidev実践入門

開発者のための爆速プレゼンテーション構築術

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

# アジェンダ

1. Slidevの基本思想
2. 2カラムレイアウトとコード表示
3. クリックアニメーション

各スライドの直前にFrontmatterを配置することで、そのスライド単体のレイアウト（layout: center や layout: two-cols）や背景画像（background: https://example.com/bg.png）を個別に変更できます。

2カラム・グリッドレイアウトの組み方

技術発表では、「左側にコード、右側に解説テキスト」を並べる2カラムレイアウトが頻出します。Slidevなら組み込みの layout: two-cols を指定し、スロット記法（::right::）で区切るだけで完成します。

---
layout: two-cols
---

# 左側カラム：コード

```typescript
// カウントアップ関数
function increment(count: number): number {
  return count + 1;
}
```

::right::

# 右側カラム：解説

- TypeScriptによる型安全な記述
- 純粋関数として副作用を排除
- 単体テストが容易な設計パターン

::right:: より前が左カラム、後が右カラムとして美しく左右均等に分割配置されます。

コードハイライト（Shiki）・行番号表示・差分ハイライト

Slidev最大の強みが、Shiki構文解析エンジンによるコードブロックの表現力です。行番号の表示や、特定行のフォーカス、差分表示をコードフェンスの引数で簡単に指定できます。

```typescript {all|2|4-6}
// 1. 基本設定
const siteName = 'マークダウン入門ナビ';

// 2. 状態管理
const state = {
  isPublished: true,
};
```

コードハイライトの主な指定パターン

• {all}: 全行を通常表示
• {2}: 2行目のみをハイライト
• {4-6}: 4行目から6行目をハイライト
• {1|2-3|all}: クリックするたびに「1行目 → 2〜3行目 → 全体」とフォーカスを順次切り替え
• typescript {monaco}: Monaco Editor（VS Codeのエディタ部分）を埋め込み、スライド上で直接コードを編集・実行可能にする

クリック連動アニメーション（v-click記法）で段階的に文字を表示する

スライドの箇条書きを1行ずつクリックに合わせて表示させたい場合は、v-click ディレクティブを活用します。

# 本日の重要ポイント

<v-clicks>

- ポイント1：Markdownで記述するためGitでバージョン管理できる
- ポイント2：Vueコンポーネントがそのまま埋め込める
- ポイント3：爆速ビルドで開発ストレスがゼロ

</v-clicks>

<v-clicks> タグで囲むだけで、内側のリスト項目が1クリックごとに順番にフェードイン表示されます。特定のブロック（画像や段落）だけに適用したい場合は、<div v-click> や要素に直接 v-click 属性を付与します。

Mermaid記法でのダイアグラム挿入

システム構成図やシーケンス図、フローチャートは、Mermaid記法を使ってスライド内に直接描画できます。

```mermaid
graph LR
    A[Markdown執筆] --> B(Slidevローカル開発)
    B --> C{レビュー完了?}
    C -->|Yes| D[PDF / PPTX出力]
    C -->|No| A
```

外部の作図ツールで画像を作成して書き出す手間がなくなり、Markdownテキストを編集するだけで図表が自動的に最新化されます。

プレゼン本番機能とエクスポート（PDF・PPTX・Web公開）

スライドが完成したら、本番のプレゼンテーション実施や参加者への資料配布に向けた準備を行います。

発表者用プレゼンターモード（タイマー・発表者ノート表示）

発表時に不可欠なタイマー機能や発表者ノートは、標準で搭載されている「プレゼンターモード」で利用できます。

1. スライド再生中にキーボードの P キーを押すか、ブラウザで http://localhost:3030/presenter にアクセスします。
2. 現在のスライド、次のスライドのプレビュー、経過タイマー、現在時刻が表示されます。
3. Markdown内に以下のようにHTMLコメントを記述しておくと、発表者ノートとして画面上にのみ表示されます。

# Slidevの拡張性

自作コンポーネントを自由に追加可能。

<!--
【発表者ノート】
ここで会場にVueを使ったことがあるか挙手を促す。
所要時間の目安は2分。
-->

聴衆に見せるスライド画面と、自分だけが見るプレゼンター画面を別ウィンドウで分離できるため、デュアルディスプレイ環境での登壇が快適に行えます。

Playwrightを活用した高品質PDF・PPTXへのエクスポート手順

勉強会の参加者への配布用資料として、スライドをPDFやPowerPoint（PPTX）形式で書き出すことができます。Slidevは内部でヘッドレスブラウザ（Playwright）を使用し、CSSやWebフォントの崩れがない高精細なエクスポートを行います。

1. Playwrightのインストール

初回のみ、エクスポートに必要なPlaywrightのChromiumエンジンをインストールします。

npx playwright install chromium

2. エクスポートコマンドの実行

プロジェクト直下で以下のコマンドを実行します。

# PDF形式でエクスポート
npx slidev export

# PowerPoint（PPTX）形式でエクスポート
npx slidev export --format pptx

# PNG画像（スライド全ページ）として連番書き出し
npx slidev export --format png

コマンドが完了すると、プロジェクトルートに slides-export.pdf または slides-export.pptx が自動生成されます。

GitHub PagesやNetlifyへのSPA（Webスライド）無料デプロイ

Slidevのスライドは、単一の静的Webアプリケーション（SPA）としてビルドし、GitHub PagesやNetlify、Vercel等へ無料で公開できます。

# 静的サイトとしてビルド
npm run build

ビルドが完了すると、dist ディレクトリにHTML、CSS、JavaScriptのアセット群が出力されます。このディレクトリをホスティングサービスにデプロイするだけで、Web上で誰でも閲覧できるインタラクティブスライドが完成します。

よくあるエラーと対処法（エクスポートできない・日本語フォントの指定）

Slidevの利用時によくあるトラブルと、その解決法をまとめました。

1. slidev export でエクスポートに失敗する

Error: Failed to launch chromium because executable doesn't exist

上記のようなエラーが発生する場合、Playwrightのブラウザバイナリがローカルにインストールされていません。

npx playwright install chromium

を実行してChromiumをダウンロードしてください。また、プロジェクトローカルに @slidev/cli が正しく認識されているか確認してください。

2. 日本語フォントが意図した見た目にならない・文字化けする

デフォルトのテーマでは欧文フォントが優先指定されているため、日本語環境によっては明朝体や意図しないフォントで表示される場合があります。

style.css をプロジェクト直下に作成し、以下のように日本語フォント（Noto Sans JPなど）を指定するか、Frontmatterの fonts 設定をカスタマイズします。

/* style.css */
:root {
  --slidev-theme-font: 'Noto Sans JP', sans-serif;
  --slidev-code-font: 'Fira Code', monospace;
}

---
# slides.md の先頭Frontmatter
fonts:
  sans: 'Noto Sans JP'
  mono: 'Fira Code'
---

3. スライドのテキストやコードが画面下部からはみ出る

Slidevはアスペクト比（デフォルト 16:9）が固定されているため、1ページあたりの情報量が多すぎると画面外にはみ出してしまいます。

• スライドを分割する: 1スライド1メッセージを基本とし、--- でページを分割します。
• フォントサイズをTailwindで調整する: クラス名に text-sm や text-xs を指定して文字サイズを小さくします。
• 2カラムレイアウトを活用する: 横に並べることで縦方向の余白を確保します。

まとめ：Markdownで美しいスライドを最速で作ろう

Slidev（スライデブ）は、Markdownの手軽さとWebフロントエンド技術の強力な表現力を兼ね備えた、エンジニアにとって理想的なプレゼンテーションツールです。

• 手軽に最速でVS Codeだけで作りたい場合: 拡張機能を入れて即座に動く「Marp」が最適です。
• 美麗なコードハイライト、アニメーション、Web公開までリッチに作り込みたい場合: 本記事で紹介した「Slidev」が圧倒的なパフォーマンスを発揮します。

それぞれのツールの特徴や向き不向きを比較検討したい方は、「Markdownスライドツール徹底比較ガイド」も併せてご覧いただき、自分の発表スタイルに最適なツールを選んでみてください。