OBSでゲスト+リスナー参加型のクイズ企画YouTube配信をしたときのノウハウ大放出(配信者向け)

　クイズ企画配信をしたときの工夫や準備でつまづいたところなどを詳しくまとめてみます。
　クイズ企画を目論んでいる配信者の方の参考になれば嬉しいです。もしくは配信の裏側が気になる物好きな視聴者さん向けかな。
　クイズの内容作りについては一番下に書くのでそれだけ読みたい人はスクロールしてください。

1. ざっくり配信の内容を紹介

　スプラトゥーン配信者のお友達3人をゲストとしてお誘いし、スプラトゥーン3のサーモンランNWを題材にしたクイズを出題しました。水色の丸いのが僕です、よろしくお願いします。

　今回、ゲストだけでなくリスナーも参戦できるよう、出題ごとにアンケート機能を使いました。アンケートで多かった回答がリスナー軍の回答となります。アンケートの終了はゲストが全員答えを書き終わったタイミングとしました。

　リスナー軍の回答を見たのち、ゲストの回答をいっせいオープン！そして答え合わせ！

　いろいろ問題の感想を話したところで現在の得点を表示します。
　全部で例題1問+13問出題しました。その中には…

　これはゲームのスクリーンショットをどアップしてステージを当ててもらうクイズ！正解発表は実際にゲーム内でゲストと共にその場所を探しに行きました！

　てぃーってぃてぃってぃ♪というかっぱ寿司みたいな歌が特徴的なハシラさんの音声を4つ流し、うち3つはピッチ調整している。真のハシラを当てるクイズもありました。
　配信アーカイブのリンクはこちらです。
⇒ https://www.youtube.com/live/kyrUfsgX94A?si=X6pTbwO8Gylt4G3p
　では次の項目から詳しく裏側を見ていきます。

2. 画面構成(OBSのシーン作成)

　配信中主に使ったソフトなどは OBS(Ver.30.0.0)、discord、Googleスプレッドシート、VtubeStudio、YouTube Live Chat Comments Only(chrome拡張機能)です。
　準備では aviutl、CLIP STUDIO PAINT、DiscordStreemkit、Discordテキストチャンネル外観変更ジェネレーター、Discord StreamKit：立ち絵変換にお世話になりました。
　画面構成はこんな感じ…

• 背景は暗め、黒にグレーのストライプとクイズを表示する場所の周りに派手目のオレンジ色

• クイズのスライドショー

• クイズのスライドの奥にゲーム画面のキャプチャ

• クイズの下側手前にゲストの画像を並べて配置(discordでしゃべると動いて光る)

• ゲストの手前にゲストの回答

• 端っこに司会のくらげ

• クイズ番組っぽいネームプレート(クリスタで作成)を一番手前に

• 余った右上のスペースにリスナーのコメント

　メインのシーンにソースを詰め込みすぎると配信中の操作が大変なので、背景、ゲスト、ゲストの回答をそれぞれ別のシーンとして分けておき、シーンをソースとして使いました。それによって操作ミスが減るだけでなく、ゲストの回答を1クリックで表示非表示できるのでおすすめです。

3. クイズのスライド作り

　ゲストへのクイズの出題方法ですが、OBSの画面をdiscordで画面共有する方法でいきました。通話しながらほとんどラグなく画面を見せられるし、のちのち説明しますがDiscord Streemkitをがっつり使うのでdiscord以外の選択肢はないですね。
　OBSの画面共有は
discordで通話開始>OBS画面を右クリック>ウィンドウプロジェクター(プレビュー)>discordの左下の方にある"画面共有">"ウィンドウプロジェクター"を選択
とすればできます、念のため。

　さて、最も肝心のクイズの問題文ですが、画像スライドショーを使います。ルール+例題+13問で50枚くらいの画像を用意しました。
　
　画像の準備です。無料の動画編集ソフトaviutlを使いました。
　無料でだいたい何でもできる代わりに導入が大変で有名なソフトです。使い慣れた別のソフトがある方やWindowsじゃない方はレイヤー機能のあるお好きな画像編集ソフトで。
　編集画面はこんな感じ。

　大きさは1280x720で十分。
　背景は趣味で若干色を付けました。
　テキストは基本中央揃えで、気づくか気づかないかくらいの縁取りをつけました。フォントはコーポレート・ロゴです。
　画像の下の方はゲストの立ち絵と被る可能性を考慮してなるべく余白。

問題文はとにかく読みやすさ優先！

　答えの表示形式は「答え：×」みたいなのだけじゃなくて、選択肢を赤丸で囲むのも便利です。カスタムオブジェクト-扇形>フィルター-マスク-円　とすると、自由な大きさ太さできれいな円を作れるのでおすすめです。

