OBSで使える！クイズ大会オモイカネ杯で学ぶLIVE配信技術TIPS（前編：画面構築編）

2022年5月30日 19:23

どうも、思惟かねです。『バーチャルクイズ大会オモイカネ杯』というクイズ大会を主催しています。
2年に渡って半年ごとに5回開催された大会は、本当にありがたいことに多くの方に参加、ご愛顧いただいています。

さて、このオモイカネ杯はWebペーパーテストの予選で選抜した上位16名で本戦・決勝を行う方式。Youtube Liveの生配信でボードクイズを行うのですが、正直言ってこの配信はそれなりに大変です。

16名分の情報（容姿、名前、発言状況、解答）、問題文、正解、解説画像など大量の情報の表示
選手＆視聴者への問題提示⇒解答受領⇒正誤判定のスムーズな情報伝達
16名分の解答の正誤判定＆得点計算
以上を最低限見飽きないテンポの良さで進行する必要がある

そのため、オモイカネ杯は様々なツールを使って最大限の自動化と作業の分担をしています。また大量の情報を限られた画面に映すため画面構築にも工夫をするとともに、後加工の効かないLIVE配信を盛り上げるため演出強化の様々な仕組みを取り入れています。
5回の大会を経て試行錯誤してきたこの「オモイカネシステム」ですが、嬉しいことに多くの方が「舞台裏はどうなってるの？」と気になっているようなので、今回その内幕を前後編に分けて解説したいと思います。

生配信のクイズ大会や大型コラボなどを企画したり、画面の見栄えを良くしたりするのに有益なTIPSがそれなりにあるかと思うので、皆さんのお役に立てば嬉しいです。

前編では、使用しているツールとそれによる画面・シーンの構成などについてお話します。
その上で後半では、自動化などの進行上の工夫や演出面について詳しく説明したいと思います。

使用しているツール・サービス

OBS

言うまでもなくLIVE配信の中枢。各種ツールのキャプチャ、描画など

Discord

コラボ配信のボイスチャット、選手への問題画像の共有など

Discord StreamKit Overlay

Discordのステータスを反映してくれるWebサービス。よく配信で話している人が光るアレに使われる。選手の発話の反映に
https://streamkit.discord.com/overlay

Excel

オモイカネ杯の影の立役者。正誤判定結果の表示、得点計算、スコアボードなど殆どの作業を自動化している

PowerPoint

問題文や解答の作成、表示に使用

OneDrive

オンラインファイル共有サービス。Excelをオンライン共有し、採点情報をリアルタイムで反映するのに使用

Whiteboard.fi

オンライン授業用のWebサービス。選手のボード解答、採点に使用している
https://whiteboard.fi/

OBS Ninja + Electron Capture

前者はWebカメラの画像をブラウザ経由で送受信できるサービス、後者はそれを受信して表示できるツール。思惟かね以外の司会者陣2名の動きはこれでキャプチャしている

StreamDeck

ショートカットキーをアサインし、OBSやその他ツールを制御できるデバイス。効果音ポン出しの他、進行の自動化、演出強化に非常に重要

オモイカネ杯本戦の画面構成

では、上記のツールをどのように使っているかの説明に入りましょう！具体的には、それを配信を行うOBS上でどのようにシーン構成に落とし込んでいるか、です（細かい設定などについては後編にて）。

オモイカネ杯は限られた画面に大量の情報を表示しなければならないので、必要に応じて頻繁にシーンの切り替えを行います。
そのためいちいち画面を作っては効率が悪いので、画面の構成要素（コンポーネント）を作り、それをコピー・並べ替えすることで画面を構成し、効率化しています。

以下が大まかなシーンの構成です。
このうち、最も情報量が多く構成が大変な本戦画面について、シーンの構成とその構成要素（コンポーネント）を解説していきます。

ひな壇画面

オモイカネ杯本戦の出場選手紹介を行う画面です。選手16名＋司会者陣3名を可能な限り大写しにする構成です。
コンポーネントは①ひな壇　②メインテロップ　③司会者席　の3つ（＋コメント欄）で、比較的シンプルな構成になっています。

①ひな壇

全画面構成で使い回される、選手16名の姿、名前、そして発話状況を表示するコンポーネントです。
1枚絵のように見えますが、立ち絵、名札、オーバーレイ、そして背景の4レイヤーから成ります。このオーバーレイはDiscord StreamKit Overlayを使って背景のスクリーンの明度と発話状況を連動させたもので、↓のように話している方が分かる仕組みです。

