OBS Studioでソースを追加・設定する方法。配信画面を自由にレイアウト

OBS Studio(以下OBS)で、画面を視聴者に見せるにはどうしたらよいのでしょうか。

obs-studio

結論から書くと、ソースを追加しましょう。

これができるようになれば

  • 自分が見せたい画面を視聴者に見せられる
  • 画面の端に小さい画面を入れられる
  • 画面にコメント・チャットを重ねられる

ようになります。

関連 【OBS】もうグチャグチャだよ!設定を初期化する方法と、保存して備える方法

【スポンサーリンク】

ソースを追加して画面を視聴者に見せよう

ソースとは

配信でいうところのソースとは、視聴者に見せる画面という程度に考えてください。以下はその一例です。

  • ゲーム画面
  • PCに保存してある画像・動画
  • デスクトップ画面(例 : PCで絵を描いている作業風景)
  • Webサイトの画面(例 : ブログ、YouTube)
  • Webカメラの映像

議論になるとよく「情報のソースは?」などと言いますが、あの「source」のことです。「源」「出どころ」というような意味で理解しておくとイメージしやすいかもしれません。

ソースの追加とは

たとえば、雑談配信でPCに保存してある静止画像を視聴者に見せたいとします。この場合、OBSの「ソース」のところにある「+」をクリックして「画像」を選択します。

obs-studio

いま行ったように「ソース」の「+」から任意の項目を選ぶことを、ソースの追加といいます。つまり、視聴者に画面を見せるための設定を行うことです。

obs-studio

ソースによっては画面が映らない、画面が真っ暗ということがあるでしょう。対処法は別ページで解説していますが、いまは気にしないでください

「ソース」欄がないという場合は、以下のようにします。

  1. 画面上部の「表示」をクリックする。
  2. 「ドック」にカーソルを合わせ、「UIをリセット」をクリックする。

UIをリセット

OBSの画面が解説と違う?ボタンやウィンドウが消えた?もとに戻す方法
自分が使用しているOBS Studio(以下OBS)の画面構成・外観が、当サイトに登場するOBSの画像と違う場合、複数の原因が考えられます。...

練習で静止画像を追加しよう

今回はわかりやすく、静止画像を追加してみましょう。

ほかのソースを追加したい人もいると思いますが、いったん解説のとおりにやってください。練習です。

  1. 「ソース」の「+」をクリックします。
  2. ソースを追加

  1. 画像」を選択します。繰り返しますが、練習のためです。「ウィンドウキャプチャ」や「ゲームキャプチャ」だと、画面が映らない場合があります。
  2. 「画像」を選択

  3. 新規作成」が選択されていることを確認してください。そして、任意の名前をつけて「OK」をクリックします。めんどうであれば、名称は変更不要です。
  4. 名前をつけて「OK」をクリック

  5. 「参照」をクリックし、視聴者に見せたい画像を選択します。
  6. 「参照」をクリック

  7. 画像が表示されたら「OK」をクリックします。
  8. 画像が表示された

  9. OBSに画面が映りました。
  10. OBSに画面が映った

  11. ソースを右クリックし、「変換」から「画面に合わせる」を選択すると、ソースのサイズを画面に合わせることができます。これはとても重要な機能です。
  12. obs-studio

スポンサーリンク
レクタングル(大)

サイズ・位置を変更しよう

つぎは、ソースのサイズ・位置を変えてみましょう。

選択する

まず、ソースをクリックします。すると、OBSに映っているソースが赤い境界線で囲まれます

ソースの選択

もし赤い境界線が表示されない場合は、以下の3点を確認してください。

  • ソース名の横にある鍵のアイコンをクリックする(ロックを解除)
  • OBSの画面上で右クリックして「プレビューをロック」のチェックを外す
  • 「ソース」一覧のソース上で右クリックし、「変換」→「画面に合わせる」を選択する

サイズ・位置を変更する

赤い境界線が表示されたら、いよいよサイズ・位置を変更します。

ソースのサイズを変更するには、OBSの画面上でソースの辺・角(赤色の点)をドラッグします。また、画面上のソースをドラッグすると位置を変更できます。

一発でソースのサイズを画面に合わせることもできます。

  1. 「ソース」一覧にあるソース上で右クリックする。
  2. 「変換」から「画面に合わせる」を選択する。
  3. うまくいかない場合は、こちらを参照のこと。
  4. もとに戻したいときは、「変換」から「変換をリセット」を選択する。

