Slidevを使ってプレゼンテンプレートを作ってみた

Markdownでプレゼン資料を作れる「Slidev」を使ってみました。というのもAIをつかうなら見た目と情報の分離ができるものを使ったほうが制御しやすいなと。見た目は固定して、情報の記述に集中してもらうというのが現段階ではよさそうな感じが個人的にはしています。

まぁ最近はGPT-6 Astraとかいう化け物が出てきて、GUIをガンガン触ってくれるものもありますが、自分の使い方ではトークン消費が多く、常用するのは難しそうです。

せっかくなので、作ったものの紹介と、実際にSlidevを触ってみて感じたことを書いておきます。

Slidevとは

Slidevは、Markdownを使ってプレゼンテーションを作れるツールです。ほかにもいろいろあるようですが、シンプルで使いやすそうなのを選びました。デザインに凝りたい人はもっといろいろと方法はあると思います。

Vueコンポーネントが使えるため、特に技術系の発表資料とは相性がよさそうです。完成したスライドはブラウザで表示するだけでなく、PDFなどへの書き出しや、静的なWebサイトとしてのビルドもできます。

このブログもMarkdownで記事を書いてHugoでHTMLへ変換しています。仕組みは違いますが、テキストを元に完成品を生成するという点は、このブログの技術構成と少し似ています。

Marpとの違い

Markdownでスライドを作るツールといえば、Marpもあります。ざっくり違いを書いておくとこんな感じです。

Marpは、Markdownをスライドへ変換するという役割が分かりやすいです。シンプルで本当にぱっと書きたい場合はMarpのほうがよさそう。

一方のSlidevは、Markdownを入口にしつつ、中身はかなりWebアプリ寄りです。Vueコンポーネントを置いたり、ページごとに独自レイアウトを選んだりできるので、作り込める範囲が広いです。その代わり、凝ったことを始めるとVueやCSSを結構触ることになります。私はそのあたり詳しくないのでAIに丸投げしました。

単純な発表資料を素早く作ってPDFなどで渡すなら、Marpのほうが構成は分かりやすいと思います。Vueコンポーネントを使ってブラウザ上でインタラクティブに見せることや、複数の独自レイアウトを部品として使い回すことまで考えるなら、Slidevのほうが自由度は高いです。

今回のテンプレートでは、12種類のレイアウトをVueファイルとして用意し、GitHub Pagesでそのままプレビューできるようにしたかったので、Slidevのほうがやりたいことに合っていました。どちらが上というより、好きなものを使えばいい気がします。

作ったのはハムスターのテンプレート

今回作ったのが、Slidev ハムスターテンプレートです。実際のスライドもブラウザで見られるようにしています。

別タブでスライドを見る

12種類のレイアウトを用意した

テンプレートには17枚のサンプルスライドを入れ、用途に応じて選べる12種類のレイアウトを用意しました。

• 表紙、目次、章扉、終了ページ
• 写真と文章を左右に分けるページ
• 見出しを左右または上部へ置くページ
• 2列、横3列、縦3段のページ
• コードと解説を並べるページ
• 表と補足文を並べるページ

作りたいページに近いサンプルを複製し、文章と画像を差し替えて使う想定です。使いたいテンプレを選んで、内容を埋めるみたいな感じ。

例えば、2列のページはこのように書けます。

---
layout: two-columns
---

::left::

## 左側の内容

ここに説明を書きます。

::right::

## 右側の内容

ここに説明を書きます。

::title::

# スライドの見出し

Slidevでは、layouts/に置いたVueファイルから独自のレイアウトを作れます。詳しい仕組みはSlidev公式のカスタムレイアウト解説にあります。今回はページの構造をVue、配色や余白などをCSSへ分けました。資料ごとにCSSをいじり回さず、内容の編集へ集中できるようにしたかったからです。

テンプレートの使い方

このテンプレートを動かすには、Node.js 22.12以上が必要です。GitHubのリポジトリにある「Use this template」から自分用のリポジトリを作り、パソコンへクローンします。その後、プロジェクトのフォルダーで次のコマンドを実行します。

npm install
npm run dev

ブラウザでプレビューが開いたら、基本的にはslides.mdを編集するだけです。写真はpublic/images/へ置き、各ページの設定に画像のパスと代替テキストを書きます。

layout: split
side: right
image: /images/example.jpg
imageAlt: 画像の内容を説明するテキスト

PDFにしたい場合はnpm run export、Webサイトとして出力する場合はnpm run buildを使います。GitHub Actionsの設定も入れてあるので、リポジトリ名に合わせて公開先のパスを直せばGitHub Pagesへ公開できます。

詳しい手順や各レイアウトの記法は、リポジトリのREADMEへまとめています。

実際に使ってみて

一番いいのは変更履歴をGitで管理できること。あとAIの補助を受けやすいこと。仕事では主にパワポを使ってますが、AIにいじらせようとするとトークンコストとか制御に時間がかかって内容の作成に集中できないことがあるので、こーゆーのが使えるといいなと思ったり。まぁ仕事の場合はいろいろ事情があるので型にはめられたら苦労はしないのだけれど。 特にコードを結構載せる資料なら、Slidevを選ぶ理由はかなりあると思います。楽です。

一方で、デザインを細かく作り込もうとすると、結局VueやCSSの知識は必要になります。Markdownだけで何でもできるというより、内容はMarkdown、見た目はWeb技術で作れるツールという印象です。私はWeb周りは詳しくない（特にCSS）ので、デザインに凝ろうとするとパワポでいいやってなります（細かい調整とかCSSでやろうとすると頭が禿げそうになる）。

あと、AIに特に何も指定せずスライドを作らせると、なんかフォントや文字サイズが小さくなる。なんでだろ。普段自分がスライドで文字がでかすぎるだけなのだろうか。

そのあたりは「文字を大きくする」「読みやすくする」と個別に指摘しながら調整し、見やすさを意識しています。

自分は美的感覚もビミョーなので、Microsoftが公開しているPowerPointのプレゼンテーションテンプレートをAIに食わせて、余白や見出し、写真の置き方など、レイアウトを考えるときの参考にしました。

また、スライドの表示領域は固定です。文章を入れすぎると容赦なく窮屈になります。このあたりはPowerPointでも同じですが、例外的な対応というか柔軟な対応は難しいです。

まとめ

Slidevは、MarkdownやGitに慣れている人が、コードや図を含むプレゼン資料を作るにはかなり面白い選択肢でした。最初にレイアウトを整える手間はありますが、一度テンプレートにしてしまえば、次からは内容の差し替えだけで使い回せます。

今回のテンプレートのソースコードはMIT Licenseで公開しています。商用・非商用を問わず変更して使えますので、ハムスター付きのスライドが必要な謎の状況になったらどうぞ。

なお、サンプルに含まれる写真の著作権は各著作者に帰属します。実際の資料へ写真を使う場合は、READMEに記載したクレジットとライセンスも確認してください。