OBS のテロップ：ブラウザソース1つで全グラフィックス
OBS Studio は標準でライブのHTML5グラフィックスを表示できます。プラグインもキャプチャーカードも2台目のマシンも不要です。ここでは透過ブラウザソース1つで OBSのテロップ、スコアバグ、ティッカーを出す正確な手順と、よくある問題の対処をまとめます。
なぜメディアソースではなくブラウザソースか
メディアソースはファイルを再生します。ブラウザソースは生きたウェブページを実行し、完全なアルファ透過でシーンに合成し、リアルタイムに更新します。ライブグラフィックスではこの差がすべてです。ページは送出中でも自分の内容を変えられるため、スコアや名前がOBSに触れずに更新されます。
さらに、1つのソースがすべてのグラフィックスを運びます。テロップ、スコアバグ、ティッカーは同じ透過ページ上の要素なので、互いにずれることがなく、12個のソースを積み上げる必要もありません。
ソースの追加手順
- LowerThird Software を起動します。コントロールパネルと出力ページを自分のマシンから配信します。
- OBS でカメラやゲームキャプチャがすでにあるシーンを選びます。ソース欄の + をクリックし ブラウザ を選択します。
- 名前を グラフィックス にして OK。
- URL に
http://localhost:5275/outputを入力します。 - 幅 1920、高さ 1080 — キャンバス解像度に合わせ、シーン上でサイズ変更はしないでください。
- 「表示されていないときにソースをシャットダウン」はオフのまま。「シーンがアクティブになったときにブラウザを更新」は、シーン切替のたびにグラフィックスをリセットしたい場合だけオンにします。
- OK を押し、ソースをリストの一番上へドラッグしてカメラより前面に置きます。
透過：設定は不要
透過の設定を探す方が多いのですが、そのような項目はありませんし、必要もありません。OBSのブラウザソースはページのアルファチャンネルをそのまま扱います。ページが背景を塗らなければ、OBSは描画されたピクセルだけを重ねます。
黒や白の四角が見える場合は、OBSではなくページが背景を塗っています。ソースのカスタムCSSで他社製ページは救済できます（body { background: transparent !important; }）が、放送用に作られたページはもともと透過であるべきです。
サイズ・スケーリング・セーフエリア
ソースは必ずキャンバスと同じ解像度（通常1920×1080）で作成し、位置調整はOBS側でのスケーリングではなくページ内で行ってください。ブラウザソースを拡大縮小すると文字が再サンプリングされ、すべての輪郭が甘くなります。配信テロップがぼやける最大の原因です。
1280×720 で配信する場合も、ソースは1920×1080のままにし、最後にOBSがキャンバス全体を一度だけ縮小するようにします。きれいな1回の縮小は、2段階のスケーリングに勝ります。
5つの問題と対処
- ソースが真っ白／真っ黒。 アプリが起動していないか、ポートが違います。まず通常のブラウザでURLを開いてください。そこでも空ならOBSの問題ではありません。
- グラフィックスが更新されない。 ページがキャッシュされているか、ソケットが切れています。ソースを右クリックして 対話、または更新。WebSocketベースのページなら自力で再接続するはずです。
- テロップが甘い。 ソースがスケーリングされています。トランスフォームをリセット（ソース選択時に Ctrl+R）し、サイズはプロパティ側で指定してください。
- 全体がカクつく。 OBSのハードウェアアクセラレーションが無効か、重いアニメーションが動いています。width・height・影ではなく、GPUが処理する transform と opacity を使ってください。
- シーン切替でオーバーレイが消える。 「表示されていないときにソースをシャットダウン」がオンです。オフにするか、同じソースを各シーンにコピーではなく参照として追加してください。
本番中の運用
パネルはサブモニターか、机の上のタブレットに置いてください。ウェブページなので、同じネットワークでブラウザが動く端末なら操作できます。現在のゲストが映っているうちに次のゲストの名前を入力し、カットが変わったら TAKE を押します。
コマンドは WebSocket で届くので、ポーリング待ちも再読み込みもありません。クリックしたのと同じフレームでアニメーションが始まります。
自分のシーンで試しますか 早期アクセス版を入手し、ブラウザソースを1つ追加すれば、5分ほどで名前テロップを送出できます。
早期アクセスを申し込む