これは頻繁に使います。「画面一部が欠けているな(見切れている)」というときに重宝するでしょう。ショートカットキーCtrlキー + Fキーです。

もしソースを引き伸ばしたいのであれば、Shiftキーを押しながら辺をドラッグしてください。うまくできないときは、右クリックして「変換」から「変換をリセット」です。

なお、Ctrlキーを押しながらソースをドラッグすると、スナップ機能(吸着のこと)が一時的に無効になります。

ソースの基本操作を理解しよう

順序・重なり順

複数のソースを追加した場合は、手前に表示したいソースが背後に隠れてしまうことがあります。このようなときは、ソースの順序(重なり順)を変更しましょう。

obs-studio

下記動画を参考に、ソースを上下にドラッグしてください。ソース一覧で上にあるソースが、OBSの画面上では手前に表示されます。

このようにソースを複数回追加して順序を変更すれば、TV番組でよく見かけるようなワイプ(PinP)も簡単にできます。

非表示

ソースの表示・非表示は、目のアイコンで切り替えることができます。画面を見せたくない場合は、ソースを非表示にすれば視聴者には見えません。

非表示

たとえば、「この映像を配信で流したらアウトだ」というときは、一時的にソースを非表示にしましょう。トラブルを回避できます。

ロック

画面レイアウトを固定したい、もうソースを不用意に動かしたくないというときは、鍵のアイコンをクリックします。ソースをロックできます。

ロック

ロックの効果は以下のとおりです。

  • ソースを移動できなくなる
  • ソースのサイズを変更できなくなる
  • OBSの画面上で赤色の境界線が表示されなくなる
「ソースをロックして意味があるの?」と思うかもしれませんが、これは事故防止用と思ってください。まちがえてソースを移動してしまい、画面レイアウトをやり直すハメになるのを防げます。

元に戻す・やり直し

では、もしソースをロックするのを忘れて操作を誤った場合、どうしたらよいのでしょうか。心配ありません。

OBS 27.0以降には、元に戻す機能(アンドゥ/Undo)があります。Ctrlキー + Zキーを押してください。ソースの編集作業を戻せます。

元に戻す

また、いまの元に戻す機能の操作を取り消す、やり直す(リドゥ/Redo)こともできます。Ctrlキー + Yキーを押してください。

やり直し

なお、やり直しはCtrlキー + Shiftキー + Zキーでもかまいません。

これだけは覚えておきたい。OBSの必須ショートカットキー・ホットキー
OBS Studio(以下OBS)の操作を効率化・簡略化したいのであれば、ショートカットキー・ホットキーをうまく使いましょう。 ...

削除

不要なソースは削除しましょう。

ソースを削除するには、ソースを選択してゴミ箱アイコンをクリックするか、またはDeleteキーを押します。

削除

CtrlキーやShiftキーを押しながら複数のソースをクリックして、まとめて削除することもできます。

不要なソースはどんどん削除していきましょう。つい削除を怠りがちになる人もいますが、こまめな削除を推奨します。

画面を切り取ろう(トリミング)

画面によけいな部分が映っている場合(視聴者に見せたくないものが映っている場合)は、どうしたらよいのでしょうか。

この点、クロップ機能というものを使って画面を切り取る、トリミングする方法があります。視聴者に見える範囲を調整して狭くするのです。

  1. OBSの画面上で、赤丸の部分にカーソルを重ねる。
  2. その部分でAltキーを押しながら辺または角をドラッグする(MacはOptionキー)。
  3. 削った部分が緑色の境界線で表示される。

よくある質問のひとつですが、一発で任意の範囲を取り込む機能はOBSにはありません。したがって、クロップ機能はとても重要です。

もし緑色の境界線が表示されない場合は、以下のようにします。

  1. OBSの画面上で右クリックする。
  2. 「変換」から「変換をリセット」を選択する。
  3. 再度、クロップする。

クロップをやり直したい場合、OBSの画面上で右クリックして、「変換」から「変換をリセット」を選択してください。

フィルターで画面を加工しよう

OBSでは、フィルター機能を使ってソースを加工できます。

具体的には、以下のようなことが可能です。

たとえば、VTuberがアバターの背景を消したいときに、クロマキーというフィルターを使います。

2個の画面

ただ、フィルターは最初からいきなり使う必要はありません。どちらかというと、中・上級者向けの機能です。OBSに慣れてきたら使ってみてください。

