Vibe Codingならぬ、Vibe Slidingのススメ（？）

zennに書いた記事をそのまま転載しています。
手動なのでQiita側の記事はメンテが漏れるかもしれません。
https://zenn.dev/assign/articles/84dab6fb09bf47

はじめに

今回は vibe codingならぬvibe sliding に挑戦してみました（slideにスライドを作るという意味はない気がするが）。要するに、AI エージェントにスライド作成を任せるという試みです。

結論から言うと、想像以上にリッチなスライドを簡単に作ることができました。この記事ではvibe slidingで試した中で気づいたSlidevの紹介やAIとの相性の良さなどについて紹介します。

利用したAIツールはClaudeCodeでモデルはOpus 4.1です。

成果物

実際に作成したスライドはこちら。

スライド

一部スライドを抜粋するとこんな感じです。

Chart.jsなどJSライブラリを活用することでチャートも挿入できます。

動きをつけることもできます。

ユーザの操作を受け付けインタラクティブな反応を入れることもできます。

ソースコード

Slidev の特徴

今回使用したのは Slidev というスライド作成ツールです。以下の2つの観点からSlidevを利用することにしました。

1点目は Markdown でスライドを書くことができる点です。そのままAIに食わせるコンテキストに出来るためプレーンテキストであることは極めて重要です。

2点目はSlidevの高機能性です。
Markdown でスライドを書くことができるという要件だけであれば代替ツールとしてmarpなども選択肢として考えられますが、SlidevはVue コンポーネントを書いて柔軟な表現ができるという点で優れています。
Vueのコンポーネントなので、Chart.jsなど3rdPartyのライブラリを活用すればグラフやアニメーションなど、リッチな表現を実現できます。
Vueのコンポーネントなので状態を持つことができ、従来のスライドツールでは難しかったインタラクティブな表現も簡単に組み込める点が面白いなと思っています。例えば、クリックしたときにカウントアップするスライドを作ることができます。発表時に、聴衆に「実際に触ってみてください」と促せるのは従来のスライドツールでは難しい新しい体験だなと思います。

Slidev と AI の相性の良さ

Slidev と AI を組み合わせは実際にかなりハマっていました。

まず、AIはMarkdown記法やSlidevのことをかなり理解しているので、ざっくりとした箇条書きからでもそれなりのスライドを作ってくれます。
次に、Vueのコンポーネント実装をAIがサクサクやってくれるという点が画期的です。Markdown記法やMermaid記法では表現が難しい複雑な図などを「～～についてVueのコンポーネントで表現して」と言えば、それなりの品質のコンポーネントが出てきます。先述の通りChart.jsなどライブラリを利用することもできるので表現の幅は無限大だなと感じています。
人間が書く場合、Vueのコンポーネントを作りこむコストの方がGUIでオブジェクトを配置する作業コストよりも大きい場合が多いと思うのですが、そのあたりのコストをAIが引き取ってくれるため、反対にVueのコンポーネントを作った方が生産的になっているということです。

実際の作成過程

実際にどのようにしてスライドを作成したのか、具体的な手順を紹介します。

1. スライド内容の構成を伝える

まずは、スライドに含めたい内容を箇条書きで AI に渡しました。この段階では細かい見た目は気にせず、伝えたい内容の骨子だけを整理しておきます。どこまでVibeしたいかによりますが、「Slidev の紹介」「デモの実演」「まとめ」といった大まかな構成を伝えるだけでも上述のようなスライドが出てきます。
今回のスライドに関しては以下のような¹箇条書きを用意しました。

- Vibe Slidingのススメ
  - Slidevの良さを紹介する内容を盛り込む
  - SlidevとAIの相性が良いという趣旨を盛り込む
  - Slidevの機能をふんだんに使ったリッチなスライドにする
  - チャートライブラリなどを使ったVueコンポーネントを組み込んでほしい

2. AI にスライドを生成してもらう

次に、AI に箇条書きを渡して具体的なスライドを書いてもらいます。トーンマナーや要求される内容に依存しますが、今回はSlidev全開なスライドを作ってもらいました。

3. プレビューを見ながら調整

生成されたスライドをプレビューで確認しながら、スライド構成の見直しや細かい調整を行います。よくあるのが、**文字の見切れや中途半端な位置での改行などです。こういった問題も「見切れてるから何とかして」「このテキストが画面からはみ出してる」などの雑な指示で一定実用的なスライドになります。

Vibe Slidingの注意点

特に指示をしない場合、AIは無邪気にslide.mdに追記を重ねていきます。ですが、AIは長大なファイルを編集するのがかなり苦手なのでそのうち破綻します。
Slidevはpages/ディレクトリにMarkdownを分割し、slide.mdにインポートして埋め込むことが可能なので、分量が多いスライドを作成する場合は、この機能を積極的に使っていく必要がありそうです。

おわりに

今回の試みを通じて、LT や社内共有資料などに関してはもう PowerPoint も Google スライドも要らないなと感じました。
特に、エンジニア向けのプレゼンテーションでは、コードハイライトやライブデモ、インタラクティブな要素ながあると面白がってもらえるかなと思っており、従来のスライドツールよりも期待をかけています。

今後は、Slidevを使い倒しつつ、自社テンプレートなどを整備すると便利かもなとうっすら考えています。

1. 記録を残しそびれていたので記憶を頼りにしています ↩