AI背景透過と手動補正を
支える「マスクレイヤー」戦略

このツールの入力から出力まで

現行コードの確認日：2026-10-12

入力

人物写真を入力し、自動結果のあとに消しゴム・復元ブラシで境界を調整します。

処理

selfie_segmenterのマスクから人物側の画素を残します。編集するマスクを所有配列へコピーしてから、MediaPipeの結果資源を解放します。

出力

透明背景はPNG、白背景はJPEG品質0.95で出力します。

まず確認する点：復元は処理画像の元画素を戻す操作です。髪や透明な物を新しく生成する処理ではなく、縮小で消えた細部も復元できません。

仕上がりの例

人物写真の背景を取り除き、透過PNGにした例です。

画像を拡大

サンプルにはAIで生成した架空の人物画像を使用しています。市松模様は透明部分を示す表示用の背景です。ツールで保存する透過PNGには含まれません。

加工前・加工後

閉じる

掲載画像はサイトにある既存の公開作例です。保存済みの資料ではAIで作成した架空の人物・手の画像を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。

保存済み検証記録の条件を見る

資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。

架空の人物写真を読み込み、自動処理の結果を透過PNGで保存。

記録の入力画像

1788×2400px (JPEG)

記録の出力画像

1117×1500px (PNG)

保存済み記録の主な操作・出力条件

画面の項目	記録の値	現行コードの初期値・範囲
記録の背景	透明	—
記録の手動修正	なし	—

資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。

実装の確認箇所：src/pages/ai/ima-seg/bg-remover/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。

仕組みを読み進めるときは、MediaPipeの画像セグメンテーション（人物マスクの寸法、カテゴリと資源解放）、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）が参考になります。

1. マスクキャンバスによる非破壊的な手動補正

AIが切り抜きに失敗した際、ユーザーが指でなぞって「消去」や「復元」を行えるようにするため、「表示状態を管理する専用のマスク用Canvas」を裏側に持っています。

元画像そのものを加工するのではなく、白黒のマスクデータ（白＝見える、透明＝見えない）を介して元画像をくり抜く（destination-in）手法を採用しました。これにより、一度消した部分も「復元ブラシ」で元のピクセルデータを完全に再表示させることが可能になります。

元画像と編集用マスクを合成する例です。maskは白い部分が表示対象で、透明な部分が非表示です。白黒の色そのものではなく、マスクの透明度が使われます。

function applyMask(canvas, image, mask) {
  const ctx = canvas.getContext('2d');
  if (!ctx) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'destination-in';
  ctx.drawImage(mask, 0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'source-over';
}

2. 人物の確信度を透明度へ変換するマスク

現行のMediaPipe Tasks Vision 0.10.34とselfie_segmenter.tfliteのカテゴリマスクは、人物が0、背景が255です。ラベルはselfieのみで、単一の確信度マスクは人物の確率を表します。画像の端のカテゴリから背景を推測する処理は使いません。

本ツールはconfidenceMasks[0]の人物確信度を0〜255の透明度へ変換して編集用マスクを作ります。人物の確信度が低い境界ほど薄く残すため、二値の切り抜きより滑らかに表現できます。誤推定は消しゴムと復元ブラシで補正できます。

3. ブラウザ内完結(Edge AI)によるプライバシーと速度の両立

一般的な背景透過サービスは画像をサーバーに送信して処理しますが、本ツールはWebAssembly(WASM)を活用したエッジ処理を行っています。

一度数メガバイトのAIモデルをロードしてしまえば、その後は1ピクセルも外部に送信することなく、クライアントサイドのGPUを活用して高速に推論を実行します。選んだ画像を送信してサーバーの処理結果を待つ工程はありません。ただしモデル取得の通信、初期化、端末内の推論には待ち時間があります。

出力の仕様と確認する点

マスクの大きさは返却されたwidth・heightを参照します。readMaskDataで処理Canvasの寸法へ合わせ、カテゴリは最近傍、確信度は双線形補間で所有配列へコピーします。コピー後にImageSegmenterResult.close()で元のマスク資源を解放し、編集と描画にはコピーを使います。

使用するselfie_segmenterは人物向けのモデルです。商品やペットを自動で正確に切り抜く機能ではありません。自動結果が合わない部分は、消しゴムでマスクを消し、復元ブラシで表示する領域を足します。

復元できるのは読み込み後の処理画像にある画素です。入力は長辺1500px以下へ縮小するため、縮小で失われた細部や、写真に写っていない部分を生成して戻すことはできません。

透明背景はPNG、白背景はJPEG品質0.95で出力します。細い髪、半透明の物、背景と似た色の境界を拡大確認し、保存先でも透明度が保持されているか確認してください。