　画像の保存は 右クリック>クリップボードに出力イメージをコピー>ペイントなどにペースト>名前を付けて保存 でできます。

　さて、保存するファイル名は大事です。
　OBSの画像スライドショーがおそらく名前順に表示されるので、表示したい順に0-1→0-2→1-1→1-2→…みたいな感じでつけるといいと思います。僕は問題ごとにn問目m枚目なら"n-m.jpg"としてます。
　それから、10問目以降もしバグって順番変わったら嫌なので 9-2→a-1→a-2→b-1→…と16進数的な感じでやってます。これで35問くらいまでいけるな、知らんけど。

　ちなみになんですが、地味に気を付けたのがイレギュラーな出題方法のとき、出題スライド→答えスライド の間にスライド1枚はさんだことです。
　配信中操作ミスった時の事故防止のため。

　画像を作り終えたらOBSでソース追加>画像スライドショー

• 表示の動作：常に再生(一時停止のやつでもいい)

• スライドモード：手動

• トランジション：フェード

• 画面切り替え速度：300ms(遅すぎない程度)

• 画像ファイルはディレクトリを追加から画像を保存したフォルダを選択

　あとは配信で進行に合わせて手動でスライドを進めていきます。ホットキー使えばやりやすいかも、僕は設定し忘れてたけど。

4. しゃべると跳ねて光る立ち絵

　discordでしゃべってる間立ち絵がぴょこっと跳ねて光るやーつ。
　Discord StreemkitとDiscord StreamKit：立ち絵変換にお世話になります。

　まずDiscord Streemkitで VOICE WIDGET>サーバー選択>チャンネル選択>右下のリンクをコピー

　次にOBSでソース追加>ブラウザ>URLの欄にリンクをペースト
これで通話中のdiscordのアイコンが表示されるようになりました。

　次、Discord StreamKit：立ち絵変換 を開きます。discordアイコンを立ち絵に変えて表示できる超絶便利ツールです。

　必須情報を入力します。
　ユーザIDはdiscordでアイコンを右クリック>ユーザーIDをコピー
　画像URLは適当なテキストチャンネルに立ち絵を貼って、右クリック>リンクをコピー
でOKです。

　発話時のアクションの跳ねると明度変更、ネームタグ非表示に☑を入れて、生成ボタン押す。

　出てきたCSSをコピーして、さっきOBSで追加したブラウザのカスタムCSSの欄にペーストすれば1人分完成です！
　あとは人数分繰り返し…

5. ゲストの回答をオープン！

　クイズ大会といえば、「回答をオープン！」って言いながらボタンぽちーでゲストの回答がいっせいに表示されるようにしたかったわけです。

　Discord StreemkitとDiscordテキストチャンネル外観変更ジェネレーターにお世話になります。
(ちなみに今回は使いませんが同じツール作者でOBSのDiscordアイコン外観変更ジェネレーターも大変便利なのでおすすめ)

　さて、まずdiscordで回答を書き込む用のテキストチャンネルを人数分作ります。チャンネルの編集>権限>プライベートチャンネル>メンバー追加で本人だけ見れるようにすればなおよし。

　OBSでシーン『回答』を追加します。
　Discord StreemkitでCHATWIDGET>サーバー選択>テキストチャンネル選択>右下のリンクをコピー

　OBSでソース追加>ブラウザ>URLの欄にさっきのリンクをペースト
　これで回答用テキストチャンネルの内容が表示されるようになりました。

　次に、Discordテキストチャンネル外観変更ジェネレーター を開きます。テキストチャンネルの不必要な情報を除いて、最新のテキストだけ表示できる超絶便利ツールです。

　「四角ブロック」か「吹き出し左」を選択します。
　だいたい全部右選んで必要ない情報を除いて最新の投稿だけ表示されるようにします。
　一番下のCSSをコピーして、さっきOBSで追加したブラウザのカスタムCSSの欄にペースト！
　この流れを人数分やる！！！
と多分こんな感じになります↓

　あとはメインのシーンでソース追加>シーン>既存を追加>『回答』でワンクリックで全員の回答を表示非表示できるようになりました！やったー

6. いい感じの得点表示

　クイズの正解発表したあと、「現在の得点はこちら！ここまでの得点はAさん〇点、Bさん〇点、…」ってやりたいですね。さすがに必須。

　色々やり方ありそうですが、僕はGoogleスプレッドシートを使ってみました。ググったらちゃんとしたツールありそう、知らんけど。

