OBS Studioでブラウザソースを透明にする方法

公開: 2026-02-19

そこで、OBS Studio にブラウザーソースを追加しました。ニース。しかし今では、その周りに醜い白または黒のボックスが見えます。良くない。心配しないで。 OBS でブラウザのソースを透明にするのは、思っているよりも簡単です。必要なのは適切な設定だけです。そして、おそらく 1 つまたは 2 つの小さな調整があります。

TLDR: OBS Studio でブラウザーのソースを透明にするには、Web ページの背景が透明である必要があり、OBS が背景色を強制してはなりません。ブラウザのソースプロパティでページの背景を透明に設定します。必要に応じて、オーバーレイの CSS を編集して背景を使用します: 透明; 。完了すると、オーバーレイはストリームときれいにブレンドされます。

まず、ブラウザソースとは何ですか?

OBS のブラウザソースは、組み込みのミニ Web ブラウザです。 Web サイトをシーンに直接読み込みます。これは次のような場合に最適です。

ストリームアラート
チャットオーバーレイ
イベントリスト
カスタムHTMLウィジェット
ストリームラベル

Web サイトの画面をキャプチャする代わりに、OBS は Web サイトを直接読み込みます。それにより、きれいでシャープになります。ただし、透明性はウェブサイト自体が許可している場合にのみ機能します。

それが重要なアイデアです。 OBS では、ページに焼き付けられた背景を魔法のように削除することはできません。

ステップ 1: OBS にブラウザソースを追加する

まだ始めていない場合は、最初から始めましょう。

OBSスタジオを開きます。
「ソース」パネルに移動します。
「+」ボタンをクリックします。
[ブラウザ]を選択します。
好きな名前を付けてください。
「OK」をクリックします。

次に、URL を URL フィールドに貼り付けます。必要に応じて幅と高さを設定します。次に「OK」をクリックします。

ブラウザのソースがプレビューウィンドウに表示されるはずです。

しっかりした背景がある場合は、読み続けてください。

画像がポストメタに見つかりません

ステップ 2: Web サイトの背景が透明であることを確認する

これが最も重要なステップです。

オーバーレイページの背景は透明である必要があります。ページで白、黒、またはその他の単色が使用されている場合、OBS はそれを表示します。

HTML または CSS を制御する場合は、これを追加します。

体 {
  背景: 透明;
}

あるいはさらに良いのは:

html、本文{
  背景色: rgba(0, 0, 0, 0);
}

これにより、完全な透明性が強制されます。

サードパーティのアラートまたはオーバーレイサービスを使用している場合は、その設定を確認してください。多くの場合、次のようなチェックボックスがあります。

透明な背景を有効にする
背景を無効にする
カスタムCSS

利用可能な場合はオンにします。

そうでない場合は、カスタム CSS を挿入できるかどうかを確認してください。通常はそれで解決します。

ステップ 3: OBS ブラウザのソース設定を確認する

OBS でブラウザのソースを右クリックします。

[プロパティ]を選択します。

次に、設定を注意深く見てください。

確認する：

正しいURLが貼り付けられています。
幅と高さはオーバーレイのサイズと一致します。
カスタム CSSボックスがある場合、背景色は強制されません。

カスタム CSS フィールドが表示された場合は、以下を追加することもできます。

body { 背景色: rgba(0,0,0,0) !重要; }

変更後、「OK」をクリックします。

すべてが正しく設定されていれば、背景が消えるはずです。

よくある問題: 白い背景がまだ表示される

これはよく起こります。

その理由は次のとおりです。

Web サイトのデフォルトの背景は白です。
CSS が正しく適用されませんでした。
オーバーレイプラットフォームはスタイルを強制します。

簡単な修正:

ブラウザのソースを更新します（右クリック→「更新」）。
OBSを再起動します。
ブラウザのキャッシュをクリアします (ブラウザのソースプロパティ内)。

はい、キャッシュにより問題が発生する可能性があります。特にCSSを変更した後。

おまけのヒント: 透明度を高めるために PNG と WebM を使用する

ブラウザのソースに画像やアニメーションが表示される場合は、それらが透明度をサポートしていることを確認してください。

最適なフォーマット:

画像用のPNG
ビデオ用のアルファチャネルを備えたWebM
GIF (品質は限られていますが、動作します)

MP4 を使用する場合、透明度は機能しません。 MP4 はアルファチャネルをサポートしていません。

これは OBS の問題ではありません。それはフォーマットの制限です。

Web サイトを編集できない場合はどうすればよいですか?

ページを制御できない場合があります。

たぶんそれはウィジェットです。または、CSS オプションのないサードパーティツール。

まだ選択肢はあります。

オプション 1: クロマキーを使用する

背景が明るい緑色または別の単色の場合は、それを削除できます。

ブラウザのソースを右クリックします。
[フィルター]を選択します。
+ をクリックします。
クロマキーを選択します。

背景が消えるまで設定を調整します。

これは、明るい緑の背景に最適です。

しかし、完璧ではありません。細かい部分が損なわれる可能性があります。

画像がポストメタに見つかりません

オプション 2: トリミングする

ALT キーを押しながら、OBS でソースの端をドラッグします。

これにより、フレームの一部が切り取られます。

この方法で、不要な背景のエッジを非表示にすることができます。

それは簡単です。そして速い。

高度な方法: カスタム HTML オーバーレイの場合

独自のオーバーレイを作成する場合、透明化は簡単です。

HTML を次のように開始します。

<!DOCTYPE html>
<html>
<頭>
<スタイル>
  html、本文{
    マージン: 0;
    パディング: 0;
    背景: 透明;
    オーバーフロー: 非表示;
  }
</スタイル>
</head>
<本文>

<!-- ここにコンテンツ -->

</body>
</html>

これにより余白が削除され、ページがきれいで完全に透明な状態に保たれます。

また、次のものを追加することも避けてください。

背景画像
背景のグラデーション
デフォルトのテーマカラー

最小限にしてください。

OBS が残りを処理します。

パフォーマンスのヒント

透明感がすごいです。ただし、ブラウザのソースは CPU を使用する可能性があります。

物事をスムーズに進めてください:

小さなオーバーレイ寸法を使用します。
不要なアニメーションを無効にします。
必要がない場合はフレームレートを下げます。
重い JavaScript は避けてください。

オーバーレイに遅れがある場合は、透明度の問題ではない可能性があります。複雑すぎる可能性があります。

透明性に関する簡単なチェックリスト

何かがうまくいかない場合は、次のリストを確認してください。

ウェブサイトの背景は透明に設定されていますか?
背景を使用しましたか: 透明。 CSSで？
ソースを更新しましたか?
キャッシュをクリアしましたか?
画像フォーマットは透明度をサポートしていますか?
OBSは最新ですか？

ほとんどの問題は 5 分以内に解決されます。

なぜ透明性が重要なのか

透明なオーバーレイはプロフェッショナルに見えます。

あなたのシーンに溶け込みます。

醜い箱はありません。

変な境界線はありません。

アラートはゲームプレイやカメラの上に自然に浮かび上がります。

そして、ストリームがすぐにきれいに見えます。

細かいこと。大きな違い。

最終的な考え

OBS Studio でブラウザのソースを透明にするのは複雑ではありません。

最初はただ神秘的に感じます。

黄金律を思い出してください。

透明性はウェブサイト自体からもたらされる必要があります。

OBS はページの出力を正確に表示します。それ以上は何もありません。それ以上のものはありません。

CSS で透明な背景を使用すると、OBS が自動的にその魔法を実行します。

次に、これらのオーバーレイをクリーンアップします。

あなたのストリームはそれに値します。