Stamp Studioでは、これまでも動画の背景を除去し、コマごとにキャラクターを取り出して、スタンプの素材にする機能を用意しています。今回は、ブラウザーを開いている端末で行ってきた背景除去を、サーバー上のAIで試してみました。
使ったのは、秘密のラボにある「背景除去の実験室」と、ハロウィン姿のハム子が動く動画です。
水色の背景がある元動画と、背景を除去したあとのハム子を見比べてみてください。右側は、実験室で作ったAPNGです。APNGは、複数の絵を順番に再生する「動くPNG画像」で、背景の透明な部分も保存できます。
この動く素材は、背景を除去して終わりではありません。背景除去の実験室で作ったAPNGは、合成の実験室やコマの実験室でも使えます。文字や図形を重ねたり、使いたい動きの区間やコマを整えたりして、次の制作へつなげられます。
ハム子に、もっと生き生きと動いてほしい
ハム子が手を振ったり、跳んだりする姿を、動くスタンプにしたい。動画から素材を取り出す機能と並行して、絵を並べたり、文字や図形を動かしたりする方法も試してきました。
ひとつは、動きの途中の姿を何枚かのPNGで用意して、順番に再生する方法です。ハム子が手を振ったり、跳んだりする絵を並べてみました。ただ、コマごとに位置や身体の形が少し変わると、動きがカクついて見えることがありました。
文字や図形を動かす「モーショングラフィックス」も試しています。文字を弾ませたり、図形を揺らしたり、キャラクターの画像に動きを付けたりする方法です。こうした表現も、スタンプの言葉や雰囲気を伝えるのに使っていきたいと思っています。
キャラクター自身の表情や身体全体の動きも、もっと豊かにしたい。それぞれの方法でできることを見比べながら、制作を続けています。
絵と絵のあいだの動きがほしくなった
ハム子自身が踊ったり跳んだりするときには、絵と絵のあいだの動きも大切にしたい。以前作ったハム子のダンス動画でも、その動きの滑らかさを感じました。
動画を素材として使う流れは、すでにStamp Studioにあります。静止画像をつなぐ方法や、文字・図形の動きも試してきた中で、今は、表現豊かなキャラクターのアニメーションには動画を元にする方法がしっくりきています。
これは、今回までのハム子の制作で感じたことです。動かしたいものや作りたい表現に合わせて、PNGをつなぐ方法やモーショングラフィックスも組み合わせていきたいです。
以前の試行錯誤は、キャラクターの動き、どう整える？位置補正と12・16・20コマを比較でも紹介しています。
今回もう少し試したくなったのは、その動画を切り抜く部分です。これまでも背景を除去して各コマのキャラクターを取り出してきましたが、その処理を別の方法で行うと、仕上がりはどう変わるのでしょうか。
サーバー側で処理をするという選択
これまでの動画から素材を作る機能では、ブラウザーの中で背景を除去し、各コマからキャラクターを取り出してきました。背景除去の処理を担うのは、使っている端末です。
いろいろ試していく中で、この方法だけで進めることには限界が見えてきました。そこで今回は、動画の背景除去をサーバー側で処理する方針に切り替えました。
そして、今回の大事なポイントが、サーバー上のAIを使って背景を除去していることです。
動画から取り出した一枚一枚の絵について、背景除去用のAIがキャラクターと背景を分けます。その結果を、背景が透明な各コマのPNGと、動くAPNGにまとめます。動画の動きを元に、背景を切り抜いた編集用素材を作る仕組みです。
AIを使えば仕上がりの確認が不要になるわけではありません。白い部分や細い線が欠けていないか、動かしたときに輪郭がちらつかないかは、結果を見ながら確かめます。
背景除去の実験室を設けました
今回は、水色の背景があるハム子の動画を使いました。秘密のラボの「背景除去の実験室」を開き、動画を選びます。ドラッグ＆ドロップでも選択でき、送信前に元動画を再生して確認できます。
この実験室では、動画をStamp Studioのサーバーへ送って処理します。画面にある送信と保存期限の案内を確認し、チェックを入れてから「動画を送信して背景を除去する」を押します。ほかの実験室での画像編集や合成はブラウザー内で行います。
かぼちゃの取っ手に、小さな背景が残っていた
処理が終わると、元動画の下に背景除去後のアニメーションが表示されました。市松模様になっているところが、透明な部分です。
冒頭のAPNGを見ると、水色だった背景の大きな部分は透明になり、ハム子を背景から切り離した動く素材として見られます。
ただ、細かいところまで見ると、まだ背景が残っていました。たとえば、かぼちゃのランプの取っ手と本体のあいだの小さな隙間です。ハム子の周りは切り抜けていても、こうした入り組んだところまでは取り切れていませんでした。
ここは、次にもう少し試したいところです。AIの切り抜き方や、切り抜いたあとの輪郭を整える設定を変えて、隙間の背景も除去できるか確かめたいと思っています。ただ、今回の素材で改善を確認したわけではないので、設定を変えれば必ず消せるとは、まだ言えません。
自動処理で取り切れない部分は、できたAPNGをコマの実験室へ取り込み、各コマを手で微調整する方法も考えています。消去ブラシで残った背景を消し、取っ手まで消してしまったら復元ブラシで戻す、といった仕上げです。動く素材なので、一枚だけをきれいにするのではなく、前後のコマも見ながら、輪郭が急に変わって見えないように整えたいです。
ほかにも、白い頬やお腹、リボン、マントの端、かぼちゃの小物など、残したい部分が欠けていないかを確認したいです。止めた一枚の絵では気づきにくい変化もあるので、元動画と見比べながら、動かしたときの輪郭も確認したいところです。
この記事ではひとつの動画を使っています。別の背景やキャラクターでも同じ仕上がりになるかは、これから素材を増やして試していきたいです。
背景を除去したAPNGは他の実験室でも利用できます
結果の保存には、二つの選択肢があります。「APNGをダウンロード」では背景が透明なアニメーションを保存できます。「透過PNG連番と表示時間をZIPで保存」では、一枚ずつのPNGと、それぞれの絵をどれくらいの時間表示するかという情報をまとめて保存できます。
背景除去の実験室で作ったAPNGは、合成の実験室とコマの実験室へ取り込めます。どちらでも、ダウンロードしたAPNGファイルを素材として選びます。
今回作ったAPNGは8秒・80コマの編集用素材です。すべてをそのまま完成スタンプにするのではなく、取り込み時には使いたい区間やコマ数を選び、作りたい作品に合わせて整えます。
背景除去の結果は、LINE提出用のサイズ・コマ数・容量に整えた完成品ではありません。スタンプとして使うときは、編集した結果をアニメーションスタンプの作り方や申請前の最終チェックリストと合わせて確認してください。
さいごに
PNGをつなぐ方法、文字や図形を動かす方法、動画から動きを取り出す方法。いろいろ試してきた中で、今は、キャラクターの豊かな動きは動画から持ってきて、文字や図形は後から組み合わせる流れを考えています。
今回は、これまでクライアント側で行ってきた動画の背景除去を、サーバー上のAIへ任せる方法を試しました。かぼちゃの取っ手には背景が少し残っていて、仕上げ方にはまだ工夫が必要です。この方法で作った素材を、合成やコマの編集へつなげながら確かめていきたいです。
次は、このハロウィン姿のハム子に文字を重ねたり、使いたい動きを短く切り出したりしてみたいです。この記事で紹介したのは背景除去までで、文字入りの完成例はこれから試していきます。
今回の素材と処理条件
| 項目 | 今回の素材・設定 | | --- | --- | | 元動画 | MP4、1280×720px、8秒、毎秒24コマ | | 背景除去後 | APNG、512×288px、80コマ、1周8秒、約6.35MB | | コマの表示時間 | 各0.1秒。毎秒10コマで再生 | | AI処理 | サーバー上の背景除去モデルで各コマを処理 | | 音声 | 出力APNGには含まれません |
元動画の毎秒24コマを、そのまま全部保存したものではありません。今回の出力は毎秒10コマで、元動画とは動きの細かさが異なります。背景除去後のAPNGは実際の出力ファイルを掲載しています。
現在の入力上限はMP4・WebM・MOV、15秒・50MB以内です。出力は長辺512px以内・毎秒10コマで、利用は1時間に3本までです。提供条件は変更されることがあります。
結果は処理開始から28日以内にダウンロードしてください。ファイルの保存・自動削除の詳細はデータの取り扱いを確認できます。
素材・画面の確認日：2026年10月10日。掲載した動画・画面キャプチャ・APNGは、今回共有された実際の素材を使っています。