画像の背景削除をしたいとき、Remove.bg や Adobe Express を使う人が多い。ただ、これらは画像をサーバーに送信する必要があり、枚数制限や API 課金もある。「サーバーに送らず、ブラウザだけで AI 背景削除できないか？」と思って作ったのがこのツール。
ぱんだツールズの1機能として実装した。画像をドロップしてボタンを押すだけで、AI が被写体を検出し背景を除去する。処理はすべてブラウザ内で完結し、画像がサーバーに送られることはない。
使い方と処理結果
使い方はシンプル。
- 画像をドラッグ＆ドロップ（JPEG / PNG / WebP、最大 20MB）
- 「AIで背景を削除」ボタンをクリック
- Before / After プレビューで確認
- 透過 PNG をダウンロード
チェッカーボード背景で透過状態を確認できる。被写体の輪郭を AI が自動で判定するため、人物・商品・動物・イラストなど複雑な背景にも対応する。
技術スタック：ブラウザ内 AI 推論の仕組み
背景削除の中核を担うのは以下の2ライブラリ。
| ライブラリ | バージョン | 役割 |
|---|---|---|
@imgly/background-removal |
1.7.0 | 背景削除 API（モデル管理・前後処理） |
onnxruntime-web |
1.21.0 | ONNX モデルの推論エンジン（WebAssembly） |
処理の流れはこうなる。
画像入力 → @imgly/background-removal が受け取る
→ ISNet（FP16版）モデルをロード
→ onnxruntime-web が WebAssembly で推論実行
→ セグメンテーションマスク生成
→ マスク適用 → 透過 PNG 出力
ISNet（Intermediate Supervision Network）は画像セグメンテーション用のニューラルネットワークで、被写体と背景を高精度に分離する。ライブラリのデフォルトでは FP16 量子化版（約80MB）が使われる。このモデルを ONNX 形式で配布し、onnxruntime-web が WebAssembly 上で実行する。つまり Python も GPU サーバーも不要で、ブラウザの中だけで AI 推論が走る。
実装のコア部分はこれだけ。
const { removeBackground } = await import('@imgly/background-removal')
const blob = await removeBackground(file, {
progress: (key: string, current: number, total: number) => {
// 進捗コールバックで UI を更新
},
output: {
format: 'image/png' as const,
quality: 1,
},
})
removeBackground に File オブジェクトを渡すだけで、透過 PNG の Blob が返ってくる。ライブラリ内部でモデルのダウンロード・推論・マスク適用をすべてやってくれる。
ここで重要なのが await import() による動的インポート。@imgly/background-removal はモデルローダーや WASM ランタイムを含む重いパッケージなので、ページ読み込み時にはバンドルに含めず、ユーザーがボタンを押した瞬間に初めてロードする。これにより初期表示のパフォーマンスを犠牲にしない。
初回100MBのモデルDLをどう乗り越えるか
このツール最大の課題は「初回のモデルダウンロード」。ISNet モデル（約80MB）+ WASM ランタイム等で計約100MB のファイルをブラウザにダウンロードする必要がある。初回は回線速度に応じて1〜3分かかる。
何も表示せず待たせるとユーザーは離脱する。そこで progress コールバックを使い、処理フェーズを2段階に分けて進捗表示している。
progress: (key: string, current: number, total: number) => {
if (key.startsWith('fetch:') || key.startsWith('load:')) {
// Phase 1: モデルダウンロード（進捗 0-70%）
const pct = total > 0 ? Math.round((current / total) * 70) : 10
setProgress(pct)
setProgressLabel('AIモデルをダウンロード中...')
} else {
// Phase 2: AI推論処理（進捗 70-98%）
const pct = total > 0 ? 70 + Math.round((current / total) * 28) : 85
setProgress(pct)
setProgressLabel('背景を解析中...')
}
}
key の文字列パターンで処理フェーズを判定するのがポイント。fetch: や load: で始まるキーはモデルファイルのダウンロードを示し、それ以外は推論処理を示す。これをプログレスバーに反映して「いま何をしているか」を可視化する。
もう一つの工夫は、初回ユーザー向けの注意表示。
{phase === 'idle' && (
<div className="mt-4 rounded-xl bg-blue-50 px-4 py-3 text-sm text-blue-700">
<span className="font-medium">初回のみ：</span>
AIモデル（約100MB）をブラウザにダウンロードします。
2回目以降はキャッシュから即時起動します。
</div>
)}
ボタンを押す前に「初回は時間がかかる」と伝えておくことで、待機中の離脱を防ぐ。2回目以降はブラウザキャッシュからモデルがロードされるため、ダウンロードフェーズがスキップされて5〜15秒で処理が完了する。
3つの背景削除ツールの使い分け
ぱんだツールズには背景削除系のツールが3つある。
| ツール | 方式 | 対応する背景 | 処理時間 | 初回DL |
|---|---|---|---|---|
| AI画像背景削除 | ONNX + WebAssembly | あらゆる背景 | 5〜15秒 | ~100MB |
| 画像の白背景透過 | Canvas API（閾値判定） | 白背景のみ | 1〜2秒 | なし |
| 画像の指定色透過 | Canvas API（スポイト選択） | 任意の単色背景 | 1〜2秒 | なし |
使い分けの基準はシンプル。
- 背景が白一色 → 白背景透過（最速）
- 背景が単色だが白以外（緑・青バックなど） → 指定色透過
- 背景が複雑（屋外・室内・グラデーション） → AI背景削除
AI 版は高精度だが初回のモデル DL と推論時間がかかる。単色背景なら Canvas API 版のほうが圧倒的に速い。3ツールを用途で選べるようにしている。
まとめ
@imgly/background-removal と onnxruntime-web を組み合わせることで、ブラウザだけで AI 背景削除を実現できた。サーバー不要・完全無料・プライバシー安全という条件をすべて満たせるのは、WebAssembly の進化のおかげ。
課題だった初回100MBのモデルダウンロードも、段階的な進捗表示とブラウザキャッシュで実用レベルに収まっている。2回目以降は数秒で処理が完了するので、体感としては普通のWebツールと変わらない。
ぱんだツールズ では他にも PDF・画像・CSV・テキスト処理などの開発者向けツールを公開中。全部無料・登録不要・ブラウザ完結で使える。
https://sakutto-panda.com
この記事は Zenn にも同じ内容を投稿しています。