動画クロマキー透過

1. 動画を選びます。読み込むと1コマ目が表示され、四隅の色から背景の色を自動で拾います。
2. 背景が白・黒・灰なら「背景の種類」を切り替えます。緑や青の背景ならそのままで構いません。無彩色の背景は判定の仕組みが根本的に違うので、ここを合わせないと被写体まで消えます（下の「白い背景を抜くとき」を参照）。
3. 思ったところで抜けていなければ、左のプレビューの背景部分をクリックします。その画素の色をキーの色として取り込みます。撮影した緑は #00FF00 ではありません。実際の色を拾うのがいちばん確実です。
4. 「抜く範囲」を、被写体が欠け始める一歩手前まで上げます。右のプレビューは市松模様が透明部分です。
5. 緑の縁が残っていたら「輪郭の調整」をマイナスにします。-1 か -2 でたいてい消えます。次に「Despill」で、髪や肩に乗った緑の照り返しを抜きます。
6. 切り抜きたいときは、左のプレビューをドラッグして範囲を選びます。出力サイズも選べます。
7. 「この設定で1コマだけ試す」を押すと、本番とまったく同じ処理を1コマぶんだけ実行して確認できます。よければ「透過動画に変換する」を押します。

まずは数秒で試してください。ブラウザの中で1コアで処理するため、長い動画や高解像度の動画は時間がかかります。「切り出す時間」の初期値は10秒にしてあります。

白い背景を抜くとき

白・黒・灰の背景は、緑の背景とはまったく別の問題になります。「背景の種類」を「白・黒・灰などの無彩色の背景」に切り替えてください。

色のついた背景用の判定は明るさを見ず、色みだけを見ます。ところが白・黒・灰には色みがありません。数値にすると全部同じ値になります。

つまり「白」と指定しても、実際には「色みが無いもの全部」を指定したことになります。実際、色のついた背景用の判定でキーの色に真っ黒 #000000 を指定すると、白い背景が消えます（当ツールの変換エンジンで実測）。

さらに厄介なのは、淡い肌色・クリーム色・白っぽいハイライトにもほとんど色みが無いことです。背景の白と同じ場所に集まってしまうため、「抜く範囲」をどう動かしても、背景を消すと被写体の淡い部分まで一緒に消えます。キャラクターの頭のツヤだけが穴になる、といった症状はこれが原因です。

無彩色モードはRGBの距離で判定します。明るさも見るので、白と黒と灰を別の色として扱えます。同じ絵で実測した結果です。

なお、このモードでは「Despill」は表示されません。緑の照り返しを取り除く処理なので、無彩色の背景では色を狂わせるだけだからです。

それでも白背景は緑背景より不利です。被写体に白や淡い色が含まれるほど、背景との差が小さくなります。白い服・白い髪・白い小物は抜けやすいので、可能ならグリーンバックで撮り直すほうが確実です。

囲まれた背景を残す（隣接判定）

服の柄・小物・キャラクターの模様が背景と同じ色だと、被写体の中まで抜けます。「穴埋め」でふさげるのは幅12pxまでなので、それより大きい部分には効きません。

そこで「画面のふちとつながった背景だけを消す」を用意しました。画面の外周から背景をたどっていき、たどり着けなかった部分＝被写体に囲まれた部分は、背景と同じ色でも残します。大きさの制限はありません。

ただし、腕と体の間などに見えている背景も「囲まれている」ので残ります。これは仕組み上さけられません。そこが気になる場合はチェックを外すか、「切り抜き範囲」で調整してください。

なぜ遅くなるのか

「ふちからたどる」という処理は、1画素ずつ独立に判定するフィルタでは書けません。まわりの画素とのつながりを見る必要があるためです。そこでこの機能を使うときだけ、次の手順に切り替えています。

1. 動画をコマ画像（PNG）に分解する
2. 1コマずつブラウザ側で背景を判定し、ふちとつながっていない部分を残す
3. 加工したコマをもう一度動画に組み立て直す

PNGは劣化しない形式なので画質は落ちませんが、動画を2回通すぶん時間がかかります。コマは変換エンジン側に置いたまま1枚ずつ処理するので、メモリは増えません。扱えるのは300コマまでです。超えると、途中まで正しく途中から背景が残る分かりにくい出力になるため、変換を中止してお知らせします。

