OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法

MacでDTMライブ配信

「OBSのライブ配信で、枠線や背景になるボックスってどうやって表示するの?」って疑問を、解決していきます。

OBS ライブ配信に、黒や白のブロックボックスを表示できれば、テキストや重ねた映像がより見やすくなりますよ。

というわけで今回は、透過のボックス背景や枠を表示する方法を、解説していきます。

この記事を読むと、こんな感じの配信ができるよ↓
動画:OBS でボックスを表示した完成形(Size: 673KB)

OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法【3ステップ】

OBSのライブ配信で、透過ブロックの背景や枠線を表示する方法について、解説します。

今回は Mac でやる!!DTM ライブ配信講座の第8回目の連載です。前回の記事は、こちら↓

ライブ映像にブロックのボックスを表示させるには、「色ソース」を使います。わかりやすく、3ステップで説明しますので、だれでも実現可能ですよ!

それでは、いってみよ〜!

【ステップ1】OBS Studio の色ソースを追加する

ステップ1は、OBS Studio の色ソースを追加していきます。

まずは、OBS Studio をひらいてください。

Obs dtmlive 8

OBS Studio の最初の画面で、左から2番目のソースタブに注目してください。

Obs menu irosource1

ソースタブ下追加ボタンを、クリックしてください。

表示されたメニューの色ソースを、クリックしましょう。

Obs menu irosource2

色ソースの新規作成ウィンドウが、表示されました。

わかりやすい名前にしてください。ここでは、「カメラの背景」という名前のボックス名にしてあります。

Obs menu irosource property1

色ソースのプロパティ画面が、でてきました。

背景ボックスとなる色ソースでは、「カラー・サイズ」を指定することができます。

Obs menu irosource property2

まずは、サイズを変えていきましょう。サイズは、こんな感じ↓

  • 幅:400
  • 高さ:700

つづけて、「カラー」を変更していきます。

色のみぎよこ色を選択を、クリックしてくだい。

Obs menu irosource property3

色ソースの「色(カラー)」設定ウィンドウが、表示されました。

初期の値は、ホワイトになっています。ウィンドウの右上に、注目してください。

Obs menu irosource property4

右上にあるメーターの「◁」を、いちばんしたまで下げてください。

これで色ソースのボックスを、黒色にかえることができます。

HTML のところが、「#000000」になっていることを確認したら、OK をクリックしてください。

Obs menu irosource property5

色ソースのプロパティウィンドウに、もどってきました。

ウィンドウ右下のOKを、クリックしてください。

Obs menu irosource defult

OBS Studio のライブ配信プレビュー画面に、黒いボックスができているのがわかりますよね。

赤い枠で囲われているので、そのなかをクリックしながら、ドラッグしていきます。

Obs menu irosource move

たとえばこんな感じで、ライブ配信画面の表示させたいところまで、ボックスを移動させてください。

ソースタブにある色ソース(今回は、カメラの背景)が、ライブ配信でいちばん上に位置しているので、これを後ろに移動していきます。

Obs menu irosource move back

色ソースをライブ配信画面のうしろに移動する方法は、ソースタブの一覧の下に移動してあげれば OK です。

移動する方法は、ソースタブ下の「上下の矢印」をクリックしましょう。そのときには、色ソースを選択することをお忘れなく!

ここまでで、ステップ1「OBS Studio の色ソースを追加する」は完了です。

【ステップ2】色ソースのフィルタ機能で透過処理

ステップ2は、色ソースのフィルタ機能で透過処理していきます。

Obs irosource filter menu

OBS Studio のさいしょの画面で、ソースタブの色ソース(今回は、カメラの背景)を、右クリックしてください。

表示されたメニューのフィルタを、クリックしてください。

Obs irosource filter1

色ソースのフィルタウィンドウが、表示されました。

左下に注目してください。

Obs irosource filter chromakey1

追加ボタンを、クリックしてください。

表示されたメニューのクロマキーを、クリックしてください

Obs irosource filter chromakey2

フィルタの名前を、指定する画面がでてきます。

デフォルトのままで、OK を、クリックしてください。

Obs irosource filter chromakey3

フィルタ「クロマキー」の設定画面が、表示されました。

ボックスを透過するために調節するのは、上から5段目の 不透明度 です。

初期値「100」です。これは、透明じゃないって意味ですね。

Obs irosource filter chromakey4

今回は、不透明度を「70」に設定しました。

薄くしたい場合は、もっと数値を小さくすれば OK ですよ!

設定が終わったら、ウィンドウ右下の 閉じる を、クリックしてください。

Obs irosource filter ok

はい!こんな感じで、クロマキーを指定することで、ボックスが透明になりました。

透明にしたことで、ボックスのうしろも見えるようになります。

カメラ映像の外枠になるようにボックスを作成したら、つづけて流れるテロップの背景にもボックスを作ってあげましょう。

