概要
本ツールは、OBS Studioなどの配信ソフトに「ブラウザソース」として読み込ませて使用する、配信画面（オーバーレイ）です。 1920×1080のフルHDサイズに最適化されており、画面上の要素を直感的にカスタマイズ・ドラッグ移動させることができます。
公開中のデザイン
BOOTHでも公開中！
主な機能と特徴
- 直感的なドラッグ＆ドロップ: 画面上の各ボックス（TITLE, COMMENT, MEMOなど）は、ヘッダー部分をドラッグすることで自由に配置を変更できます。
- 文字量に応じた自動伸縮: タイトルやメモのテキストエリアは、入力された文字量に合わせて縦横に自動でサイズが調整されます。
- 無限に増やせるボックス（複製機能）: メニューから簡単に同じスタイルのボックスを複製できます。不要なボックスは右上のボタンで即座に削除可能です。
- ループ対応のプロフィール表示: 画面上部のプロフィール領域は、クリックで複数の情報（アカウント名、SNS、Webサイトなど）を滑らかなアニメーションでローテーション表示させることができます。
- 便利機能: ストップウォッチやカウンターなど追加可能です。
OBS Studioへの登録方法
- OBSの「ソース」パネルにある「+」ボタンをクリックし、「ブラウザ」を選択します。
- プロパティ画面で以下のように設定します：
- URL: お好みの画面のURLを入力してください。
- ローカルファイル: ダウンロードしたファイルを使う場合こちらにチェックを入れ、ファイルを選択します。
- 幅:
1920 - 高さ:
1080
- 「OK」をクリックすると、配信画面にオーバーレイが表示されます。
各パーツの編集方法
ブラウザソースの操作について 画面上のテキスト入力やドラッグ操作を行うには、OBS上でソースを右クリックし、「対話（操作）」を選択してください。
専用の操作ウィンドウが開き、直接編集できるようになります。
各種テキスト・ボックスの編集
- タイトル・メモなどテキスト変更: 各ボックス内のテキストは直接書き換えが可能です。
- 素材の追加や背景変更など:何もないところでダブルクリックするとメニューが現れ素材の追加や設定リセットなどできます。
- 素材の移動:素材の外枠を押下しながら移動や枠サイズの変更が可能です。
- 素材の複製・削除: 素材をカーソルに合わせると右上にボタンが現れメニューが現れます。文字サイズ変更、複製や削除が可能です。
プロフィール（画面上部）の編集
- 上部のプロフィールエリア（デフォルトでは名前やSNSが表示されている部分）をダブルクリックします。
- プロフィール編集用のポップアップ（
// PROFILE EDIT）が表示されます。 - 「＋ 追加」ボタンで項目を増やし、不要な項目は「×」で削除します。
- 編集が終わったら「SAVE」ボタンを押すと、入力した内容がで自動ループ再生されます。
リアルタイムプレビュー
「表示更新」ボタン1つで、編集中の内容をOBS内の配信画面（ブラウザソース）へ即座に反映可能です。
※OBSの内部でデータを直接共有しているため、Chromeなど外部の通常ブラウザでは連動しません。必ず「カスタムブラウザドック」と「ブラウザソース」を同じOBS内で組み合わせてご使用ください。 外部サーバーを介さないため、編集画面と配信画面を並べながら爆速で確認・作業ができます。
この機能をローカルサーバのみで使う場合は「サーバー起動.bat」でローカルサーバを立ち上げてください。
実行成功すると「http://localhost:8080/<テーマ名>.html」が自動的に立ちあがるので、このURLを後述の場所に指定します。
※ローカルサーバを立ち上げる場合はPythonが実行できる環境が必要です。node.js等でも問題ないですがその場合は自分でカスタムしてください。
ローカルサーバを利用しない場合はhttps://donnma.com/live-tool/overlay/<テーマ>/<テーマ.html>で公開しているURLを指定してください。
「ドッグ＞カスタムブラウザドッグ」選択後します。
追加したいテーマのURLを指定します。
「ソース」から「ブラウザ」を追加後に「カスタムブラウザドッグ」で指定した同一URLを指定してください。
カスタムブラウザドッグを直接操作します。ダブルクリックでメニューを開き「表示更新（別タブに反映）を押下するとソースで追加したブラウザに反映されます。
※この機能は2026/7/10に追加実装しました。
便利機能
- ストップウォッチや時計やカウンター機能を追加できます。
- 設定をエクスポート、インポートが手軽に可能で別PCでも同一の環境を構築出来ます。
- 設定をブラウザに保存、読み込みが可能です。（ローカルストレージの機能を利用しています。）
使用上の注意点
- 推奨解像度は 1920×1080
- それ以外の解像度ではレイアウトや装飾が崩れる場合あり
- ローカルストレージやキャッシュを完全削除しないと一部機能が使えない場合があります。バグが起きたときも同様です。OBSのブラウザキャッシュ削除など方法を調べて試してください。
運用者側の設定
ソースコードから直接値を設定出来ます。
カスタマイズできること
- 配信者名・プロフィールテキストを自分のものに変更
- アクセントカラーを1箇所変えるだけで画面全体の色が変わる
- LIVEバッジの色・文字を自由に設定
- コメント欄・メモ欄の初期テキストを変更
- プロフィールの切替速度やアニメーション周期を調整
- 配信解像度（幅・高さ）を自由に指定
- 設定保存機能のON/OFFを切り替え可能
利用について
二次配布や、コードを修正して配布する行為は禁止します。
OBS側の仕様が変わった場合は使えない場合があります。
シェアしていただくと管理人が喜びます。
OBS関連記事
