書いたブログがそのままスライドになる環境を作ってみた【Slidev + Vercel + GitHub + Claude Code】

AI WSL node.js コンピュータ 勉強会

スライド作成って、地味につらい🥲

PowerPointやKeynoteを立ち上げて、テンプレ選んで、フォント揃えて、配置をいじって…で半日…1日が溶ける、みたいな経験は誰でも一度はあると思います😅 特に勉強会や講義で毎週新しいスライドを作る立場だと、これがそのまま生産性のボトルネックになるんですよね🕙

最近は「生成AIに頼めばスライドも一発」みたいな話も増えてきましたが、出来上がったものを見るとどこか他人事というか、自分らしさが薄いんです🤔AIが知っている一般論を綺麗にまとめてくれているだけ、と言えば当たり前なんですが、それを自分が話すスライドとして使うと「自分が話す意味」が抜け落ちている感じがしてしまって😅

自分はブログをわりとマメに書いているので、そこに溜まっている自分の言葉をそのまま活かせないか、と考えました。ブログ記事を起点にしてスライドに変換すれば、AIで時短しつつ、自分の体験や視点はそのまま残せるはずです。

そこで今回は、

  • Markdownだけでスライドが書ける
  • 自分のブログ記事を生成AIに渡して、自分らしさを残したままスライド化できる
  • GitHubにpushしたら勝手に公開される

という環境を作ってみました。使うのはSlidev(スライド本体)とVercel(ホスティング)、そしてAI（Claude Code）(ブログ→スライド変換エンジン)です。

この環境ができあがると「明日の勉強会のスライドが、ブログ記事から数分で公開URLまで届く」という状態になります🤗 所要時間は順調なら15〜30分くらい。途中で詰まりそうなポイントは先回りで書いておきます。

この方法で作成したスライドは以下を参照してください

my-slides-two.vercel.app

⚠️ 本記事の情報は2026年6月時点のものです。SlidevもVercelもアップデートが早いので、最新情報はSlidev公式ドキュメントやVercel公式ドキュメントも併せて確認してみてください。

1. 全体像

最終的に出来上がるワークフローはこんな感じです。

ポイントは2つあります。

左上→起点は自分のブログ記事です。普段書きためている自分の言葉・体験・視点が、そのまま素材になります。

右上→到達点は自分らしさを保ったスライドです。AIに作ってもらった他人事のスライドではなく、自分が話す意味のあるスライドが公開URLまで届きます。

AI機能（Claude Codeなど）は「構造変換」を担当します。AI が中身をゼロから書くのではなく、自分の中身をスライド構造に再構成するだけ。だから自分らしさが保たれる（であろう）、という分業構造になっています。

自分がやるのは「ブログ記事をAIに渡してスライド化して、git pushする」だけで、それ以外は自動でやってくれます。

2. 事前準備

ハンズオンに入る前に、以下が揃っているかを確認しておきます。

2.1 Node.jsのインストール確認

WSL(Ubuntu)でもWindowsネイティブでも、どちらでもOKです。自分はWSL派なので、以下はWSL前提で書いていきますが、Windowsのコマンドプロンプトでもほぼ同じ流れになります。

$ node -v
v22.16.0

⚠️ SlidevはNode.js 18以上が必須です。バージョンが18未満だと動かないので、WSLの場合はnvmでアップデートしておきましょう。

未インストールならWSLは以下のような流れで入れられます。

$ curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
$ sudo apt install -y nodejs

WindowsネイティブならNode.js公式からLTS版をインストールしてみてください。

2.2 GitHubアカウント

すでにお持ちの方が多いと思いますが、未取得なら https://github.com から作成しておきます。

2.3 Vercelアカウント

これは後ほどの手順で作成します。GitHubアカウントでログインできるので、追加でメアドを用意する必要はありません。

3. Slidevプロジェクトを作成する

WSLのターミナルで、スライド置き場として使いたい場所に移動します。

