OBSでオンライン説明会や勉強会向けの配信環境を作ってみる

  • #OBS
  • #Web会議
  • #テレワーク
  • #ツール紹介
  • #勉強会
  • #Google Meet
  • #Zoom
kobaエンジニア

こんにちは。花粉がとてもつらい koba です。

前回、「オンライン会議で資料とカメラの映像を同時に画面共有する方法」という記事の中で OBS Studio (以下、OBS) を使った仕組みを紹介しましたが、今回は OBS のシーン制御や設定をもう少し掘り下げて説明してみたいと思います。
この仕組みを上手く構築すれば、さらにワンランク上のオンライン配信が実現できます。まだまだコロナ禍の波が治まることがなく、リモートワークやオンライン化が進むこのご時世ですので、ぜひこのテクニックを活用して、他とは違う配信環境を作ってみてください。

それと先にお伝えしておきますが、OBS をインストーラーではなく、ZIP 形式の OBS で撮影しているため、画面に「仮想カメラ開始」が表示されていません。バーチャルカメラは ZIP 形式だと手動でインストールする必要があります。ご注意ください。

配信画面の作成

まずは、前回の記事を参照して、Web カメラとプレゼン用の資料をプレビュー画面に表示するところまで用意してください。仮想カメラ開始は選択しなくていいです。

今回はちょっと見栄えをよくするために、カメラ用の人物と資料をそれっぽい感じに差し替えてみました。

ここでひとつ問題があるのですが、このままだと右下に映っている人物が資料に重なってしまうので、資料が隠れて見えなくなってしまいます。カメラの出力サイズか、資料のサイズを変更すればいいと思うのですが、全体のバランスが悪くなったり無駄な余白が増えてしまうので、もう少し見栄えをよくしてみたいところです。

完成イメージ

と、いうことで OBS の設定と素材をいろいろ追加してみました。
いかがでしょう? ツギハギで作ったので、少し粗い部分はあるとは思いますが、なんとなくイケてる感じの配信画面が作れたんじゃないかと思います。

このキャンバス(映像)をバーチャルカメラ(仮想カメラ)に乗せて、Zoom や Google Meet などの Web 会議アプリにカメラとして指定すれば、この映像が相手に表示されるわけです。生配信の雰囲気が出ていい感じに映えそうです。

具体的にどんなソースを追加したのか、簡単に説明します。
と、いってもソースは「画像」や「テキスト」がほとんどです。使えそうな画像を探したり作ったり、バランスを考えながらあれこれ配置しただけです。

画面の右下に時刻を表示させていますが、これは Time.is のサービスを利用してブラウザを表示させています。OBS にはブラウザを表示する機能があり、URL を指定すればそのページを画面に表示することが可能です。もちろん、インターネットに接続していないとこの機能は使えません。まあ、ライブ配信を使える環境ならそもそも問題はないでしょう。

ここでひとつ注意。Time.is のページで使われている文字は黒色なので、背景が暗めの色だと見えづらくなってしまいます。レイヤーの後ろに白色のオーバーレイを置くのも手ですが、OBS のブラウザ設定に「カスタム CSS」を設定できる項目があります。これを利用すればフォントの色やサイズを変更したり、縁取りを付けることができます。今回は白色に変更して、文字の太さとか変更してみました。

body {
  overflow: hidden;
  margin: 0px auto;
}
body, #mainwrapper {
  background-color: rgba(0,0,0,0);
}
body>*:not(#mainwrapper),
#mainwrapper>div:not(#time_section),
#time_section>div:not(:nth-child(2)) {
  display: none;
}
#clock {
  font-family: "Timeis";
  font-weight: 400 !important;
  color: #ffffff !important;
}

カスタムCSSは YouTuber などの生配信で使われることが多いです。特に VTuber のライブ配信でよく見る、スーパーチャット(コメント欄)が配信画面にオリジナルデザインで表示されている、アレです。(どんなものか想像つかない人は、調べてみてください!)
ちなみに CSS は対応するジェネレーターがあれば、簡単に生成できます。

時刻表示ではなく、カウントダウンやカウントアップなど、ゲームやイベント配信でタイマー機能を使いたい場合は Snaz というソフトが有名です。こちらは、イベント開催などいずれ使う機会があれば、紹介したいと思います。

シーンの作成

今まで紹介した内容では、シーンは1つしか使用していませんでした。しかし、シーンを複数用意すれば、待機画面や終了画面を瞬時に切り替えることができます。

たとえば、オンラインで説明会を配信するとして、予定の配信時刻より早く見に来た人には待機中の画面を見せて、配信開始までそのまま待ってもらいます。ここでクラシックな BGM などを流しておくのもいいでしょう。開始時刻になったら、シーンを切り替えてプレゼン画面を表示します。

シーンの追加の仕方もすごく簡単です。ソースを追加した時と同じように「+ボタン」からシーンの名前を決めて、OK を押すだけです。上下の矢印で好きなように並び替えもできます。

今回は「待機画面用」「プレゼンテーション(実演中)の画面」「終了画面」の3つのシーンを作成しました。シーンでは個別にソースを設定できるので、待機画面では「お待ちください」という画面だけ見せて、このシーンを表示している間だけマイクはミュートにしておくこともできます。

