ロゴ
ToolkitsLabEfficiency Hub
PR広告を含む

配信用オーバーレイ作成ツールURLをOBSのブラウザソースに貼るだけ、登録不要(時計・カウントダウン・カウンター・テロップ)

時計・カウントダウン・死亡回数カウンター・流れるテロップを組み合わせて1つのURLを作成し、 OBSのブラウザソースに貼るだけで配信画面に表示できます。背景は自動で透過されます。

配信オーバーレイは「1つのブラウザソース」にまとめると管理が楽になる

時計・カウントダウン・死亡回数カウンター・テロップをそれぞれ別々の画像やブラウザソースとしてOBSに追加していくと、ソースの数が増えて管理が煩雑になり、配信ごとに位置やサイズを調整し直す手間がかかります。

本ツールは、必要な要素だけを選んで設定し、1つのURLとして書き出すことで、OBSのブラウザソース1つにまとめて表示できる配信オーバーレイ作成ツールです。背景は自動的に透過されるため、ブラウザソースを追加して貼り付けるだけで、ゲーム画面や配信映像の上に重ねて表示されます。

さらに、配信開始時刻とコーナーごとの所要時間を入力するだけで進行予定(タイムテーブル)を自動計算できる機能も搭載。計算結果はそのままテロップ用の文章としてコピーできるため、配信の準備から画面表示までをこのツール1つで完結できます。アカウント登録は一切不要です。

こんなシーンで便利です

ゲーム実況配信での死亡回数・リトライ回数の表示

死亡回数カウンターをオンにして画面の隅に配置すれば、視聴者と一緒に「今何回目の挑戦か」を共有できます。OBSの操作(Interact)機能でワンクリック加算できます。

雑談配信・耐久配信での経過時間・現在時刻の表示

時計ウィジェットで現在時刻を表示したり、カウントダウンで「配信終了まで」の残り時間を表示したりできます。視聴者が途中から見ても状況がひと目で分かります。

配信開始前の待機画面・開始時刻のカウントダウン表示

目標の日時を設定したカウントダウンを待機画面に表示すれば、「あと何分で配信が始まるか」を視聴者に伝えられます。終了時に表示するメッセージも自由に設定できます。

お知らせ・告知事項をテロップで流し続けたい時に

「本日の配信予定」「SNSのリンク」「次回配信日」などの告知文を流れるテロップとして常時表示。配信の時間割計算結果をそのままテロップ文に反映することもできます。

使い方は簡単 4ステップ

  1. 表示したいウィジェット(時計・カウントダウン・カウンター・テロップ)を選んでオンにします。
  2. 各ウィジェットの表示位置・文字サイズ・色・内容を設定します。プレビュー画面でリアルタイムに確認できます。
  3. 画面下部の「URLをコピー」から生成されたURLをコピーします。
  4. OBSで「ソース」→「+」→「ブラウザ」を追加し、URL欄にコピーしたURLを貼り付け、幅1920・高さ1080に設定します。

※設定内容はすべてURLの中に保存されます。アカウント登録やログインは不要で、設定データが外部サーバーに送信されることはありません。

ご利用時の注意点

  • 死亡回数カウンターの数値は、ブラウザソースの端末内にのみ保存されます。OBSのブラウザソースを削除して作り直すと数値はリセットされます。
  • カウンターを配信中に増減させるには、OBSのソースを右クリックして「操作(Interact)」を開き、カウンター部分をクリックまたはキー操作(+/-/R)で行います。
  • テロップの文章やカウントダウンの目標時刻を変更した場合は、設定画面で再度URLを生成し、OBS側のURL欄に貼り直してください。
  • スマートフォン用の配信アプリの多くはブラウザソース機能を持たないため、PC版の配信ソフト(OBS Studio・Streamlabs・XSplitなど)でのご利用を想定しています。

ウィジェット別|主な設定項目一覧

4種類のウィジェットは、それぞれオン・オフと表示位置を個別に設定でき、自由に組み合わせて1つのURLにまとめられます。

ウィジェット主な設定項目表示位置の自由度
時計12/24時間表示、秒表示、日付表示、文字サイズ・色画面9箇所から選択
カウントダウン目標日時 or 分数指定、ラベル文言、終了時メッセージ画面9箇所から選択
カウンターラベル文言、初期値、増減ステップ数、文字サイズ・色画面9箇所から選択
テロップ表示文言(複数可)、流れる速度、上下位置、背景色・不透明度上下いずれかの帯全幅