　スプレッドシートの作り方を解説するのは作るよりはるかに大変なので出来上がったものを共有しちゃう。https://docs.google.com/spreadsheets/d/1BLpluaw9rDzahwAS5rlSuCWcgyIX0ipMRunZWtdsL20/edit?usp=sharing

　使いたい方は自由に保存してアップロードしていい感じに名前の部分とかを編集してください！

　さて、スプレッドシートをOBSに表示します。
　スプレッドシートの右上、共有>一般的なアクセス>リンクを知っている全員 にしてリンクをコピー。

　次に、このnoteで無限にやってきた操作、OBSでソース追加>ブラウザ>URLの欄にリンクをペーストします。

　あとはAltキー+マウスで必要な部分だけ表示できるように調整すれば準備完了です。

　配信で正解発表のあとブラウザでスプレッドシートを操作します。セルに1と入力すれば勝手に得点が計算されます。
　入力が終わったらOBSのソースを表示すれば「現在の得点はこちら！」ができます。よっしゃー

7. (おまけ)クイズを作るとき考えてたこと

　配信の解説は終わりです。ここまで読んだあなたはクイズ企画配信の準備を爆速で終えることができるはずです、たぶん。ちなみに僕はググる時間含めて20~30時間くらいかかりました。

　ここからは僕のクイズ楽しんでくれた人向け裏話。クイズの内容の考え方について書いてみます。
　クイズ考えてるときがいっちばん楽しいフェーズですね！配信の準備はひたすら大変だけど。
　僕はクイズのプロでは全然ないド素人ので「ふーん、へー」くらいでお願いします。

　まず、テーマに沿ったクイズをいっぱい作ってメモ帳にでも書きまくりました。とりあえずアイディアは数勝負でしょう。気軽に起動して即書き始められるソフトを使います。

　アイディアの中から奇抜なものをいくつか選びます。奇抜なのがないうちはまだアイディアの数が足りてないかも。回答者の予想を抜いて驚かせたいところ。驚きが楽しみのスパイス！
　奇抜なところから丸めていけばいい感じになると思います。その問題が心の中のメインディッシュです。今回の僕の配信で言うと「どアップステージクイズ」「ハシラの歌声」「最終問題」がそうでした。

　残りは序盤に出題できそうな多くの人が正解できるだろうもの、あんまり知られてなさそうだけど面白いもの、とにかく難しいものをそれぞれ何問か選びます。


　次に、クイズの裏取りと用語の修正をします。
　裏取りは僕の場合サーモンランNWがテーマなので、スプラトゥーン3wikiを見てみたり、自分でゲームをプレイして検証したりしました。
　用語の修正ですが、問題文の中のゲーム用語などをできるだけ多くの人に伝わるものにします。勘違いが起こる問題文にならないようなるべく気を付けたいところ。


　最後に、難易度調整をします。〇×にすれば易しくなり、記述式にすればくそ難しくなります。4択にして実質2択で悩むくらいが面白くしやすい気がします。
　選択式にすれば、クイズが全く分からなくても悩んで選ぶ楽しみがあるので、回答者のレベルに幅があるなら選択式がいいです。

　そういえば僕は〇×を出すとき答えを×にしたくなりがちでした。「こんな〇×クイズを出すんだから〇なんじゃね？」とメタ読みされるのが嫌だから。
　雑学を〇×にするとき、〇を正解にすると易しく、×を正解にすると難しくなる気がしています。
　知識を得るだけで満足できそうな難しい雑学は〇を正解に、知ってるけど思い出せそうで思い出せねえみたいなのは×にしたいかな……おっと、ここまで書くと次僕がクイズを作ったとき人読みされてしまう。逆張りするか。

　最後の最後に、難易度調整をしてもとにかく難しくなっちゃったクイズを除外します。本当に誰も正解できないようなのを出してしまうとみんなつまんないからです。


　さあ、最後の最後の最後に、クイズの並びを考えます。
　序盤は多くの人が知ってるような知識のクイズを出したいです。知ってる知識のクイズは楽しいから。正解できるともっと楽しいから。序盤楽しかったらそのあと難しくても楽しんでもらえると思うから。

　3か4問目くらいで奇抜なのを出したいです。飽きが来ないように。
　今回、どアップステージ画像クイズで、正解発表前に実際にゲストと探しに行くというあんまり他で見たことないことをしてみました。楽しかった。

　クイズ大会終盤になってきたら、とても難しいクイズを出しても許されるような気がする、知らんけど。
　難しいほど正解したときの快感が大きくなり、難しいほど誰かが正解して自分が不正解のときの悔しさが大きくなる。どっちにしろ最高の気分で終えてもらいたいなって感じです。

　読んでいただきありがとうございました。