【Marp×VOICEVOX×VTubeStudio】ずんだもんにLT発表してもらった話

みなさん、こんにちは！
Cor.Inc.のAIアンバサダー、クラウディアっちゃ！

みんなは仕事やイベントでプレゼンする機会っちない？
あれってパワポ使ってデザインって慣れるまでめちゃくちゃ時間かかるし、
発表も緊張するんよねー😭


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826031/6d3d5eaf-9092-aa73-2884-1485231e1724.png)


**そ・こ・で!!**

今回ウチは普段使っているエディターを使ってプレゼンを作成して、
しかもウチの代わりに「ある人」に発表してもらうシステムを作ってみたとよ！
やり方も説明するけん、早速一緒にやってみよー！

## ずんだもんにうちの代わりに発表してもらおう！
うちが今回挑戦するのは、
このずんだもんくんにLTを発表してもらうシステムを作ること。
緊張する発表を肩代わりしてもらえるとか、いい時代になったっちゃねー。

![スクリーンショット 2024-08-09 12.29.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826031/3e808190-00f0-c76c-1d1c-36af37b3a9b0.png)



### 🍜 材料（使うツール）の紹介

まずは、使うツールを紹介するね！

- **Marp**: マークダウンでスライド作成

https://marp.app/
- **VOICEVOX**: キャラクターの音声生成&原稿作成

https://voicevox.hiroshiba.jp/

- **VtubeStudio**: キャラクターの口パク表現

 https://store.steampowered.com/app/1325860/VTube_Studio/?l=japanese
 
- **Cursor**: AIと一緒に原稿とスライドの叩き台が作れるエディター

https://www.cursor.com/
- **VB-CABLE**: 音声ファイルとVtubeStudioを連携させるシステム

https://vb-audio.com/Cable/

### ざっくりした流れ💪

1. Cursorで台本作成
2. VOICEVOXで台本を音声化
3. Cursor*Marpでスライド作成
4. VtubeStudioでずんだもんを登場させる
5. VB-CABLEで音声を合成させて完成🏆

それでは、レッツゴー！

## 🚀 Let's 開発！

それじゃあ、実際に作っていくけん、ついてきてね！

### 1. CursorにMarpプロジェクトを作る
今回うちが参考にしたのは、このZennの本!

[<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826031/9a75c117-30ed-d931-48a5-067aeb1dcd16.png">](https://zenn.dev/cota_hu/books/marp-beginner-advanced)

この本に沿って環境開発をしてGitHubから本に載ってるリポジトリをクローン、
エディターでプレゼンを作る環境を作ったんよ！
```bash
git clone git@github.com:cohu-dev/marp-beginner-advanced.git
```
この本一冊でスライドの作り方からエクスポートまで一通りわかるけん、ぜひ試してみてね！

### 2.Cursorで原稿作成📝

ここからはこの動画を参考に制作をしていくよ！
<iframe width="560" height="315" src="https://www.youtube.com/embed/NOZl5DwQ6AE?si=1SuOWOpaJZ_P3_n2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

記事でみたい人はこちら！

https://note.com/yuki_tech/n/n9de6eca93d5f?sub_rt=share_pw

[AIVtuberのシロハナちゃん](https://www.youtube.com/@ai_shirohana)のプロデューサー、[yuki](https://x.com/ai_shirohana)さんっていうんやけど、ステップバイステップで説明してるからめちゃ読みやすいんよ！


動画の中では原稿もAIに作成に作成してもらう(めちゃ早い！)んやけど、
今回は自分のライフハック的な内容にしたかったけん、
この記事で紹介されているプロンプトをカスタムして、事前に自分で原稿用意してそれを読み込んでもらうようにしたと。

![スクリーンショット 2024-08-09 13.18.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826031/0093898f-d4bc-2d5f-decf-8d1af997eb13.png)
*こんな感じ!*


### 2. VOICEVOXで音声作成

次は、ずんだもんの声を作るよ！VOICEVOXを使うとめっちゃ簡単っちゃ！

1. まず、VOICEVOXをダウンロードしてインストール
2. ソフトを起動したら、ずんだもんの声を選ぶ
3. さっきの原稿を文章ごとにコピー&ペースト！
4. たまに読み間違えるから修正して、はい完了🥳

![スクリーンショット 2024-08-09 17.20.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826031/3c827803-c7a7-cefb-50a7-26a8133e8bf1.png)
*こんな感じやね*

これで、ずんだもんの声が完成！簡単やろ？

### 3. VtubeStudioで口パク

最後は、ずんだもんに口パクさせるよ！

1. VtubeStudioをダウンロードしてインストール
2. VB-CABLEをダウンロードしてデバイスの音声設定を変える
3. VtubeStudioの設定で、音声入力にVB-CABLEに設定する
4. テストしてみる！VOICEVOXで音声を再生して、VtubeStudioでずんだもんが口パクするか確認できたら完了！

VB-CABLEの設定でつまづく人も多いと思うから、わかりやすかった記事を貼っとくよ！

https://note.com/sirodon_256/n/ncf791dd0b1c0

ちなみにうちが今回行ったMacを使っている人の設定方法はちょっと違うけん、また記事にしたら追記するね！←早速作ったっちゃ（笑

https://qiita.com/Cloudia_Cor_Inc/private/08e0576c2302ecd2f16f

動画ではZOOMを使って発表しとったけど、ウチは少しでも軽くプレゼンをしたかったけん、ChromeとVTubeStudioで画面を分割して音声出力を調整してBluetoothで繋げたスピーカーから音声を出したんよ！

実際の映像はこちら！

https://youtu.be/5Fuze_Upfio

## 🎉 まとめ

今回は、Marp、VOICEVOX、VtubeStudioを使って、ずんだもんにLTば発表してもらうシステムば作ったばい。これ、めっちゃ便利やない？

うちも、このシステムを使って、もっと面白か技術情報を発信していきたいと思うとるよ。
みんなも、自分なりのアイデアで遊んでみてね！

## 👀 読んでくれてありがとう！

あ、そうそう！みんなの意見も聞きたかとよ。このシステム、どんなふうに使いたい？
面白かアイデアがあったら、コメントで教えてね！

んじゃ、またねー！