OBS

ライブ配信 研究室

  1. HOME
  2. ブログ
  3. OBS
  4. OBSの画面をクロップして簡単に解説動画を作る手順を解説します

OBSの画面をクロップして簡単に解説動画を作る手順を解説します

※2022年5月に更新しました。

OBSでライブ配信するとき

二つの画面を一つの画面に表示したい

パソコン(ゲーム)の画面のはしに自撮りの映像をのせたい

そんな時に役立つのが画像切り抜き機能、いわゆるクロップです。

OBSのクロップは覚えてしまえば比較的簡単なのですぐに使うことができます。

OBSのクロップ機能を使った2画面(ピクチャーインピクチャー)の動画

例えばソフトの使い方を解説する動画では、操作の画面の端に自分の顔を表示しているのをよく見かけますよね。

このような動画はOBSがあれば簡単に作れてしまいます。

OBSには録画機能があるので、ライブ配信せずに動画だけを作ることも可能です。

動画編集をやらなくてもいい、もしくは大幅に省略できるので、動画編集が苦手な方もEラーニングの教材を簡単に作ることができるでしょう。

ここでは高品質なライブ配信・Eラーニング動画を実現できるOBSのクロップ機能について詳しく解説します。

基本の作業のほか、特定の形に切り抜くやり方、さらにうまく行かない時のトラブルシューティングについてもまとめました。

オススメ記事:OBSのライブ配信でおすすめのパソコンスペックを解説

基本のクロップ手順

OBSで行うクロップは以下の手順で行います。
カメラで撮った映像やウィンドウキャプチャーで映したパソコン画面、いずれも同じ方法です。

OBSのソースパネルで「映像キャプチャデバイス」を選択

1.ソースパネルからクロップしたい画像や映像を選ぶ

赤枠にマウスカーソルを合わせる

2.画像の枠が青い線から赤に変わり、上下8か所に点在する四角で囲まれる
3.四辺の中央にある赤点のどれかにマウスカーソルを重ねる

altキーを押しながらマウスを操作する

4.altキーを押しながらドラッグ、Macの場合はOptionキーを使う
5.必要な大きさに切り取ったら、赤枠の外でクリックする

とても簡単ですよね。

OBSで特定の形にクロップする方法の流れ

OBSでクロップできるのは四角形のみですが、パソコンの画像編集ソフトを使うと丸型やハートマークなど、様々な形にトリミングできます。

OBSのアルファマスク用画像

結論から先に言うと上のような色が反転した画像をOBSのアルファマスク(カラーチャンネル)に読み込めば簡単に出来てしまいます。

ここではPhotoshopを使ってこの画像の作り方をまず先に解説しますが、分かる方は読み飛ばしてOBSの操作へ進めてください。

Photoshopではなくても、Windowsのフリーソフト「ペイント」やフリーのイラストツールを使って同じようなことができるはずです。

アルファマスク用の画像パッケージ内容

なお、Photoshopやペイントツールを持っていない方や、手っ取り早く丸型に切り抜きたいという方のために、OBSのクロップですぐに使えるファイルを下記リンクからダウンロードできるようにしています。

よかったら合わせて使ってください。

OBSのクロップ用画像パック.zip(ウィルスチェック済)

以下の手順でやってみましょう。

Photoshopでの作業手順

Photoshopでは、OBSのアルファマスク(カラーチャンネル)に読み込ませる画像を作るところまで行います。

Photoshopの新規プロジェクト

1.Photoshopを起動して新規にドキュメントを作成する
2.OBSで出力する解像度と同じサイズで作成する(例の場合 横1920ピクセル 縦1080ピクセル)
3.カンバスカラーを黒に設定して「作成」に進む

新規レイヤーを作成

4.プロジェクトが開いたら新規レイヤーを作成する(Ctrlキー+Shiftキー+Nキー)
5.レイヤー名は適当につける

描画ツールで好きな形を選択

6.ツールパネルから楕円形ツールを選ぶ(作成したいマスクの形を選ぶ)

新規レイヤーに楕円形ツールを描く

この時カラーパレットは白が選ばれている状態であることを確認してください。

7.作成した新規レイヤーを選んでいる状態でドラッグして図形を描写する

はみ出さないように描く

8.プロジェクトのサイズに入るギリギリのサイズになるよう微調整する

なるべく中央に配置するように設定すると後の作業がやりやすくなります。

9.ファイル名を付け、管理しやすい場所にjpgまたはpngファイルで保存する

web用に保存(Ctrlキー+Shiftキー+Altキー+Sキーを押す)でも大丈夫です。

OBSで画像を読み込んで切り抜く手順

切り抜きができたら、OBS上の画面に次の手順で反映させましょう。

OBSのソースパネル⇒映像キャプチャデバイスを右クリック⇒フィルタ

