Zoom講習で折り図と手元の映像を同時に表示させた話
はじめに
本記事は無料公開です．投げ銭方式になっておりますのでこの記事は気に入った！という方はご支援いただけるとありがたいです．
また，私はこの手の技術解説記事を書くのはかなり初心者なので，いろいろと分かりにくくなってしまう点があるかもしれません．「ここがわからなかった」という点がありましたらコメントやTwitterのDMなどで教えていただけるとありがたいです．
概要
本記事ではZoomなどのオンラインの折り紙講習において，
・手元の映像
・折り図などの資料
の2つの情報を同時に画面に表示させる方法を紹介します．完成イメージは下の絵に示しているような感じです．
資料を見せながら講習をすることにより講習者は工程のど忘れを防ぐことができますし，受講者の側でも「今からどんな作業をしようとしているのか」などが理解しやすくなることが期待できます．早速手順を紹介していこうと思います．
準備するもの
講習にあたり用意するものは以下の通りです．
・Zoomを開くためのPC
・手元を映す用のカメラ
・OBS Studio(後述)
・PowerPoint(資料用)
PC，カメラについては普段皆さんがZoomで利用されているもので問題ないです．OBS StudioというのはYoutuberの方などがオンラインで映像配信をする際に利用されている映像合成ソフトで，今回はこのソフトを使って資料と映像を合成した画面を作っていきます．PowerPointは資料を示すために使用しますが，持っていない場合はGoogleスライドなどでも代用できると思います．
余談：
手元カメラについて，私は普段使っているスマートフォンをWebカメラとして利用できるIriunWebcamというサービスを利用しています．スマホカメラは市販のWebカメラよりも性能が良いことが多いので手軽に高画質の映像環境が用意でき，おすすめです．インストールから使用までの流れを以前ブログにまとめていたのでよろしければご覧ください．
(余談ここまで)
導入方法
合成のための手順は大きく分けると5つのステップになります．
①OBS Studio(以下OBS)をダウンロードする
②表示させるための資料を用意する
③OBS上で合成する
④グリーンバックの設定をする
⑤Zoomなどで使えるように仮想カメラの設定をする
以下，順に紹介していきます．
１．OBSをダウンロードしよう
OBSをダウンロードします．この辺のやり方とかはネットにやり方がいくらでも転がってると思うので詳しく紹介はしませんが，以下に示すOBSの公式サイトにアクセスしてお使いのPCのOSを選択するとインストーラがダウンロードできるようです．
２．資料を用意しよう
PowerPointを使って手元の映像と一緒に表示させるための資料を用意します．折り図を表示させたい場合は1工程ごとに画像を作成し，スライド1枚ずつに画像を貼り付けて紙芝居のようにしておくとよいでしょう．講習時にEnterキーやマウスで1工程ずつ示すことができるので便利です．
３．OBSで合成しよう
1でインストールしたOBSを立ち上げ，映像を合成していきます．起動するとまず以下のような表示が出ます．
画面上半分に黒い画面が表示されているので，ここに映像や資料を重ねて表示できるようにしていきます．まずは手元カメラの映像を表示させましょう．画面下にある[ソース]という項目の「＋」のアイコンをクリックします．
クリックすると選択肢がいくつか現れるので[映像キャプチャデバイス]を選択します．すると[ソースを作成/製作]というウィンドウが現れるので[新規作成]を選択します．ソースの名前を付けることになるので「camera」とか「手元」とか適当につけましょう．
ここまでの操作をすると以下のウィンドウが表示されます．
この時点で[デバイス]の欄からIntegraated Camera(PCにデフォルトでついているカメラ)など，「OBSのソフト側がカメラとして認識している媒体」を選択することができるので，手元カメラとして使用しているものを選択します．選択後[OK]を押すと以下のようになります．
これで画面上部のところに手元カメラの映像を映すことができました．赤い枠線が映像の表示範囲になっていて，頂点の四角い点をマウスでドラッグすることで大きさを変えることができます．
これで映像部分が完成しました．次にこの画面にパワーポイントで作成した資料を重ねて表示していきます．流れがやや複雑になるので作業は慎重めに行ってください．
①パワーポイントの準備
作成したパワポをOBSとは別に起動して待機させておきます．このとき，映像と重ねて表示したいのはスライドの部分なので，パワーポイントの「閲覧表示」という機能を用いて「スライドだけが表示されたウィンドウ」の状態にしておきます．具体的な方法としてはパワーポイントの上部メニューから[表示]→[閲覧表示]の順に選択します．これをするとスライドがいっぱいに表示されたウィンドウができるので，適当な大きさに縮小しておいておきます．
②スライドを重ねて表示する
いよいよOBS上でスライドと手元カメラの映像を重ねていきます．先ほどと同じようにOBSの[ソース]の＋アイコンをクリックし，今度は[ウィンドウキャプチャ]という項目を選択します．これはOBSの画面上に様々なウィンドウを表示させるための機能で，今回はこれを先に作成した資料が表示されているウィンドウに適用していきます．再び[ソースを作成/選択]画面が現れるので[新規作成]を選び，名前を適当につけます(PowerPointとかが良いです)．名前を付けて進むと以下のようなプロパティが表示されます．
この画面が出たら[ウィンドウ]の項目から現在資料を表示させているウィンドウ(POWERPNT.EXE～みたいな名前になっている)を選択し，OKをクリックします．こうすると資料が先ほどの手元カメラの映像の上に重なって表示されます．パワーポイントのウィンドウをクリックして資料を順に表示すると，OBS上でも資料が切り替わるはずなので確認してみてください．
４．グリーンバックを設定しよう
3までの手順で資料と映像を重ねて表示することができました．これで十分といえば十分なのですが，今の状態だと文字等が表示されている部分以外が画面を塞いでしまい，手元の見える部分が少なくなってしまいます．
これが意外と邪魔になるのでOBSのグリーンバック機能を用いて余計な領域を消していきます．具体的な手順は以下の通り．
①パワポ資料の背景色を緑色にする
資料を再び編集モードでの表示に戻し，スライドを右クリックしてメニューを表示させ，[背景の書式設定]という項目を選択します．すると画面右に[背景の書式設定]の画面が現れるので，バケツのマークのボタンを選択し，背景の色を適当な緑色に変更します．
これをすべてのスライドに対して行うのですが1枚ずつ作業するのは大変なので，パワーポイントのスライドマスターという機能を用いていっぺんに背景色を変えてしまいます．具体的には画面上部のメニューから[表示]→[スライドマスター]の順に進み，以下のような画面を表示させます．
画面にスライドっぽいものがたくさん表示されるので，いちばん上のスライドっぽいものを選択し，先ほどの要領で背景色を変更します．変更後，[マスター表示を閉じる]をクリックするとすべてのスライドの背景色が緑色になったことが確認できます．
②OBSの設定をする
スライドの背景色が変えられたら次にOBSのグリーンバックの設定をしていきます．再びOBSの画面を表示させ，[ソース]にあるパワーポイントのウィンドウキャプチャの項目を右クリックしてメニューを表示させます．下から2番目くらいのところに[フィルタ]という項目があるので選択し，['ウィンドウキャプチャ'のフィルタ]というウィンドウを表示します．
ここでは左下の＋のアイコンをクリックして，[クロマキー]を選択します．するとクロマキーの設定画面が現れるので[色キーの種類]という項目を[緑]に設定します(デフォルトでされているかも)．これが済んだら設定のウィンドウをすべて閉じると，クロマキーの効果で緑色の部分がすべて透明になっていることが確認できます．
５．仮想カメラに設定しよう
ここまでの手順でOBS上に資料と手元カメラの映像を重ねて表示することができるようになりました．最後にこの映像をZoomで表示させることができるように仮想カメラの設定を行います．といっても難しいことは何もなく，画面右下にある[仮想カメラ開始]をクリックするだけです．これでPC側ではOBSの映像を他のカメラからの入力と同じように認識できるようになります．この辺は詳しく掘り下げるとややこしいのですが，この作業でZoomからOBSの映像が選択できるようになるんだな～くらいの理解でOKです．仮想カメラに設定できたらZoomを起動し，[カメラの選択]から[OBS Viutual Camera]を選択すると，Zoom上でOBSで作った画面が表示されるようになります．
まとめ
さて，少々長い手順になりましたがこれで手元の映像と講習用の資料(折り図など)を重ねて表示するシステムの構築ができたかと思います．お疲れさまでした．資料の切り替えはパワーポイントのウィンドウをクリックするか，パソコンの左右キーで行えます．これを使って図の表示を適宜切り替えつつ講習をすることで，受講者のさらなる理解の助けが期待できるのではないかと思います．課題点としては
・図の内容によっては受講者が混乱するかも
・工程ごとに図を切り替えるのが手間(Enterキー押すだけだけど)
・図の用意が大変(特に折り図を画像化するのが手間)
あたりが挙げられるでしょうか．どなたか良い解決方法をご存じの方がいらっしゃったら教えていただけるとありがたいなあと思います．
最後に(冒頭と重複しますが)，筆者は技術解説系の記事の執筆に関しては完全に初心者なので，もしかしたら分かりにくい点があるかもしれません．「ここが分からなかった」という点がありましたらコメントやTwitterのDMなどで教えていただけると非常にありがたいです．よろしくお願いします．
この記事が気に入ったらサポートをしてみませんか？