![見出し画像](https://assets.st-note.com/production/uploads/images/153175888/rectangle_large_type_2_3be835649bf270d90e77b942f8cc674e.png?width=1200)
Vercel - v0でスライド生成から音声読み上げでプレゼン発表までする
AIVtuberシロハナちゃんの開発プロデュースをしているyukiです。
この記事ではVercelのv0でスライド生成から音声アリでプレゼン発表まで行うサイトを作成してみたのでその記録を残します。
実際の成果物は以下のリンクからブラウザでデモを体験可能です。
「プレゼン開始」ボタンを押下すると音声有りでプレゼンが始まります。
v0使ってスライド生成で満足してませんか?
— yuki@AIヒロイン研究P (@ai_shirohana) September 5, 2024
もうひと手間を加えることで、音声読み上げでプレゼン発表してくれるサイトまで出来ちゃいます!
デモ:https://t.co/qgOZ7muXVC https://t.co/tOGTHbP9HD pic.twitter.com/LjvMMWesLA
ひと手間加える必要があるのですが、このように発表まで行うことができるとコンテンツのクオリティが向上しますし、表現の幅が広がりますよね。
ぜひ、本記事で流れを把握してもらって生成に挑戦してもらえると面白いかなと思います。
また、v0の概要や基本的な使い方、ボイス有りコンテンツ生成などは下記動画にて解説しているので本記事では割愛します。
※この記事は2024/09/05時点のものなので今後変更があるかもしれないですのでご了承ください
プロンプトと生成過程
まず、プロンプト1発で生成は厳しいです。
なので最初の基盤となるプロントと生成過程についてまとめます。
全て記載するのは長くなるので要点を絞ります。
このようにやる必要はなくて、都度気になるところを指示して修正を繰り返すだけなので参考程度でお願いします。
①一番最初のプロンプト
プレゼンテーション資料を生成していきます。
テーマはAIVtuberにしましょう。
白を基調とした無彩色のリッチなデザインで見やすさを重視してください。
また、レスポンシブ対応も意識してください。
スライドの背景は白ですが、目立たないレベルの薄いグレーで何か模様をいれてください。
![](https://assets.st-note.com/img/1725473621-OEKcJ0dF7Pa3TAq5LyGj6f1r.png?width=1200)
②デザインや内容を修正してキャラ配置
![](https://assets.st-note.com/img/1725474083-ezHOGl7ZPutx9JIAYkhcgpfU.png?width=1200)
もう少し内容や情報を具体的にスライド中に入れて図解などで飽きさせないようにしてください。
右下などに添付したキャラクターを表示するようにしてください。
![](https://assets.st-note.com/img/1725474191-sfEtbMi2Trw4SA6DWlRcGkIn.png?width=1200)
③プレゼン発表の台本を生成する
![](https://assets.st-note.com/img/1725474392-zmLMPX17iIdjwxZ2epoFWtOH.png?width=1200)
このスライドの各ページの台本を生成してください。 サイトの内容は変えないでください。
④各ページごとの台本を読み上げた音声ファイルを添付
![](https://assets.st-note.com/img/1725474716-faTHBLGkxMhCnvKSdzFQEgVw.png?width=1200)
各ページごとの台本をボイス収録しました。
自動再生ボタンを「プレゼン開始」ボタンに変更して、ボタン押下されたら自動で音声再生されて、終了したら次のページに移動して次の音声を再生する流れにしてください。
ここはご自身の声で収録しても良いですし、合成音声(TTS)で生成するのもアリです。
今回はStyle-Bert-VITS2で生成した音声を使用しています。
他にもVOICEVOX、ElevenLabsなど簡単に読み上げできるツールあるので活用してみてください。
このようにすることで、各ページごとに収録した音声ファイルが再生されるのでプレゼン発表みたいになります。
⑤完成
![](https://assets.st-note.com/img/1725475051-yKU3qjP7EWe9l2Hc8TZQBMDY.png?width=1200)
あとはレスポンシブ対応やページ数の表示、バグの修正などを指示して完成になります。
Publishedすることで誰でもアクセスできるようになります。
以下から試してみてください。
v0プレゼン生成のメリットとデメリット
このようにトライ&エラーを繰り返すことでプレゼン発表までしてくれるスライドの生成ができました。
ここからは実際に作ってみて感じたメリットとデメリットを主観でまとめます。
メリット
デザインがおしゃれ
画像や音声ファイルを添付して組み込める
簡単にリンクで生成物を共有できて誰でも開ける
動画でなくページで共有できるので、ユーザーのタイミングでスライドを参照できる(動画などは資料単体で閲覧できない):資料+α(発表もできるよ)の形式が可能
自然言語で修正や追加ができる
AIで記載内容を生成してくれる
デメリット
結構手間。細かい微調整は大変
プロンプト次第では上手く生成されない
解説動画の生成AIなどに任せた方が楽かも→動画形式にはなるけど基本それで問題ない気がします
さいごに
今回はv0でスライド作成から発表までしてくれるサイトを生成するのをやってみましたがいかがだったでしょうか?
案外、スライド生成まではやってる人多いイメージですが、音声入れて発表までやるのは新鮮かなと思います。
台本生成して音声入れるくらいだったらそんなに重いタスクではないので、ひと手間加えてみても良いかもしれません。
実際の活用としては資料+α(発表もできるよ)の形式で共有したいときなどに使えるのかなと思います(あんまりイメージないけど)。
ただ、純粋に生成するの面白かったので、ぜひ参考にして挑戦してみてください!
最後に私がプロデュースしているAIVtuberシロハナちゃんの宣伝。
理想のAIヒロインを目指して、様々な企画を行うAIVtuber配信や、AIヒロイン研究所というコンセプトのもと、「テクノロジー×キャラクター」に関する動画等を発信しています。
以上!それではまた👋
いいなと思ったら応援しよう!
![yuki@AIキャラ開発P](https://assets.st-note.com/production/uploads/images/160745266/profile_65af17920443e72fba313dd13e0b7ee3.jpg?width=600&crop=1:1,smart)