1.ソースパネルに映像キャプチャデバイスを追加する
2.ソースパネルの「映像キャプチャデバイス」を選んで右クリック、下から2段目の「フィルタ」を選択

フィルタウィンドウ⇒エフェクトフィルタ⇒イメージマスク/ブレンドを選択

3.「フィルタ」のウィンドウが表示される
4.エフェクトフィルタの項目の左下の+をクリックし、「イメージマスク/ブレンド」を追加する
5.名前を適当に入力し、OKをクリックする

種別「アルファマスク(カラーチャンネル)」を選択⇒画像を選択

6.エフェクトフィルタの項目に「イメージマスク/ブレンド」が追加されているので選択
7.ウィンドウ中央の「種別」がアルファマスク(カラーチャンネル)になっていればOK
8.その下の「参照」をクリックし、先ほどPhotoshopで作成したjpg画像を選ぶ

透明度調整可能

9.切り取られた図形と同じ形に表示されていたらOK。閉じるをクリックして完了

赤枠のツマミを左に動かせばクロップした画像の透明度も調節できます。

映像キャプチャデバイスのサイズを変更する

10.映像のサイズと位置を調節する

切り抜かれている映像キャプチャデバイスを選んで、赤枠の角をマウスで斜めにドラッグしてサイズを小さくし、位置を調節します。

ソースのキャプチャの順番を確認する

10.新規のキャプチャを追加する

今回の例ではソフトの使い方動画を想定して作成します。

OBSのソースパネルで「画面キャプチャ」を選んで追加します。
次にソフトウェアを表示しているモニター画面を選びます。

この時ソースパネル上で、切り抜きした「映像キャプチャデバイス」が、追加した「画面キャプチャ」の上の位置になっているのを確認します。
下になっている場合はドラッグして上に動かすと順番を変えることができます。

マスクで切り抜いたクロップ画像を合成

このような感じで、パソコンの操作画面の右下にクロップした映像を表示することが出来ました。

この状態でOBSのコントロールパネルの「配信開始」または「録画開始」を押してソフトウェアの講義を開始します。

このような流れでピクチャーインピクチャーの使い方動画を制作(配信)することが可能です。

うまく切り抜きできない時の対処法

OBSクロップは少し手順が多いので、慣れるまではうまく行かないこともあります。
よくある失敗例を挙げながら、修正方法について説明しましょう。

クロップした映像の位置を直したい

クロップした映像の位置を動かしたい時は、画像の上にカーソルをのせ、希望の場所にドラッグさせます。
画面の真ん中にする時は以下の手順を知っていると、より簡単にできます。

変換⇒画面中央に置く

1.ソース内のキャプチャデバイスまたは画面上を右クリック。変換を選ぶ。
2.「画面中央に置く」を選択する

これでクロップ画像を中央に配置することができます。
なお、変換キーでは他にも以下のようなコマンドができるので大変便利です。

★90度回転
★180度回転
★水平、垂直方向に反転
★大きさを画面に合わせる、引きのばす
★垂直、水平方向に中央揃え

サイズを変えたい、元に戻したい

複数の画像を重ねた時に一部の画像サイズを小さくするには、角にある赤い四角を斜め内側方向にドラッグさせると、同サイズで簡単に縮尺できます。

「変換をリセット」でサイズと位置を初期化できる

一方大きさを元に戻すには、画像を選んで右クリック⇒「変換」⇒「変換をリセット」を選択するとオリジナルの位置・サイズに戻ります。

クロップされた形が画像と違う

Photoshopで作成したマスク用の画像背景が、黒以外になっていないかを確認してみましょう。
OBSでは黒色の部分が透過されるため、他の色ではうまくトリミングできなくなることがあります。

クロップされた映像が目立たない

OBSのクロップで行うピクチャーインピクチャーは切り抜き画像の輪郭の色を付けたり、シャドウを付けるといったことが出来ません。

OBSのクロップでピクチャーインピクチャー映像が完成

このためクロップ画像の形を単純な丸ではなくインパクトのある形にしたり、コントラストが強くなるよう背景やライティングを工夫するのがおススメです。

ここで配布しているクロップ用のjpg画像をぜひ活用してください。

OBSの映像をクロップする手順 まとめ

OBSで画面をクロップする作業は、初めは手順の多さに少し大変と感じてしまうかもしれません。

だけどマスク画像さえ作っておけば、あとは読み込むだけで切り抜きが完了します。

本来このような2画面の映像を作る場合、録画したデータを動画編集ソフトに2つ並べて編集せねばならず手間がかかります。

無料のライブ配信ソフト OBSを使うことで、ピクチャーインピクチャーの動画が簡単に作れるのは意外とご存知ない方が多いかもしれませんが、とても便利ですよ。

ATEM Miniのようなライブ配信スイッチャーでピクチャーインピクチャー動画を作るのも良いですが、予算が厳しいなら無料ソフトで完結するのがおススメです。

会員サービス始めました

関連記事