また全体の枠や名札、スクリーンなどはAffinity Designer（Illustratorの互換ソフト）で自作しています。その前はパワポで作成していました。
ちなみにこのひな壇はOBS上での構成が一番面倒なので、ひな壇シーンで構築したものを、OBSの『シーン』ソースによって他の画面にそのまま持ち込み、クロップして使っています。

②メインテロップ

参加者の紹介画像、問題文などを表示するコンポーネントです。オモイカネ杯では画面構成の都合上、テロップをメインとサブの2つに分けています。
これはオーソドックスにMS OfficeのPowerPointで作成したスライドを、スライドショーで表示⇒OBSでキャプチャしています。なお右下の閲覧表示モードにすることで、複数のスライドショーをウインドウとして同時に表示できます。ただし画面分割などを利用して、ウインドウサイズを固定しておかないとキャプチャがずれるので注意。

またクロマキー色で背景を作り、OBS上で抜くことで画面ごとに任意のアスペクト比に変更することができます。

③司会者席

我々司会者が身を置く場所です。OPの挨拶以外はすみっコぐらし。
コラボ相手のモーションを受け取るのは、Discordの画面キャプチャが一般的です。が、これだと多人数では解像度が下がってしまうため、Webカメラの入力をブラウザ経由で送信できるOBS Ninjaというサービスを使います。
このOBS NinjaへOBS Virtual Camera経由でモーションを送ってもらい、さらにこれをElectron Captureというソフトウェアで受信、キャプチャして配置しています。
OBS NinjaはOBSのブラウザソースからでも受信できますが、画質が安定しない（ECの作者いわく内蔵ブラウザが古い）ためElectron Captureを使っています。

なお司会者デスクは3DモデルをUnity上に配置して調整⇒スクショして作成。卓前の電光掲示板はOBS上でテキストにフィルタ⇒スクロールを適用することで作っています。ちょっとした動きがあるだけで画面が映えますからね。

出題画面

本戦の問題が出題され、問題文の読み上げが行われる画面です。視聴者の方にも見えやすいように問題文を最大限大写しにしています（それでもオモイカネ杯の問題は文字数が多く、可読性はイマイチですが…）。
基本的にはひな壇画面の並び替えで、①ひな壇　②メインテロップ　③司会者席　までは共通ですが、④タイマーが追加されています。

④タイマー

オモイカネ杯の解答時間、1分をカウントするためのものです。ここで使われているのがStreamDeckのタイマー機能です。
StreamDeckは様々な機能をボタンに割り当てることができる超便利なデバイスで、その機能の1つとしてタイマーと、カウントダウンのテキスト出力があります。これをOBSのテキスト⇒ファイルからの読み取り機能によって画面上に反映。解答時間の管理を行っています。

また制限時間終了後は自動で効果音が流れ、これが配信上＆参加者Discordへ配信される仕組みになっています（※一工夫しないと配信とDiscord両方に効果音を流すことはできません。これについては後編で）。
なおこのカウントダウンタイマーは、StreamDeck以外にもSnazというソフトを使うことでも実装できます。

PR画面

オモイカネ杯本戦は、参加者が各1問、得意分野を生かした問題を出題する方式をとっていて、この間の1分の解答時間を生かして出題者のPRタイムを設けています。
コンポーネントは4つ。①のひな壇が消え、代わりに⑤サブテロップが表示。　②メインテロップ　③司会者席　④タイマー　⑤サブテロップ　が構成要素です。

⑤サブテロップ

基本的には②メインテロップと同じで、PowerPointの閲覧表示スライドショーをキャプチャしています。視聴者向けに問題文の②メインテロップを表示しつつ、PR画像を表示するためにテロップを分けています。

解答画面

出場者の皆さんの解答を表示する画面です。1分間頭を捻った皆さんが①ひな壇で再登場し、さらに⑥解答ボードが登場します。
コンポーネントは①ひな壇　②メインテロップ　③司会者席　⑥解答ボード　の4つ。

⑥解答ボード

ここでは解答の収集にWhiteboard.fiという教育向けWebサービスを使用しています。これは自分のボードだけが見えるStudentと、全員のボードが一覧で見えるTeacherに分かれて使えるホワイトボードで、マウス/ペンタブによる手書きやテキスト入力、画像の挿入、はては簡単なレイヤー機能やTeXまで実装されている素晴らしいサービスです。
ブラウザで表示した全員の解答をキャプチャすることで表示し、その上に①ひな壇画面でも使った名札を置いて名前を表示しています。

