イラレで背景を透過するには、透明グリッドで確認、背景オブジェクト削除、PNGで書き出しの3手順で完了します。白く見えても実際は透明なケースと、背景オブジェクトが残っているケースを正確に見分けることが、書き出し失敗を防ぐ第一歩です。
▶ 3日で初案件PR
この記事でわかること
透明グリッド表示で白背景と透明を30秒で見分ける方法がわかります。PNG書き出しで背景が白くなる原因トップ2と、それぞれの解決手順がわかります。フリーランスが納品前に実施すべき5項目の確認フローがわかります。
30秒診断全2問・あなたに合う働き方のタイプが分かります
Q1. 今のデザインの仕事で、一番近い悩みは？
この記事の結論
イラレの背景透過は「透明グリッド表示で確認→背景オブジェクト削除→PNG書き出し」の3手順で完了します。書き出し後に白背景になるトラブルの原因は、大半がPNGオプションの背景色設定の見落としか、削除し忘れた背景オブジェクトのどちらかです。フリーランスとしてクライアントに納品する際は、複数の背景色で縁残りを確認してからファイルを渡すことで、修正依頼を大幅に減らせます。
今日やるべき1つ
Illustratorを開き、「表示」メニューから「透明グリッドを表示」を選択してアートボードの透過状態を確認してください（所要時間：30秒）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 白背景かどうか確認したい | イラレの背景透過は2種類で原因が違う | 2分 |
| PNG書き出しの設定を知りたい | イラレ背景透過のPNG書き出しは4設定で決まる | 3分 |
| 写真の背景を切り抜きたい | イラレで背景を切り抜く方法は3種類で使い分ける | 5分 |
| 納品ファイルを整理したい | イラレ背景透過の納品は5項目でチェック | 3分 |
| トラブルが起きた場合を自己診断したい | イラレ背景透過の失敗を3分で自己診断 | 3分 |
イラレの背景透過は2種類で原因が違う
白く見えるだけで実際は透明なケース
Illustratorのアートボードは初期状態では白く表示されていますが、これはアプリケーションの表示色であり、背景オブジェクトが存在するわけではありません。アートボードそのものには色情報がなく、書き出し時に「背景色：透明」を選択すれば、そのまま透過PNGとして出力できます。
確認方法は「表示」→「透明グリッドを表示」を選択するだけです。チェッカーボード柄（グレーと白の格子模様）が表示されれば、そのエリアは透明です。これはIllustratorがアルファチャンネルの存在を視覚的に示すための標準表示で、書き出し後は背景色なしで出力されます。このケースでは、PNG書き出し時の設定さえ正しければ追加作業は不要です。
背景オブジェクトが残っているケース
白い長方形などの背景オブジェクトが配置されている場合、書き出し後も白背景が残ります。透明グリッドを表示してもアートボード全体が白いままの場合は、このケースに該当します。レイヤーパネルを開き、最下層に矩形オブジェクトが存在しないか確認してください。存在する場合は選択して削除し、再度透明グリッドで確認します。
見落としがちなのは、「ロック済みレイヤー」に背景オブジェクトが置かれているパターンです。レイヤーをロック解除してから確認しないと、選択ツールでは拾えません。この確認を省略してPNG書き出しをしてしまうと、透明グリッドでは透明に見えていても実際は白背景で書き出されるという矛盾が発生します。
なお、画像のPNG背景透過を無料でできるツールも存在しますが、Illustratorを使っている場合は本記事の手順で完結できます。
CHECK
▶ 今すぐやること: Illustratorを開き「表示」→「透明グリッドを表示」を選択し、アートボードがチェッカーボード柄になるか確認してください（30秒）
Q: 透明グリッドを表示しても白いままです。どうすればいいですか？
A： 白い背景オブジェクトが配置されている可能性が高いです。レイヤーパネルを開き、最下層に矩形オブジェクトがないか確認し、あれば選択して削除してください。ロック済みレイヤーがある場合はロックを解除してから確認します。
Q： 透明グリッドはどのメニューにありますか？
A： 「表示」メニュー内に「透明グリッドを表示」という項目があります。ショートカットはMacでCommand＋Shift＋D、WindowsではCtrl＋Shift＋Dです。
要点整理
透明グリッドを表示してチェッカーボード柄を確認した。レイヤーパネルの最下層に背景オブジェクトがないか確認した。ロック済みレイヤーのロックを解除してから確認した。
イラレ背景透過のPNG書き出しは4設定で決まる
背景色は必ず「透明」を選ぶ
「ファイル」→「書き出し」→「書き出し形式」を選択し、ファイル形式を「PNG」に設定します。保存後に開くPNGオプションダイアログで「背景色」というプルダウンがあり、ここを「透明」に変更することが透過書き出しの核心です。デフォルトでは「白」に設定されていることが多く、ここを変更し忘れると透明グリッドで透明を確認していても白背景で書き出されます。
「スクリーン用に書き出し」（File→Export→Export for Screens）でも同様にPNGを書き出せますが、こちらではPNGオプションダイアログが表示されない場合があります。背景色の明示的な指定が必要な場合は「書き出し形式」を使う方が確実です。
解像度はWeb用72ppi・印刷用300ppiが目安
Web・SNS向け画像では72ppi、印刷物や高解像度ディスプレイ向けでは300ppiが一般的な目安です。Retinaディスプレイ対応のWeb用途では144ppi（2x）を指定するケースも増えています。用途が不明な場合は、クライアントに使用先を確認してから解像度を決定してください。解像度を高くするとファイルサイズも増加するため、Web向けで300ppiを選ぶと不要に容量が増える場合があります。
画像圧縮で画質を落とさない方法を組み合わせれば、書き出し後のPNGを最適化できます。
アンチエイリアスはロゴとイラストで変える
アンチエイリアスはオブジェクトの境界線をなめらかに表示するための設定です。選択肢は「なし」「アートに最適（スーパーサンプリング）」「文字に最適（ヒント）」の3種類が用意されています。ロゴや図形イラストでは「アートに最適」を選ぶと、拡大しても境界線がきれいに表示されます。「なし」を選ぶと境界線がジャギー（ギザギザ）になりやすく、「文字に最適」はテキストの可読性を優先した設定です。
書き出し範囲はアートボードに合わせる
PNG書き出し時、アートボード外にオブジェクトがはみ出していると、そのオブジェクトも書き出し範囲に含まれて余白が広がります。書き出し前に「オブジェクト」→「アートボード」→「アートボードを選択オブジェクトに合わせる」を実行するか、手動でアートボードを作品の実寸に合わせてから書き出すと、余白の混入を防げます。
CHECK
▶ 今すぐやること: PNG書き出し時に「PNGオプション」ダイアログの「背景色」が「透明」になっているか確認し、なっていなければ変更してください（1分）
Q: 「書き出し形式」と「スクリーン用に書き出し」はどちらを使えばいいですか？
A： 背景色を「透明」に明示的に設定したい場合は「書き出し形式」の使用を推奨します。「スクリーン用に書き出し」はPNGオプションダイアログが表示されない場合があり、設定の確認が難しくなります。
Q： 解像度を上げると画質が良くなりますか？
A： 解像度はピクセル密度の設定です。既存のベクターオブジェクトを高解像度で書き出せばきれいに出力されますが、Web用途では72ppiで十分なケースがほとんどです。必要以上に高くするとファイルサイズが大きくなり、Webページの表示速度に影響します。
押さえておきたい点
PNGオプションの「背景色」を「透明」に設定した。解像度をWeb用72ppi・印刷用300ppiで使い分けた。アートボードを作品サイズに合わせてから書き出した。
イラレで背景を切り抜く方法は3種類で使い分ける
「背景を削除」機能は最速だが精度に限界がある
Illustratorの比較的新しいバージョン（CC 2022以降が目安）では、画像を選択した状態でプロパティパネルに「背景を削除」ボタンが表示されます。AIが自動的に被写体と背景を判別し、クリック1回で背景を削除できます。所要時間は画像サイズにもよりますが通常10秒以内です。
ただし、背景と被写体の色が近い場合や、髪の毛・細かい模様がある場合は境界線の精度が落ちます。このケースでは後述のペンツールやクリッピングマスクで補正が必要になります。フリーランスとして納品前に使う場合は、複数の背景色に重ねて確認してから使用する前提で活用してください。
画像トリミング無料サイト7選も活用できますが、Illustratorのベクターデータとして仕上げたい場合は本記事の手順が最適です。
クリッピングマスクは既存パスで切り抜く
クリッピングマスクは「切り抜き形状のパス」を画像の上に配置し、両方を選択して「オブジェクト」→「クリッピングマスク」→「作成」（Command/Ctrl＋7）を実行する方法です。楕円、長方形、テキストアウトライン、自由な形状など、任意のパスを切り抜き形状として使えます。背景削除ではなく「見せる範囲を限定する」という設計なので、元の画像データは保持されます。
クリッピングマスクで処理した画像をPNGで書き出すと、マスク外のエリアは透明として書き出されます。ただし、マスクのパス自体はPNGに変換された時点で「見えない形状」として機能し、再編集はIllustratorでのみ可能です。
ペンツールは精度最優先の切り抜きに使う
ペンツールで輪郭に沿ってパスを手動作成し、そのパスをクリッピングマスクとして適用する方法が最も精度の高い切り抜きです。所要時間は画像の複雑さによりますが、シンプルな商品写真なら5〜15分が目安です。
ペンツールの操作に慣れていない場合は、まず「背景を削除」で大まかに切り抜き、境界線の問題がある箇所だけペンツールで補正するという組み合わせが効率的です。問題箇所だけ手動対応するアプローチの方が、時間と精度のバランスが取れます。
CHECK
▶ 今すぐやること: 切り抜きたい画像を開き、プロパティパネルに「背景を削除」ボタンが表示されているか確認してください（30秒）
Q: クリッピングマスクと「背景を削除」はどちらが良いですか？
A： 目的によって使い分けます。写真の人物や物体の背景を素早く削除するなら「背景を削除」が向いています。ロゴや図形を特定の形で切り抜くなら、クリッピングマスクが適しています。精度が求められる輪郭にはペンツールを併用してください。
Q： クリッピングマスクを解除するにはどうすればいいですか？
A： マスクを適用したオブジェクトを選択し、「オブジェクト」→「クリッピングマスク」→「解除」（Option/Alt＋Command/Ctrl＋7）を実行します。元の画像データは保持されたままです。
確認事項
「背景を削除」の精度を複数背景色で確認した。クリッピングマスクのパスが正確に輪郭をなぞっているか確認した。ペンツール補正が必要な箇所を特定した。
デザインツールを仕事で使えるようになりたい方へ
Photoshopの全工程の解説動画をLINEで受け取る
LINEで無料で届くもの
- 全工程Photoshopの解説動画
- 20本Webデザインの無料レッスン
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
イラレ背景透過の失敗を3分で自己診断
Q1: Illustratorで「透明グリッドを表示」を実行したとき、アートボードがチェッカーボード柄になりますか？
YesならQ2へ進んでください。NoならQ3へ進んでください。
Q2: PNG書き出し時のPNGオプションで「背景色」を「透明」に設定しましたか？
Yesの場合→ Result A（書き出し設定は正しい状態です）
Noの場合→ Result B（PNGオプションの設定変更が必要です）
Q3: レイヤーパネルの最下層に白い矩形オブジェクトがありますか？
Yesの場合→ Result C（背景オブジェクトの削除が必要です）
Noの場合→ Result D（ファイル形式の確認が必要です）
Result A: チェッカーボード柄＋背景色「透明」設定済み
書き出し後に白背景が見える場合、書き出し範囲にアートボード外のオブジェクトが含まれている可能性があります。「オブジェクト」→「アートボード」→「アートボードを選択オブジェクトに合わせる」を実行して再書き出しをしてください。
Result B: チェッカーボード柄だが背景色が「透明」未設定
PNGオプションダイアログで「背景色」を「透明」に変更してから再書き出しをしてください。これが最も多い原因です。
Result C: レイヤーに背景オブジェクトが存在する
最下層の白い矩形を選択して削除し、再度「透明グリッドを表示」でチェッカーボード柄を確認してから、Result Bの手順でPNG書き出しをしてください。
Result D: ファイル形式がJPEGまたはGIFになっている
JPEGはアルファチャンネル（透明情報）を保持できない形式です。書き出し時にファイル形式をPNGに変更してください。GIFは透過を部分的にサポートしますが、フルカラーに非対応なためロゴや写真への使用は推奨しません。
CHECK
▶ 今すぐやること: Q1から順に確認し、自分がどのResultに該当するか特定してください（3分）
Q: JPEGを透明で書き出す方法はありますか？
A： JPEGはアルファチャンネル（透明情報）を持てない仕様のため、透過書き出しには対応していません。透明情報を保持して書き出す場合はPNG、またはベクターデータのままSVGを使用してください。
Q： 書き出し後にチェッカーボード柄が見えないのは問題ですか？
A： 書き出し後のPNGをAdobe PreviewやブラウザのデベロッパーツールなどPNG対応ビューアで開くと、透明部分はチェッカーボードまたは何もない状態として表示されます。Finder（Mac）やエクスプローラー（Windows）のサムネイルによっては白背景に見える場合がありますが、これは表示側の仕様であり透過情報が失われているわけではありません。
重要ポイント
Q1〜Q3の診断で自分のResultを特定した。該当するResultの解決手順を実施した。解決後に再度透明グリッドとPNGオプションを確認した。
イラレ背景透過の納品は5項目でチェック
チェック1: 複数の背景色で縁残りを確認する
書き出したPNGを、白・黒・ブランドカラーなど異なる背景色の上に重ねて確認します。白背景では気づかなかった縁残りや白フチが、暗い背景に重ねると明確に見えるケースが多いです。Illustratorで確認する場合は、書き出し済みPNGをInDesignやPowerPoint、またはブラウザ上に配置すると確認しやすくなります。
チェック2: カラーモードがRGBになっているか確認する
印刷用データをCMYKで作成し、そのままWeb向けに書き出すとブラウザでの表示色が意図した色と異なる場合があります。「ファイル」→「ドキュメントのカラーモード」でRGBになっているか確認してください。CMYKのままPNGで書き出しても見た目上は大きな問題がない場合もありますが、プレゼン資料やWebサイトへの組み込みではRGBで提供するのが適切です。
チェック3: ファイル名にバージョンと用途を含める
「logo_transparent_v2_web.png」のように、ファイル名でバージョン・用途（web/print）・透過状態がわかるようにすると、クライアント側でファイルを管理しやすくなります。「final」「最終版」という命名は後から修正が入った場合に混乱の原因になるため、番号管理が安全です。
チェック4: AI元データを必ず保管する
PNGで書き出した後も、Illustratorの元データ（.aiファイル）は必ず手元に保管してください。クライアントから「サイズを変えたい」「色を変えたい」という要望が後から来るケースは多く、元データがなければ対応できません。納品時には透過PNGとAI元データのセットを渡すか、元データは別途求められた場合に提供する旨を明示しておくと後々のトラブルを減らせます。
大容量ファイルを送る無料の方法を活用すれば、AIデータも安全にクライアントへ届けられます。
チェック5: 用途別の形式を把握して提案する
フリーランスが扱う主な納品形式と推奨用途の目安は以下のとおりです。
| 形式 | 透過対応 | 主な用途 | 注意点 |
| PNG | 対応 | Web・SNS・資料・印刷 | ファイルサイズが大きくなりやすい |
| SVG | 対応 | ロゴ・アイコン（Web） | テキストブラウザでも表示可、編集可能 |
| AI | 対応（ソフト依存） | 元データ・入稿データ | Illustratorが必要 |
| 条件付き | 印刷入稿・確認用 | バージョンと設定による | |
| JPEG | 非対応 | 写真・Web画像 | 透過不可、ファイルサイズが小さい |
CHECK
▶ 今すぐやること: 書き出した透過PNGを黒い背景の上に重ねて、縁残りや白フチがないか確認してください（2分）
Q: SVGとPNGのどちらで納品すればいいですか？
A： ロゴやアイコンなど、ベクターデータとして再編集・拡大縮小する可能性があるものはSVGが適しています。写真を切り抜いた画像や、SNS・資料への貼り付けが主な用途ならPNGが無難です。用途が不明な場合はクライアントに確認してから決定してください。
Q： PDFで透過情報を保持できますか？
A： PDFはバージョンと保存設定によって透過情報の扱いが変わります。PDF/X-1aなど一部の印刷規格では透過が統合される設定になっています。印刷入稿用PDFを作成する場合は、印刷会社から指定された設定を必ず確認してください。
覚えておくこと
書き出したPNGを白・黒・ブランドカラーの3色背景で確認した。カラーモードがRGBになっているか確認した。ファイル名にバージョンと用途を含めた。
イラレ背景透過は5つの仕組みで品質が決まる
ハック1: 透明グリッド表示を書き出し前の必須確認にする
【対象】: PNG書き出し後に「白背景になった」と報告されたことがあるデザイナー
【手順】: まず「表示」→「透明グリッドを表示」を選択してチェッカーボード柄を確認します（30秒）。次にレイヤーパネルを開き、最下層に背景オブジェクトがないか確認します（1分）。最後にPNG書き出しダイアログで「背景色：透明」を確認してから書き出します（1分）。
【コツと理由】: 透明グリッドの確認→背景オブジェクトの有無→PNGオプションという3点セットをルーチン化すると、確認漏れが起きる確率を大幅に下げられます。「慣れたから確認しなくていい」という判断は逆効果です。
【注意点】: 「スクリーン用に書き出し」を使う場合はPNGオプションダイアログが表示されない設定になる場合があります。背景色の確認が必要な場合は「書き出し形式」を優先して使用してください。
ハック2: 書き出し後の複数背景チェックを納品ルーチンにする
【対象】: クライアントから「縁が白い」「フチが残っている」と指摘されたことがあるデザイナー
【手順】: 書き出したPNGをIllustratorに再配置し、白・黒・ブランドカラーの3色の背景に順番に重ねます（3分）。白フチや縁残りが確認できた場合は、切り抜き精度を上げて再書き出しします。問題がなければ納品ファイルとして確定します。
【コツと理由】: 書き出したPNGを複数の背景色で確認してから納品完了というフローを取ります。白背景で確認するだけでは検出できない縁残りが、黒背景では明確に見えます。特に「背景を削除」機能で自動切り抜きした画像は、複雑な輪郭で精度が落ちている箇所が存在すると前提して確認するのが安全です。
【注意点】: クライアントが使用する背景色（Webサイトの実際の背景色など）に合わせて確認色を選べば、確認の優先度を絞れます。毎回すべての背景色で確認する必要はありません。
ハック3: アートボードを作品サイズに合わせてから書き出す
【対象】: 書き出したPNGに意図しない余白が含まれていたことがあるデザイナー
【手順】: 書き出し前にアートボードツールを選択し、「オブジェクト」→「アートボード」→「アートボードを選択オブジェクトに合わせる」を実行します（30秒）。次にアートボード外のオブジェクトがあれば削除またはアートボード内に移動します（2分）。最後に「書き出し形式」でPNGを選択し、「アートボードを使用」にチェックを入れて書き出します。
【コツと理由】: 書き出し前にアートボードを作品の実寸に合わせておくことで余白トラブルを防止できます。Illustratorはアートボード外のオブジェクトも書き出し対象に含める設定になっている場合があり、余白が広がる原因になります。アートボードと作品サイズを一致させるステップを省略すると、後から余白のトリミングという余計な作業が発生します。
【注意点】: 「アートボードを選択オブジェクトに合わせる」を実行すると、複数のオブジェクトがある場合、すべてのオブジェクトを含めたバウンディングボックスにアートボードが拡大されます。不要なオブジェクトはあらかじめ削除してから実行してください。
ハック4: 用途別の納品フォルダ構成を事前に決める
【対象】: 納品後に「Web用が欲しい」「印刷用が欲しい」と追加依頼が来たことがあるデザイナー
【手順】: プロジェクト開始時に「source（AI元データ）」「web（72ppi PNG）」「print（300ppi PNG）」「svg（SVG形式）」のフォルダ構成を決めます（3分）。書き出し時に用途別の設定ファイルを使い、フォルダに振り分けて保存します。納品時はクライアントに用途と対応ファイルを説明するテキストファイルをフォルダに同梱します。
【コツと理由】: 最初から用途別フォルダを用意しておく方がうまくいきます。Web用と印刷用の書き出し設定は解像度が異なり、都度切り替えると設定ミスが発生しやすくなります。フォルダ構成を事前に決めておくと、書き出し後のファイル管理とクライアントへの引き継ぎがスムーズになります。
【注意点】: クライアントの使用用途を確認してから書き出す種類を絞ることで、管理コストを下げられます。すべての用途でファイルを用意する必要はありません。
ハック5: PNG書き出しの設定プリセットを作成する
【対象】: 毎回PNGオプションの設定を確認しながら書き出しているデザイナー
【手順】: 最初に「書き出し形式」でPNGを選択し、解像度・背景色・アンチエイリアスを用途別に設定します（5分）。次にその設定をIllustratorのアクション（「ウィンドウ」→「アクション」）として記録します。以降はアクションを実行するだけで同じ設定で書き出せます。
【コツと理由】: 設定をアクションとして記録して再利用することで設定ミスを減らせます。書き出し設定の記憶や確認に依存するよりも、アクション化によって設定を固定する方が、量産時の品質安定につながります。アクション機能はIllustratorの全バージョンで利用できます。
【注意点】: アクションは環境依存のため、別のPCやバージョンで動作しない場合があります。アクションファイルをエクスポートしてプロジェクトフォルダに保管し、別環境ではインポートして使用してください。アクションが使えない環境では、設定内容をメモにまとめておくだけでも確認時間を短縮できます。
CHECK
▶ 今すぐやること: 「表示」→「透明グリッドを表示」を実行してから、PNG書き出し→背景色「透明」設定→書き出し後に黒背景で確認、の3ステップをひと通り実行してください（5分）
Q: Illustratorのバージョンによってメニュー名が違う場合はどうすればいいですか？
A： 「背景を削除」などの機能はCC 2022以降のバージョンから対応しています。お使いのバージョンで該当機能が見当たらない場合は、Adobe公式サポートページでバージョン別の機能一覧を確認するか、クリッピングマスクを代替手段として使用してください。
Q： 透過PNGのファイルサイズを小さくする方法はありますか？
A： PNGは可逆圧縮のためJPEGより容量が大きくなりますが、TinyPNGなどのオンラインサービスで圧縮すると画質をほぼ保持したまま一定のファイルサイズ削減が期待できます。削減率は画像の内容によって異なります。
要点整理
透明グリッド確認→背景オブジェクト削除→背景色「透明」設定の3点セットをルーチン化した。書き出し後に複数背景色で縁残りを確認した。用途別フォルダ構成を事前に決めた。
まとめ:イラレ背景透過は3手順で完了
イラレで背景を透過するには「透明グリッド確認・背景オブジェクト削除・PNG書き出し時に背景色を透明に設定」の3手順を守れば、書き出し後に白背景になるトラブルの大半を防げます。フリーランスとして納品精度を上げるためには、書き出し後に複数の背景色で縁残りを確認するステップを標準フローに組み込んでください。Illustratorの書き出し設定は最初は項目が多く感じますが、確認すべき箇所は「背景色：透明」「解像度」「書き出し範囲」の3点に絞られます。
一度の確認フローを習慣にすることが、クライアントからの修正依頼を減らす最も効果的な方法です。
フリーランスの納品フローを改善したい方は、納品完了メールの書き方も合わせて確認してください。
| 状況 | 次の一歩 | 所要時間 |
| 白背景になるトラブルが繰り返し起きる | 透明グリッド確認→背景オブジェクト削除→背景色「透明」設定の3点セットをルーチン化する | 5分 |
| 縁残りの修正依頼が来た | 書き出し済みPNGを黒背景に重ねて確認し、問題箇所をペンツールで補正して再書き出しする | 15〜30分 |
| 用途別の納品形式に迷っている | クライアントに使用媒体（Web/印刷/SNS）を確認してから形式を決定する | 3分 |
イラレ背景透過に関するよくある質問
Q: Illustratorで透過PNGを作るには何が必要ですか？
A： Illustratorが起動していれば追加ソフトは不要です。「表示」→「透明グリッドを表示」で透過状態を確認し、「ファイル」→「書き出し」→「書き出し形式」でPNGを選択し、PNGオプションの「背景色」を「透明」に設定して書き出します。
Q： JPEGで書き出すと透明部分が白くなる理由は何ですか？
A： JPEGはアルファチャンネル（透明情報）を持てない仕様のためです。透明部分は自動的に白や指定の背景色で塗りつぶされて出力されます。透過が必要な場合は必ずPNGで書き出してください。
Q： 透過PNGをWebサイトに使うと背景が透けて見えますか？
A： はい、透過PNGはブラウザで正しく透過として表示されます。Webサイトの背景色やデザインが透明部分から透けて見えるため、どのような背景にも馴染むロゴやアイコンとして使えます。
【出典・参照元】
イラレ（Illustrator）で画像の背景を透過させる簡単な方法【図解】