---
title: "Slidevとは？Markdownでスライドを作る手順とPDF出力・公開までの実装ガイド【2026年版】"
url: "https://www.issoh.co.jp/tech/details/17632/"
published: 2026-09-16
updated: 2026-09-16
categories: ["開発"]
publisher: "株式会社一創"
---

# Slidevとは？Markdownでスライドを作る手順とPDF出力・公開までの実装ガイド【2026年版】

Slidevは、Markdownで書いたテキストをVue 3とVite 8でスライドへ組み立てるプレゼンテーションツールです。読み方は「スライドブ」で、slide と dev を合わせた名前が示すとおり開発者向けに作られています。スライド1枚をテキストの塊として扱えるため、差分がレビューでき、Gitの履歴もそのまま残ります。この記事では作成コマンドからslides.mdの記法、PDF・PPTXへの書き出し、静的サイトとしての公開、AIエージェント連携までを公式ドキュメントで追い、受託開発の現場で入れてよい条件まで整理しました。

## まとめ：Slidevが向く場面とPowerPointを使い続けるべき場面の線引き

Slidevで手数が減るのは、コードやコマンドを載せる技術資料を、複数人でレビューしながら作るチームです。シンタックスハイライトが効いた状態でコードを貼れるうえ、プルリクエストの差分で「どの行を直したか」が見えます。社内勉強会の資料や技術ブログの登壇スライドのように、内容がリポジトリと一緒に育つ資料とは相性が良いでしょう。

逆に、営業提案書のように受け取り側がPowerPointで編集し直す資料には向きません。PPTX形式へ書き出せますが、各スライドは画像として入るため先方では文字を直せないからです。デザイナーが1枚ずつ図版を作り込む資料も、レイアウトの自由度で専用ツールに届きません。この2つに当てはまるなら、無理に寄せず従来のツールを残す判断で構いません。

## SlidevがMarkdownとVueでスライドを組み立てる仕組みと動作要件

Slidevは単なるMarkdownビューアではなく、Viteの開発サーバー上でVueコンポーネントとして各スライドを描画します。だからこそスライドの中にインタラクティブな要素を置けます。

### Vite 8とVue 3で動く構成とNode.js 20.12以上という前提条件

