OBSでは「ブラウザソース」という機能を使用することで、HTML素材を配信画面に表示できます。
時計・オーバーレイ・コメント表示など、多くの配信素材で利用されています。

このページでは、BOOTHなどで配布されているHTML素材をOBSに導入する手順を解説します。

◆① 素材をダウンロードする

BOOTHなどの配布ページから素材をダウンロードしてください。
多くの場合、ZIPファイル形式で配布されています。

◆② ZIPファイルを解凍する

ダウンロードしたZIPファイルは、そのままでは使用できません。
必ず解凍してください。

Windowsの場合

1. ZIPファイルを右クリック
   
   

2. 「すべて展開」を選択
   
   

3. 展開を実行
   
   

◆③ HTMLファイルを確認する

解凍したフォルダの中に、以下のようなファイルがあります。

・index.html
・style.css
・script.js
・画像フォルダ
・フォントフォルダ

OBSで使用するのは主に 「.html」ファイル です。
多くの場合は「index.html」がメインファイルになります。

※HTMLファイルのみを移動すると正常に動作しない場合があります。必ずフォルダごと保存してください。

◆④ OBSに素材を読み込む

1. OBSを起動
   
   

2. 「ソース」欄の「＋」をクリック
   
   

3. 「ブラウザ」を選択
   
   

4. 任意の名前を入力
   
   

5. OKをクリック
   
   

◆⑤ HTML素材を指定する

1. 「ローカルファイル」にチェックを入れる
   
   

2. 「参照」をクリック
   
   

3. 解凍したフォルダの中のHTMLファイルを選択
   
   

4. OKをクリック
   
   

これで素材が表示されます。

◆⑥ サイズや位置を調整する

素材によって推奨サイズがあります。
配布ページの説明をご確認ください。

OBSでは以下の操作が可能です。

・ドラッグして位置調整
・角をドラッグしてサイズ変更
・設定画面で幅と高さを変更

◆表示されない場合の確認ポイント

・ZIPファイルを解凍しているか
・正しいHTMLファイルを選択しているか
・素材フォルダを移動または削除していないか
・OBSのブラウザソースを更新したか

◆素材を更新する方法

HTMLファイルを変更した場合は、

ブラウザソースを右クリック → 「更新」

を選択すると反映されます。

◆注意事項

素材によっては設定ファイルやフォントが含まれています。
それらを削除すると正常に表示されない場合があります。

また、素材フォルダの保存場所を変更すると、OBSで表示できなくなる場合があります。