【無料・ブラウザで完結】画像背景透過ツール「TransparentEditor」を公開しました
admin画像の背景を透過したいだけなのに、月額数千円を払い続けていませんか？
はじめに：高額化する画像編集ツールへの問題意識
近年、画像編集・背景透過ソフトウェアを取り巻く環境は大きく変化しています。
かつては一度購入すれば永続的に使えた Adobe Photoshop は、現在はサブスクリプション制に移行し、個人プランでも月額 3,280円〜 が必要です。背景透過に特化したオンラインサービスも同様で、高解像度での書き出しや枚数制限の解除には有料プランへのアップグレードを求められるケースが増えています。
「ちょっと背景を切り抜きたいだけ」「商品画像を数枚透過したい」——そんな軽いニーズのために、毎月費用を払い続けるのは本当に必要なことでしょうか。
この問いに対する私の答えとして、完全無料・サーバーへの設置だけで動く背景透過ツール「TransparentEditor」 をオープンソースで公開しました。
TransparentEditor とは
TransparentEditor は、Photoshop のような操作感を持つ ブラウザベースの画像背景透過ツールです。PHP + JavaScript + HTML + CSS のみで構築されており、特別なクラウドサービスや外部APIへの依存は一切ありません。
🔗 今すぐ試す： https://soft.takinoko.net/softapp/touka/
🛠️ GitHub（ソースコード）： https://github.com/ReoShiozawa/transparent
主な機能
自動選択
クリックした色を基準に、フラッドフィルアルゴリズムで周辺の類似色を一括透過します。背景が単色・グラデーションの場合、ワンクリックで大部分を消去できます。
消しゴム・復元ブラシ
自動選択では対応しきれない細かい部分は、ブラシ感覚で手動消去が可能です。誤って消してしまった箇所も「復元ブラシ」で元に戻せます。
許容値・フェザリング・アンチエイリアス調整
- 許容値（1〜150）：透過する色の一致範囲を細かく指定。複雑な背景でも精度の高い切り抜きが可能。
- フェザリング：エッジをぼかして背景との馴染みを自然に。
- アンチエイリアス：ギザギザのないなめらかな輪郭処理。
30ステップの Undo / Redo
作業中のミスを恐れずに進められます。Ctrl+Z / Ctrl+Y のショートカットにも対応。
透過PNG書き出し
編集結果はアルファチャンネルを保持した透過PNGとしてダウンロードできます。
ドラッグ＆ドロップ対応
ファイルをキャンバスへそのままドロップするだけで開けます。
実際の画像
仕組みの解説
TransparentEditor は クライアントサイドとサーバーサイドのハイブリッド構成で動作します。
ブラウザ（JavaScript）
↕ Canvas API で画像描画・ピクセル操作
↕ フラッドフィル・消しゴム処理（リアルタイム）
↕ 必要に応じてサーバーへ送信
サーバー（PHP + GD ライブラリ）
↕ api.php がアップロードを受け取り
↕ 高精度なサーバーサイド透過処理
↕ PNG として返却
フロントエンド（app.js）
Canvas API を使ってピクセル単位の色比較・フラッドフィル処理をリアルタイムに実行します。許容値やフェザリングの計算もブラウザ側で行うため、軽快なプレビューが可能です。
バックエンド（api.php）
PHP の GD ライブラリを使用し、サーバーサイドでの透過処理・ファイル変換を担います。JPEG・GIF・WebP・BMP など、PNGアルファチャンネルを持たない形式も読み込んでPNGに変換して書き出せます。
対応画像形式
| 形式 | 読み込み | 書き出し |
|---|---|---|
| PNG | ✅ | ✅ |
| JPEG | ✅ | PNG に変換 |
| GIF | ✅ | PNG に変換 |
| WebP | ✅ | PNG に変換 |
| BMP | ✅ | PNG に変換 |
動作環境・インストール方法
必要環境
| 項目 | 要件 |
|---|---|
| PHP | 7.4 以上（GD ライブラリ有効） |
| Web サーバー | Apache 2.4+ / Nginx / PHP 組み込みサーバー |
| ブラウザ | Chrome 90+ / Firefox 88+ / Safari 14+ / Edge 90+ |
セットアップ手順
1. リポジトリをクローン
bash
git clone https://github.com/ReoShiozawa/transparent.git
cd transparent
2. サーバーを起動
PHP の組み込みサーバーで手軽に試せます：
bash
php -S localhost:8080
Apache / Nginx の場合はドキュメントルートにファイルを配置するだけです。.htaccess がアップロード上限（50MB）を自動設定します。
こんな方におすすめ
- デザイナー・クリエイター：商品写真・バナー素材の背景切り抜き作業を効率化したい
- 個人ブロガー・SNS運用者：画像編集ソフトにお金をかけたくないが、ちゃんとした透過処理がしたい
- 開発者・エンジニア：自社サービスに背景透過機能を組み込みたい（MIT ライセンスで自由に利用可）
- 教育機関・非営利団体：ソフトウェアコストを削減したい
ライセンスについて
TransparentEditor は MIT ライセンスで公開しています。商用利用・改変・再配布すべて自由です。自社サービスへの組み込みや、カスタマイズしての利用も歓迎します。
おわりに
「無料でいいものを、誰でも使えるように」——これが TransparentEditor を作った理由です。
ソフトウェアの有料化・サブスクリプション化は開発者にとって持続可能なビジネスモデルではありますが、単純な機能のために毎月費用がかかる状況は、ユーザーにとって必ずしも公平ではないと感じています。背景透過という、デジタルクリエイティブのごく基本的な作業は、誰でも無料でできるべきだと思います。
バグ報告・機能リクエスト・プルリクエストはいつでも歓迎しています。ぜひ GitHub の Issue からお気軽にどうぞ。
🔗 GitHub： https://github.com/ReoShiozawa/transparent
🌐 デモサイト： https://soft.takinoko.net/softapp/touka/
＼ 最新情報をチェック ／
