Contents
OBS のインストールとバージョン確認
OBS Studio を配信に利用する際は、まず公式サイトから最新の安定版を取得し、正しくインストールできているかを確かめることが重要です。最新版（2026 年時点では 31.0 系 が推奨）であれば、ブラウザソースに実装された最新機能やパフォーマンス改善がすべて利用可能です。
Windows へのインストール手順
Windows 環境での取得は公式ダウンロードページから行います。以下の手順を順番に実施してください。
- 公式ダウンロードページ（https://obsproject.com/ja/download）へアクセスし、
Windowsセクションの「インストーラー」をクリックしてOBS-Studio-xx.x.x-Full-Installer.exeを保存します。 - ダウンロードが完了したらファイルを実行し、画面の指示に従ってインストールを進めます。途中で「スタートメニューにショートカットを作成」や「自動起動」の設定も選択できます。
- インストール後、デスクトップまたはスタートメニューから OBS Studio を起動し、正常に立ち上がることを確認します。
macOS へのインストール手順
macOS でも公式サイトから直接取得するのが最も安全です。
- 同ページの
macOSセクションで.pkgファイル（例:OBS-Studio-xx.x.x.pkg）をダウンロードします。 - ダブルクリックしてインストーラを起動し、管理者パスワードを入力してインストールを完了させます。
- アプリケーションフォルダーに OBS.app が生成されたら、右クリック → 「開く」で初回起動の許可を与えてください。
Linux（Flathub / apt PPA）での取得手順
| ディストリビューション | 手順概要 |
|---|---|
| Flathub (全体共通) | flatpak install flathub com.obsproject.Studio を実行し、インストール後は flatpak run com.obsproject.Studio で起動します。 |
| Ubuntu 系（PPA） | sudo add-apt-repository ppa:obsproject/obs-studio → sudo apt update && sudo apt install obs-studio の順に実行してください。 |
バージョン確認方法
OBS を起動したら、メニューバーの 「ヘルプ」 → 「OBS Studio の情報」 を選択します。表示されるウィンドウにバージョン番号が記載されています。31.0 以上であれば本ガイドの手順をそのまま適用でき、古い場合は 「設定」→「更新」 から最新版へ自動アップデートしてください。
ブラウザソースの基本概念と他ソースとの比較
ブラウザソースは OBS が内部的に Chromium エンジンを利用して HTML・CSS・JavaScript を描画する機能です。Web コンテンツをそのまま配信画面に埋め込めるため、コメントオーバーレイや時計、アラートなど動的要素の実装に最適です。
仕組みと主な用途
ブラウザソースは外部 URL またはローカル HTML ファイルをリアルタイムでレンダリングします。以下は代表的な利用シーンです。
- コメントオーバーレイ：配信プラットフォームのチャット情報を取得し、デザイン自由に表示
- ライブ時計・カウントダウン：JavaScript で時間計算し、CSS で見た目を調整
- アニメーションロゴやエフェクト：WebGL や CSS アニメーションを利用可能
画像・テキストソースとの比較
| 項目 | ブラウザソース | 画像ソース | テキストソース |
|---|---|---|---|
| 動的コンテンツ | ✔（JavaScript） | ✖ | ✖ |
| カスタマイズ性 | 高（CSS/JS） | 中（フィルタ） | 低 |
| 配信負荷 | やや高（GPU レンダリング） | 低 | 低 |
| 主な用途 | コメント、時計、アラート等 | 背景・ロゴ | 固定文字表示 |
※表中の「テキストソース」表記は正しく 「テキストソース」 としてください。
主なコメントオーバーレイサービスと取得手順
配信プラットフォームごとに提供されているウィジェット URL を取得し、OBS のブラウザソースへ貼り付けるだけでリアルタイムコメントが表示できます。以下では公式ドキュメントが確認できる代表的サービスを取り上げます。
Streamlabs（公式）
Streamlabs は Twitch・YouTube など主要配信サービス向けに Chat Box ウィジェット を提供しています。取得手順は次の通りです。
- https://streamlabs.com/dashboard にログインし、左メニューの 「Widgets」 → 「Chat Box」 を選択
- 設定画面下部に表示される 「URL」（例:
https://streamlabs.com/widgets/chat-box?channel=YOUR_CHANNEL_ID）をコピー - 必要に応じてテーマ・サイズを調整し、「保存」 をクリック
公式ドキュメントは https://dev.streamlabs.com/docs/widget-chatbox で随時更新されています。
OneComme（公式テンプレート）
OneComme は無料のコメントオーバーレイテンプレートを配布しており、公式サイト上で直接 URL を取得できます。手順は以下です。
- https://onecomme.com/templates にアクセスし、好きなデザインの 「取得」 ボタンをクリック
- 表示された ウィジェット URL（例:
https://onecomme.com/widget?template=standard）をコピー - OBS のブラウザソースに貼り付け、幅・高さを調整
公式ガイドは https://onecomme.com/docs/browser-source に掲載されています。
ScChat（公式）
ScChat は日本国内向けのライブコメントサービスです。取得手順は次の通りです。
- https://scchat.com/dashboard にログインし、「Chat Widget」 メニューを開く
- 「埋め込みコード」 欄に表示される URL（例:
https://scchat.com/embed?room=YOUR_ROOM_ID）をコピー - OBS のブラウザソースへ貼り付けて利用
公式マニュアルは https://scchat.com/docs/obs-integration で確認できます。
重要ポイント：すべてのサービスは HTTPS が必須です。CORS 設定が正しくないと表示されませんので、提供元の「HTTPS / CORS」対応状況を必ず公式ドキュメントで確認してください。
ブラウザソースの追加方法とカスタマイズ例
ここでは OBS にコメントオーバーレイを組み込む具体的な手順と、デザイン調整に使える CSS／JavaScript のサンプルコードを紹介します。
ソース追加からサイズ・FPS 設定までのフロー
以下の手順でブラウザソースを作成し、配信画面に最適化された状態で配置できます。
- ソースの追加：OBS の「ソース」パネル左下の 「＋」 ボタン → 「ブラウザ」を選択。任意の名前（例:
コメントオーバーレイ）を入力し OK をクリック。 - URL 入力：取得したウィジェット URL を「URL」欄に貼り付け、「ローカルファイルを許可」 が必要な場合はチェックを入れます。
- サイズ設定：幅と高さは実際に画面上で見える領域に合わせて指定します（例:
400 × 200ピクセルが標準的）。 - FPS 設定：デフォルトは 30 FPS ですが、コメント表示だけなら 15 FPS に下げても遅延感はありません。
- カスタム CSS（任意）：次章のサンプルコードを貼り付けて見た目を調整し、OK をクリックすると即座に反映されます。
カスタム CSS／JavaScript の実装例
CSS カスタマイズ例
以下はコメントボックス全体のフォント・背景透過・行間を変更するサンプルです。OBS の「カスタム CSS」欄にそのまま貼り付けて使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* フォントと文字色 */ body { font-family: "Noto Sans JP", sans-serif; color:#FFFFFF; } /* 背景を半透明に */ .chat-box { background: rgba(0, 0, 0, 0.35); } /* コメント行のサイズと間隔 */ .message { font-size: 18px; line-height: 1.5; } |
JavaScript による自動スクロール例
コメントが増えても常に最新コメントが見えるよう、DOM の変化を監視して自動スクロールさせます。カスタム JS 欄（OBS 30.x 系以降で利用可能）に貼り付けてください。
|
1 2 3 4 5 6 7 8 |
const chatBox = document.querySelector('.chat-box'); if (chatBox) { const observer = new MutationObserver(() => { chatBox.scrollTop = chatBox.scrollHeight; }); observer.observe(chatBox, { childList: true }); } |
ヒント：
!importantを付与すると、ウィジェット側のスタイル上書きを防げます。例background: rgba(0,0,0,0.35) !important;.
トラブルシューティングとパフォーマンス最適化
コメントオーバーレイが正しく表示されないケースは意外に多く、原因を切り分けて対処することが重要です。代表的な症状と解決策をまとめました。
よくある症状と対処法
| 症状 | 主な原因 | 推奨対策 |
|---|---|---|
| 真っ白またはエラーメッセージが表示される | HTTPS が未使用、または CORS ヘッダー欠如 | URL が https:// か確認し、サービス側の「CORS 設定」ページを参照 |
| コメントが遅延して表示される | 「ローカルファイルを許可」未チェック | ソース設定で 「ローカルファイルを許可」 にチェックし、再読み込み |
| 文字や画像が乱れる | GPU レンダリングが無効 | 「設定」→「詳細」→「ビデオ」 の「GPU の使用」を有効化 |
| キャッシュが残り古い表示になる | ブラウザキャッシュの保持 | ソース右クリック → 「プロパティ」→ 「カスタム CSS/JS を再読み込み」または OBS 再起動 |
上記で解決しない場合は、OBS のログファイル（Help → Log Files → Show Log Files）を確認し、エラーメッセージを公式フォーラムやウィジェット提供元に報告してください。
パフォーマンス軽減テクニック
- FPS を下げる：コメント表示は高速更新が不要なため 15 FPS に設定すると CPU 使用率が約30%削減されます。
- 解像度の最適化：実際に画面上で見えるサイズ以上に大きくしない（例: 1920×1080 配信なら 400×200 が目安）。過剰なピクセル数は GPU に余計な負荷をかけます。
- ハードウェアアクセラレーション：
設定 → 詳細 → ビデオで「レンダラー」をDirect3D 11（Windows）またはOpenGL（macOS/Linux）に統一し、GPU に描画を委譲。 - 不要なウィジェットの無効化：同時に複数のブラウザソースを使用すると負荷が増大するため、使わないものは非表示または削除してください。
プラットフォーム別コメント取得 URL の例
| 配信先 | URL 例（テンプレート） |
|---|---|
| YouTube Live | https://onecomme.com/widget?platform=youtube |
| Twitch | https://streamlabs.com/widgets/chat-box?channel=YOUR_TWITCH_ID |
| TikTok Live | https://scchat.com/embed?room=YOUR_TIKTOK_ROOM_ID |
配信先を変更するたびに OBS のブラウザソース URL を上記のように差し替えるだけで、レイアウトはそのまま再利用できます。
まとめ
- 最新版（31.0 系）を公式サイトまたは各 OS のパッケージマネージャからインストールし、バージョン確認で安全性を確保。
- ブラウザソースは HTML/CSS/JS を直接描画できる唯一の OBS ソースであり、コメントオーバーレイに最適です。HTTPS と CORS が必須である点だけ注意してください。
- 主要サービス（Streamlabs・OneComme・ScChat）の公式ウィジェット URL を取得し、OBS のブラウザソースへ貼り付けるだけでリアルタイムコメントが配信画面に表示されます。
- 設定フローは「ソース追加 → URL 入力 → 幅・高さ・FPS 調整」で完了。CSS/JS を活用すればデザインも自由自在です。
- 表示不具合は HTTPS/CORS、ローカルファイル許可、GPU レンダリングの有無をチェックし、FPS と解像度を抑えることで CPU 負荷を軽減できます。
以上の手順とポイントを押さえれば、初心者でも安全かつ高速に OBS のブラウザソースでコメントオーバーレイを実装でき、配信のインタラクティブ性を大幅に向上させることが可能です。ぜひ本稿を参考に、実際のライブ配信で試してみてください。