BASEプロダクトチームブログ

ネットショップ作成サービス「BASE ( https://thebase.in )」、ショッピングアプリ「BASE ( https://thebase.in/sp )」のプロダクトチームによるブログです。

全社定例をアップデートするために配信環境を整えてみた

こんにちは!
BASEのInformation System(情シス)に所属している横山です。

さっそくですが、BASEでは毎月全社定例を行っています。去年から続くコロナ禍の中、以前までは当たり前のようにやっていたオフラインでの集会も難しくなっています。そしてWork From Homeの継続に伴い、全社定例はより重要なイベントになっています。

「今後すぐに在宅勤務がなくなることはないだろう。」
「月に一度の全社定例がより大事なコミュニケーションの場となるので、アップデートしたい。」

そんな想いで全社定例をより良くするために本格的な配信環境を整えて開催しました。 今回はその様子を振り返りたいと思います。

今までの全社定例では

コロナ禍の今、100人以上の社員が出社し集まることは難しくなってからは、Zoomのウェビナー機能を使ってやっていました。

f:id:kyoko2424:20210226191112p:plain
Zoom ウェビナーを使った全社定例
こちら特別なことは一切していないのでZoomのウェビナーライセンスのみあれば可能です。

zoom.us

ウェビナーを使った全社定例は簡単に始めることができるので手軽ではありますが、

  • スライドの内容や話しての感情が伝わるように登壇者や司会者の顔だけでなく体も映したい
  • 登壇者も各自のPCやマイクを使っているので人によって画質や音質にばらつきをなくしたい
  • 長時間になると単調な映像だとつらいので、スイッチングやワイプの切り替えなどの仕掛け、より良いデザインにして、見ていて楽しい映像にしたい

こういった課題がありアップデートをすることになりました。

年初会に向けて

去年の11月下旬に全社定例のアップデートの話があり、ターゲットを1月の年初会に合わせて準備をはじめました。Slackでは、#pj-broadcast_system が立ち上げり、配信に詳しい社内メンバーにアドバイスをもらいながら進めることとなりました。

12月上旬、機材が届きはじめたので、年末年始の休みに入るまでに二日ほど情シス含む関係者で集まり、機材の設置やどういう構成で配信しようかと試行錯誤しました。

f:id:kyoko2424:20210226191508p:plain
試行錯誤している様子 1

f:id:kyoko2424:20210226191611p:plain
試行錯誤している様子 2

最終的に、年初会はこんなイメージでやることになりました。
背景スライド、プレゼンスライド、登壇者が左下にワイプで抜かれていて、進行の際に司会者が右下に登場します。

f:id:kyoko2424:20210226191707p:plain
配信イメージ

みんなで構成を考えつつ、必要な機材を洗い出しました。

機材

主な機材はこちらになります。

  • カメラ x 1
    • CANON XA40 (レンタル)
    • 今後必要になるかもしれないマニュアル設定ができ、外付けマイクや会場音声を利用できるようXLR入力に対応、レンズ管理などは大変なのでレンズ一体型のビデオカメラを探しました。業務用でありつつボタンが最小限でタッチ操作メインのXA40にしました。
    • 最初はを購入する予定でしたが、買う前に一回レンタルして使ってみて決めようということでレンタルしたところ、利用する頻度も多くないし、このままレンタルで良さそうという結論になりました。レンタルだと一日 3,000円/台です。
  • 三脚 x 2
    • E-IMAGE EK630
    • カメラも業務用であること、携帯性 < パン/ティルトのスムーズや安定性を優先し、それでいて安価な三脚です。元々X40を二台購入する想定だったので三脚も二台購入しています。
  • グリーンバック x 1
    • Elgato Green Screen
    • 折りたたみ式になっているので収納ケースを開けて、下から引っ張るだけです。収納ケースがそのまま土台になるのでセットも片付けも数秒で終わります。
  • スイッチャー x 1
  • マイク x 2
    • SHURE SM58SE
    • スイッチ付きモデルにしてます。届くまでカメラのレンタルでついてきたマイクでテストしていましたが、SHUREのマイクに変えたらノイズがほとんどなくなりクリアに聞こえるようになりました。
  • 照明 x 2

上記の他に、ケーブル、変換アダプタ、コードリールなど細々した周辺機器も購入しました。

構成

結果、このような構成になりました。
最背面には背景用スライドがあり、その上にプレゼン用スライドと左下の登壇者のワイプを被せ、OBS側でクロマキー合成した司会者を被せています。
スライドと登壇者が被ると見にくかったりスライドに集中できなかったりするのであえて左下に置いてます。
司会者は登壇者が話している時はグリーンバックの前から移動して映らなくします。

f:id:kyoko2424:20210226191946p:plain
配信イメージ(詳細)
まとめた構成図になります。
f:id:kyoko2424:20210226192026p:plain
構成図
登壇者はスライドのスピーカーノートが表示されているPCを見ながら話し、配信しているZoomに参加したPCで配信画面とチャットを確認することができます。
司会者は進行する時のみカメラに入り、登壇者が話している時はカメラに映らない場所で待機します。
XA40のカメラマンは登壇者の写り具合を確認しながらカメラを微調整します。Webカメラは固定です。
また、進行に合わせて背景用スライドを操作する人もいます。

設定

ATEM Mini Pro

プレゼン用スライドをアップストリームキーで設定します。

パレット > アップストリームキー1 > DVE
フィルソース:Camera 2(プレゼン用スライド)
位置:ちょうどいい位置に
サイズ:ちょうどいいサイズに

f:id:kyoko2424:20210226192200p:plain
プレゼン用スライド(アップストリームキー)

登壇者のカメラはダウンストリームキーで設定します。

パレット > ダウンストリームキー1 > DVE
フィルソース:Camera 3(登壇者カメラ)
マスク:映る場所に合わせて上下左右の数値を調整

本来ダウンストリームキーはテロップやロゴなど常に映っている部分の編集に利用するようなのですが、今回はそこにカメラを設定してます。マスクした中にちゃんと映るようにカメラも調整します。

f:id:kyoko2424:20210226192335p:plain
登壇者カメラ(ダウンストリームキー)

OBS

次は配信PCでOBSを起動し、ATEM Mini ProとWebカメラをPCに接続します。 OBSでATEM Mini Proの映像と司会者を合成します。

OBS > ソース > + >映像キャプチャデバイス
デバイス:Blackmagic Design

OBS > ソース > + >映像キャプチャデバイス
デバイス:HD Web Camera

f:id:kyoko2424:20210226192431p:plain
OBS

ソース > Webカメラ > フィルタ > エフェクトフィルタ > + > クロマキー
細かい設定はデフォルトから変えていません。

f:id:kyoko2424:20210226192510p:plain
クロマキー

あとは二つの映像を重ねて、サイズ、位置を調整します。

Zoom

今回はウェビナーではなく、通常のミーティングに配信PCで参加します。 最初は、ビデオ設定 > OBS Virtual Camera にして配信していましたが、 画面共有 > 詳細 > 第2カメラのコンテンツ でカメラの映像を画面共有する方が画質が良くなりました。

f:id:kyoko2424:20210226192614p:plain
Zoom 第2カメラのコンテンツ

当日

年末年始休暇に入る前に機材は設置し、映像や音声の確認をしました。 あとは当日を迎えるだけです。

f:id:kyoko2424:20210226194318p:plain
本番前

本番1時間くらい前にOBSを操作するPCが固まり、Webカメラの映像を取り込めなくなりました。 OBS、PCを再起動しても改善せず。 調査してても間に合わないのですぐに別のPCにOBSを入れて設定しました。

本番始まってからはもう突き進むしかないのですが、配信画面でよく見ると本来のスライドとは少し色味が変わっていることに気付きました。薄いグレーを使っている箇所はほぼ見えなくなってしまいましたが、それでも何とか配信自体は止めることなく、致命的な事故もなく終えることができました。

f:id:kyoko2424:20210226194731p:plain
全社定例の配信映像

課題

顔だけでなく身振り手振りも見やすいかたちで映すことができ、映像としてもイメージしていたものに近いので、概ねやりたいことはできたのですが新たな課題がたくさんあります。

  • リハーサルはちゃんと本番のスライドで確認する
    • リハーサルが12月21日で本番が1月5日で年末年始を挟むので仕方ない部分もありつつ、リハーサルが早すぎて本番用スライドで確認できなかった
  • もっと画質を良くしたい
  • スライドの色が微妙に変わってしまう
    • 薄いグレーは消える/見にくくなる
  • クロマキー合成したときに腕まわりに黒いぼやぼやが映る
    • グリーンバックに映った影?

などなど、次の配信までに少しずつでも改善していきたいです。 あと設置、片付けにも時間がかかってしまうので、ゆくゆくは専用の部屋や配信スペースを用意したいですね。

まとめ

個人的には他社さんでの配信事例も見ていたので、いつかやってみたいと思っていました。 高価な機材はプライベートで触ることが難しいですし、とても楽しみでした。

実際に色々試行錯誤している時間はとても楽しく、夢中になってやっていたような気がします。 私を含めてほぼ経験がないメンバーで手探りでここまでやってきましたが、それ故に改善する点はまだまだたくさんあります。 専門性が高いのでこれからもっと勉強し、もっと良い全社定例にしていきたいと思います。

おまけ

緊急事態宣言の発令もあり、2月の全社定例は従来のようにZoomのウェビナー機能を使って実施しました。その際、こちらのSlackに投稿したメッセージがニコニコ動画風に流れるChrome拡張機能を使ってみたらとても盛り上がりました。

chrome.google.com