$ cd ~/projects   # 自分の作業ディレクトリ
$ npm init slidev@latest

@latestを付けることで、Slidevの最新版テンプレートを取りに行きます。バージョン指定したい場合は@0.49のように書きます。

実行すると、対話形式でいくつか聞かれます。

✔ Project name: › s
✔ Select a package manager: › npm
✔ Install and start it now? › Yes
質問 回答 補足
Project name 任意(例: my-slides) テーマで命名すると分かりやすい
Package manager npm pnpmも可、お好みで
Install and start it now Yes これで自動で立ち上がる

Yesを選ぶと、依存パッケージのインストールが始まって、最後にブラウザが自動で開きます。

Welcome to Slidevのデモスライドが表示されればセットアップ成功です🤗

3.1 動作確認

矢印キーで次のスライドに進めるか、Fキーでフルスクリーンになるかを試してみてください。これだけでも「あ、ちゃんとプレゼンツールとして動いてる」というのが体感できます。

⚠️ ブラウザを閉じても、ターミナル側の開発サーバーは動き続けています。次のステップに進む前に、いったんCtrl + Cで停止しておくと混乱しません😅

4. Slidevの中身を覗いてみる

プロジェクトのフォルダに移動して、中身を見てみます。

$ cd my-slides
$ ls

出てくるファイルは色々ありますが、毎日触るのはslides.mdの1つだけです。これがSlidevの最大の特徴なんですよね。

4.1 slides.mdの中身を見る

VS Codeで開いてみます。WSLなら以下のコマンドでWindows側のVS CodeがWSLのフォルダを開いてくれます(WSL拡張が必要)。

$ code .

slides.mdを開くと、最初はこんな構造になっています。

---
theme: seriph
title: Welcome to Slidev
---

# Welcome to Slidev

Presentation slides for developers

---

# What is Slidev?

Slidev is a slides maker and presenter ...

---

このファイルのポイントは2つで、

  1. 冒頭の---で囲まれた部分(Frontmatter): スライド全体の設定。テーマやタイトルなど
  2. 本文中の---: スライドの区切り。Markdownと同じ感覚です

これだけです。reveal.jsと違って、HTMLタグや独自のセクションタグを書く必要がありません。

4.2 試しに編集してみる

ターミナルでもう一度開発サーバーを起動します。

$ npm install #問題があればこれを実行してください。
$ npm run dev

ブラウザが開いた状態でslides.mdを編集して保存すると、保存した瞬間にブラウザがリロードされて変更が反映されます。

このリアルタイム反映、PowerPointにはない快感ですね🤩

例えば2枚目をこんな感じで書き換えてみます。

---
theme: seriph
fonts:
  sans: 'Noto Sans JP'
  serif: 'Noto Serif JP'
---

# 日本語タイトルのテスト

資料をアップデートしました。
これは日本語の本文です。フォントがちゃんと指定されているか確認できます。

---

保存するとブラウザのスライドが即座に更新されるはずです。これがSlidevのリズムのようです。

5. Gitで管理を始める

ここからは公開に向けた作業です。まずローカルでGitの初期化をしておきます。

$ git init
$ git add .
$ git commit -m "Initial commit: Slidev プロジェクト作成"

👉️Slidevのテンプレートには.gitignoreが同梱されていて、node_modules/などは自動で除外されます。ここは特に気にしなくてOKです。

5.1 GitHubにリポジトリを作成

ブラウザでGitHubにアクセスして、新しいリポジトリを作ります。

  1. GitHubの右上「+」 → New repository
  2. Repository name: slides-claude-code(プロジェクト名と揃える)
  3. Public / Private: どちらでも可(Vercelは両方対応)
  4. READMEや.gitignoreは追加しない(ローカル側にすでにあるので衝突回避)
  5. Create repositoryをクリック

作成後の画面に出てくるコマンドをコピペします。

