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