縁のにじみを補正（明るいフチ・ギザギザを消す）

黒い輪郭線のあるイラストを白背景で抜くと、輪郭のまわりに明るいフチが残り、階段状のギザギザに見えることがあります。設定の問題ではなく、色の近さだけで判定する方式の限界です。

なぜ起きるのか

輪郭線と背景の間には、半分が背景・半分が線という画素が1列あります。無劣化のPNGで、その断面を実測した値です。

あいだの画素（0.357）は、塗り（0.070）より5倍も背景から遠い。「背景からの距離がこれ以下なら透明」というルールでは、あいだの画素を半透明にしようとするとその手前で塗りが先に消えます。順序が逆転しているので、抜く範囲をどこに置いても両立しません。圧縮の問題でも、PNGにすれば直る話でもありません。

どう直しているか

色の近さではなく「その画素が背景に接しているか」という位置の情報を使います。背景に接している画素だけ、内側の隣の画素と比べて混ざり具合を求め直します。

透け具合 ＝ その画素の距離 ÷ 内側の隣の画素の距離

あいだの画素なら 0.357 ÷ 0.760 ＝ 0.47。「約半分が背景」と正しく求まります。さらに混ざった背景色も差し引くので、白いフチも消えます。実測した結果です。

この処理もコマ画像に分解してからでないとできないため、「囲まれた背景を残す」と同じく変換に時間がかかり、300コマまでになります。緑背景でも使えます。

設定は自動で保存されます

色・輪郭・Despill・出力の設定は、変えるたびにお使いの端末（ブラウザ）に自動で保存されます。次に開いたときは前回の続きから始められます。切り抜き範囲と切り出す時間は動画ごとに変わるため保存しません。

• 名前を付けて保存 … 撮影場所ごとに設定を分けておけます（例:「自宅のグリーンバック」「スタジオA」）。50件まで保存でき、選ぶだけで呼び出せます。
• ファイルに書き出す … 設定と保存した一覧をまとめてJSONファイルにします。別のパソコンに移すときや、同じ設定をチームで揃えたいときに使ってください。
• ファイルから読み込む … 書き出したファイルを読み込みます。範囲外の値や知らない項目は無視するので、壊れたファイルを読ませても設定が壊れることはありません。
• 初期設定に戻す … すべて初期値に戻します。名前を付けて保存したものは消えません。

保存先はこの端末のブラウザの中だけです。サーバーには何も送られません。ブラウザの履歴やサイトデータを消すと、保存した設定も消えます。大事な設定はファイルに書き出しておいてください。

実測の目安です。長いものを扱うときは、先に「フレームレート」を下げるか、切り抜きで範囲を狭めてください。

「メモリが足りませんでした」と出たときは、出力サイズを小さくするか、フレームレートを下げるか、切り出す時間を短くしてください。ブラウザの中で使えるメモリには上限があります。

「#00FF00 を透明にする」だけの処理では、ほぼ必ず緑の縁が残ります。理由は2つあります。

理由1: 境目の画素は緑と被写体が混ざっている

カメラは1画素の中に入った光を平均して記録します。被写体の輪郭にあたる画素は、被写体の色と背景の緑が混ざった中間色になっています。純粋な緑ではないので「緑を消す」だけでは残り、細い緑の線として見えます。髪の毛のように細いものほど、この中間色の画素の割合が増えます。

さらに、動画は多くの場合 4:2:0 という方式で記録されています。色の情報を縦横それぞれ半分に間引いて持つため、色の境目は実際には2px ほどにじんでいます。「1〜2px 締める」必要があるのはこのためです。

理由2: 被写体そのものが緑に照らされている

グリーンバックは光を反射します。その反射光が被写体に回り込み、髪の輪郭・肩・頬などがうっすら緑がかります。これは背景ではなく被写体の色なので、どれだけキーの範囲を広げても消えません。無理に広げると今度は被写体が欠けます。

この緑かぶりを取り除く処理を Despill（デスピル） と呼びます。透明にするのではなく、色を直す処理である点が重要です。

このツールが行っている5段階

効くのは③と④です。①②をいくら調整しても、境目の中間色と緑かぶりは原理的に消えません。

調整の目安

