見出し画像

【全員自宅からイベント配信】Backlog World 配信構成の解説(前編)

4/18に開催されたBacklog world 2020 re:Union。同時接続約400名と、非常に盛り上がったオンラインイベントでした。

私は天神放送局として、このイベントの配信を担当させていただきました。イベントのリアル開催ができない今、同じような配信をしたい方も多いと思います。

そういった方々の参考にして欲しく、前後編に分けて配信の構成を紹介します。

配信アーカイブ

YouTubeには既に当日のアーカイブが公開されています。ぜひ実際の映像もご覧ください。

前提として、今回は完全オンラインの配信です。登壇者・運営者・配信者、全員が自宅からZoomで接続して配信しました。

当初は、運営・配信だけ集合する予定でしたが、緊急事態宣言の発令により完全オンラインへの移行が決まります。結果的には、非常に安定した配信で終われたと思います。一時トラブルで止まったものの、迅速な復旧をすることができました。(詳細は反省も交えて後述)

機材構成

まずは全体の機材構成を紹介します。

PC3台、タブレット2台、スマートフォン1台、スイッチャー2台、モニター1台を組み合わせていました。自分で言うのもアレですが、豪華な構成だと思います^^;

画像17

実際の配信卓がコチラ。広めの机なんですが、ギッチギチになっております。。配信だけならPC1台でも可能です。今回は、自由なレイアウト&安定した配信を目指した結果、このような構成になりました。

画像17

冗長化構成

実は万が一に備えて冗長化もしていました。福岡リージョンを用意し、YouTubeに同時配信をしていました。

YouTubeには「バックアップストリーム」の機能があります。東京(メイン)の配信が途切れると、自動的にバックアップに切り替わる仕組みです。

スライド2

先のJAWS DAYS 2020ではこの構成が活きたと聞き、運営チームから強いリクエストを頂いての構成でした。

幸いにもこの体制は使わずに済みましたが、別のトラブルに見舞われる事に。。詳細は後ほど。

画面作りの考え方

今回の配信で一番拘ったのは画面デザインでした。基盤には「Zoom」を使っていますが、一見そうは見えない画面が作れたと思います。

スクリーンショット 2020-04-18 23.01.00

この画面は「必要な素材を集めて結合する」という考え方で作られています。

画面共有の画面」「登壇者の画面」「はめ込み画面」の3つを集めて、一つに合成をしています。この時ポイントになるのが、Zoomの設定・OBSの活用・VP-42Hの導入です。

スライド3

前編ではこの辺りを中心に解説したいと思います。

画面共有・登壇者の画面

まずはZoomの「画面共有の画面」と「登壇者の画面」から。

今回はPC2台を用意し、それぞれ「画面共有の画面」と「登壇者の画面」を映しました。2つに分けてをHDMIで抜くことで、別素材として合成が可能になります。

スライド3

ただし、単純にPCに映している訳ではありません。Zoomの2つの機能を使い工夫たので、それをご紹介します。


・デュアルモニター

まずは「デュアルモニター」の機能です。この機能をONにすることで、Zoomの「画面共有」と「登壇者」を分離して扱うことができます。

スライド11

Zoomは1画面のレイアウトが基本です。「画面共有の画面」の上に参加者がフローティング表示されたりしますよね。会議では便利ですが、配信をする上では邪魔な存在です。

デュアルモニター機能を使えば「画面共有」と「登壇者」の分離が可能です。物理的なモニターを用意せずとも、スイッチャーを擬似的なデュアルモニターに使うことができます。

画像15

ちなみにZoomの画面レイアウトは他にも種類があります。以前まとめたので、興味がある方はコチラもご覧ください。


・ビデオ無しの参加者を非表示

もう一つは「ビデオ無しの参加者を非表示」です。この機能を使うことで、会議に参加中&ビデオOFFの人は映像から消すことができます。

画像14

この機能は非常に重要です。イベント中は様々な人が、ビデオ&マイクOFFで参加する必要があります。例えば、司会者や次の登壇者が控える場合。また、配信担当者も入っておく必要がありますね。

この機能をONにしなかった場合、よく見る名前だけの画面が表示されてしまいます。ONにすることで、存在を視聴者には見せない演出が可能です。

画像15

はめ込み画像

Zoomの設定は以上です。次は画面を装飾するはめ込み画像についてです。

はめ込み画像はPowerPointでデザインし、OBSで要素を追加・出力しています。OBSで追加する要素はTwitter画面・テロップの合成です。

画像10

では、それぞれの活用について紹介します。


・はめ込み画像の作成

まずはPowerPointで作成したはめ込み画像について。

デザインは構成案を運営チームよりいただき、何度か擦り合わせをして作成しました。背景やロゴ素材は提供いただいたので、それらを適宜分解しながら配置。aiファイルだったおかげで分解がしやすく非常に助かりました。