【1つのURLに複数ウィジェットをまとめられる】
時計とカウンター、カウントダウンとテロップのように、必要なウィジェットだけを自由に組み合わせて1つのURLとして書き出せます。OBSに追加するブラウザソースは1つで済むため、配信ごとの位置調整や管理の手間を減らせます。

※表示位置は画面を3×3のブロックに分けた9箇所(上段・中段・下段 × 左・中央・右)から選択します。テロップのみ画面上部または下部の帯として全幅表示されます。

配信オーバーレイをブラウザソースで作る仕組みと注意点

静的なURLだけで動くオーバーレイが、なぜ透過表示やカウンター記録を実現できるのかを解説します。

結論:設定はすべてURLの中に保存され、サーバーには何も送信されない

本ツールで時計やテロップの設定を変更すると、その内容はURLのパラメータとして書き換わる仕組みになっています。つまり生成されたURL自体が設定データそのものであり、どこかのデータベースに保存されているわけではありません。
そのためアカウント登録が不要なのはもちろん、URLさえ控えておけば同じ設定をいつでも再現できます。設定を変えたいときは、本ツールの画面で調整して新しいURLを発行し、OBS側のURL欄を貼り替えるだけです。

OBSのブラウザソースはなぜ「透過」で表示できるのか

通常のWebページは白などの背景色を持ちますが、本ツールが生成するページはページの背景を完全に透明(アルファ値0)に設定しています。OBSの「ブラウザ」ソースはこの透明部分をそのまま透過として描画できるため、特別なクロマキー合成を行わなくても配信映像の上に自然に重ねて表示できます。

死亡回数カウンターの数値はどこに記録されているのか

本ツールにはサーバーがないため、カウンターの数値はOBSのブラウザソースが使っているブラウザエンジン内の保存領域(ローカルストレージ)に記録されます。これはOBS専用の独立した保存領域であり、普段使っているChromeなど別のブラウザとは共有されません。
そのため、同じURL(特にURLに含まれる識別IDの部分)を変えずに同じブラウザソースを使い続ける限り、配信を終了して再開してもカウンターの数値は保持されます。

カウンターを配信中に操作する「Interact機能」の使い方

ブラウザソースは通常、映像を映すだけで直接クリックできませんが、OBSには「操作(Interact)」という、ソースの中身を一時的にクリック・キー入力できるようにする機能があります。カウンター部分をクリックすると数値が増え、キーボードの「+」「-」「R」キーにも対応しているため、ゲームの合間に素早く操作できます。

配信オーバーレイの設定でよくある失敗と対策

ブラウザソースの背景が透過されず、配信映像が隠れてしまう

OBSのブラウザソースを追加したものの、背景が白や黒のまま表示されてしまい、ゲーム画面や配信映像がオーバーレイの下に隠れてしまう失敗です。多くの場合、ブラウザソースのカスタムCSS欄に古い背景色の指定が残っていることが原因です。

💡 対策・解決策を見る▼
ブラウザソースのプロパティを開き、「カスタムCSS」欄を空にするか、背景色を指定している記述を削除してください。本ツールが生成するページ自体はあらかじめ背景を透過する設定になっています。

カウンターの数値が配信のたびにリセットされてしまう

配信が終わるたびに死亡回数カウンターが0に戻ってしまい、前回からの継続カウントができない失敗です。OBSのブラウザソースを毎回新しく作り直している場合や、URLの識別ID部分を変えてしまっている場合に起こります。

💡 対策・解決策を見る▼
一度作成したブラウザソースとURLはそのまま使い続け、削除せずに「非表示→表示」の切り替えだけで運用してください。設定内容(色や文言)だけを変更したい場合も、URLの識別IDの部分は変えずに他の項目だけを書き換えた新しいURLに貼り替えれば、カウンターの数値は引き継がれます。

テロップの文字が画面からはみ出す、または小さすぎて読めない

配信キャンバスのサイズとブラウザソースの幅・高さの設定が一致しておらず、テロップの文字サイズが実際の配信画面に対して大きすぎたり小さすぎたりしてしまう失敗です。

💡 対策・解決策を見る▼
ブラウザソースの幅・高さは、配信キャンバスの解像度(多くの場合1920×1080)と必ず一致させてください。そのうえで本ツールのプレビュー画面を見ながら、テロップや各ウィジェットの文字サイズを調整することをおすすめします。

カウントダウンの残り時間が意図したタイミングと合わない