$ git remote add origin https://github.com/あなたのID/my-slides.git
$ git branch -M main
$ git push -u origin main

⚠️ GitHubは2021年以降、HTTPS認証でのパスワード入力を廃止しています。git push時にパスワードを聞かれたら、それはパスワードではなくPersonal Access Tokenを入れる必要があります。GitHubのSettings > Developer settings > Personal access tokensから発行できます。もしくはGitHub CLI(gh)でログインしておくと認証が自動で通るのでラクですね。

pushが通ったら、GitHubのリポジトリページにslides.mdが並んでいるはずです。

6. Vercelでデプロイする

いよいよ公開です。ここが一番楽しいパートなんですよね🤗

6.1 Vercelにログイン

  1. https://vercel.com にアクセス
  2. 右上のSign UpまたはLogin
  3. Continue with GitHubを選択
  4. GitHubの認証画面が出るのでAuthorize

これでVercelのダッシュボードに入れます。

6.2 プロジェクトをインポート

  1. ダッシュボードのAdd New... → Projectをクリック
  2. GitHubリポジトリの一覧からmy-slidesを探す
  3. 見つけたらImportをクリック

⚠️ リポジトリが一覧に出ない場合は、VercelにGitHubのアクセス権限が足りていません。「Adjust GitHub App Permissions」のリンクから、対象リポジトリのアクセスを許可してください。Publicリポジトリでも明示的な許可が必要なんですよね😅

6.3 Build設定の確認

ImportするとBuild設定の画面が出ます。基本的にはそのままでOKですが、1点だけ確認しておきます。

項目 期待値
Framework Preset ViteまたはOther
Build Command npm run build
Output Directory dist
Install Command npm install

⚠️ Output Directoryがdistになっているか必ず確認してください。Slidevはnpm run buildの結果をdist/に出力します。ここがbuildやpublicになっているとデプロイ後に404になります。

確認できたらDeployをクリックします。

6.4 ビルドが流れる

ログがリアルタイムで流れて、最後に「Congratulations! Your project has been deployed.」みたいな祝賀画面が表示されます🎉

所要時間は1〜3分くらいです。

6.5 公開URLを開く

Vercelが自動でhttps://slides-claude-code-ueponx.vercel.appのようなURLを割り当ててくれます。クリックして、ローカルで見ていたスライドが世界に公開されていることを確認してみてください。

これでスライドは完成です🤗

]

7. これ以降の更新フロー

セットアップは一度きりで、これ以後の運用は超シンプルになります。

$ # slides.md を編集する
$ vim slides.md  # または code slides.md

$ # コミットして push
$ git add slides.md
$ git commit -m "Update: スライド内容を更新"
$ git push

pushした瞬間、VercelがGitHubの変更を検知して、自動でビルド&デプロイしてくれます。自分は何もしません。 ブログ更新と本当に同じテンションです。

⚠️ 即時の反映とはならないので、pushしてから2〜3分後に公開URLをリロードしてみてください。変更が反映されているはずです。

Vercelのダッシュボードを開けばビルド状況がリアルタイムで見られますが、慣れてくると確認すらしなくなります😅

8. 生成AIとの連携テクニック

ここからが本題です。Slidevは中身がslides.md1ファイルなので、生成AIへの渡し方が極限までシンプルになるんですよね。

8.1 ブログ記事をスライドに変換する(本命の使い方)

ここがこの記事の本命です。

冒頭でも書きましたが、ゼロからAIにスライドを書かせると、当たり障りのない一般論になりがちなんですよね。せっかく作った自分のスライドなのに「自分が話す意味」が薄くなってしまう。AIが知っていることを綺麗にまとめてもらっただけ、というスライドは登壇していて気持ちが乗らないというか🫠

そこで自分が使っているのが、ブログを起点にしてスライド化するやり方です。普段はてなブログに書いている Markdown 原稿をAIに渡して「これをスライドにして」と頼むと、自分の言葉や体験談を保ったまま、構造だけスライド向けに再構成してくれるんですよね。

