単色背景透過ツールの作成経緯|白背景・色背景をWEBツールで透明に変換

  • URLをコピーしました!

以前、LINEスタンプをよく作っていた時期がありました。

そのころから、背景透過は少し面倒な作業だと感じていました。透過処理を毎回行うのが手間だったため、最初から透過済みの土台を用意して、そこに直接描いていたこともあります。

しばらく離れていましたが、最近になって久しぶりにLINEスタンプの作成を再開しました。そこで改めて向き合うことになったのが、画像の背景透過です。

今回は、すっかり透過のことを忘れていました。背景透過は自前のペイントソフトを使えば簡単にできますが、透過性能に難がある場合はどうしたら良いのだろうかと考えました。

目次

背景透過のWEBサービスを試して感じたこと

調べると背景透過を行ってくれる無料WEBサービスはいくつもあります。実際に使ってみたのですが、そこで問題が露わになりました。

  • 背景色と同じ色をまとめて透過してしまう
  • 全然関係の無い色も何故か透過してしまう
  • 使用回数がある
  • 使用を続けるには登録が必要になる
  • 透過した輪郭に「モヤ」が残る

最初は単純にクオリティの問題だと感じました。ただ、写真では綺麗に背景を透過できることもあり、アニメ調の画像と写真では処理の向き不向きが違うのだと感じました。

その中で共通して気になったのが、透過した輪郭に「モヤ」が残ることでした。

問題は輪郭に残るモヤだった

少し見ただけなら問題がないように思えますが、輪郭に残る白っぽいモヤはかなり気になります。好みの話ではなく、小さなLINEスタンプ画像では僅かなモヤがそのまま作品全体の印象に出ます。背景は消えていても、輪郭がぼやけて見えるなら完成画像としては到底納得できません。

納得できない画像をそのまま審査に出し、結果を待つのは時間の使い方としては良くありません。通るかどうか以前に、自分で見て気になるものを作品として出すことに意味を感じませんでした。

最終的には、画像を作成したペイントソフトを使って、モヤが出ないように背景透過を行いました。

ただ、そこで心残りになったのが、自分と同じように単色背景を透過したい人は、このモヤをどう処理するのだろうかということです。使っているペイントソフトの機能が限られている場合、輪郭に残るモヤを整えるだけでも手間がかかります。

たとえば、子供が親のPCに入っている簡易的なペイントソフトを使って時間をかけて画像を描いたとします。その画像の背景を透明にしたいだけなのに、登録が必要だったり、使用回数に制限があったり、仕上がりにモヤが残ったりする。

それは少しもったいないことだと感じました。

単色背景を透明にして、輪郭に残ったモヤを整えるくらいなら、無料で、ブラウザからすぐ使えるWEBツールとして提供しても良いのではないかと思ったのです。

機能を限定した透過ツール

求める機能がはっきりと決まっているツールに必要なことは、無駄を作らないことです。ユーザーが簡単に使えることが無料WEBツールの醍醐味だと思っています。

そして、大事なことはユーザーに安心して使ってもらうために、ブラウザ完結でデータはサーバーに送らないことです。

機能を限定して単色に特化した透過ツールを目的とします。背景は勿論のこと、グラデーションのかかっていない同色ならば、選択したエリアを透過させます。

しかし、これだけなら輪郭のモヤは消えません。そのために透過をする選択範囲から更に範囲を微調整した拡張範囲を機能に加えます。この拡張機能によって、モヤの部分を綺麗に透過範囲に収めます。

それらの機能を備えたWEBツールを作成し、背景透過をした画像が次の通りになります。

拡張範囲0pxと2pxの比較画像。0pxではフチのもやが残り、2pxではもやが軽減されている。
拡張範囲を調整すると、透過後に残るフチやもやを軽減できます。

画像でも分かるように、拡張範囲を調整することで、簡単にモヤを消すことができます。

単色背景を透明にしたい人へ

この単色背景透過ツールは、写真の背景を自動で切り抜くような高機能な背景削除ツールではありません。白背景や色背景など、単色背景を透明にする目的に絞ったWEBツールです。

その代わり、単色背景を透過したときに気になりやすい輪郭のモヤを、拡張範囲で調整できるようにしました。背景を消すだけではなく、画像として使える仕上がりに近づけるための機能です。

画像はブラウザ上で処理するため、サーバーには送信しません。登録やログインも必要なく、必要なときにページを開いてすぐ使えます。

LINEスタンプ用の画像、アイコン素材、ブログ用の画像など、単色背景を透明にしたい場面で使ってみてください。

単色背景透過ツールは、以下のページから利用できます。

  • URLをコピーしました!

コメント

コメントする

目次