カウントダウンの目標日時を設定する際にタイムゾーンや時刻の入力を誤り、実際に配信を開始したい時刻とずれた残り時間が表示されてしまう失敗です。

💡 対策・解決策を見る▼
目標日時は、視聴者に表示させたい「本番の時刻」をそのままお使いの端末のローカル時刻で入力してください。本ツールのプレビューで実際の残り時間が意図した通りに表示されているか、設定後に必ず確認しましょう。

OBSの操作(Interact)を閉じたままカウンターを操作しようとして反応しない

ブラウザソースは通常のプレビュー画面上では直接クリックしても反応しないため、「カウンターが押せない」と誤解してしまう失敗です。

💡 対策・解決策を見る▼
カウンターを操作する際は、必ずOBSのソース一覧でブラウザソースを右クリックし、「操作(Interact)」を選んでから専用のウィンドウ内でクリックまたはキー操作を行ってください。通常のプレビュー画面への直接クリックでは反応しません。

よくある質問(FAQ)

Q.OBSへの貼り付け方を教えてください

Q.

A. OBSの「ソース」欄で「+」→「ブラウザ」を選び、新規作成します。表示された設定画面の「URL」欄に、本ツールで生成したURLを貼り付け、幅1920・高さ1080(配信キャンバスと同じサイズ)に設定してOKを押すだけです。背景は自動的に透過されるため、追加のカスタムCSS設定は不要です。

Q.背景が透過されず白や黒で表示されてしまいます

Q.

A. 本ツールが生成するURLを開くと自動的に背景が透過される仕組みになっていますが、OBS側のブラウザソース設定で「カスタムCSS」に独自の背景色指定が残っていると透過されない場合があります。カスタムCSS欄を空にするか、該当の背景指定を削除してください。また、プレビュー画面で正しく透過して見えていても、配信ソフト側のバージョンによっては再読み込み(ソースを右クリック→更新)が必要な場合があります。

Q.死亡回数カウンターの数字が配信するたびに0に戻ってしまいます

Q.

A. カウンターの数値は、ブラウザソースのURLごとに端末内(ブラウザの保存領域)に記録されています。URLに含まれる識別ID部分を変更しないままOBSの同じブラウザソースを使い続けていれば、配信を終了して再度開始しても数値は引き継がれます。「IDを再発行」ボタンを押した場合や、OBSのブラウザソースを削除して新しいURLで作り直した場合は、新しいカウンターとして0からの記録になります。

Q.配信中にカウンターの数字を増減させるにはどうすればよいですか

Q.

A. OBS上でブラウザソースを右クリックし、「操作(Interact)」を選択すると、ソースの中身を直接クリックできる小さなウィンドウが開きます。カウンター部分をクリックすると数値が1増え、該当のキー操作(+キーで加算、-キーで減算、Rキーでリセット)にも対応しています。手元に配信とは別の操作用ウィンドウを常時置いておきたい場合は、生成したURLをブラウザの別タブで開いておき、そちらを操作しても同じ数値が反映されます(同一ブラウザ内の場合に限ります)。

Q.テロップの文章を途中で変更したい場合はどうすればよいですか

Q.

A. テロップの文章やカウントダウンの目標時刻など、URLに直接埋め込まれている設定を変更する場合は、本ツールの設定画面で内容を書き換えたあと、再度「URLをコピー」してOBSのブラウザソースのURL欄に貼り直してください。カウンターの識別ID部分さえ変更しなければ、テロップや時計の見た目だけを変更してもカウンターの数値は引き継がれます。

Q.スマートフォンや他の配信ソフト(XSplitなど)でも使えますか

Q.

A. 生成したURLはブラウザで開けるWebページのため、ブラウザソース機能を持つ配信ソフトであれば、XSplitやStreamlabs Desktopなど他の配信ソフトでも同様に利用できます。スマートフォンでの配信アプリの多くはブラウザソース機能自体を持たないため、モバイル配信アプリでの利用には対応していません。

Q.配信の時間割(タイムテーブル)計算機能は何に使えますか

Q.

A. 配信開始時刻と「雑談30分」「ゲーム実況60分」のように区切りたいコーナーの所要時間を入力すると、各コーナーの開始・終了予定時刻と配信全体の終了予定時刻を自動計算します。計算結果はそのままテロップ用の文章としてコピーできるため、「19:00〜 雑談/19:30〜 ゲーム実況/20:30 終了予定」といった進行予定をテロップに流す使い方ができます。

User Feedback & Request

あなたの声で、
このツールをより鋭く。

「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。

フィードバックを送る