社内イベント開催を支える技術

社内イベントで司会をやった

先日社内のイベントがあり、スタッフの一人として司会をやりました。

今までオンラインのイベントを回したことがなかったので、今後自分が再度イベントの司会をやるときや他の人が参考にするときようにメモを残しておきます。 （ツールの使い方的な話で、話術の話はしないです）

前提

イベントはGatherで実施します。

社内イベント開催を支える技術

オープニング・クロージングのスライド作成

何の変哲もないFigmaで作ったスライドをただ流しているだけだったのですが、素材の入手場所が増えたのでそこだけ。

今回はライトなイベントだったので、アイソメトリックな画像にしようと思ったんですが、そのときに以下のサイトを利用しました。

https://www.manypixels.co/gallery

検索で「Types」を「Isometric」にすると色々出てきます。あとは適当にFigmaで繋げて完成です。

Gatherの会場設営技術

今回はGatherのスペースの中で開催場所が事前に決まっていたため、ロケを敢行して障害点をチェックし排除しておきました。やったことは次の4つです。

1. 環境音を発生させるアイテムを事前に削除
2. Privateスペースを拡張
3. Spawnを指定して当日の案内を省略化
4. 看板を設置して低コストでイベント会場化

前提としてMapMakerの権限を持っている必要があります。

1. 環境音を発生させるアイテムを事前に削除

Gatherには配置すると音が出るオブジェクトがいくつかあるのですが、開催場所にもこれが置いてあったため削除しました。

設定から音量をなくすこともできるのですが、Gatherに慣れていないユーザーもいるので根本ブレイクです。
（Gatherに慣れていない時に波の音がする場所で打ち合わせしてて、マジで内容聞き取れなかったことあるマン）

---

2 ~ 4の全体像を先に示しておきます。

2. Privateスペースを拡張

Gatherは通常ある程度近くにいないと音声が聞こえない仕組みで、複数人で話すにはPrivateスペースを用意する必要があります。

事前に確認したところ全員が集まれるだけのスペースがなかったので、これを拡張しました。

なお、先ほどの図では別のPrivateスペースと重複していますが、こうなるとそのPrivateスペースに入ってしまった場合、周りの音声が聞こえなくなるので、実際にはこれらを削除した上でイベント用のPrivateスペースを展開しています。

3. Spawnを指定して当日の案内を省略化

今回のGatherのロケーションはログインすると直接いける場所ではなかったので、Gatherに不慣れなメンバーにはややハードルが高いです。

なので当日になって「ここからいけますよ」みたいな案内をしたり、迷っている人がいないかチェックしたりする必要があるのですが正直これは面倒。

GatherにはSpawnという場所に対してリンクを貼る機能があり、これを使って案内を省略しました。

あらかじめユーザーを遷移させたい場所にMapMakerの「Tile Effects」からSpawnを設置した上で、通常の画面からイベント作成を開き、このリンクをコピーします。すると、このリンクでGatherに入った場合開始位置がSpawnで設定した場所になります。 （実際にはここでイベントを作ればいいのですが、今回は別の方に事前にカレンダー登録をしていただいていたので、リンクだけコピーしました）。

4. 看板を設置して低コストでイベント会場化

画像のとおりです。仕事の合間に準備やってたので、一からマップを作る気にはならず、とりあえずオープニング用のスライドを画像化して適当に貼りました。

超低コストの割に「何をやっているのかわかりやすい」という意見があり、これはいいかもと思っています。

OBSによる配信技術

当日はイベント感を出すためにただ画面を共有するのではなく、ちょっと加工したものを共有していました。

画面切り替えと司会業を同時にやるとタイムマネジメントが難しいので、逆転の発想で時計を画面に配置し、この問題を解消すると共に200%のLIVE感の演出に成功しました（当社比）。

https://obsproject.com/ja/download

配信にはOBSを利用してます。

構成

各種素材をシーンとしてあらかじめ構成しておき、OBSのスタジオモードで切り替えています。

当日はPCとモニターの2画面で、アフタートークに備えてSlackと登壇者トークを見つつ、配信切り替えを行なっていたので全画面表示は厳しく、仕方なしに番組の方を「ウィンドウ プロジェクター（番組）」で配信しました。これで、バックグラウンドでこのウィンドウを画面共有しつつ、画面を自由に使うことができます。

素材

時計に関しては以下のものを拝借しています。

https://booth.pm/ja/items/2912843

それ以外はOBS標準の「色ソース」や「テキスト」、ブラウザやPDFが素材です。

シーンをあらかじめ作っておく

イベントの構成としてゲストトークを3本やる形式だったので、画面構成はほぼほぼ同じです。そのため、シーンは1つでテキストを都度変更するという手段を最初は考えていました。

しかしながら、先の通り当日はだいぶ慌ただしいと想像できたので、ほぼ同じ画面構成でも別途シーンを作っておきました。結果としてこれは正解でした😅

合わせ鏡にはご注意を

OBSやGatherに限った話ではありませんが、共有している画面を配信してしまうと、無限に共有している画面が映り込んでしまうのでそこにだけご注意を。

OBSによる録画技術

OBSには標準で録画機能が備わっているので、先の構成で番組として配信しているものを録画することができます。

画面としては大丈夫なのですが、音声側に1点問題があります。そのまま録音すると、自分の声は録音できるもののGather上で話している他の人の声が録音できません。

これを回避するために、Background Musicというアプリを入れました。

https://github.com/kyleneideck/BackgroundMusic

Background Musicを使うことで、システム側で流れている音声を横取りすることができます。つまり

• 【Before】「システム音声（他人の声）」→「スピーカー」
• 【After】 「システム音声（他人の声）」→「BackgroundMusic」→「スピーカー」

という構成に変更できるわけです。耳ではスピーカーの音声を聞きつつ、OBSには別途Background Musicをソースとして渡すことで、リアルタイムで音声を聞きつつの録音が可能になります。

OBSでは音声ソースを複数指定することができるので、一方を自分のマイク、もう一方をBackground Musicにして対応しました。

感想

オンラインイベントは自分からはOKに見えても、他の人は見えていなかったり聞こえていなかったりします。

今回は同じ開発チームのメンバーに「事前確認したいことあったら協力するんで言ってください！」と言ってもらえたおかげで、万全の状態でオペレーションに臨めました。ありがとうございます😊

いやあYoutuberとかって結構大変なんだなあと今回実感しました。なんかもう少しうまいことできる方法があったらまたブログで共有します。