具体的なプロンプトはこんな感じです。

以下のブログ記事を、Slidev用の15分プレゼンスライドに再構成してください。
読者層は技術勉強会の参加者です。

【出力ルール】
* Slidev の Markdown 形式(--- でスライド区切り)
* Frontmatter には theme: seriph を指定
* 1スライド 1メッセージ、箇条書きは最大5項目まで
* はてな記法([:contents]、[asin:xxx]等)は除去
* 元記事の体験談・失敗ネタは優先的に残す

【ブログ記事】
(ここにブログ記事の Markdown を貼り付け)

ポイントは「元記事の体験談・失敗ネタは優先的に残す」のところで、ここを明示しておくとAIが自分らしさの部分をちゃんと残してくれるんですよね。これがないとAIは「整然とした要約」を作ろうとして、せっかくの個性のあるエピソードを削ってしまいがちです😅

返ってきたMarkdownをslides.mdにコピペすれば、勉強会用スライドの完成です。

note や Qiita、Zenn に書いた記事も同じやり方で転用できるので、「書いた記事資産をスライドにも転用」できる感じになります🤩

8.2 ゼロからスライドを生成する(補助的な使い方)

「まだブログには書いてないけど、スライドだけ作りたい」という場合は、ゼロから生成も使えます。ただ、これは前述の通り他人事感が出やすいので、自分は補助的にしか使っていません。

以下のテーマで Slidev 用のスライドを作ってください。

【テーマ】Claude Code 入門
【対象】非エンジニアの大学生
【時間】15分
【スライド数】10枚程度
【出力形式】Slidev の Markdown 形式
* Frontmatter には theme: seriph を指定
* 各スライドは --- で区切る
* 必要に応じてコードブロックや箇条書きを使う

⚠️ 出来上がったスライドは「叩き台」として使うのがおすすめです。そのまま使うとどうしても一般論っぽくなるので、自分の体験や具体例を後から差し込んでいくひと手間が、最終的なクオリティを決めると思います😅

8.3 Claude Codeで半自動運用(発展編)

ここからは発展編で、Claude Codeを併用するパターンです。リポジトリのルートにCLAUDE.mdを置いておくと、Claude Codeが運用ルールを読んでくれます。

# このリポジトリのルール

## ディレクトリ構成
* `articles/`: ブログ原稿(変換元)
* `src/`: 生成されたスライド(出力先)
* `slides.md`: Slidev エントリーポイント

## スライド変換タスク
「articles/XXX.md をスライド化して」のような依頼があった場合、
以下のルールで src/slides-YYYYMMDD-XXX.md を生成する。

* Slidev の Markdown 形式(--- でスライド区切り)
* Frontmatter には theme: seriph
* 1スライド 1メッセージ、箇条書きは最大5項目まで
* コードブロックは最大10行・要点のみ
* はてな記法は完全に除去
* **書き手の体験談・失敗ネタは優先度高で残す**
  (1スライドに集約せず、本論の各セクションに散らす)

## トンマナ
* です・ます調を基本
* カジュアルだが砕けすぎない
* ⚠️ 💡 🚀 などのマーカーは要所に
* スライドタイトルに `【】` は使わない

## Git 操作
* `git add` / `git commit` までは自動実行
* `git push` は人間が確認後に手動

これがあると、Claude Codeに「articles/20260518-mcp.md をスライドにして」と頼むだけで、ルールに沿った状態で src/ 配下にスライドファイルが生成され、コミットまで自動で進みます。あとはレビューして問題なければgit pushするだけ。

CLAUDE.mdに「体験談・失敗ネタは優先度高で残す」と明示しておくと、AIが自分らしさの部分をちゃんと守ってくれるんですよね。ここがブログ起点運用の核心です。

9. PDF/PPTXエクスポート

