この記事はクラウドワークスグループ Advent Calendar 2024 シリーズ1 の17日目の記事です。

はじめに

先日、弊社でSmartHRさんと共同でアクセシビリティイベントを開催しました。

本イベントはオフライン開催でしたが、YouTube Liveでの同時配信も実施しました。
一般的な技術イベントの配信は画面共有のみでも十分なケースが多いのですが、今回は弱視を持つテスターさんの リアルな操作感を伝えること 、 複数の映像ソースを柔軟に切り替える必要があること から複雑な配信設定が必要でした。

配信の全体構成

画面レイアウト

イベントの進行に合わせて、以下4つのレイアウトを切り替える構成としました。
OBS Studio （以下OBS）を用いてこれらを切り替えます。

スライドのみ
スライドと登壇者x2
デモ画面と操作の様子（スマホ）
デモ画面と操作の様子（PC）

機材構成

1. 配信系統

配信用PC（OBS 使用）
ドッキングステーション

2. カメラ系統

ビデオカメラ（登壇者用）
Webカメラ2台（登壇者・デモンストレーション撮影用）
キャプチャーボード（ビデオカメラの映像取り込み用）

3. デモ映像系統

デモ用PC（操作デモ用）
デモ用スマホ（操作デモ用）
キャプチャーボード（デモMac画面取り込み用）

4.音声・字幕系統

音声：
- 音声ミキサー(Mixcast 4)
- 無線マイクx2
- 会場スピーカー
字幕：
- UDトーク用スマホ（マイクへ接続）
- UDトーク用PC（文字起こしデータ出力用）
- UDトーク表示用ディスプレイ

※UDトークは会話をリアルタイムに文字起こしするためのアプリです

5.その他

オフライン会場用プロジェクター

配線構成図

これらの機材をすべて接続するとこのようになります。
配信用PCでマイク音声、カメラ映像、デモ映像の3つをまとめ、YouTube Live配信とプロジェクターへの投影を行います。

配信の工夫ポイント

スライド操作の最適化

イベントでは、テスターさんの手元の操作を見やすく共有する必要があり、具体的には以下のようなニーズがありました。

デモ画面をプロジェクターで会場に投影しつつ、配信でも映像を共有したい
スライド進行と複数の映像ソースの切り替えを同時にコントロールしたい

これをOBSの機能を活用して、以下のように実現しました：

全画面プレビュー機能：配信プレビューをプロジェクター投影に使い、オフライン会場とオンライン配信に同じ映像を届ける
ブラウザキャプチャ + 対話モード：スライド操作をOBSから行えるようにし、映像ソース切り替えと操作を両立

この構成により1台の配信PCから全ての操作を管理でき、オフラインとオンラインで同じ画面を共有することができました。

音声品質の確保

配信にクリアな音声を届けるため、以下の対策をとりました。

不要な音声入力のカット
- Webカメラの内蔵マイクをOFF
- デモ機器からの音声をカット
  - 予期せぬ通知音（Slackなど）が配信に載ってしまうのを防ぎます
ミキサーでの音量調整
- 音量を調節する際は、以下の2つのバランスを調整します
  - マイクの入力ゲイン
  - スピーカーの出力

スピーカーの出力を上げすぎるとノイズも一緒に増幅されてしまい、かといってマイクの入力ゲインを上げすぎると音割れやハウリングの原因になります。事前に会場で音声テストを行い、オフライン会場とオンライン配信でクリアな音質を保てるバランスを調整しました。

USBの帯域制限への対応

使用する3台のカメラ（登壇者用2台、手元用1台）のうち、1台の映像がOBSで黒色画面になるトラブルが発生しました。

原因は、USBポートの帯域幅制限の可能性が高いと思われました。WebカメラはUSBで映像データを送信しますが、一つのポートで処理できるデータ転送量には上限があります。3台のカメラを同時に接続すると、この帯域幅が不足してカメラが正常に動作しなくなる可能性があります。

当初の構成では、配信用PCのUSB Type-Cポートにドッキングステーションを接続し、そこに全てのカメラを集約していました。
問題のあったカメラを配信用PCの別のUSBポートに直接接続することで、全てのカメラが使えるようになりました。

やってよかった事前準備

機材の接続図作成

今回のような配信は必要なデバイスが多く、接続関係が複雑になります。
事前に接続図を作成することで、当日の配線がスムーズになり、必要なUSBポート数の不足といった制約も事前に把握することができました。

会場レイアウトと機材配置

機材の配置は、参加者の動線を考慮する必要があります。
今回は車椅子の方の来場も予定されていたため、配線には注意を払いました。登壇者を撮影するカメラは配信機材から離れた位置に設置する必要がありましたが、参加者の動線を妨げないように調整しました。

機材の確保

会社所有の機材だけでは必要な構成を実現できなかったため、個人の機材も持ち寄る必要がありました。特にWebカメラは以下の理由で重宝しました。

（ビデオカメラと比較して）キャプチャーボードが不要
プラグアンドプレイで設定不要
軽量かつ引っ掛けがついており設置場所の自由度が高い

おわりに

以上のような配信設計と事前準備により、当日のトラブルを最小限に抑えることができました。
今回のイベント経験を通じて、オフラインとオンラインの同時配信ならではの課題と解決方法を学ぶことができ、特にアクセシビリティに関する臨場感をオンライン視聴者にも届けることができました。

配信はアーカイブに残っているので良ければご覧ください。

主催であるのまさん（@haribooooom）が当日の様子や気づきについて詳しく解説してくださっています。ぜひ合わせてご覧ください！
クラウドワークス×SmartHR「出張！俺の仕事探し」〜クラウドワークスをアクセシビリティチェックレポート #smarthr_a11y

以上、本記事の知見が同様の配信を検討されている方の参考になれば幸いです。