PowerPointで作成する際は、合成する場所を緑色(R:0 G:255 B:0)にします。動画は画像のような"透過"の概念がないので、合成する場所はクロマキーで透過する必要があるのです。(訂正:動画にも透過の概念「アルファチャンネル」がありました。今回の構成でも可能か研究中。。)

スクリーンショット 2020-04-19 10.53.11

作成した画像はOBSに読み込み、Twitter画面と合成します。


・Twitter

Twitterは「tweetdeck」の画面をOBSで画面キャプチャしました。Tweetdeckはタイムラインが自動更新されるので、こういったイベントの埋め込みにはピッタリです。

Tweetdeckを表示したブラウザをOBSと並べて画面キャプチャ。拡大縮小して微調整しながら、はめ込み画像の枠と合わせていきます。

画像9

細かい事を書くと、はめ込み画像A→画面キャプチャ(Twitter)→はめ込み画像Bの3レイヤー構造になっています。AとBは同じ画像ですが、Aだけクロマキーで緑を抜いています。Aだけだと緑が残らないので、Bで再び緑を足しています。


・テロップ

OBSのテキスト機能を使い、登壇者のお名前・タイトルを表示しました。イベント中の入力はリスクがある為、先に全パターン用意しておきました。(ただ、最後の「楽屋トーク」は忘れていて、案の定操作中に画面が乱れてしましました。。)

テロップの切り替え操作は非常に忘れやすい作業です。その為、目に入りやすい所にリマインドのテープを貼っておきました。ただ、何度か運営サイドからの声で気付くシーンもあり、注意が必要な作業です。

画像11


・出力

OBSで合成したはめ込み映像は、映像スイッチャーに出力します。右クリックで全画面出力先選ぶ形です。

スクリーンショット 2020-04-19 11.52.09

OBS自体で配信も可能ですが、今回ははめ込み画像を作るテロッパー的役割で活用しました。OBSは便利な一方で不安定な面もあります。経験上、ハードウェアでリスク分散した方が安心の為、OBSの役割は最小限にしています。

合成

これで3つの素材が用意できました。最後に「Roland VP-42H」で合成していきます。VP-42Hは強力なレイアウトデザイン機能を持った映像スイッチャーです。この存在が今回のデザインの根幹になっています。

今回は、特に活きた機能を2つ紹介したいと思います。


・レイアウトデザイン機能

VP-42Hは、インプットした映像を自由なレイアウトで配置することができます。サイズ・アスペクト比も自由に調整ができ、更には拡大縮小・クロップまでできます。

映像入力は最大4つ。管理画面はタブレットにも対応しており(ブラウザ画面)、指操作でレイアウトが作れるのも良い点です。

画像13

このレイアウトは、最大10のパターンを設定することができます。ただ映像のスイッチングではなく、レイアウティングした映像をスイッチングできるのがVP-42Hの強みです。


・レイヤー構造とクロマキー

設計したレイアウトはレイヤー構造になっています。なので、はめ込み画像・Zoom映像・Zoom映像の順番に並べています。

VP-42Hはレイヤー1のクロマキー処理ができるので、はめ込み画像の緑部分は透明になります。

画像16


これ程の自由度でレイアウトができるスイッチャーは実は多くありません。私が探した限りは、VP-42Hが一番安くコンパクトです。これ以下の価格だと、レイアウトできてもパターンが決まっていたりします。

レイアウトに拘った配信がしたい方には、VP-42Hは非常にオススメできる機材です。

前編まとめ

いかがだったでしょうか。

前編では「必要な素材を集めて結合する」考えの下、3つの画面を集めて合成する方法を紹介しました。後編では残りの構成や起きたトラブル、反省を紹介したいと思います。

画像18

また、配信当日の内に「反省会ライブ」で構成の紹介もしております。気になる方は、ぜひこちらもご覧ください!


追記:後編はTipsごとに記事を書くことにしました。ぜひご覧ください!

もっと簡単に配信したい

「こんなに機材集めるのはムリ!」「まずは手軽に配信したい!」

そんな方にはこちらの記事がオススメです。Zoomは手軽にYouTube Liveに連携することができます。とても簡単なので、ぜひお試しあれ〜!

ライブ配信で機会格差を無くしたい

普段は「天神放送局」の名義でライブ配信を広める活動をしています。

各地のコミュニティを巡る中で、素敵なコンテンツが届けない人に届いていない現状を目の当たりにしてきました。距離、時間、仕事、身体...様々な格差で、参加したくてもできない人々がいます。

ライブ配信はこの格差を埋めることができます。皆が配信できるようになれば、この差はあっという間に埋まっていくはずです!

このミッションを達成する為に、どんどん配信ノウハウを発信していく予定です。ぜひnoteマガジン、YouTubeチャンネルをフォローをお願いします!