公式の[Getting Startedページ](https://sli.dev/guide/)は、SlidevをWebベースのスライド作成・発表ツールと説明し、動作要件としてNode.js 20.12.0以上を挙げています。npmレジストリで配布中の@slidev/cliを確認すると、2026年9月時点の版は52.19系で、engines.nodeは同じく20.12.0以上、依存パッケージはvueが3.5系、viteが8.2系でした。

つまり中身は、Viteでバンドルされる普通のVueアプリケーションです。ビルドツール側の挙動を知っておくと設定でつまずいたときに追いやすいので、[Viteとは？Reactの環境構築手順とVite 8の変更点・create-react-appからの移行](https://www.issoh.co.jp/tech/details/3587/)も併せて押さえておくと理解が早まります。Node.js 18系が残っている端末では動かないため、社内へ配る前に版を確認しておきましょう。

### npm init slidevでプロジェクトを作りdevサーバーを起動する

雛形の作成コマンドは4系統あり、公式ドキュメントはpnpm・npm・yarn・bun・denoの各形を併記しています。対話形式でプロジェクト名とテーマを選ぶと、slides.mdとpackage.jsonが置かれたディレクトリができあがります。

```
npm init slidev@latest
cd slidev-demo
npm run dev -- --port 3030 --open
```

開発サーバーの既定ポートは3030で、[Slidev CLIのリファレンス](https://sli.dev/builtin/cli)によれば`--open`でブラウザが立ち上がります。グローバルにインストールすれば、`slidev slides.md`と単体で呼ぶ形も利用可能です。コマンド操作そのものに不慣れなメンバーへ配るなら、[CLIとは？コマンドライン操作の仕組みとGUIとの使い分けを実装視点で解説](https://www.issoh.co.jp/tech/details/13574/)を先に読んでもらうと導入時の質問が減ります。

## slides.mdのスライド区切りとfrontmatterで体裁を決める書式

執筆の対象はslides.md 1枚です。ここにスライド全体が縦に並び、区切り記号でページが分かれます。

### 空行で囲んだ区切り記号とheadmatterでテーマを指定する

[Syntax Guide](https://sli.dev/guide/syntax)はスライドの分割を「前後を空行で挟んだ`---`」と定めています。ファイル先頭のブロックはheadmatterと呼ばれ、テーマ・タイトル・背景画像・レイアウト・CSSクラスをまとめて指定できます。各スライドの直前にも同じ形でfrontmatterを置き、そのページだけレイアウトを変えられる構造です。

```
---
theme: seriph
title: 社内勉強会の資料
class: text-center
---

# 見出しスライド

---
layout: two-cols
---

# 左カラム

::right::

# 右カラム
```

`src`を書けば別ファイルのMarkdownを差し込めるため、章ごとにファイルを割って担当を分ける進め方も取れます。エディタ側でプレビューしながら書きたい場合の選択肢は[Markdown Live Editorの選び方｜VS Code拡張と無料ツールを比較](https://www.issoh.co.jp/tech/details/11645/)にまとめました。

### v-clickとv-clicksで箇条書きを段階表示させる記法

発表中に要素を1つずつ出す動きは、[Animationsのドキュメント](https://sli.dev/guide/animations)が定義するディレクティブで書きます。単体なら`v-click`、箇条書き全体をまとめるなら`v-clicks`で囲み、`depth`でネストの深さ、`every`で同時に出す件数を調整する形です。

```
<v-clicks depth="2">

- 現状の課題
  - 手作業の集計
- 解決の方針

</v-clicks>

<div v-click="3">3クリック後に出る補足</div>
<div v-click.hide>クリックすると消える注記</div>
```

相対指定の`at="+2"`や絶対指定の`v-click="3"`で登場順を細かく決められ、frontmatterに`clicks`を書けばそのページのクリック総数を固定できます。動きを付けるほど後述のPDF出力で枚数が増えるので、資料の配布形態を決めてから作り込む順序にしてください。

## PDFとPPTXへエクスポートする手順と依存パッケージの注意点

発表そのものはブラウザで済みますが、配布資料を求められる場面はまだ多く残ります。Slidevは4形式への書き出しを備えています。

### playwright-chromiumを入れてslidev exportを実行する

[Exportingのドキュメント](https://sli.dev/guide/exporting)は、PDF・PPTX・PNGへの書き出しにplaywright-chromiumが要ると明記しています。初回はこの追加を忘れて失敗しがちな箇所です。書き出し形式は`--format`で選び、既定はPDFになります。

```
npm i -D playwright-chromium
npx slidev export --with-clicks --with-toc --output deck.pdf
npx slidev export --format png --range 1,6-8
npx slidev export --format pptx --dark --timeout 60000
```

`--with-clicks`は段階表示を複数ページへ展開する指定で、資料として配るなら付けておくと説明の流れが残ります。`--with-toc`はPDFのアウトラインを作り、`--range`は「1,6-8」のような範囲指定です。描画が間に合わずに白いページが混ざるときは`--timeout`と`--wait`を伸ばして再実行します。

### PPTXが画像として出る制約と顧客提出時に確認すべき原本の編集要件

公式ドキュメントはPPTX出力について、スライドが画像として含まれると説明しています。ファイルの拡張子はpptxでも、受け取った側にできるのはページ送りだけで、文字の修正やアニメーションの差し替えはできません。この前提を共有しないまま提出すると、先方で「編集できない」と差し戻されます。

提出先が原本の編集を求める資料なら、Slidevで作る対象から外すのが無難でしょう。編集不要の読み物として渡す資料であれば、PDFで配るほうが体裁の崩れも起きません。社内向けの技術資料はPDF、社外提案はPowerPointという住み分けを先に決めておくと、作ってから形式で悩む時間を減らせます。

## slidev buildで静的サイト化しGitHub Pagesへ公開する設定手順

スライドをURLで共有できると、資料を配る手間がなくなります。Slidevはビルド1回で静的なSPAを吐き出します。

### distへの出力とサブパス配信で白画面を防ぐためのbaseパスの指定

[Building and Hostingのドキュメント](https://sli.dev/guide/hosting)によると、`slidev build`の出力先は既定でdistディレクトリです。ここで落とし穴になるのが`--base`で、サブディレクトリへ置く場合はスラッシュで始まりスラッシュで終わるパスを渡す決まりになっています。

```
npx slidev build --base /talks/2026-slidev/ --out dist
npx serve dist
```

この指定を省いてサブパスへ配置すると、アセットの参照先がドメイン直下を向いて白画面になります。SPAとして配るため、NetlifyやVercelでは配信時のリライト設定も必要です。公式は`netlify.toml`で公開ディレクトリをdistに、`vercel.json`で全パスを`/index.html`へ書き換える例を示しています。Viteを使う別系統の静的サイト構成を比べたい場合は[Astroフレームワークとは？特徴と使い方・Next.jsとの使い分けを解説【2026年版】](https://www.issoh.co.jp/tech/details/15369/)が参考になります。

### GitHub Actionsでビルドから配信までを自動化する

公式ドキュメントはGitHub Pagesへの配信例として、mainまたはmasterブランチへのプッシュとworkflow\_dispatchをトリガーにビルドし、Pages公式アクションでデプロイするワークフローを載せています。permissionsには`pages: write`と`id-token: write`が要り、concurrencyはpagesグループで直列化する構成です。baseパスにはリポジトリ名を流し込みます。

```
- name: Build
  run: npm run build -- --base /${{ github.event.repository.name }}/

- uses: actions/upload-pages-artifact@v5
  with:
    path: dist

- name: Deploy to GitHub Pages
  uses: actions/deploy-pages@v5
```

公開先は`https://<ユーザー名>.github.io/<リポジトリ名>/`になります。公式例はチェックアウトにv7、setup-nodeにv6を指定し、依存の導入とビルドを@antfu/niのnci・nrで呼ぶ形ですが、npmスクリプトへ置き換えても結果は変わりません。社外に出せない内容を含む資料では、リポジトリとPagesの公開範囲を必ず確認してください。プライベートリポジトリでもPagesの設定次第で誰でも見られる状態になり得るため、配信の自動化を組むときは権限の既定値を先に点検する順序が安全です。

## MCPサーバー連携でAIエージェントにスライドを編集させる手順

2026年に入って加わったのがAIエージェント連携です。編集作業の一部を任せられるようになりました。

### slidev mcpと\_\_mcpエンドポイントをエージェントへ登録する

[Work with AIのドキュメント](https://sli.dev/guide/work-with-ai)は、開発サーバー稼働中に`http://localhost:3030/__mcp`をエージェントへ指すよう案内しています。単体で立ち上げる`slidev mcp`も用意されており、こちらはCLIのサブコマンドとして呼びます。

```
npx slidev mcp slides.md
claude mcp add --transport http slidev http://localhost:3030/__mcp
```

提供されるのはスライドの検査・編集・並べ替え・移動を行う構造化ツール群で、VS Code拡張からは有効なスライドの情報取得やタイトル検索も使えます。公式スキルとして、記法・クリックアニメーション・Monacoエディタ・MermaidやLaTeXの図表・組み込みレイアウト・エクスポートの知識が配られている点も押さえておくと、エージェントへの指示が短く済みます。もっとも、出来上がった構成をそのまま信じず、発表前に自分でページ送りを確認する工程は残してください。

## Marp・reveal.js・PowerPointとSlidevの守備範囲を比べる観点

Markdownでスライドを作る道具は複数あり、選ぶ基準は「どこまでWeb技術を持ち込むか」に集約されます。Slidevはその中でもVue寄りに振り切った位置にあります。

| 観点      | Slidev                 | Marp          | reveal.js | PowerPoint |
| ------- | ---------------------- | ------------- | --------- | ---------- |
| 書く対象    | Markdown＋Vue           | Markdown＋CSS  | HTML中心    | GUI操作      |
| 実行環境    | Node.js 20.12以上        | CLI／VS Code拡張 | 静的サイト     | デスクトップ     |
| 対話要素    | Vueコンポーネントを配置可         | 静的表示が中心       | プラグインで追加  | アニメーション機能  |
| PDF出力   | playwright-chromiumで生成 | CLIから直接       | 印刷経由      | 標準機能       |
| 編集可能な配布 | PPTXは画像化               | PPTXは画像化      | HTMLのまま   | そのまま編集可    |

Markdown中心で軽く済ませたいならMarp、スライドの中でVueの状態を持ちたいならSlidev、という切り分けになります。Vue側の知識をそのまま持ち込める点は、[Nuxtとは：Vue.jsとの違い・レンダリング方式・4系への移行手順と採用判断を実装視点で解説](https://www.issoh.co.jp/tech/details/15790/)を読むチームにとって学習量が少なく済む理由でもあります。

## 受託開発の現場でSlidevを採用してよい条件と見送るべき場面

道具として面白くても、案件へ持ち込む判断は別です。運用に乗せる前に見ておきたい条件を挙げます。

### 技術資料を共同編集するチームの環境・配布形式・レビューに関する3点の採用条件

採用してよいのは、次の3点が揃う場面です。1つ目はメンバー全員にNode.js 20.12以上が入り、Gitでの共同編集に慣れていること。2つ目は資料の最終形態がPDFかWeb公開で、PowerPointでの再編集を求められないこと。3つ目はコードやコマンドを載せる技術資料であり、レビューで差分を追う価値があることです。

この3点が揃うなら、資料をリポジトリへ入れて実装物と同じ流れで扱えます。プルリクエストで表現を直し、マージしたらGitHub Actionsが公開まで通す構成は、設計書や手順書を扱う流れと同じ形で運用可能です。フロントエンドの構成を社内の業務システムへ広げる段階では、[業務用・Webアプリ開発](https://www.issoh.co.jp/service/apps/business/)のように実装と運用をまとめて引き受ける体制で進めると、環境差による手戻りを抑えられます。

### 提出先の編集要件と発表者の環境から見送りを選ぶべき2つの場面と代替手順

見送る場面の1つ目は、提出先が編集可能なPowerPointを指定している案件です。PPTXが画像で出る以上、要件を満たせません。2つ目は、発表者が非エンジニアで、ローカル環境の構築から説明する必要がある場面です。スライド1枚を直すたびに開発サーバーの起動を頼むことになり、作成の速さで従来のツールに負けます。

折衷案として、エンジニアが作る技術パートだけSlidevで書き、PDFにしてから既存資料へ差し込む進め方も取れます。判断を先送りにしたまま両方を並行させると、同じ図版が2か所で食い違うため、資料ごとにどちらで作るかを決めてから着手してください。

## よくある質問

Slidevの導入を検討する段階で挙がりやすい質問を、公式ドキュメントの記述をもとにまとめました。

### Slidevの読み方と名前の由来は何ですか？

公式ドキュメントは発音記号を添えて「slide + dev」と説明しており、日本語では「スライドブ」と読まれています。開発者がプレゼンテーションを作るための道具、という位置づけをそのまま名前にした形です。表記は先頭だけ大文字のSlidevで、コマンド名は小文字のslidevになります。

### 既存のPowerPointファイルを取り込めますか？

取り込みの機能は用意されていません。書き出し方向はPDF・PPTX・PNG・Markdownの4形式で、逆方向の変換は対象外です。既存資料を移す場合は、本文をMarkdownへ書き写し、図版は画像として配置し直す手順になります。ページ数が多い資料では、移行そのものが工数になる点を見込んでおいてください。

### 日本語フォントが崩れるときはどう直しますか？

テーマ側のフォント指定が欧文向けになっている場合に起こります。headmatterの`fonts`で日本語フォントを指定するか、テーマのCSSを上書きして解決します。PDF出力時だけ崩れるときは、描画待ちの不足も疑ってください。`--wait`でレンダリング前の待機を足すと直る場合があります。

### 発表先のPCにNode.jsが無くても発表できますか？

できます。`slidev build`で静的なSPAを作れば、ブラウザだけで開けます。オフラインで使うなら、ビルド済みのdistディレクトリをUSBメモリなどで持ち込み、ローカルの簡易サーバーで開く形が確実です。PDFへ書き出して持参する備えを重ねておくと、当日の環境トラブルに強くなります。

### スライドを複数人で分担して書けますか？

書けます。frontmatterの`src`で外部のMarkdownを読み込めるため、章ごとにファイルを分けて担当を割り当てる共同執筆が可能です。ファイルが分かれていればGitの衝突も起きにくくなります。テーマや共通レイアウトは1か所へ寄せ、各担当は本文だけを触る分担にすると、体裁のばらつきを抑えられます。

## 関連記事

- [Viteとは？Reactの環境構築手順とVite 8の変更点・create-react-appからの移行](https://www.issoh.co.jp/tech/details/3587/)：Slidevが土台に使うビルドツールの解説です
- [Nuxtとは：Vue.jsとの違い・レンダリング方式・4系への移行手順と採用判断を実装視点で解説](https://www.issoh.co.jp/tech/details/15790/)：Vue側のフレームワークとの関係を押さえられます
- [Astroフレームワークとは？特徴と使い方・Next.jsとの使い分けを解説【2026年版】](https://www.issoh.co.jp/tech/details/15369/)：Vite系で静的サイトを作る別の選択肢です
- [Markdown Live Editorの選び方｜VS Code拡張と無料ツールを比較](https://www.issoh.co.jp/tech/details/11645/)：slides.mdを書く環境の候補です
- [CLIとは？コマンドライン操作の仕組みとGUIとの使い分けを実装視点で解説](https://www.issoh.co.jp/tech/details/13574/)：slidevコマンドを扱う前提知識です

---

出典: [Slidevとは？Markdownでスライドを作る手順とPDF出力・公開までの実装ガイド【2026年版】](<https://www.issoh.co.jp/tech/details/17632/>)（株式会社一創）