事前の準備が必要ではありますが、見せたいものがあらかじめ決まっているのであれば、スムーズな配信ができるのではないかと思います。ビデオ会議ツールが持つ画面共有だと、ウィンドウ単位やデスクトップ全体を映すことしかできません。機能としてはお手軽ではありますが、デスクトップの散らかったアイコンを見られたり、見せたくないファイルを映してしまうといった事故を防げます。

シーントランジション

さて、ここでもう少しだけ OBS の設定に手を加えてみましょう。今のシーン切り替えだと、画面の切り替えが瞬時に実行されるため、味気ないです。もう少し動きが欲しいところです。

そこで、シーンの切り替え時のエフェクトを変更してみましょう。「シーントランジション」を確認してください。
デフォルトは「カット」で設定されていますが、これはシーンが瞬間的に切り替わるようになっています。たとえば、場面を切り替える際に、パッと画面が変化するよりもフェードイン・フェードアウトで画面を切り変えたほうが、画面の遷移に気付きやすくなります。また映像に躍動感が生まれて、ライブ配信の雰囲気も高まります。

エフェクトにはフェード以外にも、スワイプ、スライドなど他にもあるのですが、無難なのはフェードでしょう。ビジネス、エンタメなど幅広く対応できると思います。

ただ、ひとつ注意して欲しいのですが、ビデオ会議ツールによってはシーントランジションがきれいに映らない可能性(コマ落ち)があります。
と、いうのもビデオ会議では、フレームレートや帯域幅が比較的低めに設定されており、画質より音質(マイク)を重視しているからです。私が色々と試したところ、Google Meet だとコマ落ちが大きかったです。Zoom もそこそこ。ですので、ここまで紹介しておいてあれですが、どうしても高画質で配信をしたいなら YouTube Live などのプラットフォームで配信することをおすすめします。

YouTube で配信する場合、限定公開ならリンクを知っている人しか視聴できないようにすることができます。おそらく勉強会なら YouTube Live を採用するところも多いはず。私もオンラインで参加した勉強会は、YouTube Live か Discord での開催が多かったです。

自作のスティンガーを使う

ちょっとしたテクニックですが、シーントランジションのエフェクトは自作することができます。せっかくなのでエフェクトも簡単に自作してみました。自作のエフェクトを作成する場合は「スティンガー」を選択します。

スティンガーで指定するのは動画ファイルです。シーン元とシーン切り替え先の間に動画を挿入して、エフェクト代わりにするといったイメージです。

スティンガー用の動画ですが、動画編集ソフトを使用して作成します。編集ソフトは Premiere Pro, Final Cut Pro など、いろいろありますが無料で利用できる「AviUtl」を使用して作成してみます。

なお、アルファチャンネルを含めた動画を作成するので RGBA を出力できるフォーマットが必要です。画像データだと、PNG や GIF 形式に透過情報を持たせることができますが、それの動画版です。H.264 などで有名な MP4 はアルファ値を持たせられませんので注意。
今回は可逆圧縮コーデックとして有名な Ut Video Codec Suite (AVI) を使用します。

上記の画像は AviUtl の作業画面です。動画制作者ならこのソフトを使ったり、聞いたことは一度はあるはず。
内容はシンプルに作りました。余計なスクリプトも使用していません。細かいところは置いといて、ひとまずこれでエンコードしてみます。RGBA 出力を選択。

「UtVideo T2 RGBA VCM」を選択。ちなみに UtVideo をインストールしていないのなら、デフォルトで備わっている「RGBA (32bit)」でもいいかもしれないです。(ファイルサイズが大きくなりそうですが)

余談ですが、AviUtl でアルファチャンネルの動画を編集したいときは「アルファチャンネルを読み込む」にチェックを入れて、合成モードを「スクリーン」にするといいみたいです。

エンコードが完了したら、OBS に戻ります。シーントランジションから「スティンガー」を選択してプロパティを開きます。ちなみにここで「追加: スティンガー」を選択すると新しいスティンガーを登録することができます。

参照からアルファチャンネル付きの動画ファイルを指定します。後は「トランジションポイント」も変更しておきます。これは次のシーン切り替えまでのディレイ(遅延)を設定します。これが早すぎると、エフェクト切替中に次のシーンが表示されてしまって残念なことになります。だいたいはスティンガーの動画が完全に画面を覆ったあたりで切り替えれば大丈夫です。トランジションのプレビューを見ながら調節すれば OK です。

で、ここまでのスティンガー設定が完了してシーンを切り替えた場合がこちら。
シーンに使用しているソースがスライド一枚なので、インパクトが薄いかもしれませんが、無事に自作のスティンガーを使うことができました。

最後に

いかがだったでしょうか。ここで紹介したことは基本的なことですが、アイディア次第でもっとカッコいい配信環境が作れると思います。一番参考になるのは、他の配信を見ていろいろ研究してみることです。

コロナ禍の影響で、去年あたりから勉強会や LT 大会、自社の催しで OBS を採用するところが増えているようです。クロマキーを使って、GB (グリーンバック) の合成に使ったり、音声認識を使って字幕で文字起こししたりと、なかなか面白いことしてますね。

OBS や配信に興味ないなあ、と思っている人も一度使ってみてはいかがでしょう。動画配信に少し強くなれますよ。
あ、OBS 使う使わないに限らず、事前の配信テストはお忘れなく! マイクチェックもね。

この記事を書いた人

kobaエンジニア
おすすめRECOMMENDED