株式会社Optimind Advent Calendar 2025 2日目の記事です🎄
はじめに
Quarterや期末が近づくと、成果や振り返りを発表するスライド資料を作りますよね。
でも、なかなか時間が取れなくて辛い... 😢
ざっくりした指示で、書きたいことをいい感じのスライドに仕上げてくれると嬉しいですよね？
今回は Slidev + 生成AI（Claude Code / NanoBanana） によるスライド作成の体験が良かったので紹介します！🚀
Slidevとは？ 📝
Slidev は、マークダウンベースのスライドツールです。
| 特徴 | 説明 |
|---|---|
| 📄 マークダウンで記述 | コンテンツ作成に集中できる |
| 👨💻 開発者フレンドリー | コードハイライト対応 |
| ⚡ Vue.jsベース | インタラクティブな表現も可能 |
| 📤 エクスポート | PDF、PPTX、PNGに対応 |
スライド生成のアーキテクチャ 🏗️
今回試した構成はこちらです。
- NanoBanana で画像素材を生成 🍌
- マークダウン で概要をまとめる 📝
- Claude Code でSlidevスライドに変換 🤖
Slidevを起動するまで 🚀
npm init -y
npm install @slidev/cli @slidev/theme-default
npx slidev
localhostでスライド用のWebアプリが起動します！
スライドの作り方 📖
STEP 1: マークダウンでざっくり書く ✍️
スライドで伝えたいこと、載せたい見出しをマークダウンでざっくり書きます。
STEP 2: 画像素材を用意する 🖼️
各スライドで使いたい画像ファイルもマークダウンに載せます。今回は画像生成に NanoBanana 🍌 を使用しました。
GeminiのNanoBananaから画像を作りました。
GoogleSlideに付属するNanoBananaの画像生成も使えます。
STEP 3: Claude Codeに指示を出す 🤖
生成AI（Claude Code）にマークダウンとSlidevのリンクを渡してスライド作成を指示します。
最初に出てきたスライドの一部がこちらです。
「ダークテーマ + スタイリッシュ」を指示したところ...
いい感じのデザインに変わりました！🎉
体験の良さ ✨
🎯 レイアウト精度が高い
テキストからスライドを生成するため、Claude Codeに作らせた場合のレイアウトや画像配置の精度が高く感じました。
Slidev公式にドキュメントもある上、HTMLも記述できたりするのでかなり自由が効く感じです。
⚡ 即時反映でサイクルが早い
Slidevを起動してブラウザでプレビューした状態になれば、Claude Codeが slides.md を更新する度に即時反映されます。
指示 → 更新 → 確認 → 指示 🔄
このサイクルが高速に回りました。
🍌 NanoBananaの画像素材も優秀
Slidev関係ないですが、NanoBananaによる画像素材の生成も「普通に使える」レベルの画像（文字や綴りやレイアウトでの破綻が無い画像）がポンと出てくるため捗りました。
まとめ 📌
Slidev + Claude Code + NanoBanana でスライド作成がとても楽になりました！
| ポイント | 効果 |
|---|---|
| 📝 マークダウンベース | AIとの相性が良い |
| ⚡ 即時プレビュー | 高速にイテレーションできる |
| 🍌 AI画像生成 | 素材作成も効率化 |
ぜひ試してみてください！💪
参考リンク 🔗
最後まで読んでいただきありがとうございました！🙏