Slidev：テーマ・実例・PowerPoint へのエクスポート方法
Slidev は GitHub スター 47.6k を誇る、オープンソースで開発者向けのプレゼンツールです。Markdown でスライドを書き、Vue コンポーネントを埋め込み、ブラウザでそのまま発表できます。本記事は率直なガイドです。テーマと実例の仕組み、PDF・PowerPoint エクスポートの実際の挙動、Marp や reveal.js との比較、そして Agent-Native Design Workspace がどこに位置づくのかを解説します。
コードを書く人で、できれば PowerPoint を開きたくないなら、おそらく Slidev に行き当たったことがあるでしょう。「開発者のためのプレゼンスライド」を掲げるこのツールは、まさにその通りのものです。各スライドを Markdown で書き、必要なところに Vue コンポーネントやコードブロックを差し込み、全体を 1 枚の Web ページとして発表します——ホットリロード、シンタックスハイライト、発表者ノート、インタラクティブな埋め込みが最初から備わっています。GitHub スター 47.6k と MIT ライセンスを持つ Slidev は、「Markdown で見栄えのするデッキをどう作るか」への定番の答えのひとつです。
本記事は、それを正直に描いた地図です。Slidev が実際に何なのか、テーマと実例がどう噛み合うのか、PDF と PowerPoint へのエクスポートが実際どう振る舞うのか（落とし穴があります）、ほかのオープンソースの競合とどう比較されるのか、そして——ほとんどの記事が省く部分ですが——このようなツールが最適解でなくなり、別のものが引き継ぐのはどこなのかを解説します。AI とエージェントによるデッキ制作ワークフローの選択肢を検討しているなら、Slidev が何であり何でないかを正確に知っておくと役立ちます。
Slidev とは
Slidev はブラウザで動作し、デッキをドキュメントではなくプロジェクトとして扱います。単一の Markdown ファイルでスライドを書き、--- で各ページを区切ります。そして開発者向けのツールこそが要点です——タイプしながらのホットリロード、行フォーカス付きの一流のコードハイライト、LaTeX や図表、ノート付きの発表者モード、そしてターミナルから起動する開発サーバー。素の Markdown が力尽きるところでは、Vue コンポーネントをスライドに直接埋め込めます——チャート、ライブカウンター、あるいは自作のインタラクティブなウィジェットを、箇条書きの隣にインラインで置けるのです。出力そのものが Web アプリであるため、Web にできることは何でもスライド上で生きられます。
トレードオフはその売り文句にそのまま書かれています。これは GUI ではなく開発者向けツールです。あなたのワークフローはドラッグ用のハンドルが並ぶキャンバスではなく、コードエディタと開発サーバーです——だからこそ、すでに Markdown と Web コンポーネントを好む開発者が手に取り、だからこそ非エンジニアははじき返されます。しかも本当に無料です。アカウント不要、ウォーターマークなし、エクスポート上限なし、席数課金なし。Markdown もその周りのプロジェクトも、すべてあなたのものです。
テーマと実例
Slidev をめぐる検索の多くは、実のところ、全スライドをゼロから設計せずに見栄えを良くしたい、というものです。そこで、各パーツがどう噛み合うのかを説明します。
Slidev のテーマは組み込みの出発点であり、本当の強みです。frontmatter に 1 行書いてテーマを指定すると（たとえば theme: seriph）、Slidev がそれを読み込みます。公式のテーマギャラリーに加え、npm パッケージとして公開されたコミュニティ製のテーマも充実しており、クリーンな編集デザインからダークな開発者カンファレンス風まで揃っています。テーマはコードなので、「カスタム Slidev テーマ」とは、独自のレイアウト・フォント・カラーを備えたテーマパッケージを作るか fork することを意味します——スタイルシートを差し替えるより手はかかりますが、完全にバージョン管理できます。
Slidev の実例は、ひとつの穴埋め式ギャラリーではなく、ドキュメントとコミュニティの中にあります。公式サイト（sli.dev）自体が Slidev で作られており、リポジトリにはスターター用のデッキが含まれ、GitHub には本物のカンファレンス講演があふれていて、そのソースを読んでクローンできます。「slidev examples」を探しているなら、最も信頼できるのは公式デモとドキュメントのソースです——ほぼすべての機能が実際に使われた形で見られます。初心者にとっての落とし穴は、あらゆるコードファーストのツールと同じです。ここでの「実例」は、UI で穴を埋めるテンプレートではなく、クローンして編集するリポジトリなのです。
Slidev を PowerPoint と PDF にエクスポートする
PDF エクスポートは一級の、公式サポートされた機能であり、しっかり動きます。Slidev には組み込みの slidev export コマンド（内部は Playwright）があり、各スライドをクリーンな 1 ページ 1 枚の PDF にレンダリングします——これがサポートされた経路で、PDF はデッキと寸分違わぬ見た目になります。同じ方法で PNG 画像へのエクスポートも可能です。
一方、Slidev を PowerPoint にエクスポートするとなると、期待値の調整が必要です。Slidev は .pptx を生成できますが、その結果はロスありです。各スライドは PowerPoint 上で、編集可能なテキストボックス・図形・レイアウトではなく、1 枚の平らな画像として届きます。ですから、後工程の誰かがあなたのデッキを PowerPoint で開いて編集する必要がある場合——見出しを打ち直す、チャートのスタイルを変える、箇条書きを流し直す——Slidev の .pptx ではそれができません。Slidev はブラウザから発表するために作られており、その編集可能なソースは .pptx ではなく Markdown と Vue です。始める前にこれを知っておけば、同僚が「編集できる PowerPoint がほしい」と言い出した日の、つらい不意打ちを避けられます。
Slidev vs Marp vs reveal.js
スライドをコードとして書く方法は Slidev だけではありません。最も近いオープンソースの選択肢——人々が「Slidev の代替」と言うときに指すもの——は reveal.js と Marp です。そして正直に言えば、Open Design は真っ向から競合するのではなく、まったく別のレイヤーに位置しています。
| ツール | 執筆方法 | 編集可能な .pptx | テンプレート化 | ライセンス |
|---|---|---|---|---|
| Slidev | Markdown + Vue | 不可（PPTX/PDF は画像） | Vue コンポーネント + テーマ | MIT |
| reveal.js | HTML または Markdown | 不可（PDF→PPTX はロスあり画像） | テーマ = CSS/Sass；コミュニティテンプレート | MIT |
| Marp | Markdown のみ | 不可（PDF/PPTX は画像） | Markdown テーマ（CSS） | MIT |
| Open Design | エージェントに説明する | 可——デザインシステムに沿った編集可能な出力 | ファーストパーティのデッキテンプレート | Apache-2.0 |
reveal.js は、より古く、より素朴な兄貴分です。HTML（または Markdown）で執筆し、data 属性でトランジションを組み込みます。Slidev の Markdown の書き心地を、より低レベルな HTML 制御と引き換えにするわけです。最大限の自由がほしく、マークアップを書くのを厭わないなら、reveal.js が自然な選択です。Marp は逆方向へ進みます——Markdown のみ、意図的にミニマルで、コンポーネントはなし——おかげで、スライドがほぼテキストで、フレームワークのことを一切考えたくないときには最速の道になります。Slidev はその中間に位置します。速さのために Markdown ファースト、そしてスライドがもう少し多くを必要とするときに Vue コンポーネントをすぐ呼び出せます。
3 つとも、根本的な形は同じコードファーストのツールです。デッキを書き、ブラウザで発表し、編集可能な PowerPoint 出力は本来の狙いではありません。これらの間で選ぶのは、主にどの執筆面がほしいか——Markdown と Vue、素の HTML、あるいは素の Markdown——の問題であって、一方にあって他方にない機能の問題ではありません。
Open Design が位置づく場所
ここが正直な境界線です。Slidev はデッキを書くことを求めます——すべてのスライドを、Markdown と Vue で。手で書き、バージョン管理され、ライブコンポーネントを備えたスライドがほしいなら、これは長所であり、それが目的なら何もこれに代わるものはありません。
Open Design は別のレイヤーで、しかも私たちが作っている製品です。その点を踏まえて読んでください。これはオープンソース（Apache-2.0）、ローカルファースト、キー持ち込み方式の Agent-Native Design Workspace であり、あなたがすでに使っているコーディングエージェント——Claude Code、Codex、Cursor——の外側に位置します。Markdown とコンポーネントを手書きする代わりに、ほしいデッキを説明すると、エージェントがデザインシステムに沿って編集可能なものを生成します。だからブランドに沿った形で仕上がり、レンダリング済みの成果物として凍りつくのではなく、編集可能なまま保たれます。Open Design は、出発点として使えるファーストパーティのデッキテンプレートも提供しています。
Vue コンポーネントと完全な制御でスライドをコードとして書きたいなら、これは Slidev の代わりにはなりません——それは Slidev の本拠地であり、そこでは実に見事です。Open Design が向くのは、マークアップを書くよりエージェントにブリーフを渡したい、多数のデッキにわたって出力をデザインシステムに合わせたい、そして最後に自分が所有する編集可能なファイルがほしい、という場合です。デッキが、あなたが書いている Markdown そのものであるときは Slidev を。デッキが、エージェントがあなたのために生み出す数多くのブランド準拠の出力のひとつであるときは、ワークスペースを手に取ってください。
FAQ
Slidev は無料ですか？ はい。Slidev は MIT ライセンスのオープンソースです——商用利用も無料、アカウント不要、ウォーターマークなし、エクスポート上限なし。自分のプロジェクトから自分で実行します。
Slidev のテーマはどう使いますか？ スライドの frontmatter でテーマを指定すると（たとえば theme: seriph）、Slidev がインストールして適用します。公式ギャラリーに加え、npm 上のコミュニティテーマがあります。カスタムテーマとは、独自のレイアウト・フォント・カラーを備えたテーマパッケージを作るか fork することを意味します——差し替えるスタイルシートではなく、コードです。
Slidev を PowerPoint にエクスポートできますか？ Slidev は .pptx にエクスポートできますが、ロスありです——各スライドは編集可能なテキストや図形ではなく、平らな画像になります。PDF と PNG のエクスポート（slidev export 経由）が、クリーンで一級の経路です。編集可能な PowerPoint が必要なら、Slidev は適切なソースではありません。
Slidev、Marp、reveal.js——どれを使うべき？ 3 つともオープンソースで、コードファーストで、MIT ライセンスです。Markdown と Vue コンポーネント（スライドにインタラクティブ性が必要なときに最適）なら Slidev、素の HTML 制御なら reveal.js、最もシンプルな Markdown のみのデッキなら Marp を選びましょう。どれも編集可能な PowerPoint 出力を狙っていません。
Slidev を使うにはコードを書ける必要がありますか？ 事実上、必要です。Slidev は開発者向けツールです——ドラッグ＆ドロップの GUI ではなく、テキストエディタとターミナルで、Markdown、Vue、開発サーバーを扱います。デッキを平易な言葉で説明したいなら、それこそ Open Design のようなエージェントネイティブなワークスペースが埋める隙間です。
まとめ
Slidev は 47.6k のスターにふさわしいツールです。無料、MIT ライセンス、開発者ファーストで、Markdown から見栄えのするデッキを作れ、本物のテーマ、ホットリロード、ライブ Vue コンポーネント、そしてクリーンな PDF エクスポートを備えています。ただし覚悟のうえで飛び込みましょう——これはクリックして進むアプリではなく、その中で書くツールであり、「編集可能な PowerPoint へのエクスポート」は得意ではありません。デッキをコードとして執筆したいなら、Slidev（あるいは reveal.js / Marp）は素晴らしい住処です。デッキを説明して、エージェントに、自分が所有する編集可能でブランド準拠のものを生成してほしいなら、そこからは Agent-Native Design Workspace が引き継ぎます。