Obs irosource rightc copy

ソースタブの色ソース(今回は、カメラの背景)を選択して、右クリックしてみましょう

表示されたメニューのコピーを、クリックしてください。

ワンポイントアドバイス

同じ作業を繰り返して、ボックスを作成してもOKですよ。ここでは、効率化のために複製でトライしてみましょう!

Obs irosource rightc paste

さらに、ソースタブの色ソースの上で右クリックをしてください。

表示されたメニューの貼り付け(複製)を、クリックしてみましょう。

Obs irosource name change1

複製された色ソースがソースタブの一番上に、あたらしく作成されました。

まずわかりやすく、複製した色ソースの名前を変更しておきましょう。

Obs irosource name change2

複製された色ソースの上で、右クリックしてください。

表示されたメニューの名前を変更を、クリックしてください。

Obs irosource move1

とくに入力のウィンドウなどは、でてきません。その場で、変更しましょう。

今回は、「テロップ背景」という名前にかえてみました。

Obs irosource move12

ライブ配信の画面上で、テロップよりもうしろに配置するために、ソースの順番を変更してください・

複製した色ソースを選択して、ソースタブしたの「上下ボタン」で、移動ですよ。

今回は、テロップよりも下の位置に移動しています。

Obs irosource move1 property

テロップの背景ボックスを移動する前に、サイズを変更しておきましょう。

複製した色ソースのうえで右クリックしてください。

表示されたメニューの プロパティ を、クリックします。

Obs irosource move1 property2

複製された色ソースのプロパティが、表示されました。

サイズを、こんな感じで変更してください↓

  • 幅:1480
  • 高さ:120

色はコピーして作成したので、黒いままのはずですよ。

設定がおわったら、ウィンドウ右下のOKをクリックしてください。

Obs irosource move3

横に細長くなった、複製された色ソースのボックスになりましたね。

クリックしたら、そのままドラッグして移動してみましょう。

Obs irosource move4

テロップの背景になるように移動してあげれば、OK ですよ。

ここまでの作業が完了すれば、こんな感じのライブ配信映像になっているはずです↓

動画:OBS の透過ボックスを設置したところ(Size: 65KB)
サウンドオルビス
サウンドオルビス
バッチリですね!

これで、ステップ2「色ソースのフィルタ機能で透過処理」は完了です。

【ステップ3】実際に透過ボックスの背景や枠線を、ライブ配信にのせてみる

ステップ3は、実際に透過ボックスの背景や枠線を、ライブ配信にのせていきます。

OBS Studio のプレビュー画面に表示されれば、あとは「配信開始」ボタンをクリックして、ライブをスタートするだけですよ。

やり方は、ちと長くなってしまうため、別記事にて解説しますね。

当メディアでは、YouTube Live 配信をメインで使う場合を想定しております。詳しくはこちらの記事を、どうぞ↓

【参考】【ステップ3】実際に DTM ライブ配信をやってみる-MacでDAWの画面を音入りでライブ配信する方法【3ステップ】

【参考】【2019】YouTubeでライブ生配信するやり方まとめ

はい。というわけで、実際にライブ配信で、透過されたボックスを使うとどんな感じになるのか?

実際に収録した動画を用意しましたので、下の動画を確認してみてください↓

動画:OBS でボックスを表示した完成形(Size: 673KB)

バッチリですね!

ここまでで、ステップ3「実際に透過ボックスの背景や枠線を、ライブ配信にのせてみる」は完了です。

OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法まとめ

OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法を、3ステップで解説させていただきました。

まとめると、こんな感じ↓

3ステップまとめ
  • 【ステップ1】OBS Studio の色ソースを追加する
  • 【ステップ2】色ソースのフィルタ機能で透過処理
  • 【ステップ3】実際に透過ボックスの背景や枠線を、ライブ配信にのせてみる

あらためて、ステップ1から挑戦して、ライブ配信に「透過ボックス」を表示させる人は、下記のリンクをご利用ください↓

【記事上まで移動するリンク↓】
OBSのライブ配信に、横に流れるテロップテキストを表示する方法【3ステップ】

色ソースで、ボックスを透過させる処理までできると、ライブ配信でもいろいろなアイディアがうかんできますよね!

ちなみにこの記事は、Mac でやる!!DTM ライブ配信講座の第8回目のでした。Windows でも、ほぼ同様なので難しくありませんよ!

サウンドオルビス
サウンドオルビス
それじゃあ、今回はこの辺で!?この記事が、あなたの悩みを解決できていたらうれしいです。

そのほか、DTM ライブ配信する人向けに、やり方を基礎から解説している記事をご用意しております。

ライブ配信やってみたい人は、ぜひチェックしてみてくださいね↓

【連載記事まとめ】Macでやる!!DTMライブ配信講座

サウンドオルビス

3,068,337 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事