ウェブサイトのバナーにロゴを配置しようとして、白い四角がロゴの周りに表示され、せっかく選んだ背景色の上に載ってしまう。デザイナーからもらったのはJPGファイル — JPGは透明度をサポートしていません。
これは世界で最もよくある画像の問題の一つで、修正は約10秒で終わります。
手っ取り早い方法
ロゴを透過背景ツールにアップロードします。ロゴの背景が何であれ削除し、完全に透明なPNGが出力されます。ダウンロードして完了。
この記事の残りでは、エッジケース、ストレートにいかないシナリオ、最もきれいな結果を得るためのコツを説明します。
よくあるシナリオ
「デザイナーからJPGしかもらっていない」
最も一般的な状況です。デザイナーや制作会社からロゴファイルをもらったけど、JPGしかない — おそらく誰かが変換した時点でそうなったか、元のプロジェクトファイルが紛失したためです。JPGは透明度を保存できません(MDNの画像フォーマットガイドで解説されています)。背景(通常は白)が画像に完全に焼き付けられています。
JPGをremove-bg.ioにアップロードしてください。AIがロゴを背景から分離し、透過PNGとして出力します。特に単色背景のロゴでは非常にうまくいきます。
「ウェブサイトにあるロゴしかない」
ウェブサイト上のロゴを右クリックして「名前を付けて画像を保存」で保存します。すでに透過のPNGかもしれません(画像ビューアで開いて背景がチェッカー模様なら透過です)。見える背景がある場合は、ツールにアップロードしてください。
注意点:ウェブサイトから取得したロゴは小さいことが多いです(幅100〜200px)。AIは処理しますが、結果も小さくなります。高解像度版が必要な場合は、元のファイルを探してみてください。
「名刺や印刷物にあるロゴしかない」
書類の写真を撮るかスキャンしてください。照明が均一であること — ロゴに影がかかっていないことを確認します。AIは紙のテクスチャからロゴを分離できますが、ロゴと紙のコントラストが明確な場合に最も良い結果が得られます。
「ロゴに白い要素がある」
ここで不安になる人が多いです。ロゴに白いテキストや白いアイコンがある場合、AIがそれも削除してしまうのでは?
通常はいいえ。AIは背景とロゴのコンテンツを区別します。白い背景の上の白い「A」は、その周りの白い空白とは異なるものとして扱われます。ただし、エッジ付近の非常に細い白い要素は時々クリップされることがあります — 処理後にズームインして確認してください。エディターのカットアウトツールで、誤って削除されたものを復元できます。
最良の結果を得るために
持っている中で最大のバージョンを使う。 2000pxのロゴは200pxのものよりはるかにきれいな結果になります。複数のコピーがある場合は、最もシャープで高解像度のものを選びましょう。
単色の背景が最も簡単。 入力をコントロールできる場合(デザインツールからエクスポートする場合など)、保存前にロゴを白か黒の単色上に配置してください。ロゴと背景のコントラストが高いほど、エッジ検出がきれいになります。
処理後にエッジを確認する。 200〜300%にズームインして、テキストの細い線、小さなアイコン要素、グラデーションのエッジなどの細かいディテールを確認してください。AIはほとんどの場合うまく処理しますが、簡単な目視チェックでまれな見落としを発見できます。エディターのカットアウトツールで修正できます。
最終的な使用場所を考慮する。 ロゴが暗いウェブサイトヘッダーに使われるなら、ダウンロード前に暗い背景でプレビューしてください。印刷物に使う場合は、解像度が十分高いことを確認してください(印刷用に300DPI)。ツールは元の解像度を保持するので、入力がシャープであれば出力もシャープになります。
透過ロゴの使い道
基本的にどこでも:
- ウェブサイトのヘッダーとファビコン
- メール署名(Outlook、Gmail、Apple Mail)
- SNSのプロフィール写真やカバー画像
- プレゼン資料やスライドデッキ
- 名刺や印刷物
- グッズ(Tシャツ、マグカップ、ステッカー)
- 動画のインタールードやオーバーレイ
1つの透過PNGがこれらすべてのコンテキストで機能します。どんな背景に置いても適応するからです。白い四角付きのJPGと比べると、白い背景でしか正しく見えないJPGとは大違いです。
SVGについて
SVGファイルがあるなら、すでに透明度が組み込まれています。SVGはベクターフォーマットで、品質を落とさずにどんなサイズにもスケーリングできます。
デザイナーからSVGファイルをもらっている場合は、上記のことは不要です — SVGは本質的に解像度非依存で透過のベクターフォーマットです。ただし、ラスター画像(JPG、背景付きPNG、スクリーンショット)しかない場合は、上記のアプローチが最善の選択肢です。
非常に大きなサイズ(看板、車両ラップなど)にスケーリングする必要があるロゴの場合は、デザイナーに元のベクターファイルを依頼することを検討してください。透過PNGはデジタルと標準的な印刷には最適ですが、ベクターは無限にスケーリングできます。
FAQ
グラデーションのある複雑なロゴでも使えますか? はい。AIは単色ロゴ、グラデーションロゴ、複数色のロゴ、イラスト付きロゴを処理できます。エッジの非常に薄い細部だけが時々手動タッチアップが必要になることがあります。
背景が白ではなくカラーです。問題ありますか? ありません。ツールはどんな背景でも削除します — 白、カラー、パターン、写真。単色の背景が最もきれいな結果を出します。
複数のロゴを一度に処理できますか? はい — 一括背景削除で最大20枚を同時に処理できます。ブランドポートフォリオのロゴを更新するときに便利です。