• 細い緑の線が全体に出る … 輪郭の調整を -1。それでも残れば -2。
• 髪の毛や指が欠ける … 輪郭の調整を 0 か +1 に戻し、抜く範囲を下げます。
• 輪郭がギザギザ … 「境目のなじませ」を上げるか、「輪郭のぼかし」を1〜2にします。
• 被写体の中がまだらに抜ける（髪の隙間・服の柄） … 「被写体の中の穴埋め」を 1〜2 にします。輪郭の位置は変わりません。ふさげるのは幅が「設定値の2倍」までの穴で、最大でも12px幅までです。それより大きな緑のロゴなどは埋まりません。その場合は「抜く範囲」を下げるか、その部分だけ別に合成してください。
• 服の柄や小物が背景と同じ色で、被写体の中まで抜ける … 「画面のふちとつながった背景だけを消す」にチェックを入れます。囲まれた部分は大きさに関係なく残ります。穴埋め（幅12pxまで）で足りないときはこちらです。
• 輪郭のまわりに明るいフチが残る／縁がギザギザになる … 「縁のにじみを補正」にチェックを入れます。「輪郭の調整」を -1 にして1画素まるごと削る方法もありますが、補正のほうが輪郭を保ったままなめらかになります。
• 白い背景で、被写体の淡い部分だけが抜ける … 「背景の種類」が「白・黒・灰などの無彩色の背景」になっているか確認してください。色のついた背景用のままだと、設定をどう変えても直りません。
• 肌や白い服が緑っぽい … Despill を上げます。
• Despill を上げたら肌が紫っぽくなった … 上げすぎです。0.4〜0.6 あたりに戻してください。緑の服を着ている場合はとくに注意が必要です。

MP4では透過を保存できません。広く使われている H.264 の MP4 にはアルファチャンネルを入れる仕組みが実質的にないため、透過動画は別の形式で書き出す必要があります。

ウェブページに置くときの書き方

透過WebMを背景の上に重ねるときは、<video> をそのまま置けば透過します。自動再生させるなら muted が必要です。

VP9ではなく、ひとつ前のVP8を使っています

WebMの透過にはVP8とVP9のどちらも使えますが、ブラウザ内で動かしているFFmpegでは、VP9＋アルファは数十コマで処理が破綻することを実測で確認しました。そのため、確実に最後まで書き出せるVP8を使っています。容量はVP9よりやや大きくなりますが、再生できる環境はむしろ広くなります。

<video src="chromakey.webm" autoplay loop muted playsinline></video>

音声について

WebM と MOV は音声も一緒に書き出せます。素材として合成に使う場合は、音声を外したほうが扱いやすいこともあります。

WebM の音声は Vorbis で書き出しています。WebM でよく使われる Opus は、ブラウザ内で動かしている変換エンジンだとステレオ音声で処理が止まってしまうことを確認したためです。Vorbis は WebM が再生できる環境ならそのまま鳴ります。

あとから処理でどうにかするより、撮影の時点で条件を整えるほうが結果は良くなります。

• 背景と被写体を離す。1〜2m 離すだけで、緑の照り返しが大きく減ります。いちばん効果があります。
• 背景に均一に光を当てる。影やムラがあると、1つのキー色では抜ききれません。
• 被写体には別に光を当てる。背景光と分けることで輪郭がはっきりします。
• 緑の服・緑の小物は避ける。一緒に消えます。被写体に緑が多い場合は青背景を検討してください。
• できるだけ高いビットレートで撮る。圧縮が強いと境目の色が壊れ、どう処理しても縁が汚くなります。
• 4:2:2 以上で撮れるカメラなら、その設定で。色の情報が2倍細かくなり、輪郭の処理が格段に楽になります。

青背景でも使えます

「背景の色」をクリックで拾えば、青背景（ブルーバック）でも同じように処理できます。ただし Despill は緑向けの処理です。青背景の場合は Despill を0にして、代わりに輪郭の調整を少し強めにしてください。

動画クロマキー透過は、ブラウザの中で FFmpeg を動かして処理しています。動画がサーバーへ送信されることはありません。初回のみ変換エンジンの読み込みに30MBほどの通信が発生します。1コアで処理するため、解像度が高い動画や長い動画は時間がかかります。撮影条件によっては思うように抜けないことがありますので、あくまでも目安としてご利用ください。無料でご利用いただけます。