OBS セットアップガイド
OBS Custom Dock Browser Source 初心者OK 約5分で完了
OBS Studio で野球のライブ配信にテレビ中継風のスコアボードを重ねて表示するための設定手順です。
YouTube や Twitch で野球配信をしている方なら、このガイド通りに進めるだけで設定完了します。
▶
操作デモ動画
OBS でのセットアップから実際の操作までの流れを動画で確認できます。
前提条件
- OBS Studio v28 以降（カスタムドック機能が必要）
- Windows / macOS / Linux 対応 — 公式ダウンロード
- ARM 版 Windows もv31.1以降で対応
i
yakyuu の構成
yakyuu は2つの画面で構成されています。
| 画面 | 用途 | OBS での表示方法 |
|---|---|---|
| コントロール | スコア入力・操作パネル | カスタムドック |
| オーバーレイ | 透過スコアボード表示 | ブラウザソース |
カスタムドックとブラウザソースは OBS 内部で同じブラウザエンジンを共有しているため、リアルタイム同期が可能です。Chrome 等の外部ブラウザとは同期できません。
1
カスタムドックを追加（コントロール画面）
- OBS メニューバー → 「ドック」 → 「カスタムブラウザドック」
- 以下を入力して 「適用」 をクリック
| 項目 | 値 |
|---|---|
| ドック名 | yakyuu |
| URL | https://tsubasagit.github.io/yakyuu/#/control |
OBS 画面内にコントロールパネルが表示されます。
2
ブラウザソースを追加（オーバーレイ）
- 画面下部の 「ソース」 の 「+」 ボタンをクリック
- 「ブラウザ」 を選択
- 名前を入力（例:
yakyuu overlay）して「OK」 - プロパティ画面で以下を設定
| 項目 | 値 |
|---|---|
| URL | https://tsubasagit.github.io/yakyuu/#/overlay |
| 幅 | 1920 |
| 高さ | 1080 |
| カスタムCSS | 中身を全て削除して空欄にする |
URL に
#（ハッシュ）が含まれています。/#/overlay の部分を省略しないでください。
カスタムCSS はデフォルトで
body { background-color: rgba... } が入っています。これを削除しないと背景が正しく透過されません。
3
接続を確認
設定が正しければ、以下の状態になります。
- カスタムドック右上の接続ステータスが 「オーバーレイ接続中」（緑） に変わる
- プレビュー画面にスコアボード・打順カード等のオーバーレイが表示される
- カスタムドックで操作するとオーバーレイにリアルタイム反映される
4
画面に合わせる
ブラウザソースのサイズが画面と合わない場合:
- プレビュー画面のオーバーレイ（赤枠）を 右クリック
- 「変換」 → 「画面に合わせる」
5
パネルの位置・サイズを調整
OBS のブラウザソース内ではパネルをドラッグできないため、コントロールパネルから数値で調整します。
- カスタムドックのコントロール画面を下にスクロール
- 「パネルサイズ調整」 セクションを探す
- 「全体」 スライダーで全パネルの拡大率を変更
- 「個別パネル設定」 を展開して、各パネルの X/Y 座標と倍率を調整
| パネル | デフォルト位置 | 説明 |
|---|---|---|
| スコアボード | X:24 Y:24 | BSO・走者・球数 |
| タイマー | X:24 Y:160 | 試合経過時間 |
| 打順カード | X:1420 Y:24 | 両チーム打順 |
| 選手情報 | X:24 Y:1020 | 打者・投手情報 |
| 経過ログ | X:1560 Y:800 | プレーバイプレー |
| マスコット | X:1740 Y:900 | チームマスコット |
「全リセット」ボタンで全パネルをデフォルト位置に戻せます。
!
トラブルシューティング
| 症状 | 対処法 |
|---|---|
| 「オーバーレイ未接続」のまま | ブラウザソースの URL に # が入っているか確認。カスタムドックを右クリック→再読み込み |
| 背景が透過されない | ブラウザソースのプロパティで「カスタムCSS」を空欄にする |
| オーバーレイがはみ出る | オーバーレイを右クリック →「変換」→「画面に合わせる」 |
| Chrome で操作しても OBS に反映されない | Chrome と OBS は別ブラウザのため同期不可。必ず OBS カスタムドックから操作してください |
| パネルの位置を変えたい | コントロールパネル下部の「パネルサイズ調整」→「個別パネル設定」から X/Y/倍率を変更 |
カスタマイズ・導入サポート
「自チームのロゴを入れたい」「スコア入力を自動化したい」「配信画面全体をデザインしてほしい」など、 カスタマイズや導入のご相談はお気軽にどうぞ。
- チームロゴ・カラーのカスタマイズ
- 配信画面デザインの一括制作
- OBS セットアップの代行サポート
- スコア入力の自動化（API連携）
AppTalentHub Inc. が開発・サポートしています