スプレッドシートで配信レイアウトをリモート化しよう

はじめに

皆さんはYoutube等で配信をされたことがありますか?
私は先日、ゲーム大会の配信をする機会があり、その時に行った工夫について今回は紹介しようと思います。

配信の設定について

大会の配信では各対戦の情報を画面上に表示して対戦ごとに情報を表示しています。情報としては対戦する選手の名前、チーム名、アカウント名、ラウンド数、現在の成績等などが挙げられ、配信を見た方にどんな人がどのように戦っているのかを分かりやすくしています。
↓の画像でソースと書かれている箇所が配信を行うための素材となりますが、かなり多く、各対戦の間に情報を一人で変更をするには時間がかかってしまいます。

そこで、今回は配信画面を設定する人以外でも表示を変更できるようにして作業を分担したいと思います。やり方としてはスプレッドシートを配信画面に表示して、スプレッドシートの書き換えによって表示する情報を変更していきたいと思います。

大まかな流れ

スプレッドシートで配信画面を設定する流れは以下になります。

  1. スプレッドシートを作成する
  2. スプレッドシートをOBS等の配信ツールで表示する
  3. 透過処理をする

スプレッドシートの作成

まずはスプレッドシートで記入欄を作成します。今回は対戦のラウンド数と選手の情報の記入欄を作成します。

次に別のシートでレイアウトを整えていきます。先ほど作った記入欄のセルを参照するように関数を設定して、表示が変わるようにします。背景を緑にしているのは透過をするためです。透過をする際に色を指定するので文字と背景の区別をしやすくしています。

こちらに今回作成したスプレッドシートを共有しておきます。
スプレッドシート

シートは保護しているのでスプレッドシート自体をコピーをして保護を解除してご使用下さい。

スプレッドシートをOBSで表示する

ブラウザでスプレッドシートを表示している状態でOBSのソースから「ウィンドウキャプチャ」で取り込んでください。
※OBSを全画面表示にしていたり、スプレッドシートを最小化するとスプレッドシートでの変更が反映されないことがあります。変更が反映されない場合はOBSの全画面をやめたり、スプレッドシートの最小化をやめたりしてみてください。

下の画像のようにできれば大丈夫です。

透過処理

先ほど取り込んだソースを右クリックして「フィルタ」を選択して「エフェクトフィルタ」から「クロマキー」を選択して画像のように設定すると透過されます。

あとは背景画像やゲームの映像を追加して完成です。

さいごに

このスプレッドシートを使った配信方法で配信担当の負担を3割位は減らせたと思います。配信をする機会があれば是非試してみてください!

 


--------------------------
システム開発のご要望・ご相談はこちらから

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です