明日からできる!OBSによるイカしたクイズ得点表示のススメ【#リンゴ収穫祭2023】
こんにちは、林檎です。
この記事は、2023年10月7日に開催されたクイズイベント「リンゴ農園収穫祭2023」の振り返り記事、第2弾です。
はじめに
みなさん、得点表示してますか?
最近はノウハウも溜まってきて、色々な大会で得点表示プログラムが組まれる時代になりましたね。とんでもねえな。
僕が収穫祭2023でやったことをご存知の方には意外かもしれませんが、僕は「義務感で何となくやるくらいなら得点表示プログラムなんかその辺に捨ててしまえ」と割とマジで思っているタイプです。極論ですね。
何てことを……とお思いの方もいるかもしれませんが、これは得点表示のプログラムを組むことに対する時間的コストを知っているから言っていることです。プログラムを組むことによってのみ享受できるありがたみを得るためにはかなりのリソースを割かなければならず、そんなことをしている暇があれば別のことに時間を割いた方が大抵イベントの質が上がると思っています。要するに得点表示プログラムってコスパが悪いんですよ。まあ言い換えれば「大量のコストを支払えば良いものが得られる」という話でもあるので、その覚悟がある場合だけやればいい、という考えでいます。
得点表示の本質は計算の自動化と情報提示であって、それができるなら手段はなんだって良いのです。決して、プログラムを組んでいるから / システムを使っているから偉いだとか、Excelは劣っているとか、ホワイトボードがダメとか、そんな優劣のようなものは全くないと思っています。同じ成果物を得るなら手軽な手段を取った方が賢いので。いばらの道を辿ってちょっとした改善をするくらいなら、簡単だけど効果の高い改善を先にやるべきです。これは真理。
というわけで今回は得点表示プログラムの作り方ではなく、「手軽に画面の見栄えが良くなる方法」として、OBSを使った得点表示のテクニックを紹介します。Excel得点表示だとか、なんなら広く(クイズに限らない)イベントで(得点表示に限らない)なんらかの画面表示をする際に役立つと思います。正確には、イベントでの画面表示でよく用いられている手法を得点表示に利用したってだけなんですけどね。
実は、収穫祭で見せたあんな演出やこんな画面もOBSなら簡単!
一見ニッチなテーマですが、多分、収穫祭の振り返り記事の中で最も直接的かつ速攻で役立つ記事ですので、ぜひ見ていってくださいね!
実際にやってみた
これが、
こうなります。これだけでも、不要な情報が消えて見栄えが良くなったと思いません? もし「Excelだとあまり見えてほしくないものまで見えてしまうから、泣く泣くプログラム書いてる」くらいの理由なら、圧倒的にこちらを採用したくなるんじゃないでしょうか。実際その方がかなり味がよさそう。
これだけだと物足りないという方にもうちょっと紹介すると、応用例としてこういうこともできます(参加者の方のポストより)。
もちろんグラフや数字の部分は別に集計をする必要がありますが、このnoteでは「解答者の “顔元カメラ” を得点表示に配置する」というところを扱います。ちなみにこれ、やり方自体は結構簡単です。いや、簡単に思えるかどうかはその人次第ですけども……。
では早速、やり方を見ていきましょう!
OBSとは?
OBS Studio、あるいは単にOBS (Open Broadcaster Software) は、ライブ配信や映像収録に用いられるソフトウェアです。オープンソースで、商用利用も可能です。
僕にとって身近な例だと、VTuberやYouTuber、あるいはTwitchストリーマーといった人たちが配信で使っているソフトウェアです。たまに「OBSが〜」って言っている人もいるので、この辺りでご存じの方もいるかもしれません。
動画、カメラ映像、画像、音声、ウインドウキャプチャなど、様々なリソースを一つの画面上にポンポン置いていくことで、配信画面を簡単に作っていくことができます。プロの配信者の使用に耐える程度には充実した機能がありますが、直感的な操作も多く、手軽に利用することもできます。
難点はそれなりにマシンリソースを食うことで、使い倒そうとするにはある程度のマシンスペックが要求されます。僕が収穫祭で使っていたMacは数年前のIntel Macではあるものの、メモリ32GB積んでいてハイスペックだったので、それなりに無茶ができたという話はあります。
とはいえ、この記事で紹介するくらいのものであれば、そこまでの性能は要求されないんじゃないでしょうか。いずれにしてもOBSは無料なので、「うちのPCで動くかな?」と悩んでいるくらいなら試してみればいいと思います。
OBSで得点表示をキャプチャしてみよう
それでは、実際の手順を見ていきましょう。
OBSをセットアップする
OBSは、公式Webサイトからインストールできます。
お使いのOSに合わせたものをどうぞ。
インストールを終えてOBSを開いてみると、いきなり設定画面が開きます。
特に配信に慣れていない方には「なんのこっちゃ」という言葉が並びますが、一旦「キャンセル」しておきましょう。どちらかというと、YouTubeやTwitchに配信をする人向けの設定が続くので。
これでとりあえずOBSが使える状態になりました。
個別の設定を今のうちにしたい「形から入るタイプ(?)」の方は、たとえば以下の資料を読んでみてください。
シーンに得点表示画面を追加する
Excelでもプログラムでも何でもいいので、得点表示するものを用意しておきます。OBSではデスクトップに表示中の任意のウインドウをキャプチャする機能がありますので、それを使ってみましょう。
「ソース」から、「ウインドウキャプチャ」を選択します。
適当に名前を付けて……
ウインドウ選択で得点表示を選びましょう。
そうすると、OBSに得点表示画面が現れます!
得点表示が見えている部分が、OBSにおける「プレビュー」の画面です。
このままだと見えてほしくないものまで見えてしまうので、OBSに映った得点表示の画面をいい感じにトリミングしましょう:
Altキーを押しながら得点表示画面を選択するとトリミングできます
Altキーを押さずに得点表示画面を選択すると拡大縮小できます
いい感じになりました?
スクリーンに映像を投影する
一般的なOBSの使い方だとこのあと録画や配信の設定をするのですが、得点表示に使うだけなら後はスクリーンにこの画面を見せるだけです!
「全画面プロジェクター」という機能を使うと、OBSで編集した画面をそのままプロジェクターやモニターに映すことができます。
得点表示が見えているプレビュー画面で右クリックして、「全画面プロジェクター」から表示したいプロジェクターを選択しましょう。
そうすると、以下のようにプレビュー画面がプロジェクターに大写しになります。非常にスマート!
はい、これで基本的なOBSの使い方はおしまいです。
意外と簡単だったのでは?
応用:OBS活用例
OBSくんは優秀なので、結構できることが多いです。
クイズイベントの画面表示に活用できそうな実例をいくつか紹介します。
なお、OBSはもともと配信用ソフトウェアなので、設定すれば「イベントの模様を生配信」といったことも(インターネット環境があれば)可能です。実際生配信ありのイベントはOBS使っているんじゃないかな、とか思っています。知らんけど。別に僕は配信のプロじゃないし。
とはいえ、この記事ではその辺りのテクニックは範囲外にして、ひとまず「オフラインイベントのクオリティを上げる」という点に絞っていきます。
シーンの切り替えを活用する
OBSでは、いくつかの素材(画面キャプチャとか画像とか)が配置された一つの画面のことを「シーン」と呼んでいます。PowerPointでいう「スライド」に相当します。
PowerPointでスライドを増やすのと同じように、シーンもたくさん作れるので、
クイズ中の画面
順位発表の画面
休憩時間中の画面
何かトラブルが起こった時に表示を隠すための画面
などなど……
シーンをいくつか作っておくと、それらを瞬時に切り替えられて便利です。
単純に、見せたくないものを見せなくて良くなるので、画面表示用のPCとその他の管理用のPCを兼ねることができるというメリットもあります。もちろん間違って表示してしまう事故のリスクはありますけどね。とはいえ、画面表示を続けたまま裏で集計やちょっとした修正ができるというのは、イベントをやったことのある人ならありがたみを感じる人もいるのではないでしょうか。
余談ですが、「左手デバイス」を持っている方はポチポチ画面をいじらなくてもボタンひとつでシーン切り替えができたりします。OBSでショートカットキーを登録するよりもシンプルです。収穫祭では配信者御用達のElgato Stream Deckを使っていました。みんなもStream Deckに課金しよう。
スライドと得点表示を同じ画面に載せる
OBSで表示できるのは当然Excelやプログラムに限らないので、応用範囲は広いです。
収穫祭では、得点表示の上にPowerPointスライドを重ねて、ビジュアル問題を表示したり長文解説を行ったりしていました。
OBSを使わないでやろうとすると、ウインドウの重なり関係などを考えねばならず大変なのですが、OBSのシーン上では簡単に重なり関係を変えることができるので便利ですね。
PowerPointをOBSに表示する際には、「スライドショーの設定」から「ウインドウ表示」にするのがおすすめです。
得点表示と同じように「ウインドウキャプチャ」を追加して、画面にスライドを追加してみましょう。
これ意外と効果高くて、OBSを使わないとウインドウの重なり具合をよく考えないといけない(得点表示を操作しようとしたら得点表示が "前側" に来ちゃってスライドが隠れた! とか経験ありませんか?)んですが、OBSだとそんなことを気にしなくてよいです。
安定して複数画面をスクリーンに表示できる、実はコスパの良い方法だったりします。
クロマキーを活用して見た目を良くする
収穫祭のFinals: Heads-up Tournamentでは、試合が終わるたびに以下の画像のようなトーナメント表が画面に現れ、次の対戦カードが分かるようになっていました。僕こういう表が出てくるだけでワクワクしちゃうんで大好きなんですよねー。
さて、収穫祭のとんでもシステムを目にしていた多くの人は、「きっとこれもシステムの一環なんだろう」と思っていたと思います。試合が終わるたびにその結果が自動で反映され、トーナメント表ができているという。
でも残念、実はこれ全部手入力です。
……いや、ホントなら僕だってシステムにしたかったんですけど。時間がなかったので急ごしらえで作ったんですね。「ここまでのこだわりはどうした」と言われそうですが、でも実際おそらくほとんどの人には気づかれなかったと思うので、だったらそれでも良いのでは、と思います。システムを作ったから偉いのではなく、結果として得られる体験が良いことが全てだからです。
1番労力の少ない方法で、最高の結果が得られるのであれば、それで良いのです。
ということで、システムを作らなくても真似できるイカしたトーナメント表の作り方です!
トーナメント表の画像を作ります。
まあここはデザイン能力が要求されます。頑張りましょう。
とはいえ、まずは「シンプルで見やすいものを作る!」と意識すれば大丈夫です。PowerPointとかでOK!
スクリーンにあったサイズで書き出すなりして画像データにしておきましょう。
画像の上に載せる「プレイヤー名と得点だけ」の表示用Excelを用意します。
オススメはGoogle Spreadsheetで、これを使うと表示用PCじゃないところからスコアを編集することができてオペレーションが楽になります。
Excelでやるなら引き続きウインドウキャプチャが使えますが、Spreadsheetを使うなら「ブラウザ」を選択してOBS内ブラウザを直接使っちゃうのが良いです。
クロマキー機能を使って「プレイヤー名と得点以外のすべて」が見えなくなるようにします。
下記の画像のように、適当な色(マゼンタとかグリーンとか)が背景になるように表示用Excelを編集します。
OBSのプレビュー画面上でExcelを選択し、「フィルタ」をつけます。
「クロマキー」を選択し、いい感じにパラメータを調整してください(頑張れ)。
できたものを必要に応じてコピーするなどして、トーナメント表の画像の上にうまく文字が乗るようにしましょう。
できあがり!
このトーナメント表、Excelだけだとかなり表現力に限界があって、一方プログラムで書くと大変だし……という感があるので、今回は(時間の制約もあり)このような方法を採用してみました。多分気づかれなかったと思います。できたの確か当日の未明だったけど。
ということで、こういった画面自体はシステム全く関係なく、OBSとExcelかSpreadsheetがあれば作れちゃいます!
ぜひいろいろ試してみてください。
“顔元カメラ” を表示する
さあ、最後にこの話題行きましょう。
BPL(BEMANI PRO LEAGUE。音ゲーのeスポーツリーグ)の影響を受けて "顔元カメラ" と呼んでいる機能ですが、こちらも思った以上に好評で嬉しかったですね。
が、しかし!
OBSを使うとこの仕掛けもすぐにできちゃいます!
早速やってみましょう。
Webカメラを買います。
テレワークとかで使っているもので構いません。特別な機能はついていなくてよいです。
当日は1080pのLogicoolのWebカメラを使いました。画質的にはこれかもう少し手ごろなやつでも良いかも。照明条件かもしれませんし、良いものを使う分にはそれなりにクオリティも上がりそう。
https://www.logicool.co.jp/ja-jp/products/webcams/hd-webcam-c615n.960-001270.html高さ的には三脚があるとよさそうです。こういう感じのやつ。
https://www.yodobashi.com/product/100000001002606338/
WebカメラをPCにさします。
OBS上にWebカメラの映像を出します。
Windowsだと「映像キャプチャデバイス」で出せるはず。
得点表示の上にのせてできあがり!
これだけです。いや、ホントに。
僕も「そんなに面倒な感じにはならないはずだけどな」と思いながら試してみたら、想像以上に簡単で笑っちゃいました。
しかも当日やってみて改めて感じましたが、選手の表情が見えるのってめっちゃいいですよね。どんな感情を持ちながらクイズをしているのか、あるいは1問ごとの一喜一憂といったものが伝わってきて、観戦時の情報量がグッと増します。行われているクイズは同じでも、観戦時に得られる情報量が違うだけで観客側の満足度も変わるんじゃないかなと思っています。突然この演出が現れた驚きと合わせて、Finalsの良いスパイスになったんじゃないでしょうか。
ちょっとした裏話をすると、カメラが不具合を起こしたときのためにFinals進出者の方には写真撮影を済ませていただいていて、もしカメラが映らなかったら静止画を載せておく予定でした。結果そんなことにはならなかったので、Finals進出者の方の中で「あの写真、なんで撮ったんだ……?」という疑問を抱かれている方がいたらそういうことです。まあ、「はいはいいつもの写真のアレね」と思っていざ試合に出てみたらライブ映像でびっくり、という体験になっていたかもしれませんが。バックアップは大事だということで何卒……。
ともかく、本当にやることが少ない割に良い効果が得られる演出だと思いますので、是非ともお試しください!
おまけ:「裏側を見せない」ということ
最後に、OBS関連で僕が意識しているイベント運営上の心構えを1つ紹介します。
OBSを使った画面表示オペレーションを採用する背景に、「イベント中は極力裏側を見せない方が良い」という考え方があります。
クイズにしろ謎解きにしろ、何らかのコンテンツを期待して集まっている参加者にとって、スタッフの裏方作業や操作は基本的にノイズになります。特にクイズのコミュニティは参加者が供給者としての経験を持っていることも少なくないので忘れがちになりますが……。
コンテンツを楽しんでいる間にそうした “現実に戻る瞬間” が挟まると、参加者の集中が途切れたり分散したりして、あまりいいことはありません。「そんなこと気にしない」と思っている人もいるでしょうが、ノイズなんてないに越したことはないのです。
もし最大限自分達のコンテンツを楽しんでほしいのなら、極力そうしたノイズは排除すべきで、そのテクニックの一つが今回のようなOBSによる画面表示になるという訳です。
「そこまでやるのか?」という声が聞こえてきそうですが、僕の答えはただ一つです。
やるんだよ。
僕にとって、そして参加してくれる方にとって、収穫祭は1年にたった1回のチャンスなので、やれることは全てやるのです。できるはずのことで手を抜いて、満足度が下がったら滅びたくなるので。もちろん、他のもっとカジュアルなイベントについては適度に手を抜いてますよ。これを全てに適用していたら身体がいくつあっても足りないので…… (とはいえ、OBSは画面レイアウトを簡単に構成できるツールとして、むしろ楽をするために使うことはあります) 。
もちろんOBSを使えば全部解決というわけでは全くなく(スタッフ業務はそれ以外にも無数に存在するので)、これ単体でイベントからノイズが消え去るわけではありません。しかし、こうした “ちょっとした積み重ね” の先に、心震えるイベントは存在しているのだと僕は思っています。
誤解のないように言っておきますが、ここまで徹底するのはそれなりに狂っている自覚があるので、皆さんは「必要だと思った時に」「必要だと思う範囲で」使ってみてくださいね。あくまでノウハウのシェアであって、ここまで徹底していないイベントが悪だとは微塵も思っていません。こうした記事を読んだ人が「私にはここまでできないわ……」とそもそもイベントをしなくなってしまうことは、僕にとって最も悲しいことです。もしも自分にとってかけがえのないイベントを作ることになったとして、少しの妥協も許さないと心から思えた時に、このマインドを思い出してもらえるといいなと僕は思っています。
なお収穫祭では、敢えてちょっとだけ裏側をしゃべるみたいなことを意図的にやっています。それはどちらかというと収穫祭の特殊性を感じてもらったり、時には仕組みがわかる安心感を与えたり、といったことを狙ってやっていたことです。この辺りは、コンテンツから一歩ひいたメタ的な視点になりますが、イベントの目的や状況によってはこういうこともアリだと思います。
おわりに
最後までお読みいただき、ありがとうございました。
時折挟まるお気持ち表明は、まあにじみ出る林檎の思想ということで適当に流していただきつつ、自分にとって役に立ちそうなところだけ持って帰っていただければと思います。
OBSは一見専門性の高いツールに見えますが、必要なところだけ使うようにするととても便利で手軽に使えるツールです。
演出に力を入れるときだけでなく、ちょっと手を抜いて、楽してスクリーンの画面を作りたいときに案外役に立ちます! 是非とも活用してみてください。
みなさんのクイズライフがよりよいものになりますように!
この記事が気に入ったらサポートをしてみませんか?