OBSを使ったオンライン勉強会の画面づくりの紹介 #1 配信の概要
こんにちは、かめねこです。
今回は、OBSとZoomを利用して、ちょっとリッチなオンライン勉強会を構成する方法をご紹介します。単に配信するだけでなく、イケてる画面で勉強会を開催してみませんか？
概要
左近、多くの勉強会がオンラインへシフトしてきました。その形態の多くは、YouTube Liveなどの動画プラットフォームでリアルタイム配信を行う形態がほとんどです。そのため、視聴者（参加者）には動画のコンテンツとして見えるわけですが、このときの画面などのレイアウトが非常に凝っている勉強会が増えてきました。
以前紹介した以下のエントリーの方法では、非常に簡単に配信を行うことができる一方で、Zoomの画面がそのまま映し出されるのに近いため、動画コンテンツとしてのクオリティは高いとは言いづらいものでした。
そこで、本記事ではもう少しリッチなレイアウト構成を行う方法をご紹介します。これにより、見栄えの良いレイアウトで配信し、視聴者の参加体験を向上させることを目的とします。
なお、配信と一言に言っても、やることは非常に多いため、以下のとおり複数のエントリーに分けてご紹介します。全てをご覧いただけると嬉しいのですが、必要に応じてご自身の求めている内容に併せてお好きなエントリーをご確認ください。各エントリーは、ベストエフォートで作成していきますので、本記事が公開されたときには、それぞれはまだ作成されていません。作成が完了次第、適宜リンクを行っていくのでお待ちいただければと思います🙏
目次
- 概要と目標（本記事）
- 画面レイアウトの作り方「フレーム画像の作成」
- 画面レイアウトの作り方「コンテンツづくり」
- 画面レイアウトの作り方「背景・その他」
- 音声の扱い
- オペレーション・スイッチング
ゴール
以下のような画面構成を作り上げることを目標とします。スライドコンテンツ以外に、Twitterなどを表示させています。
また、単に画面を作るだけではなく、配信に関わる音声や、当日のオペレーションについても解説します。
画面構成
もう少し詳しく説明すると、以下のような感じです。
OBSのソースは、以下のように構成されています。
これらの画面は、Photoshopでフレーム画像の作成を行い、その画像とTwitterなどを組み合わせて表示させています。
これ、よく見るとスライドやカメラなどのエリアが角丸になっていたり、Twitterの背景に背景画像が透過されているのがわかると思います。これは、背景画像に対して、スライドやカメラ、Twitterなどの枠で穴抜き処理を行ったフレーム画像として前面に表示させています。そのフレーム画像と、背景画像の間にZoomなどのウィンドウキャプチャさせた映像とTwitterを表示させているわけです。具体的には以下のような構成です。
この画像から見て分かる通り、いくつかのレイヤー構成となっています。なお、ここではセッションタイトルなどのテキストは割愛しています。
- フレーム レイヤー（緑色の枠線）
- コンテンツ レイヤー（青色の枠線）
- 背景レイヤー（ピンク色の枠線）
フレームレイヤー
フレームレイヤーでは、以下の画像のような画面を構成するフレーム画像を配置します。基本的にはこれが最前面に配置され、セッションタイトルや登壇者名などが例外的にこのレイヤーより上に配置されます。
このレイヤーは、OBS側でいじることはほとんどなく、フォトショで頑張ることの多いレイヤーです。フレーム画像の作り方については、以下のエントリーで詳細をご紹介しています。
コンテンツレイヤー
コンテンツレイヤーは、主にZoomなどのオンライン通話ソフトウェアと、Twitterのストリームによって構成されています。オンライン通話ソフトウェアは、ZoomやDiscordなどのアプリケーションや、ブラウザを画面キャプチャするなどして表示します。また、TwitterはTweetDeckがほぼリアルタイムストリームに対応している（正しくは、4秒ごとの自動更新）ので、それをOBSのブラウザソースを利用して表示しています。
また、Twitterの表示にはひと手間加えており、背景を透過させ、いいねやリツイートボタンを非表示にさせています。これらは、カスタムCSSを当てて、該当のオブジェクトや属性を非表示にさせています。以下のエントリーで詳細を解説しています。
背景レイヤー
背景レイヤーは、フレーム画像で透過させた箇所を埋める素の背景画像と、それを補正する半透過図形によって構成されています。
基本的にはフレーム画像とコンテンツレイヤーで画面が専有されるため、背景レイヤーの画像が映ることは稀ですが、万が一ウィンドウキャプチャなどがずれてしまった場合などを考慮して配置しています。以下のエントリーで詳細を解説しています。
TBD
その他
音声の扱い
画面構成の他に、音声についても気にする必要があります。特に、今回はZoomを利用した構成ですので、デスクトップの音を適切に収集する必要があります。特に、システムサウンドなどが流れないように、適切にルーティングします。
ここでは、OBSでの音声の構成方法や、Windowsの音声ミキサーを利用したアプリケーションごとの音声の制御についてご紹介します。詳しくは、以下にて解説しています。
TBD
オペレーション・スイッチング
最後に、当日のオペレーションについて解説します。どんなに配信画面を作り込み、完璧な構成を作れても、それを正しくスイッチングすることができなければ、参加者は落胆してしまうでしょう。
具体的には、以下のとおりです。
- 事前の配信テストやYouTube Liveの構成
- 開始前の登壇者 音声・出力チェック
- シーン切り替え
- 終了方法
特に、待機状態から登壇者へ話始めるまでは、配信担当者が舵取りを行います。単に配信していればよいだけではなく、登壇者などと適切にコミュニケーションを行います。詳しくは、以下にて解説しています。
TBD
終わりに
正直、簡単に配信できるならそれに越したことはないですが、残念ながら配信の難易度さとそのクオリティは比例してしまうようです…。もっと適切な方法もあるかもしれませんが、選択肢の1つとして参考にしていただけると幸いです。
