試着用の背景透過PNGの作り方｜ピアス・極小アクセサリー編

商品ページに試着ボタンを置くこと自体は数分で終わります。時間がかかるのは商品画像の準備です。試着システムは——私たちのものも含めて——商品ごとに背景が透明なPNGを1枚必要とし、それを用意するのは店側です。

ここを雑にすると、お客様の耳に白い四角が貼り付いた画面が出ます。試着が無いより悪い。この記事は、自店（Adelina Style）で数百点のピアスSKUを処理して固まった手順そのものです。

なぜ「透過PNG」でないといけないのか

試着は、カメラ映像から耳の位置を検出し、その上に商品画像を重ねて描きます。画像に写っているものは全部描かれます。背景も含めて。

※ dokimiai.io/try/ の確認ページでは、透明部分の無いPNGは読み込み時に弾かれます。ストアに設置した試着では検査されないので、白い板がそのまま出ます。

つまり条件は「PNGであること」ではなく、「本当に透明なピクセルを持つPNGであること」です。

背景除去ツールの出来は元写真で決まります。極小商品はごまかしが効きません。

白またはごく薄いグレーの無地背景。柄・影・映り込みは切れません
正面から、画面いっぱいに。商品が小さく写るほど輪郭の精度が落ちます
ポスト（針）は写さない。スタッドピアスは装着すると針が見えません。試着画像に針が写ると、耳に刺さっていない絵になります。ポスト側を奥にして撮るか、飾り部分だけが見える角度で撮ります
光は拡散させる。金属の強い反射は白背景と同化して、商品の一部が「背景」として消されます

撮り直しは後工程の何倍も安い、と最初に覚えておいてください。

無料で使える機械学習モデル（rembg など）で十分です。私たちは isnet-general-use モデルを使っています。ブラウザで動く除去サービスでも構いません。

必ず等倍以上に拡大して確認する箇所：

縁に白い輪郭（フリンジ）が残っていたら、除去ツールのエッジ設定を詰めるより撮り直した方が早いです。

保存はPNG、アルファチャンネル付き。書き出し時に「背景を白で塗る」系のオプションが入っていないか確認してください。

保存したPNGを実際に試着画面に読み込み、耳に乗せた状態で見ます。PC画面で綺麗に見えても、耳に乗せると縁のギザギザが目立つことがあります。

問題があればステップ1に戻って撮り直します。ステップ2で頑張るより、撮り直しの方が早いことが多いです。

数百点処理して分かったのは、一定数は自動処理では無理ということです。私たちの場合、ミラー仕上げのように反射が強い商品は、どのモデルを通しても背景と同化しました。これらは手動で切り抜くか、反射を抑える照明で撮り直しています。

無理に自動処理の結果を使うより、「この商品は試着対象から外す」という判断も選択肢です。試着に出す商品は、綺麗に抜けたものだけに絞った方が全体の印象は良くなります。

透過PNGには「大きさ」の情報がありません。試着システムは商品の実寸（例：高さ15mm）を使って耳に対する大きさを決めるので、画像と一緒に実寸を登録します。ここがずれると、小さなスタッドが耳たぶより大きく表示される、といったことが起きます。

サイズ展開がある商品（内径10mm／12mm／14mm など）は、サイズごとに実寸を登録すると、選択したサイズに応じて耳の上の大きさが変わります。

登録場所は導入方法によって違うので、各プラットフォームの導入ガイドを参照してください。

商品画像さえ用意できれば、試着ボタンの設置自体は数分です。まずは1商品で試して、耳に乗った状態を見てから、対象を広げていくのが確実です。