株式会社Optimind Advent Calendar 2025 2日目の記事です🎄

はじめに

Quarterや期末が近づくと、成果や振り返りを発表するスライド資料を作りますよね。

でも、なかなか時間が取れなくて辛い... 😢

ざっくりした指示で、書きたいことをいい感じのスライドに仕上げてくれると嬉しいですよね？

今回は Slidev + 生成AI（Claude Code / NanoBanana） によるスライド作成の体験が良かったので紹介します！🚀

Slidevとは？ 📝

Slidev は、マークダウンベースのスライドツールです。

今回試した構成はこちらです。

npm init -y
npm install @slidev/cli @slidev/theme-default
npx slidev

localhostでスライド用のWebアプリが起動します！

スライドで伝えたいこと、載せたい見出しをマークダウンでざっくり書きます。

各スライドで使いたい画像ファイルもマークダウンに載せます。今回は画像生成に NanoBanana 🍌 を使用しました。

GeminiのNanoBananaから画像を作りました。

GoogleSlideに付属するNanoBananaの画像生成も使えます。

生成AI（Claude Code）にマークダウンとSlidevのリンクを渡してスライド作成を指示します。

最初に出てきたスライドの一部がこちらです。

「ダークテーマ + スタイリッシュ」を指示したところ...

いい感じのデザインに変わりました！🎉

テキストからスライドを生成するため、Claude Codeに作らせた場合のレイアウトや画像配置の精度が高く感じました。

Slidev公式にドキュメントもある上、HTMLも記述できたりするのでかなり自由が効く感じです。

Slidevを起動してブラウザでプレビューした状態になれば、Claude Codeが slides.md を更新する度に即時反映されます。

指示 → 更新 → 確認 → 指示 🔄

このサイクルが高速に回りました。

Slidev関係ないですが、NanoBananaによる画像素材の生成も「普通に使える」レベルの画像（文字や綴りやレイアウトでの破綻が無い画像）がポンと出てくるため捗りました。

Slidev + Claude Code + NanoBanana でスライド作成がとても楽になりました！

ぜひ試してみてください！💪

最後まで読んでいただきありがとうございました！🙏