TRPGやマーダーミステリーを遊ぶ際、リプレイ動画を作るためにココフォリアの画面をOBS Studioなどで録画しようとするキーパーの方は多いのではないでしょうか。
しかし、OBS Studioでただココフォリアの画面をそのまま録画すると「広告や不要な情報が映る」「音声が二重に聴こえてしまう」などユーザーにとって視聴しづらい動画になることがあります。
本記事ではそんな問題を解消するため、カスタムCSSを使用してココフォリアの画面を配信用に最適化する方法や、音声の取り込み方などを順序立てて解説していきます。
録画を始める前に、まずはOBS Studioでソースを追加してココフォリアの画面を表示させます。
その際ウィンドウキャプチャを使用してしまうと画質の劣化やツールバーなどの映り込みが発生する可能性があるため、必ずブラウザソースを使用してください。
それでは、実際の手順をスクリーンショット付きで解説していきます。
まずは任意のシーンを選び、ソースから「+」→「ブラウザ」を選択し、わかりやすい名前を入力して追加します。
続いて、先ほど追加したブラウザソースのプロパティを開き、録画したいココフォリアルームのURLを「URL」欄に貼り付けます。
その際、幅と高さは配信解像度に合わせて入力した上で「OBSで音声を制御する」にチェックを入れてから「OK」をクリックしてください。
ココフォリアルームのURLをOBS Studioに貼り付けると、ココフォリア上では広告を削除していても配信画面には広告が表示されている状態になります。
その際は画面下部にある「対話(操作)」ボタンをクリックすることでOBS上のココフォリア画面を直接操作できるようになるので、ここから広告を閉じたり、盤面の表示を調整してください。
続いてはOBS Studioで音声の設定をおこないます。
ココフォリアの音声をOBS Studioにのせる場合はデスクトップ音声のままでもいいのですが、ディスコ―ドを使用してオンラインセッションをする場合や、カスタムCSSでパーツを分けて表示する場合は音声の重複などの不具合が発生する可能性があるのでアプリケーション音声キャプチャを使用します。
こちらも実際の設定画面の画像を添付しながら解説します。
OBSのソースで「+」→「アプリケーション音声キャプチャ(ベータ)」を選び、任意の名前を付けて追加します。
「アプリケーション音声キャプチャ(ベータ)のプロパティ」を開き、表示されたウィンドウで録音したいアプリケーション(例:Google ChromeやDiscord)を選択し「OK」をクリックします。
TRPGやマーダーミステリーの場合は、ココフォリアの音声とディスコ―ドの音声の2つをアプリケーション音声キャプチャ(ベータ)のソースで追加すれば、余計な音が録画に入る心配がありません。
事前準備はこれで完了なので、ここではカスタムCSSを使用して盤面やチャットログ、ステータスや吹き出しなどを個別に表示させる方法を解説します。
カスタムCSSでココフォリアのパーツをバラバラに表示させることで、リプレイ動画として見やすい配置に変更することが可能になります。
有名なTRPG配信者のほとんどはこの機能を使っているので、ぜひこの機会に扱えるようになりましょう。
※基本的な設定は以下の記事内ですべて解説しているので、そちらを参考にしてください。
TRPGのリプレイ動画や配信を見ていて、発言者のキャラクターが声にあわせて光っているのを目にしたことはありませんか?
実はあの仕組みも、OBS StudioとカスタムCSS、そしてDiscord STREAMKIT Overlayを組み合わせることで実装することが可能です。
本項目では、番外編として立ち絵とディスコ―ドを連携させて光らせる手順を解説します。
まずはディスコ―ドを立ち上げて設定(歯車マーク)をクリック→「詳細設定」→開発者モードをオンにします。
続いて、立ち絵をTRPGで使用するサーバーの立ち絵チャンネルに貼り付けます。
ディスコ―ドの事前準備が完了したら、こちらのDiscor STREAMKITから「OBSのインストール」をクリックします。
※その後のポップアップは「認証」で問題ありません。
Discord STREAMKITが開いたら音声ウィジェットをクリックします。
その後「先ほど立ち絵を添付したサーバーが選ばれていることを確認」「音声チャンネルを指定」「自分の名前とアイコンが画面に載っているかを確認」をおこない、問題なければURLをコピーしてきましょう。
.
URLのコピーが完了したら、OBS Studioに戻りブラウザソースを追加し、分かりやすい名前に変更します。
その後プロパティを開き、URLの欄に先ほどコピーしたURLを貼り付けます。
続いて、OBS Studioの画面はそのままにした状態でDiscord STREAMKIT:立ち絵変換を開きます。
ディスコ―ドの立ち絵を添付したチャンネルで右クリックをおこない「リンクのコピー」をクリックし、Discord STREAMKIT:立ち絵変換の「画像URL」の欄にURLを貼り付けましょう。
あわせて「設定」→「マイアカウント」のユーザー名の横にある「…」をクリックし、ディスコ―ドのユーザーIDもコピーして上側に貼り付けます。
あとは発話時のアクションなどを自由に設定してから「生成」ボタンをクリックし、表示されたカスタムCSSを先ほど開いたOBS Studioのブラウザソース内の「カスタムCSS」に貼り付けます。
ここまでの設定があっていれば、音声にあわせて立ち絵が光る設定が完了します。
設定が反映されているか、実際に声をいれて確認してみましょう。
※上記画像では、発話時以外は明度50%になる設定が反映されています。
音声入力をおこなう際は、前述の通り必ずアプリケーション音声キャプチャを使用するようにしてください。
これを疎かにしてデスクトップ音声を反映させてしまうと、音の重複や通知音の混入が起こってしまい、せっかく没入感が高いTRPGを台無しにしてしまうことがあります。
アプリケーション音声キャプチャを使用すれば指定した箇所の音声だけがOBSに反映されるので、それ以外の音(パソコンの操作音、通知音、デスクトップ上で流れている音楽など)録画に入ってしまうことはありません。
手間ではありますが、音声は必ずアプリケーション音声キャプチャで取り込んでください。
OBS Studio上のココフォリアの配置は視聴者が見やすい配置になるようにおこなわれるので、ほとんどの配信者は似たような配置の画面になってしまいます。
なので、より注目されたい場合は画面配置にこだわり、オリジナリティのある配置にすることをおすすめします。
たとえば立ち絵をシーンの右側にまとめて配置する、ログの表示箇所を背景素材と親和性の高い箇所に配置するなどの工夫をおこなうことで、より視聴者にTRPGのリプレイ動画を楽しんでもらえるようになります。
特にTRPGやマーダーミステリーの動画は動きが少なくなる傾向にあるので、1画面の完成度にはしっかりとこだわっていきましょう。
ココフォリアの画面はそのままOBS Studioに反映させても十分に使えますが、今回紹介したカスタムCSSや音声設定をおこなうことでより視聴者にとって見やすい画面を作成することができます。せっかく録画してまで視聴者に見てもらえるようにするのであれば、盤面や吹き出し、チャットログなどの配置には十分にこだわりましょう。特に番外編として紹介した「立ち絵を光らせる」はリプレイ動画の見やすさを大きく左右するので、全ての設定を反映させた上で録画をおこないましょう。
配信内ので視聴者のコミュニティと向き合うことで、配信をより良いものにできます。
視聴者と向き合うために最もおすすめな配信ツールがCastCraftです。
CastCraftの機能を一部ご紹介します。
このような機能により、配信者が視聴者との関係を深めることができます。
『こんなに便利なツールは他に無いので、配信者のみんなは1回騙されたと思って使ってみてほしい!!!』
『導入していたおかげでアンチの対策に非常に役立ちました。いつも本当に色々と助けられている機能があり、感謝しております。』
『知り合いの配信者が遊びに来てくれた時も見逃しにくいので、大変助かっています。』
『CastCraft様にはどれだけお世話になっているかわかりません!配信生活をもっと楽しいものにしてくださってありがとうございます。』
CastCraftが導入されているチャンネルの総登録者数は1.6億人を超えており、これまで164万回以上の配信で使われています。
日々の配信にCastCraftを導入して、より楽しい配信コミュニティを作っていきましょう。