Character Motion Studio白フチと位置ズレは別の問題
キャラクターを背景透過PNGにしてアニメーションへ配置すると、「黒背景で白い縁が見える」「画像を切り替えた瞬間だけ少し動く」という問題が起こることがあります。
どちらもPNGの問題に見えますが、原因は分けて考えます。
背景透過そのものの仕組みは「背景透過は『背景を消す』だけではない」、市松模様と実際の透明画素の違いは「ChatGPTで背景透過すると市松模様になるのはなぜ？」で整理しています。
透明なのに白フチが残る理由
透過PNGの輪郭は、透明か不透明かの二択ではありません。滑らかな輪郭には「30％だけ見える」「70％見える」といった半透明ピクセルが含まれます。これがアンチエイリアスです。
白背景上のキャラクターを背景除去した場合、背景自体を透明にできても、境界の半透明ピクセルのRGBへ元の白色が混ざったまま残ることがあります。
Adobe Photoshopも、アンチエイリアスされた選択範囲の半透明エッジには元背景の色が残り、異なる背景へ移すとフリンジやハローとして見えると説明しています。
Adobe Photoshop：選択範囲からフリンジピクセルを削除 ↗
| 置く背景 | 白が混ざった輪郭の見え方 |
|---|---|
| 白背景 | 背景と近いため目立ちにくい |
| 黒背景 | 白い輪郭として強く見えやすい |
| 色背景 | 灰色・白・元背景色のにじみとして見えることがある |
つまり「透明になっているか」だけでなく、半透明になっている輪郭ピクセルに何色が残っているかまで確認する必要があります。
StraightとPremultipliedでもフチが変わる
アルファ付き画像には、Straight AlphaとPremultiplied Alphaという扱いがあります。
Straightでは透明度を主にアルファチャンネルで保持し、RGBは前景色として保持します。PremultipliedではRGB側もアルファと背景色の影響を受けた値として持ちます。
Adobe Premiere / After Effectsの資料でも、Premultipliedの半透明部分は背景色側へ色が寄り、素材をStraightとして誤解釈するとエッジに不正確な色やハローが出る場合があると説明されています。
Adobe After Effects：アルファチャンネルの変換 ↗
削除範囲、アンチエイリアスのRGB汚染、Straight / Premultipliedの解釈など、複数の原因があります。Photoshopに白マット削除やフリンジ削除があるのも、透明度だけではなく境界色を修正する必要があるためです。
白背景だけで確認しない
透過素材を作ったら、市松模様だけでなく白背景・黒背景・色付き背景で確認すると、輪郭の異常を見つけやすくなります。
現行Character Motion Studioには、背景表示として次の4モードがあります。
| モード | 用途 | 書き出し |
|---|---|---|
| 透明 | 市松模様で透明部分を確認 | 透明PNG |
| 白背景（透過） | 白背景で黒フチ・線を確認 | 背景は焼き込まず透明 |
| 黒背景（透過） | 白フチ・明るいハローを確認 | 背景は焼き込まず透明 |
| 背景あり | 指定色を実際に合成 | 背景色を含めて書き出す |
白・黒の確認背景は表示だけで、素材へ白や黒を焼き込むための機能ではありません。輪郭チェック用の背景と、最終合成する実背景を分けて扱えます。
また、Character Motion Studioの標準背景除去は輪郭を0/255だけで二値化せず8ビットのソフトアルファを作り、背景色が混ざったエッジRGBも部分的に回復する処理を持っています。詳細は背景透過機能ページで確認できます。
位置ズレは「画像の矩形」が変わることで起きる
次は白フチとは別の問題です。例えば「通常顔.png」と「目閉じ.png」を同じ位置へ置いて切り替えるとします。
透明余白を差分ごとにギリギリまで切り詰めると、画像の幅・高さと、その矩形の中でキャラクターが占める位置が変わります。ソフトが画像矩形の中心を基準に配置や回転を行う場合、同じX・Y値でも見えているキャラクターは少しずれて見えます。
UnityのSprite Editorでも、SpriteRectには位置・サイズとPivotがあり、Pivotは座標原点・アンカーポイントとして扱われます。またTrimは透明部分に合わせてSpriteRect自体を縮めます。
差分PNGの位置ズレでは、キャラクターの目や口だけを見る前に、ファイルのキャンバスサイズと透明余白が揃っているかを確認します。
アニメーション素材では透明余白も座標情報になる
静止画なら余白を削ってファイルを小さくしても問題になりにくいですが、連番アニメーションでは透明余白が位置情報として機能します。
例えば10枚の雲アニメーションを、各コマごとに雲ギリギリまでTrimするとします。
| コマ | Trim後の画像サイズ | 問題 |
|---|---|---|
| 1 | 240 × 130 | 矩形中心A |
| 2 | 260 × 140 | 矩形中心B |
| 3 | 300 × 150 | 矩形中心C |
各画像を毎回中央へ置くと、本来は雲の形が変わっただけなのに、矩形中心の違いまで動きとして加わる場合があります。
そのため連番では、例えば全コマを500×500pxの同一キャンバスへ置き、その中で雲やキャラクターだけを動かす方法が扱いやすくなります。
透明部分は何も描かれていませんが、「このキャンバスのどこに被写体がいるか」を保持しています。
パーツ素材では回転中心を意識する
腕、目、髪などを切り出す場合も同じです。腕を独立パーツとして扱うなら、見えている腕の中心より「肩からどう回るか」が重要になります。
ただし、現行Character Motion Studioの通常Animation Layerには一般的な任意Pivotフィールドはありません。レンダリングではレイヤー矩形の中心を基準に回転します。
そのため現時点で肩を回転中心へ近づけたい場合は、透明余白を含む素材キャンバス内で肩が矩形中心に来るよう調整する、またはパーツの配置・サイズを揃えてから回転させる方法が現実的です。
パーツをどこまで分けるか、切り出し・コピー・自動分離・部分パペットをどう使うかは「イラストのパーツ分けはどこまで必要？」で整理しています。
Character Motion Studioで素材を作る場合
Material StudioとAnimation Studioをまたいで透過素材を使う場合は、次の順番で確認すると切り分けやすくなります。
- 透明・白・黒背景で輪郭を見る。 黒だけで白フチが出るなら、半透明エッジのRGBを疑います。
- 差分のキャンバスサイズを揃える。 まばたき・口パク・連番素材では余白をコマごとにTrimしない方が位置を保ちやすくなります。
- パーツでは接続位置を見る。 腕なら肩、足なら股関節や接地点など、画像中心と動きの中心を分けて考えます。
- 切り出し方法を選ぶ。 現行UIには切り出し、コピー、自動分離、部分パペットがあり、自動分離では元位置の補完も行います。
- Animation Studioへ置いてから再確認する。 静止状態では目立たない1〜2pxのフチや位置差も、再生すると繰り返されて見えやすくなります。
透明にするだけでなく、「動かしたときに安定する素材」にする。
白・黒背景で輪郭を確認し、差分ではキャンバスと余白を揃え、パーツでは回転中心を意識します。背景透過と素材制作を別工程にせず、そのままアニメーションへつなげて確認できます。
症状から原因を切り分ける
| 症状 | まず疑うもの | 確認方法 |
|---|---|---|
| 黒背景だけ白く縁取られる | 白マット・背景色が混ざった半透明RGB | 黒背景（透過）で輪郭を確認 |
| 白背景だけ黒い縁が出る | 黒マット・Premultiplied解釈 | 白／黒を切り替えて比較 |
| 市松模様そのものが残る | 市松が画像に描かれている | 透明モード＋別背景で確認 |
| 差分を切り替えると上下左右へ跳ねる | キャンバスサイズ・透明余白の不一致 | PNG寸法と被写体位置を比較 |
| 腕を回すと肩から外れる | レイヤー中心と関節位置の不一致 | 素材矩形の中心位置を確認 |
| 連番全体が細かく震える | 各コマを個別Trimしている | 全コマを同一キャンバスへ戻す |
まとめ
白フチと位置ズレは、どちらも透過PNGで起きますが同じ問題ではありません。
白フチでは、透明度だけでなく半透明エッジのRGBとアルファ解釈を確認します。位置ズレでは、画像の透明余白、キャンバスサイズ、矩形中心、回転中心を見る必要があります。
アニメーション用途では、透過PNGを単なる「背景を消した画像」と考えず、色＋透明度＋キャンバスサイズ＋素材内の基準位置を持つデータとして扱うと原因を切り分けやすくなります。