正解発表画面

さて、それぞれの正解の○✕が表示されるのがこちらの画面。先の解答画面に加えて⑦正誤オーバーレイが表示されます。

⑦正誤オーバーレイ

これこそがオモイカネシステムの要といえる部分で、Excelによって動いています。具体的には、解答者の正誤判定をシート内に0/1で記入(左)し、これを基に条件付き書式によって正解⇒赤、不正解⇒青、出題者⇒白と色を反映(右)。これをキャプチャし、OBS上で半透明にして重ねることで正解/不正解をオーバーレイ表示しています。
（なおクロマキーで抜けるようにマス間に色を付けています）

さらにこのExcelファイルはOneDrive上で共有。進行で手一杯な私に代わり、裏方仕事を担当している黒羽さなぎさんがWhiteboard.fiの皆さんの解答をTeacherモードでチェック⇒正誤判定⇒結果をExcelへ反映し、リアルタイムで手元に結果が反映されるシステムになっています。
関数によって思いのままにややこしい作業を自動化できるExcelは、オモイカネ杯のような企画において非常に強力なツールです。全VTuberはExcelを学びましょう。

解説画面

そしてここまでの①ひな壇　②メインテロップ　③司会者席　⑤サブテロップ　⑥解答ボード　⑦正誤オーバーレイ　を表示したのが最後の解説画面です。②メインテロップと⑤サブテロップを分けているのは、ここで問題と解答を同時に表示するためでもあります。
（オモイカネ杯は常時参加者が配信画面を見えるようにしているので、ヒントが出てしまう可能性があるコメントはここでのみ表示しています）

ひな壇（得点）

そして最後の画面です。中間での得点発表、そして最終結果発表を行うための画面です。①ひな壇　③司会者席　⑧スコアボードからなり、参加者が得点順に⑧スコアボードに並ぶようになっています。

⑧スコアボード

実はこれもまたExcelです。⑦正誤オーバーレイにも使った解答者の正誤判定は問題ごとに記録されているため、これをSUMで集計すれば得点がリアルタイムで計算できます。これを関数による自動ソートと組み合わせて、正誤判定すれば自動で得点表が更新されるというカラクリです。

前半のまとめ

以上が本戦の画面構築とツールの活用方法で、決勝戦や表彰式の画面はこのマイナーチェンジです。

蓋を開けてみれば「意外と単純な仕組みなんだな」と思われた方も多いのではないでしょうか？
OBSにはテキスト読み込み、キャプチャ、ブラウザソース、クロマキーなど外部連携機能が充実しているので、そこにちょっとしたツールを組み合わせれば大抵のことはできてしまうのです。
特にExcelは本当に便利なので、LIVE配信でちょっと凝ったことをしたいならぜひ使い方を考えてみてはいかがでしょうか。

…ただし、ここで紹介した画面構成はあくまで静的な部分です。
実際に画面を動かし、効果音やエフェクトを駆使して進行していく「動」の部分では、これとはまた別のテクニックが必要です。そして今回あまり目立たなかったStreamDeckがここで大活躍します。

というわけで後半：進行・演出編の記事でお会いしましょう！

--------------------------------------------------------
Twitterへのシェアはこちらから！

OBSで使える！クイズ大会オモイカネ杯で学ぶLIVE配信技術TIPS（前編：画面構築編） #note https://t.co/ug1TnNwlcM

参加者20名の大型クイズコラボ配信、 #オモイカネ杯の舞台裏をご紹介！
大型企画やクイズの他、画面の見栄えを良くするTIPSもたっぷりです。
— 思惟かね(オモイカネ)📕🔔 (@omoi0kane) May 30, 2022

--------------------------------------------------------
今回もお付き合いいただきありがとうございました。
引用RT、リプライ等でのコメントも喜んでお待ちしています。

Twitter: https://twitter.com/omoi0kane
Youtube: https://www.youtube.com/channel/UCpPeO0NenRLndISjkRgRXvA
Medium:https://omoi0kane.medium.com/
Instagram: https://www.instagram.com/omoi0kane/
Facebook: https://www.facebook.com/profile.php?id=100058134300434

この記事が気に入ったらサポートをしてみませんか？