OBSパーツの使い方ガイド

1. 挑戦回数・勝敗を表示する

例えば「今日は10回挑戦する」という企画なら、汎用カウンターを選び、タイトルを「本日の挑戦」、初期値を0、単位を「回」、増減する量を1にします。挑戦のたびに「対話」で数字をクリックします。間違えて増やしたら右クリックで1つ戻せます。

ゲームの勝敗を分けて数える場合は勝敗カウンターを選びます。Wが勝ち、Lが負けです。両方の数字を別々に操作できるため、試合が終わったら該当する数字を1回クリックします。初期値は勝ち数・負け数それぞれ設定できます。

サイト上で試した数値はHTMLにも引き継がれます。テスト後に0から始めたいときは、初期値を確認してから書き出してください。

2. 待機にはカウントダウン、経過時間にはストップウォッチ

カウントダウンの時間は秒で入力します。5分なら300、10分なら600です。書き出したHTMLをOBSに追加しただけでは動き出さず、「対話」で数字をクリックすると開始します。ゼロで停止し、終了音はありません。

ストップウォッチは0から経過時間を測ります。もう一度クリックすると一時停止し、再度クリックすると続きから進みます。カウントダウンをゼロまで使い切った場合は、Rキーを5秒以内に2回押して初期設定に戻してから開始します。

計測は端末の時刻に基づきます。画面の表示頻度が落ちても経過時間から表示を計算しますが、計測中にPCの日時を変えると結果に影響することがあります。

3. 目標を分かりやすいゲージにする

目標ゲージは、現在値を目標値で割った割合を表示します。現在64、目標100なら64%です。目標を超えた場合でも現在値は残し、ゲージの長さは100%を上限にします。

登録者数や制作の完了数を見せる場合、タイトルと単位を合わせると伝わりやすくなります。例：タイトル「今月の制作」、現在値3、目標値10、単位「本」。YouTube等のサービスから自動取得する機能はないため、数値は手動で更新してください。

4. OBSへ追加して、透明背景と保存を確認する

1. 「HTMLを書き出す」で保存し、使い続けるフォルダーへ置きます。
2. OBSのソースで「ブラウザ」を追加。「ローカルファイル」を有効にし、HTMLを選びます。
3. 幅720・高さ360を指定し、下のレイヤーに映像や色ソースを置いて透過を確認します。
4. ソースを右クリックして「対話」を開き、数字を操作します。

白や黒の四角が見えるとき

通常のブラウザのウィンドウをキャプチャすると、透明なページでも白い背景が映る場合があります。HTMLはOBSのブラウザソースとして読み込んでください。カード内の背景色を消す場合は不透明度を0%にし、必要なら影をオフ・枠を0に設定します。

サイトで変えた値がOBSに反映されないとき

サイトとOBSは保存場所が別で、自動同期しません。OBSに表示されている数値は「対話」で更新します。デザインを変えたときは再出力したHTMLを選び直し、ブラウザソースを更新します。同じIDの保存値が残っている場合、OBS側の値が優先されます。新しい初期値で始めるには、サイトの「別パーツとして複製」から書き出してください。

複数のパーツを独立して使うとき

同じHTMLを複数のソースに指定すると保存値が共有される場合があります。「別パーツとして複製」を使って、それぞれを異なるHTMLとして書き出します。重要な設定はJSONでバックアップし、配信前に実際の環境で確認してください。

参考：OBS公式・ブラウザソースの説明