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