グリーンバック不要・ブラウザだけで画像の背景を透過できる無料ツール「とうかねっこ」を作った話｜白背景の白い被写体もきれいに切り抜き
概要
今回はブラウザだけで画像の背景を透明にできる無料Webツール「とうかねっこ」を作ったので紹介していきます。
このツールの一番の特徴は画像をどこにもアップロードせず、端末の中だけで背景を透過できることです。
背景透過をやりたくなる場面って結構多いんですよね。
フリマの商品写真、アイコン、資料に貼るロゴ…。
でもPhotoshopは持っていないし、オンラインの透過ツールは「この画像、勝手にサーバーに上げて大丈夫かな？」とちょっと不安になります（- -;
しかも白い背景に白い被写体（白猫とか）は、色で抜こうとすると被写体まで一緒に消えてしまうという難点もあります。
そこで、グリーンバックがなくても、白背景の白い被写体でもきれいに抜ける透過ツールを、自分で作ってしまいました。
それが「とうかねっこ🐈」です。
公開URLはこちら → https://toukanekko.shinpinoshi.comtoukanekko.shinpinoshi.com
登録もインストールも要らず、ブラウザで開けばその瞬間から使えます（完全無料）。
この記事では、どんなツールなのか・どう使うのか・なぜ作ったのかを紹介していきます（^^
それではやっていきましょう！
目次
こんな悩み、ありませんか？
背景透過をやろうとすると、こんな場面でつまずきますよね。
- Photoshopや専用ソフトを持っていない
- たまに透過したいだけなのに、有料ソフトをわざわざ入れるのはお金がもったいない
- オンラインツールに画像を上げるのが不安
- 顔写真や仕事の資料だと、外部サーバーに送るのがちょっと怖い
- 白背景の白い被写体がうまく抜けない
- 「色で透過」だと被写体まで巻き込んで消えてしまい、輪郭がガタガタになる
- そもそもグリーンバックなんて用意できない
- 撮影環境を整えるところから始めるのは現実的じゃない
「とうかねっこ」は、この「背景透過あるある」を、ブラウザだけ・アップロードなしでまとめて解決することを狙って作ったツールです。
とうかねっことは
「とうかねっこ🐈」は、画像の背景をブラウザだけで透明にできる無料のWebツールです。
ざっくり3行でまとめると、こんなツールです。
- 登録不要・完全無料・アップロードなし
- アカウントもインストールも不要。画像は端末の中だけで処理され、外部サーバーには送られない
- 色でも領域でも、狙った部分だけ透過できる
- 「同じ色をまとめて消す」「線で囲まれた中だけ消す」を使い分けられる
- グリーンバックがなくても大丈夫
- 白背景の白い被写体のような難しいケースも、輪郭で止まる「領域で透過」できれいに抜ける
白ねっこがナビゲートしてくれて、名前のとおり「透過」と「猫」をかけたゆるいツールです。
クリーム色のやさしい配色で、気軽に触れる雰囲気にしました（^^
主な機能
4つのツールで思いどおりに切り抜き
とうかねっこには、目的に合わせて使い分けられる4つのツールがあります。
- 色で透過
- クリックした色に近いところを画像全体からまとめて消す。単色背景やグリーンバック向き
- 領域で透過
- クリックした場所から「線で囲まれたつながっている部分」だけを消す。輪郭で止まるので白背景の白い被写体でもOK
- 消しゴム
- ブラシで手動でなぞって消す。細かい消し残しの仕上げに
- 復元
- 消しすぎた部分をブラシで元に戻す。やり直しがきくので安心
このなかで「領域で透過」がとうかねっこの主役です。
色ではなく「つながり」で消す範囲を決めるので、背景と被写体が似た色でも巻き込みにくいんですね（^^
白背景の白い被写体もきれいに抜ける
背景透過でいちばん困るのが、白い背景に白い被写体のパターンです。
「色で透過」で白をまとめて消すと、被写体の白い部分まで一緒に透けてしまいます。
でも「領域で透過」なら、背景をクリックした地点からつながっている部分だけを消すので、被写体の輪郭でピタッと止まります。
上のサンプル（白猫）でいうと、猫のまわりの背景をクリックすれば、猫本体は残したまま背景だけを抜けます。
グリーンバックを用意しなくても切り抜けるのは、この仕組みのおかげです（^^b
縁のなめらかさ・許容範囲で微調整
一発で完璧に抜けないときのために、2つのスライダーを用意しています。
- 許容範囲（色の近さ）
- 大きくするほど広い範囲が消える。少しずつ上げて、消えすぎない手前で止めるのがコツ
- 縁のなめらかさ
- フチのギザギザや白い縁取りをぼかしてやわらげる。切り抜き感が消えて自然になる
さらにUndo / Redo（Ctrl+Z / Ctrl+Shift+Z）に対応しているので、消しすぎても何度でも戻せます。
背景を市松・白・黒・任意の色に切り替えて、透過の仕上がりを確認しながら詰められます（^^b
透過PNGで保存・コピーもワンタップ
切り抜きができたら、透過PNGとしてダウンロードするか、クリップボードにコピーできます。
コピーを使えば、資料やチャットにそのままペタッと貼り付けられて便利です（^^b
iPhoneのHEIC写真もそのまま読める
iPhoneで撮った写真はHEICという形式で、多くのブラウザではそのまま開けません。
とうかねっこでは、HEICを選んだときだけ変換ライブラリを読み込み、端末内でPNGに変換してから編集に進みます。
通常のJPEGやPNGを使うときは変換ライブラリを読み込まないので、動作が重くなることもありません。
ただし特殊なHEIC（HDRなど）ではまれに変換に失敗することがあります。その場合はエラーが表示されます。
HEIC変換の仕組みそのものは少し前に別ツールで実装していて、詳しくは別記事にまとめています。
ブラウザだけでHEICをPNGに変換する方法（技術寄り）
https://shinpinoshi.com/engineering/web/heic-to-png/
画像は端末内だけで処理・アップロードなし
とうかねっこは読み込んだ画像も、透過の処理も、すべてブラウザの中（端末内）で行います。
画像が外部サーバーに送られることはありません！！
ただしこれは「どのページが見られたか」を測るためのもので、あなたが読み込んだ画像そのものが送信されるわけではありません。
「顔写真や仕事の資料を、知らないサーバーに上げたくない」という方でも安心して使えます。
使い方は3ステップ
使い方はとてもシンプルで、基本は3ステップです。
- ① とうかねっこを開く
- https://toukanekko.shinpinoshi.com をブラウザで開くだけ
- ② 画像を選ぶ or ドロップする
- 手持ちの画像を読み込む。はじめてなら「まずはサンプルで試す」でお試しもできる
- ③ 背景をクリックして保存
- 「領域で透過」で背景をクリックし、きれいに抜けたら透過PNGで保存
うまく抜けないときだけ、許容範囲や縁のなめらかさをちょっと動かせばOKです。
なぜ作ったのか
自分はブログのアイキャッチやフリマの写真で、たまに背景を透過したくなります。
そのたびにオンラインの透過ツールを探すんですが、「画像をアップロードしてください」と言われるたびに手が止まります（- -;
顔や個人情報が写っているとなおさらで、「これ、どこかに保存されたりしないよな…」と気になってしまいます。
もうひとつの不満が、白背景の白いモノがぜんぜん抜けないことでした。
色ベースの自動透過だと、白い被写体まで巻き込んで消えてしまうんです。
それなら、アップロード不要で端末内だけで処理でき、色でも領域でも抜ける透過ツールを自分で作ってしまえばいい——という発想で作ったのがとうかねっこです。
以前に画像マスクツール「もざいくにゃん」を作ったときも同じ「ブラウザ完結」の考え方だったので、その延長で作れたのも大きかったです（^^
もざいくにゃんを作った話
https://shinpinoshi.com/engineering/web/image-mask-tool/
技術的なこと（興味がある方向けに少しだけ）
使う分には関係ないので、技術好きの方向けに軽くだけ書いておきます（^^
- フロントエンド
- ビルド不要のvanilla JS。透過処理はHTML5 Canvasのピクセル操作で実装
- 色の判定
- 単純なRGB差ではなく、人の見え方に寄せたredmean近似の色距離で「近い色」を判定
- 領域で透過
- 走査線方式のフラッドフィルで、クリック地点からつながった同色領域だけを塗りつぶす。輪郭で止まるので白背景も分離できる
- 非破壊な消し方
- ピクセルを削るのではなくアルファ（透明度）を下げる方式。だから「復元」で元に戻せる
- HEIC対応
- heic-to（libheifのWebAssembly版）を、HEICを選んだときだけ遅延読み込み
- ホスティング
- Cloudflare Pages（静的配信）
このあたりの実装の細かい話は、機会があれば別記事で深掘りしたいと思っています。
まとめ
「とうかねっこ」は、グリーンバックなしでも、白背景の白い被写体でも、ブラウザだけで背景を透過できる無料のWebツールです。
こんな人に向いています。
- 背景透過をやりたいけど、専用ソフトは持っていない方
- 画像を外部サーバーにアップロードするのが不安な方
- 白背景の白いモノがうまく抜けなくて困っていた方
- iPhoneのHEIC写真をそのまま透過したい方
登録もインストールも要らず、開いた瞬間から使えるので、「まずはお試ししてみる」から気軽に触ってみてください。
マニュアルなしでも直感的に使えるようにしたつもりです（^^
公開URLはこちら
https://toukanekko.shinpinoshi.comtoukanekko.shinpinoshi.com
以上となります！
白背景の白猫がスッと抜けたときは自分でも気持ちよかった（^^b
それでは、お疲れさまでした！！
