AssetMaster Web版の更新：動画のフレーム抽出・行選択・アニメーション編集を改善

AssetMasterは、画像をブラウザ上で加工し、実際に使える素材に仕上げるためのツールです。最近の更新では、素材を読み込んでから書き出すまでの作業を改善しました。動画からのフレーム抽出、画像シートの行選択、フレーム単位の修正、背景除去後の再調整など、繰り返しやすい工程を中心に手を入れています。

この記事では、2026年9月21日に確認した公開中のWeb版に含まれる機能を紹介します。連番画像・フォルダーの読み込みと新しい操作ヒントは、開発中のソースには実装されていますが、確認した公開版にはまだ含まれていないため、最後に今後の追加として紹介します。

AssetMasterを開く

動画をアニメーション用のフレームに変換

!AssetMasterのAnimation Studioとフレーム一覧

公開中のAnimation Studio。左に動画の取り込み設定、中央にプレビューと13フレームのタイムライン、右に整列・書き出し操作があります。

Animation Studioに「Video to Frames」を追加しました。1秒あたりに取り出すフレーム数を指定すると、その間隔で動画をサンプリングし、編集用のフレームを作成します。

例えば6 frames/secなら、約6分の1秒ごとに取り出す設定です。「どれくらい細かく動画を切り出すか」を数値で指定できます。値を大きくするほどフレーム数とブラウザの処理量が増えるため、短い素材を低めの値で試すと扱いやすくなります。

取り出したフレームは、内容を確認して調整し、既存の書き出し機能へ進められます。短い動きの参考動画を、加工して使える画像の並びに変える用途に役立ちます。

画像の読み込み直後に、行全体を選択

最初の画像編集画面で、横方向の行を検出し、内部の境界ガイドを表示するようになりました。ガイド付近を選ぶと、行全体を囲む長方形の選択範囲が作成され、通常の切り抜きと同じ流れで保存できます。

一枚のシートに複数の横長の素材が並んでいる場合、毎回長方形を描き直す作業を減らせます。対象は行単位で、各行をさらに細かなグリッドのセルへ分割する機能ではありません。また、自動検出の結果は、元画像の行の区切り方にも左右されます。

アニメーションをフレーム単位で修正

小さな修正を行いやすくするため、フレーム操作も追加・改善しました。

• フレームを複製して、編集できるコピーを作成。
• 個別のフレームを左右または上下に反転。
• フリーハンドの消しゴムに加え、正方形の範囲を指定して消去。
• 不要な項目を、明示的な削除ボタンから整理。

一つのフレームを直すために、画像の並び全体を作り直す必要を減らすための操作です。消去範囲の位置計算では、ズームやフレームのオフセットなども考慮し、画面上の画像と選択範囲の座標を合わせています。

背景除去済みのフレームを、もう一度調整

!AssetMasterの背景再調整画面

背景の再調整画面。透過部分を確認しながら、除去の強さや輪郭の調整を行えます。

背景除去は、一度で終わるとは限りません。最初に大まかな背景を消し、そのあとで輪郭や小さな残りを調整したいことがあります。

Animation Studioでは、処理済みの素材に「Refine Cleaned Frame」を表示します。保存した結果を開き直して調整できるため、別の素材を手作業で作り直す手間を減らせます。「Removal Strength」と「Edge Fade」で、除去の強さや輪郭のなじませ方を調整できます。

コピーした画像ファイルをコラージュへ貼り付け

Collage Studioでは、クリップボード上の画像ファイルの判定を改善しました。画像のMIMEタイプが付いていない場合でも、対応する画像ファイルの拡張子から認識し、ファイル選択と同じ読み込み処理へ渡します。

対応するブラウザとクリップボードの組み合わせであれば、コピーした画像を通常のコラージュレイヤーとして追加し、配置や編集を続けられます。ただし、アプリが受け取れる情報はブラウザによって異なります。画像ファイルそのもののコピーと、ファイルのパスだけのコピーは別の操作です。

操作部分をコンパクトにして、素材を見る場所を確保

ツールバーなどの操作部分をコンパクトにする表示を整えました。Animation Studioでは、コンパクト表示の設定も用意しています。必要な操作へアクセスしながら、フレームやタイムラインを見るための場所を確保することが狙いです。

今後の追加：連番画像の読み込みと操作ヒント

最新の開発ソースには、Animation Studioの「Choose Images」と「Choose Folder」が追加されています。ファイル名を自然な数値順に並べるため、frame_2.pngはframe_10.pngより前になります。画像の透過を保ち、読み込んだフレームをタイムラインへ追加します。書き出し順もタイムラインに従います。

また、閉じることができ、非表示の選択を記憶するフローティング形式の操作ヒントも追加しています。この二つは、この記事の確認時点では公開中のWeb版に含まれていません。現在使える機能とは区別し、今後の追加としてお伝えします。

試してほしい作業の流れ

短い動画や画像シートから始め、フレームの抽出や行選択で必要な素材を保存します。そのあとAnimation Studioで個別のフレームを複製・反転・修正し、再生して確認してから書き出します。

今回の更新で目指しているのは、元の画像や動画から再利用できる素材へ進むまでの、繰り返し作業を減らすことです。現在の機能はAssetMasterで試せます。