OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法
「OBSのライブ配信で、枠線や背景になるボックスってどうやって表示するの？」って疑問を、解決していきます。
OBS ライブ配信に、黒や白のブロックボックスを表示できれば、テキストや重ねた映像がより見やすくなりますよ。
というわけで今回は、透過のボックス背景や枠を表示する方法を、解説していきます。
目次
OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法【３ステップ】
OBSのライブ配信で、透過ブロックの背景や枠線を表示する方法について、解説します。
今回は Mac でやる!!DTM ライブ配信講座の第８回目の連載です。前回の記事は、こちら↓
ライブ映像にブロックのボックスを表示させるには、「色ソース」を使います。わかりやすく、３ステップで説明しますので、だれでも実現可能ですよ！
それでは、いってみよ〜！
【ステップ１】OBS Studio の色ソースを追加する
ステップ１は、OBS Studio の色ソースを追加していきます。
まずは、OBS Studio をひらいてください。
OBS Studio の最初の画面で、左から２番目のソースタブに注目してください。
ソースタブ下＋追加ボタンを、クリックしてください。
表示されたメニューの色ソースを、クリックしましょう。
色ソースの新規作成ウィンドウが、表示されました。
わかりやすい名前にしてください。ここでは、「カメラの背景」という名前のボックス名にしてあります。
色ソースのプロパティ画面が、でてきました。
背景ボックスとなる色ソースでは、「カラー・サイズ」を指定することができます。
まずは、サイズを変えていきましょう。サイズは、こんな感じ↓
- 幅：400
- 高さ：700
つづけて、「カラー」を変更していきます。
色のみぎよこ色を選択を、クリックしてくだい。
色ソースの「色（カラー）」設定ウィンドウが、表示されました。
初期の値は、ホワイトになっています。ウィンドウの右上に、注目してください。
右上にあるメーターの「◁」を、いちばんしたまで下げてください。
これで色ソースのボックスを、黒色にかえることができます。
HTML のところが、「#000000」になっていることを確認したら、OK をクリックしてください。
色ソースのプロパティウィンドウに、もどってきました。
ウィンドウ右下のOKを、クリックしてください。
OBS Studio のライブ配信プレビュー画面に、黒いボックスができているのがわかりますよね。
赤い枠で囲われているので、そのなかをクリックしながら、ドラッグしていきます。
たとえばこんな感じで、ライブ配信画面の表示させたいところまで、ボックスを移動させてください。
ソースタブにある色ソース（今回は、カメラの背景）が、ライブ配信でいちばん上に位置しているので、これを後ろに移動していきます。
色ソースをライブ配信画面のうしろに移動する方法は、ソースタブの一覧の下に移動してあげれば OK です。
移動する方法は、ソースタブ下の「上下の矢印」をクリックしましょう。そのときには、色ソースを選択することをお忘れなく！
ここまでで、ステップ１「OBS Studio の色ソースを追加する」は完了です。
【ステップ２】色ソースのフィルタ機能で透過処理
ステップ２は、色ソースのフィルタ機能で透過処理していきます。
OBS Studio のさいしょの画面で、ソースタブの色ソース（今回は、カメラの背景）を、右クリックしてください。
表示されたメニューのフィルタを、クリックしてください。
色ソースのフィルタウィンドウが、表示されました。
左下に注目してください。
＋追加ボタンを、クリックしてください。
表示されたメニューのクロマキーを、クリックしてください
フィルタの名前を、指定する画面がでてきます。
デフォルトのままで、OK を、クリックしてください。
フィルタ「クロマキー」の設定画面が、表示されました。
ボックスを透過するために調節するのは、上から５段目の 不透明度 です。
初期値「100」です。これは、透明じゃないって意味ですね。
今回は、不透明度を「70」に設定しました。
薄くしたい場合は、もっと数値を小さくすれば OK ですよ！
設定が終わったら、ウィンドウ右下の 閉じる を、クリックしてください。
はい！こんな感じで、クロマキーを指定することで、ボックスが透明になりました。
透明にしたことで、ボックスのうしろも見えるようになります。
カメラ映像の外枠になるようにボックスを作成したら、つづけて流れるテロップの背景にもボックスを作ってあげましょう。
ソースタブの色ソース（今回は、カメラの背景）を選択して、右クリックしてみましょう
表示されたメニューのコピーを、クリックしてください。
同じ作業を繰り返して、ボックスを作成してもOKですよ。ここでは、効率化のために複製でトライしてみましょう！
さらに、ソースタブの色ソースの上で右クリックをしてください。
表示されたメニューの貼り付け（複製）を、クリックしてみましょう。
複製された色ソースがソースタブの一番上に、あたらしく作成されました。
まずわかりやすく、複製した色ソースの名前を変更しておきましょう。
複製された色ソースの上で、右クリックしてください。
表示されたメニューの名前を変更を、クリックしてください。
とくに入力のウィンドウなどは、でてきません。その場で、変更しましょう。
今回は、「テロップ背景」という名前にかえてみました。
ライブ配信の画面上で、テロップよりもうしろに配置するために、ソースの順番を変更してください・
複製した色ソースを選択して、ソースタブしたの「上下ボタン」で、移動ですよ。
今回は、テロップよりも下の位置に移動しています。
テロップの背景ボックスを移動する前に、サイズを変更しておきましょう。
複製した色ソースのうえで右クリックしてください。
表示されたメニューの プロパティ を、クリックします。
複製された色ソースのプロパティが、表示されました。
サイズを、こんな感じで変更してください↓
- 幅：1480
- 高さ：120
色はコピーして作成したので、黒いままのはずですよ。
設定がおわったら、ウィンドウ右下のOKをクリックしてください。
横に細長くなった、複製された色ソースのボックスになりましたね。
クリックしたら、そのままドラッグして移動してみましょう。
テロップの背景になるように移動してあげれば、OK ですよ。
ここまでの作業が完了すれば、こんな感じのライブ配信映像になっているはずです↓
これで、ステップ２「色ソースのフィルタ機能で透過処理」は完了です。
【ステップ３】実際に透過ボックスの背景や枠線を、ライブ配信にのせてみる
ステップ３は、実際に透過ボックスの背景や枠線を、ライブ配信にのせていきます。
OBS Studio のプレビュー画面に表示されれば、あとは「配信開始」ボタンをクリックして、ライブをスタートするだけですよ。
やり方は、ちと長くなってしまうため、別記事にて解説しますね。
当メディアでは、YouTube Live 配信をメインで使う場合を想定しております。詳しくはこちらの記事を、どうぞ↓
【参考】【ステップ３】実際に DTM ライブ配信をやってみる-MacでDAWの画面を音入りでライブ配信する方法【３ステップ】
【参考】【2019】YouTubeでライブ生配信するやり方まとめ
はい。というわけで、実際にライブ配信で、透過されたボックスを使うとどんな感じになるのか？
実際に収録した動画を用意しましたので、下の動画を確認してみてください↓
バッチリですね！
ここまでで、ステップ３「実際に透過ボックスの背景や枠線を、ライブ配信にのせてみる」は完了です。
OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法まとめ
OBSのライブ配信で、透過ボックスの背景や枠線を表示する方法を、３ステップで解説させていただきました。
まとめると、こんな感じ↓
- 【ステップ１】OBS Studio の色ソースを追加する
- 【ステップ２】色ソースのフィルタ機能で透過処理
- 【ステップ３】実際に透過ボックスの背景や枠線を、ライブ配信にのせてみる
あらためて、ステップ１から挑戦して、ライブ配信に「透過ボックス」を表示させる人は、下記のリンクをご利用ください↓
【記事上まで移動するリンク↓】
OBSのライブ配信に、横に流れるテロップテキストを表示する方法【３ステップ】
色ソースで、ボックスを透過させる処理までできると、ライブ配信でもいろいろなアイディアがうかんできますよね！
ちなみにこの記事は、Mac でやる!!DTM ライブ配信講座の第８回目のでした。Windows でも、ほぼ同様なので難しくありませんよ！
そのほか、DTM ライブ配信する人向けに、やり方を基礎から解説している記事をご用意しております。
ライブ配信やってみたい人は、ぜひチェックしてみてくださいね↓
【連載記事まとめ】Macでやる!!DTMライブ配信講座
※画像：OBS Studio の操作画面より、引用させていただきました。
※掲載内容は記事作成時のものであり、現在は変更になっている場合があります。あくまでも、自己責任にてお試しいただきますようお願いいたします。
