Slidev × Claude Codeで自己紹介スライドを作ってみた

こんにちは！製造ビジネステクノロジー部の石井です。

今回、Slidev というMarkdownでスライドが作れるツールを使って自己紹介スライドを作ってみました。
「Markdownでスライドが作れるのは知ってたけど、実際どうなの？」くらいの温度感で触り始めたところ、Claudeとの組み合わせやVSCode拡張機能が快適だったので、その辺りを中心にお伝えします。

Slidevとは

Markdownでスライドが作れるプレゼンテーションツール です。
Vue.jsの生みの親であるEvan You氏を中心に開発されています。

公式サイト：https://sli.dev/guide/why

主な特徴はこんな感じです。

• slides.md にMarkdownを書く → スライドになる
• --- で区切るとページが分かれる
• テーマを1行設定するだけで見た目が整う
• コードハイライトやMermaid図もそのまま埋め込める
• ホットリロードで編集がリアルタイムに反映される
• 静的HTMLとしてビルド・デプロイできる

セットアップも簡単で、以下のコマンドだけでプロジェクトが作れます。

pnpm create slidev@latest

プロジェクト名、インストールしてスタートするか、パッケージマネージャを聞かれるので適当に入力するとサーバーが立ち上がります！

開発サーバーは一旦ctrl+cで終了します。

slides.md をいい感じに編集して pnpm run dev すると再び開発サーバーが起動します。

今回はこのSlidevを使って、社内向けの自己紹介スライドを作りました。

実際のスライドの書き方

せっかくなので、実際に書いた slides.md の中身を少し紹介します。

フロントマターでテーマやタイトルを設定

ファイルの冒頭にYAML形式でテーマやトランジションを指定します。

---
theme: seriph
background: my-background.png
title: 自己紹介 - 石井悠汰
class: text-center
transition: slide-left
---

# 石井 悠汰

製造ビジネステクノロジー部 / サーバーサイドエンジニア

これだけでテーマが適用されたタイトルスライドが完成します。

HTMLやTailwind CSSも書ける

Markdown内にHTMLを直接書くこともできます。UnoCSS（Tailwind CSS互換）がデフォルトで使えるので、クラス指定でカード型のレイアウトなども作れます。

<div class="grid grid-cols-3 gap-5">
  <div class="p-4 bg-green-500 bg-opacity-15 rounded-xl text-center">
    <div class="text-2xl mb-2">📝</div>
    <div class="font-bold">Markdown で記述</div>
    <div class="text-xs opacity-75 mt-2">コードを書く感覚で<br/>スライドが作れる</div>
  </div>
  <div class="p-4 bg-blue-500 bg-opacity-15 rounded-xl text-center">
    <div class="text-2xl mb-2">🎨</div>
    <div class="font-bold">テーマ & アニメーション</div>
    <div class="text-xs opacity-75 mt-2">豊富なテーマとトランジションで<br/>見た目もかっこいい</div>
  </div>
  <div class="p-4 bg-violet-500 bg-opacity-15 rounded-xl text-center">
    <div class="text-2xl mb-2">🚀</div>
    <div class="font-bold">Vue / Vite ベース</div>
    <div class="text-xs opacity-75 mt-2">コンポーネントも使えて<br/>開発者体験が最高</div>
  </div>
</div>

実際に表示するとこんな感じに！

Markdownだけだと表現しきれない部分はHTMLで補えるので、結構自由度が高いです。
フロントエンド書いたことある方なら結構カスタマイズしやすいと思います。

Claudeでスライドの素案が作れる

Slidevを使ってみて一番感じたのが、生成AIとの相性の良さです。

SlidevのスライドはただのMarkdownテキストなので、生成AIに「自己紹介スライドを作って」とお願いすれば、そのまま使える slides.md を生成してくれます。テーマ設定、レイアウト指定、Tailwind CSSのクラスまで含めて出力してくれるので、保存して pnpm run dev するだけでスライドとして表示されます。

Markdown = スライドそのものというSlidevの特性上、AIが出力したテキストをそのままスライドとして使えるのが大きな利点です。
レイアウトやテーマ指定もテキストで完結するので、生成結果をコピペして即プレビューできる手軽さがありました。

Claude CodeのAskUserQuestionで書きたい内容を深掘りしてもらう

ただ、「自己紹介スライドを作って」とだけ伝えると、AIが勝手に想像した内容で一気に出力してしまいがちです。
自分の意図とズレたものが出来上がって、なんかちょっと内容が...なんてことになりかねません。
ここで便利だったのが、Claude Codeの AskUserQuestion という機能です。

AskUserQuestionとは

Claude Codeには、作業中にユーザーへ選択式の質問を投げかける機能があります。こちらが曖昧な指示を出しても、AIが「まずいくつか確認させてください」と質問してくれるんです。

参考：https://zenn.dev/katsuhisa_/articles/claude-code-askuserquestion-guide

今回の自己紹介スライド作成では、こんな質問が飛んできました。

• 「どんな内容を盛り込みたいですか？」
• 「スライドのトーンはカジュアル寄り？フォーマル寄り？」
• 「技術スタックの紹介はどの程度詳しく書きますか？」

選択肢から選ぶだけなので、事前に自分が書きたい内容を深く考える必要がありません。

質問に答えていくだけで「書きたいこと」が明確になる

自分は一人でスライドの構成を考えると、「何を書こう...」「どこまで詳しく書こう...」と手が止まりがちです。
ですが、質問形式で聞かれると、答える過程で自分の中のぼんやりしたイメージが言語化されていくんですよね。

「趣味の話は入れたいな」「技術スタックはざっくりでいいかな」といった判断が、質問に答える中で自然と固まっていきます。
いわば壁打ち相手がいい感じに深掘りしてくれる感覚です。

普通のチャットAIだと指示を出したら即座に全文が出力されますが、AskUserQuestionは作る前に要件を整理してくれるので、最初からかなり的を射た素案が出てきます。
あとは自分で微調整する感じです。
自分はスライド構成を考えるのが苦手なので、ゼロから考えるのと比べて圧倒的にラクでした。

VSCode（Cursor）の拡張機能が地味に便利

Slidevには公式のVSCode拡張機能があります。これが地味ながらかなり便利でした。
公式：https://open-vsx.org/extension/antfu/slidev

エディタの横にスライドプレビューが出る

Markdownを編集しているエディタのすぐ横に、スライドのプレビューが表示されます。変更を保存するたびにリアルタイムで反映されるので、ブラウザとエディタを行ったり来たりする必要がないのが快適です。

「今どのスライドを編集してるんだっけ？」がなくなる

Slidevは1つの slides.md に全スライドを書いていくので、スライド枚数が増えてくると今カーソルがある場所が何ページ目なのか分からなくなることがあります。
※スライドファイルを分割する方法もありますが試せてないです💦
詳しくはこちら（https://ja.sli.dev/features/importing-slides）

VSCode拡張を入れると、エディタ上でスライドの区切りが視覚的に分かるようになり、プレビューも連動して該当ページを表示してくれます。

完成したスライドをチラ見せ

実際に出来上がったスライドの中から何枚かピックアップしてみます。

自分はデザインセンスがないのでここまで作ってくれるのはとてもありがたいです！

まとめ

Slidev自体も書きやすいツールですが、Claudeとの組み合わせやエディタ拡張の快適さは実際に触ってみて初めて実感したポイントでした。
ちょっとした説明資料やLT等の資料作成のハードルも下がるので、興味がある方はぜひ試してみてください！