Slidevのもう一つの強みが、エクスポート機能です。スライドをPDFでアップロードしたい、みたいなケースにも対応できます。

9.1 PDFエクスポート

エクスポートはヘッドレスブラウザ(Playwright)を使ってスライドをレンダリングします。そのため最初に一度だけ、Chromium本体と動作に必要なシステムライブラリを入れておきます。

# Chromium 本体をインストール
$ npm install -D playwright-chromium

# Chromium の動作に必要なシステムライブラリをインストール(Linux の場合)
$ npx playwright install-deps chromium

install-depsは内部でaptを呼ぶため、実行時にsudoのパスワードを求められます(自分でsudoを付ける必要はありません)。

⚠️ WSL・Docker・CIなどのクリーンなLinux環境では、この手順を省くとlibnspr4.so: cannot open shared object fileのようなエラーで失敗するので、忘れずに実行しておきましょう😅

準備ができたら、あとはエクスポートするだけです。

$ npx slidev export

slides-export.pdfが生成されます。テキスト・コード・図がそのままPDFに焼き込まれるので、印刷配布にも使えます。

9.2 PPTXエクスポート

$ npx slidev export --format pptx

PowerPoint形式で出力されます。取引先や上司への提出など「.pptxじゃないとダメ」な場面に対応可能です。

⚠️ ただしPPTXは完璧な再現ではありません。Vueコンポーネントやアニメーションは失われるので、あくまで「テキストと構造を残した変換」だと割り切るのがおすすめです。

使ってみての感想

実際にこの環境に移行してみて、想定外に良かった点と、ちょっと気になった点を正直に書いておきます。

良かったこと

  • ⭐ AI生成にありがちな「他人事感」が出ない　…　ロからAIに作らせると当たり障りのない一般論になりがちですが、自分のブログを起点にすれば、自分の経験や視点が反映されたままスライドになるので、「自分が話す意味」のあるスライドになるんですよね。これが今回いちばん大きな発見でした
  • 「スライドを作る」心理的コストが本当に下がった　…　ブログを書いている感覚と完全に同じで、重いPowerPointを開かなくて済むだけで着手のハードルが激減します
  • ブログとスライドの「資産の二重利用」ができる　…　書いた記事をスライドに転用、スライドの内容を逆にブログに展開、と双方向で循環させられるのがいいです
  • Gitの履歴が思った以上に役に立つ　…　「去年のスライド」との差分が見える。毎年アップデートする内容などではかなり便利です
  • Vercelの自動デプロイの体験が良すぎる　…　pushして短時間で公開URLが更新される感動は、何度味わってもいいですね🤗

気になったこと

  • 凝ったアニメーションが欲しいときはVueの知識が要求されます（最初は無視でOK）
  • 1リポジトリ=1スライドが原則なので、講義15回分を1つのURL配下に並べたい、みたいな用途は別途工夫が必要
  • PPTXエクスポートは万能ではない（アニメーションや凝ったレイアウトは失われる）

普段ブログをMarkdownで書いている人にとって、書いた資産がそのままスライドにも活きるのが、この環境の最大の価値だと感じかもしれません🤗 逆に「ブログは書いていないけど、AIに全部任せて綺麗なスライドが欲しい」という方向性だと、本記事のワークフローはあまり旨味がないかも🙄

おわりに

今回作った環境を一言でまとめると、「AI で時短しつつ、自分らしさは残せる」という1点に尽きます。

ゼロからAIに任せると効率は上がりますが、「自分が話す意味」が薄れていく。一方で、自分のブログ記事という自分の言葉の蓄積を起点にすると、その葛藤を解消できるんですよね。普段からブログを書いている方なら、その資産がそのままスライドにも活きる世界に踏み出せると思います。

勉強会・大学講義・社内発表と「スライドを作る場面」がある方であれば、この仕組みを入れるとかなり生産性が変わってくる予感がします。

参考リンク