初めに
誰が話しているか分かる動画が作りたい!!!
…と思ったのですが、とっても苦戦したので、
(やり方が分かる記事を)
作りました。
やり方は、
![](https://manten-do.net/wp-content/uploads/2019/07/0-1.png)
此方のサイト様に載っております。
今回はそれでも苦戦してしまった未来の私の為の記事で御座います。
![](https://sazano123.com/wp-content/uploads/2021/01/名称未設定のデザイン.jpg)
CSSが分からなくてもOKです。
全てクリックとコピーペーストで終わります
–
–
–
はじめに(ダウンロードするもの)
- ディスコード Discord
- (配信中に通話機能を使うソフトです。
- スマホでも、PCでもダウンロードできます)
- OBS
- Open Broadcaster Software略して、「OBS」
- 動画で「枠」を作る時のソフトです。
- PCからダウンロードできます。
やり方(立ち絵変換様を使用したやり方)
Among Us配信さんは、此方のツールの方が使い易いです。
①ディスコードその1編
ディスコードを立ち上げて、設定をクリックしてください
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-1-1024x576.jpg)
その後に、「ユーザー設定」の一覧が出てくるので、下の方にある「詳細設定」をクリックしてください
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-2-1024x576.jpg)
すると、詳細設定の画面が出るので、開発者モードをオンにします。
(これをしないと後程行うIDを得ることが出来ないので、先に行っておきました)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-3-1024x576.jpg)
そして、配信を行う時に使うボイスチャンネルに事前に入っておいてください
![](https://sazano123.com/wp-content/uploads/2021/06/image-2.png)
それと、立ち絵チャンネルなどを作り、自分の表示したい画像を貼りましょう。
![](https://sazano123.com/wp-content/uploads/2021/06/image-4.png)
これでひとまず、ディスコード内での準備は完了です。
②streamkit.discord編
ディスコードは話すと、緑色に光るのですが、
この光っている画像を、OBSに取り込むことができます。
![](https://sazano123.com/wp-content/uploads/2021/06/image-3.png)
その際に使うサイトが、streamkit.discordです
まず、Install for OBSを選択してください。
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-4-1024x576.jpg)
その後に、許可をしますか?という文言が英語で聞かれますので「はい」の様なものを押してください。
(一回許可すると画面が出なくて…申し訳ないです…)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-5-1024x576.jpg)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-7-1024x576.jpg)
その後は、①VOICE WIDGETをクリックするとタブが変わります。
②は先程確認したサーバーになっているかどうか、③は配信をするボイスチャンネルになっているかを確認し、
④の画面に自分の名前とアイコンが載っているかを確認します。
載っていない場合、ディスコードに入っていない、もしくは設定が間違っているという事になります。
確認出来たら、⑤のURLをコピーしてください。
③OBS編とディスコード編
OBSを開きます。
OBSの画面が出てきたら+ボタンをクリックし、ブラウザを選択します。
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-8-1024x576.jpg)
名前を入力する画面が出ますが、名前は好きなものをいれてOKをクリックします。
![](https://sazano123.com/wp-content/uploads/2021/06/image-5.png)
すると、このような画面が出てきますが、エラーではないです。
![](https://sazano123.com/wp-content/uploads/2021/06/image-6.png)
そして、このローカルファイルの下「URL」の部分に、
streamkit.discordでコピーしたURLを入れて下さい。(まだOKは押さないで下さい)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-9-1024x576.jpg)
今からカスタムCSSの部分を作ります。
↓こちらをクリックして下さい
![](https://manten-do.net/wp-content/uploads/2019/07/0-1.png)
此方の一発変換様がとても便利なので、お借りさせていただきました。
まず、ディスコードを開き、立ち絵チャンネルに行きます。
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-11-1024x576.jpg)
そして、これを立ち絵変換サイトの「画像URL」の部分へ貼り付けます。
![](https://sazano123.com/wp-content/uploads/2021/06/image-7.png)
そして、ディスコードのIDもディスコードからコピーします。※フレンドコードではない為、注意です。
(初めに開発者モードにしていないと、入手できないURLの為、出来ない方は開発者モードになっているかを再度確認してください)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-12-1024x576.jpg)
また、立ち絵変換サイトに戻って、貼り付けをします。
DiscordユーザIDの部分です。
![](https://sazano123.com/wp-content/uploads/2021/06/image-8.png)
その後の設定はお好きな感じでカスタマイズして頂き、生成を押し、出来た文字列をコピーします。
(この部分がCSSというプログラミングコードですが、難しいことは気にしないで大丈夫です)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-13-1024x576.jpg)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-14-1024x576.jpg)
OKを押すと、
![](https://sazano123.com/wp-content/uploads/2021/06/image-9-1024x592.png)
少し暗い状態になっています。
そこで、「あー」と言ってみます。
![](https://sazano123.com/wp-content/uploads/2021/06/image-10-1024x578.png)
光りました。
…
……光りました…!
終わりに
手順さえ踏めば、カスタムCSSで画像を光らせたり、動かしたりすることが出来ました。
此方の2点のサイト様も素敵で参考になりましたので、載せさせて頂きます。
なとりゲームブログさま
https://gamer-natori.com/broadcast-001-discord-obs/
三日月望様
https://n-mikaduki-fb.fanbox.cc/posts/902468
OBSのDiscordアイコン外観変更ジェネレーターの使い方(別の方法①)
![](https://sazano123.com/wp-content/uploads/2021/06/icons8-among-us-48.png)
立ち絵でなく、
ディスコードの
アイコンで十分だー!
という方用の内容です。
![](https://sazano123.com/wp-content/uploads/2022/05/image-66-1024x539.png)
OBSとディスコード編(途中まで先程と手順は一緒)
OBSを開きます。
OBSの画面が出てきたら+ボタンをクリックし、ブラウザを選択します。
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-8-1024x576.jpg)
名前を入力する画面が出ますが、名前は好きなものをいれてOKをクリックします。
![](https://sazano123.com/wp-content/uploads/2021/06/image-5.png)
すると、このような画面が出てきますが、エラーではないです。
![](https://sazano123.com/wp-content/uploads/2021/06/image-6.png)
そして、このローカルファイルの下「URL」の部分に、
streamkit.discordでコピーしたURLを入れて下さい。(まだOKは押さないで下さい)
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-9-1024x576.jpg)
今からカスタムCSSの部分を作ります。
OBSのDiscordアイコン外観変更ジェネレーターを開いてカスタムCSSを作る
![](https://sazano123.com/wp-content/uploads/2022/05/image-67-1024x539.png)
ジェネレータを開き、お好きなようにカスタマイズします。
ぴょこぴょこや、点滅、縁取りの変更、丸アイコンの変更、縦並び、横並びも自在です。
![](https://sazano123.com/wp-content/uploads/2022/05/名称未設定-750-×-1334-px-750-×-1300-px-750-×-1125-px-683x1024.jpg)
カスタマイズ出来たら、これで「カスタムCSS」は完成です。
OBSに戻ってカスタムCSSを貼り付ければ完成!
![](https://sazano123.com/wp-content/uploads/2021/06/をクリック-14-1024x576.jpg)
~完~
iscord Reactive Imagesを使う方法( 別の方法②)
ディスコードで話す場合、
話したらぴかぴかするプラグインです
此方の動画様を参考に作っております
–
↑をクリックしてください
![](https://sazano123.com/wp-content/uploads/2021/06/Vtuberのなり方①-モデル編-17-1024x538.jpg)
![](https://sazano123.com/wp-content/uploads/2022/01/Vtuberのなり方①-モデル編-16-1024x538.jpg)
認証ボタンを押すと、この画面に行きます。
アイコンはディスコードのアイコンが表示されます
![](https://sazano123.com/wp-content/uploads/2022/01/Enter-to-win-6-1024x576.png)
一旦 この状態で
2番目のURLをOBSに貼り付けます
![](https://sazano123.com/wp-content/uploads/2022/01/Vtuberのなり方①-モデル編-15-1024x538.jpg)
–
ソースからブラウザを選択
![](https://sazano123.com/wp-content/uploads/2022/01/image-11-1024x757.png)
ブラウザを押すとプロパティが出て来るので
先程コピーしたURLを貼り付けます。
![](https://sazano123.com/wp-content/uploads/2022/01/image-12.png)
![](https://sazano123.com/wp-content/uploads/2022/01/Vtuberのなり方①-モデル編-18-1024x538.jpg)
何も弄っていない Discord Reactive Imagesの実際の映像が此方
画像の変更などをする場合
左が話さないとき、右が話す時
Configの部分は跳ねさせたり、
話していないときも光ったままにしたりの設定です
![](https://sazano123.com/wp-content/uploads/2022/01/Vtuberのなり方①-モデル編-20-1024x538.jpg)
ディスコードに入っているグループ全員でやる時
下ではなく、上のURLを使うことで
グループで光らせることが出来ます
※また今度誰かと試します…
![](https://sazano123.com/wp-content/uploads/2022/01/Vtuberのなり方①-モデル編-21-1024x538.jpg)
変更設定した 実際の映像が此方
立ち絵置き換えツール(仮)の説明記事
![](https://sazano123.com/wp-content/uploads/1990/06/image-1-1024x538.webp)
ヤギハタ様 ぴょんぴょんオーバーレイ
というわけで、VTuberなどの配信のコラボとかに使える「光って跳ねる立ち絵」をDiscord上で簡単に作ることができるbot、公開しました!!説明動画もあるのでよかったら使ってみてください!!
【配信者向けDiscordBot】ぴょんぴょんオーバーレイの紹介 https://t.co/R2FO2Xsggt
— ヤギハタ (@Yagihata4x) April 8, 2022
–
–
OBSのDiscord通話相手立ち絵表示ジェネレーター
![](https://sazano123.com/wp-content/uploads/2023/01/image-1-1024x799.webp)
今井モノ@単眼宇宙人VTUBER様 複数人で配信するときに誰が話しているか分かりやすくする方法
–
複数人で配信するときに誰が話しているか分かりやすくする方法
↓↓↓↓↓↓手順はこれ↓↓↓↓↓↓https://t.co/LMyFM5sxIy
↑↑↑↑↑↑手順はこれ↑↑↑↑↑↑いろいろお借りしてるので感謝ですね… pic.twitter.com/5imIuIIKRr
— 今井モノ@単眼宇宙人VTUBER (@imai_mono) July 4, 2022
–
ココフォリアでの配信、TRPGのリプレイ動画や配信画面の作り方
![](https://sazano123.com/wp-content/uploads/2022/02/music-5-1024x538.jpg)
セッション中の声を良くしたい方やVtuberさん用記事
![](https://sazano123.com/wp-content/uploads/2021/04/御声-調査-300x158.jpg)
サムネイルの作成し方がわからない人用
立ち絵差分があれば、瞬きや笑顔などのかんたんなアニメーションが作れるやり方
![](https://sazano123.com/wp-content/uploads/2021/12/クリック-21-1024x538.jpg)
–
—
—
000