OBSのフィルタ機能、使っていますか?こんなスゴイことができます6選
もしOBS Studio(以下OBS)をもっと活用したいなら、フィルター機能を使ってみてください。 フィルターを使うことで、映...

画面の映し方をより詳しく理解しよう

どのような画面を視聴者に見せたいのかということを考えて、「+」から任意の項目を選びます。

重点的に理解しておくべきなのは、以下の4種類です。

obs-studio

詳細は、下記ページをご覧ください。

OBS Studioに画面を映したい。頻繁に使う4つのキャプチャー方法
OBS Studio(以下OBS)に画面を映すためには、まず「+」をクリックしてソースを追加します。そして、視聴者に画面を見せるための設定を...
【OBS】こんなときは?よくあるトラブル、よくある質問まとめ
OBS Studio(以下OBS)でトラブルが起きた場合の対処法、およびQ&Aをまとめました。 「Yahoo!リアルタイム検索...
スポンサーリンク
レクタングル(大)
レクタングル(大)

X(旧Twitter)で最新情報をツイートしています!フォローお願いします。

関連コンテンツ



スポンサーリンク
レクタングル(大)

コメント

  1. TEKKEN より:

    はじめまして。OBSの画面設定でご教示ください。
    症状としましては、
    ①WEBカメラの画像を映像キャプチャデバイス使用しています。
    ②パソコン画面に映像が、はみ出します。(プロパティでは正常に映ります)
    ③映像キャプチャデバイスでパソコン画面に入るように設定すると、
     録画時の画面も小さくなります。
    ④映像キャプチャデバイスで②のパソコン画面からはみ出す状態で録画した場合は大き なサイズで録画されます。
    ⑤以前はこんな事にはならなかったと記憶しています。
    ⑥これらの改善方法をご教示ください。
    ⑦Windows10の64ビットを使用しています。

    よろしくお願いします。

    • 管理人 より:

      OBSの画面設定は難しいですよね。
      トラブルとしては②の部分ということでよろしいでしょうか。

      もしそうであるなら、映像キャプチャデバイスの設定を
      開いていただいて「解像度/FPS タイプ」を「カスタム」にし、
      「解像度」でより小さい数字を選んで「OK」をクリックしてみてください。

      これで直った場合は、「設定」→「映像」の部分で解像度設定を
      いじったことが原因で②の症状が起きた可能性があります。

      ですので、そのあたりも併せて設定をもとに戻すと
      以前の状態に戻るはずです。

    • TEKKEN より:

      ありがとうございました。
      とりあえずは、画面小さくなりました。
      ただ、Windows11のパソコンでは大丈夫なんですよ。
      設定画面で見比べても分からないんですよ。

      • 管理人 より:

        では、

        1.OBSのプレビュー画面上で右クリック
        2.「プレビュースケーリング」から「ウィンドウサイズにスケーリング表示」をクリック
        3.縞模様が出た場合は、「Ctrl」キー + 「F」キーを押す

        これで直るかやってみてください。

        (参考)画面が欠ける(見切れる)、画面サイズがおかしい
        https://vip-jikkyo.net/obs-studio-troubleshooting#i-5

  2. くぼたさとみ より:

    はじめまして。広島県在住の主婦です。ずっと探していた情報がこちらに掲載されていて感謝しております。

    あと少しでやりたい事が出来そうな所まで来たのですが、分からないことがありメールさせて頂きました。

    既にYouTubeに公開済の動画をOBSを使ってライブ配信したいです。

    「ソースの追加」で「ブラウザ」を選んで「URL」にYouTubeのURLを貼りました。

    すると、YouTube画面だけでなく、概要欄の方まで画面に写ってしまいました。

    やり方が間違っていたら教えてくださいm(_ _)m

    • 管理人 より:

      概要欄が見えてしまっているのをなんとかしたいということであれば、
      この記事の「画面を切り取ろう(トリミング)」に書いた方法で
      対処することになります。

      「ブラウザ」や「ウィンドウキャプチャ」で
      YouTubeの画面を見せる場合もこのケースが当てはまります。
      ただ、よけいな部分を削るのは少し手間かもしれません。

      もしYouTubeの動画が手元にある場合(PCに動画を保存してある場合)は、
      「ソース」の「+」から「メディアソース」を追加し、
      「ローカルファイル」で動画を選択する方法もあります。
      この方法であれば、よけいな部分を削る手間は省けます。