IllustratorからのPNG書き出しは、「書き出し形式」「スクリーン用に書き出し」「アセットの書き出し」の3メソッドを使い分けることで、Web・SNS・納品など用途別の要件を満たせます。この記事では背景の透明化、解像度・倍率設定、トラブル解消まで実務手順を解説します。
この記事でわかること
3メソッドの使い分け基準を把握して書き出しミスをゼロにする方法、透明背景が白になる原因と設定1箇所での解決手順、納品前7項目チェックで再納品リスクを実質ゼロにする方法を解説します。
30秒診断全2問・あなたに合う働き方のタイプが分かります
Q1. 今のデザインの仕事で、一番近い悩みは？
この記事の結論
IllustratorのPNG書き出しは、目的によって3つの操作経路を選ぶだけで設定ミスが防止できます。単発書き出しは「書き出し形式」、アートボード一括は「スクリーン用に書き出し」、パーツ単位は「アセットの書き出し」が適切な選択です。背景透明化・倍率指定・解像度調整もメソッドごとに対応する設定箇所が決まっているため、手順に沿って進めれば書き出し後の再作業は発生しません。
今日やるべき1つ
現在作業中のIllustratorファイルを開き、「ファイル ▶ 書き出し ▶ 書き出し形式」でPNGを選んで1枚試し書き出しする（所要時間：3分）。設定画面の各項目名を把握することが、以降の手順習得を最短にします。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 1枚だけPNGを書き出したい | Illustrator PNG書き出しは3メソッドで使い分け | 3分 |
| 背景を透明にしたい | PNG透明背景は「背景色なし」の設定1箇所で完結 | 3分 |
| 複数アートボードを一括書き出したい | スクリーン用書き出しは複数アートボードを一括処理 | 5分 |
| 倍率違いを同時に書き出したい | スクリーン用書き出しは複数アートボードを一括処理 | 5分 |
| 画質・余白・サイズのトラブルを解消したい | PNG書き出しトラブルは5パターンで対応 | 5分 |
| 納品前にチェックしたい | PNG書き出しは7項目で品質を最終確認 | 3分 |
Illustrator PNG書き出しは3メソッドで使い分け
PNG書き出しの入口を間違えると、設定項目自体が存在しなかったり、意図しない範囲が書き出されたりして時間を無駄にします。「どのメソッドで何ができるか」を最初に整理しておくと、以降の操作で迷うことがなくなります。
3メソッドの選び分けは目的で決まる
IllustratorでPNGを書き出す経路は3つあり、それぞれ対象範囲と得意な用途が異なります。「書き出し形式（ファイル ▶ 書き出し ▶ 書き出し形式）」は、アートボード単位またはファイル全体を1枚のPNGとして出力する基本操作です（Adobe公式「アートワークの書き出し」）。「スクリーン用に書き出し（ファイル ▶ 書き出し ▶ スクリーン用に書き出し）」は、複数のアートボードや複数の倍率をまとめて書き出せる点が最大の特長です（Adobe公式「スクリーン用に書き出し」）。「アセットの書き出し」は、ロゴのパーツやアイコン1個など、アートボード内の特定オブジェクトだけをPNGとして切り出す際に使います（Adobe公式「アセットの収集と一括書き出し」）。用途が決まれば、使うメソッドも自動的に決まります。なお、イラレ初心者の練習は5機能×3ステップで仕事レベルへの記事では、Illustratorの基本操作をより広く解説しています。
「書き出し形式」の基本手順は4ステップで完了
「ファイル ▶ 書き出し ▶ 書き出し形式」を選択し、ファイル形式のプルダウンで「PNG（png）」を選びます。「アートボードを使用」チェックボックスで書き出す範囲（アートボード全体か、すべてのアートボードか）を指定してから「書き出し」をクリックします。続いて表示されるPNGオプションダイアログで解像度（スクリーン72ppi/中解像度150ppi/高解像度300ppi）とアンチエイリアスを設定して「OK」で完了です。解像度を「スクリーン（72ppi）」に設定するとピクセル等倍で書き出されるため、Web・SNS用の標準的な書き出しに適しています。
メソッド別の対応機能を表で確認
| 機能 | 書き出し形式 | スクリーン用に書き出し | アセットの書き出し |
| 透明背景 | 対応（オプション設定） | 対応 | 対応 |
| 複数アートボード一括 | 対応（全アートボード） | 対応（選択可） | 対応（複数アセット） |
| 倍率指定（@1x/@2x/@3x） | 非対応 | 対応 | 対応 |
| PNG-8/PNG-24の選択 | 非対応 | 非対応 | 対応 |
| 向いているケース | 1枚書き出し・基本操作 | Webバナー・SNS画像の一括納品 | ロゴ・アイコンのパーツ切り出し |
CHECK
▶ 今すぐやること: 「ファイル ▶ 書き出し ▶ 書き出し形式」を開いてPNGオプションダイアログの項目名を確認する（3分）
Q: 「書き出し」メニューに「書き出し形式」が表示されていません。なぜですか？
A： Illustratorのバージョンによってメニュー名が異なる場合があります。旧バージョンでは「スクリーン用に書き出し」と「書き出し形式」が統合されていたり、名称が「書き出し」のみの場合があります。Adobe公式ヘルプで使用バージョンの操作手順を確認してください（Adobe公式「アートワークの書き出し」）。
Q： PNGとJPEGはどちらを選ぶべきですか？
A： ロゴ・アイコン・透明背景が必要な素材はPNG、写真やグラデーション主体で透明背景が不要な素材はJPEGが適しています。JPEGは非可逆圧縮のため品質とファイルサイズのバランスで選ぶ形式です。PNGは可逆圧縮形式のためクライアント納品での再利用を想定する素材にも向いています（Adobe公式「アートワークの書き出し」）。PDF・JPG・PNG違い|3形式の使い分けを5つのルールで完全整理も参考になります。
PNG透明背景は「背景色なし」の設定1箇所で完結
透明背景が白く塗りつぶされて書き出されるのは、Illustratorを使い始めたデザイナーが最初に直面する問題の一つです。設定箇所さえ把握すれば、追加作業なしで解決できます。
透明背景が白になる原因は描画モードの確認で判明する
白背景で書き出される主な原因は2つです。第1に、Illustrator上に白塗りの長方形オブジェクトを背景として配置している場合は、そのオブジェクト自体を削除します。第2に、書き出し設定でマット（背景色）が設定されている場合は「なし」に変更します。「書き出し形式」でPNGを書き出す際のオプションダイアログには「背景色」という項目があり、ここが白やほかの色になっていると透明にはなりません。「透明」または「なし」を選択することで、PNG本来の透明チャンネル（アルファチャンネル）が保持されます。画像の背景透過を無料でする方法の記事では、外部ツールでの透過処理についても解説しています。
メソッド別の透明背景設定箇所
「書き出し形式」の場合は、PNGオプションダイアログの「背景色」を「透明」に設定します。「スクリーン用に書き出し」の場合は、書き出し形式の設定内に透明オプションがあります。「アセットの書き出し」でPNG-24を選択している場合は、PNG-24がデフォルトでアルファチャンネルを含むため透明が保持されます。PNG-8を使う場合はアルファチャンネルの対応が限定的なため、透明が必要な素材にはPNG-24を選ぶ方が確実です（Adobe公式「アセットの収集と一括書き出し」）。
アートボードの背景色設定も確認が必要
Illustratorのアートボードには「アートボードの背景色を表示」という設定があり、ここが有効になっているとキャンバス上では色が付いて見えますが、書き出し時には影響しない場合がほとんどです。ただし、ドキュメント設定でアートボードの不透明度設定が絡む場合もあるため、書き出し後にブラウザやPreviewで透明チェック（格子柄）が出ているかを確認することを習慣にしてください。白い背景画像の上にPNGを配置したとき、オブジェクト外の領域が格子柄になっていれば透明が正常に保持されています。
CHECK
▶ 今すぐやること: PNGオプションダイアログを開き「背景色」の設定が「透明」になっているかを確認する（2分）
Q: 透明背景のPNGを書き出したのに、メールやSlackで共有すると白背景に見えます。なぜですか？
A： これは書き出し設定の問題ではなく、ビューワー側の仕様です。SlackやメールクライアントはPNGの透明部分を白やグレーで表示することがあります。Photoshopやブラウザで開いて格子柄（市松模様）が表示されれば、透明は正常に保持されています。
Q： 透明背景のPNGとJPEGを混在して納品してよいですか？
A： 問題ありません。透明背景が必要なパーツはPNG、写真素材はJPEGと使い分けて納品するのは実務上の標準的な運用です。ファイル一覧にPNG・JPEGの対応表を添付するとクライアント側の混乱が防止できます。
スクリーン用書き出しは複数アートボードを一括処理
複数のアートボードや複数の倍率を別々に書き出していると、納品数が10点・20点になるほど作業時間が膨らみます。「スクリーン用に書き出し」を使えば、この問題を一度の操作でまとめて解消できます。
「スクリーン用に書き出し」の開き方と基本画面
「ファイル ▶ 書き出し ▶ スクリーン用に書き出し」を選択すると、アートボードタブとアセットタブの2タブで構成されたダイアログが開きます（Adobe公式「スクリーン用にアートボードとアセットを書き出し」）。アートボードタブではドキュメント内のアートボードが一覧表示され、書き出す対象をクリックで選択・解除できます。全選択で一括処理、特定のアートボードのみ選択で部分書き出しが可能です。書き出す形式はPNG、JPEG、SVG、PDF、WebPから選べます。
倍率の複数同時指定で@1x/@2x/@3xを一度に生成
画面右側の「フォーマット追加（+）」ボタンで書き出し形式と倍率を複数登録できます。「1x PNG」「2x PNG」「3x PNG」と3行追加すると、1回の書き出し操作で3種類のサイズが同時に生成されます。倍率ごとにサフィックス（@2x、@3xなど）を設定できるため、ファイル名を「logo@1x.png」「logo@2x.png」「logo@3x.png」と自動的に命名させることもできます。Retinaディスプレイ対応が必要なWeb案件では@2xを標準設定として登録しておくと、設定し忘れによる納品後の再書き出しを防止できます。
アセットタブでオブジェクト単位の一括書き出しを行う
アセットタブでは、事前に「アセットの書き出し」パネルに登録したオブジェクト（アイコン、ロゴ、パーツ）を一覧から選択して書き出せます。アートボード内に複数のアイコンが並んでいる場合、各オブジェクトを個別にアセット登録しておくと、ファイル1枚からすべてのアイコンを個別PNGとして同時書き出しできます。複数素材を格納するフォルダーの書き出し先も一括指定できるため、納品フォルダーの構成をあらかじめ設計しておくと整理しやすくなります。ファイル名ルール5選｜フリーランスが今日から使える命名規則を参考に命名規則を整えると、書き出し後の管理がさらに楽になります。
CHECK
▶ 今すぐやること: 「スクリーン用に書き出し」を開き、フォーマット追加ボタンで「1x PNG」と「2x PNG」の2行を登録してテスト書き出しを実行する（5分）
Q: 「スクリーン用に書き出し」と「書き出し形式」で書き出したPNGのファイルサイズが違います。なぜですか？
A： 2つのメソッドは書き出しエンジンが異なるため、同じ設定でもファイルサイズや色再現に微差が出ることがあります。品質・ファイルサイズの両方を優先する場合は「スクリーン用に書き出し」の方がフォーマットオプションが豊富です。クライアントから形式指定がある場合はその指定を優先してください。
Q： アセットの書き出しパネルにオブジェクトを追加する方法を教えてください。
A: Illustratorのウィンドウメニューから「アセットの書き出し」パネルを開き、追加したいオブジェクトをパネル内にドラッグ＆ドロップします。レイヤー名がそのままアセット名になるため、事前にレイヤー・オブジェクト名を整理しておくと書き出し後のファイル名管理が楽になります（Adobe公式「アセットの収集と一括書き出し」）。
デザインツールを仕事で使えるようになりたい方へ
Photoshopの全工程の解説動画をLINEで受け取る
LINEで無料で届くもの
- 全工程Photoshopの解説動画
- 20本Webデザインの無料レッスン
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
PNG書き出し設定は用途別に5パターンで判断
「解像度は何ppiにすればいいか」「PNG-8かPNG-24か」という迷いは、用途を先に確定させると消えます。用途ごとの推奨値を覚えると設定時間が大幅に短縮できます。
Web・SNS用の標準設定
Web・SNSで使用するPNGは、解像度72ppi・RGB・アンチエイリアスありが標準設定です。解像度はスクリーン上でのピクセル数で表示サイズが決まるため、72ppiで書き出してもブラウザ表示には影響しません。重要なのはアートボードのピクセルサイズをクライアント指定値に合わせることです。OGP画像（SNSシェア時のサムネイル）は1200×630pxが広く使われており、この場合はアートボードを1200×630pxに設定して72ppiで書き出すと指定ピクセル数のままPNGが生成されます。
高解像度・Retina対応の設定
Retinaディスプレイ向けには、@2x（2倍の解像度）で書き出すアプローチが主流です。「スクリーン用に書き出し」で倍率を「2x」と指定すると、アートボードの縦横ピクセル数が2倍の画像が生成されます。100×100pxのアートボードから@2x書き出しを行うと200×200pxのPNGが生成されます。1倍で解像度を上げる（150ppi/300ppi設定）よりも倍率指定の方が意図通りの結果になりやすいため、実務ではスクリーン用に書き出しの倍率指定を使うことをお勧めします。
PNG-8とPNG-24の選び分け
「アセットの書き出し」パネルではPNG-8とPNG-24を選べます（Adobe公式「アセットの収集と一括書き出し」）。PNG-8は256色のインデックスカラーでファイルサイズを小さく抑えられますが、グラデーションや写真調のイラストには色数不足でバンディング（帯状の色ムラ）が出ることがあります。PNG-24はフルカラーかつアルファチャンネル（透明）対応のため、ロゴ・アイコン・透明背景が必要な素材にはPNG-24が適切です。ファイル容量を優先する場合のみPNG-8を検討し、品質を優先する場合はPNG-24を選ぶという判断基準が実務で機能します。
| 用途 | 形式 | 解像度 | 透明 | 向いているケース |
| Web・SNS画像 | PNG-24 | 72ppi | 状況に応じて | バナー、OGP、記事内画像 |
| ロゴ・アイコン | PNG-24 | 72ppi/@2x | 必須 | 背景透明の素材納品 |
| シンプルな図・イラスト | PNG-8 | 72ppi | 状況に応じて | ファイル容量を優先する場合 |
| Retina対応素材 | PNG-24 | @2x/@3x倍率指定 | 状況に応じて | アプリUI、高解像度Webサイト |
CHECK
▶ 今すぐやること: 現在の案件素材の用途を「Web・SNS」「ロゴ・アイコン」「Retina対応」に分類し、上の表で推奨形式を確認する（3分）
Q: 印刷用の素材もPNGで納品してよいですか？
A： 印刷会社やクライアントの仕様によって異なります。印刷用途では一般的にPDFやTIFFが求められることが多く、PNGは印刷に適していない場合があります。納品前に印刷会社またはクライアントに対応形式を確認してください（Adobe公式「出力用ファイルを保存する」）。
Q： PNG-24とPNG-8でファイルサイズはどの程度違いますか？
A： 画像の内容によって差は大きく変わりますが、単純な配色の図であれば同じ内容でPNG-8の方が30〜60%程度サイズが小さくなるケースがあります。グラデーションや写真調の場合はPNG-8では色再現が損なわれるため、PNG-24を選ぶ方が結果的に再書き出しの手間を防げます。
PNG書き出しトラブルは5パターンで対応
「書き出してみたら意図した結果と違った」という状況は、原因のパターンを知っておくと対処が5分以内に終わります。設定を変えずに何度も書き出しを繰り返すと問題の特定が遅れるだけです。原因パターンを順に確認してください。
パターン1: 書き出しサイズが指定ピクセルと合わない
原因は2つに絞られます。アートボードのピクセルサイズがクライアント指定値と異なる場合と、書き出し時の解像度設定でスケールが変わっている場合です。まずアートボードパネル（ウィンドウ ▶ アートボード）でアートボードの幅・高さを数値確認します。次に書き出しオプションで解像度を「スクリーン（72ppi）」に設定すると、アートボードのピクセルサイズがそのまま書き出しサイズになります。解像度を150ppiや300ppiにすると書き出しピクセル数が増加するため、指定サイズより大きなファイルが生成されます。
パターン2: 余白が大きく残る
オブジェクトの実際の描画範囲よりアートボードが大きい場合に発生します。「書き出し形式」でアートボードを使用している場合はアートボードの範囲が書き出されるため、アートボードをオブジェクトにぴったり合わせます。オブジェクトを選択した状態で「オブジェクト ▶ アートボード ▶ 選択オブジェクトに合わせる」を実行するとアートボードがオブジェクト境界に自動調整されます。意図的な余白（パディング）を設けたい場合はアートボードサイズをその分大きく設定しておくことで管理できます。
パターン3: 輪郭がぼやけるまたはギザギザになる
アンチエイリアス設定が原因の場合がほとんどです。PNG書き出しオプションのアンチエイリアスには「なし」「アートに最適（スーパーサンプリング）」「文字に最適（ヒント）」の選択肢があります（Adobe公式「Illustrator export file format options」）。ロゴ・アイコン・文字を含む場合は「文字に最適（ヒント）」が輪郭をシャープに保ちやすく、イラスト全体にアンチエイリアスをかける場合は「アートに最適」を選ぶと滑らかな輪郭になります。ピクセルアート風のギザギザを意図せず発生させたくない場合は「なし」を避けてください。
パターン4: ファイル容量が大きすぎる
PNG-24で書き出したファイルが大容量になった場合の対処は2段階です。第1に、色数が少ない素材（ロゴ、単色アイコン）はPNG-8への切り替えで容量が削減できます。第2に、PNG-24のままサイズを維持したい場合は、書き出し後に外部の圧縮ツール（TinyPNG）を使うと視認上の品質をほぼ維持したままファイルサイズを削減できます。TinyPNGの公式情報によれば圧縮率は最大で70%程度とされていますが、画像の内容によって大きく異なります。ファイルが25MBを超える場合は、メール添付よりもGoogle DriveやDropboxなどのクラウドストレージで共有する方が安全です。画像圧縮無料ツール5選｜画質を落とさず一括圧縮する方法もあわせて参考にしてください。
パターン5: 複数ファイルのファイル名が整理されていない
「スクリーン用に書き出し」でサフィックスを設定していない場合、複数ファイルが「アートボード1.png」「アートボード2.png」のような自動命名になります。事前にアートボード名をクライアント指定のファイル名に変更しておくと、書き出し後のリネーム作業が不要になります。アートボードをダブルクリックするとアートボード名を編集できます。「スクリーン用に書き出し」のサフィックス欄に「_web」「_icon」「@2x」などを設定すると、用途別のファイル名が自動的に付与されます。
CHECK
▶ 今すぐやること: 書き出したPNGファイルを1枚開き、ピクセルサイズ・透明背景・ファイル名の3点を確認して不備があればパターン1〜5のいずれかで対処する（5分）
Q: 書き出したPNGをWindowsで開くと色が違って見えます。なぜですか？
A： IllustratorはmacOSとWindowsで色空間の扱いが異なる場合があります。またモニターのカラープロファイルによって見え方が変わります。Web用途ではsRGBカラースペースでの書き出しを基準にすると、異なる環境での色の見え方の差異を最小化できます。ドキュメントのカラーモードがRGBになっているかを「ファイル ▶ ドキュメントのカラーモード」で確認してください。
Q： 書き出し後にIllustratorのデータを修正して再書き出しすると、前のPNGファイルは自動上書きされますか？
A： 同じファイル名・フォルダーに書き出した場合は上書きされますが、確認ダイアログが表示されることがあります。バージョン管理が必要な場合はフォルダーごとに日付や連番を付けた書き出し先を使い分けてください。
PNG書き出しは7項目で品質を最終確認
納品前に確認せず後から「サイズが違った」「背景が白だった」となると、フリーランスとしての信頼に直結するトラブルになります。7項目のチェックを習慣化することで、再納品の発生を防止できます。
確認の前提: 書き出したファイルは必ずIllustrator以外で開く
Illustratorのプレビューは書き出し後のピクセル確認に適していません。書き出したPNGは必ずFinderのQuick Look（macOS）・エクスプローラーのプレビュー（Windows）またはブラウザで開いて実際の表示を確認してください。ブラウザで開くと透明背景の確認（格子柄表示の有無）とWeb上での見え方が同時に確認できます。
7項目チェックリスト
チェック1: ファイルサイズ（ピクセル数）の確認
書き出したPNGのプロパティまたはFinderの情報でピクセル数を確認します。クライアント指定サイズと一致していることを確認し、不一致であれば「パターン1: 書き出しサイズが指定ピクセルと合わない」の手順で修正します。
チェック2: 透明背景の確認
透明が必要な素材は、ブラウザまたはPhotoshopで格子柄（市松模様）が表示されることを確認します。白塗りで表示されている場合は背景色の設定に問題があります。
チェック3: 輪郭・アンチエイリアスの確認
文字やロゴの輪郭を100%表示で確認します。ぼやけがある場合はアンチエイリアス設定の変更を検討します。
チェック4: 色の確認
書き出したPNGの色をブラウザで確認し、Illustratorでの表示色と明らかな差異がないかを目視確認します。
チェック5: ファイル名・フォルダー構成の確認
クライアントから指定されたファイル名規則（例: logo_white_1200x630.png）に沿っているかを確認します。
チェック6: ファイル容量の確認
メールやクラウドでの共有を想定し、ファイル容量が許容範囲内かを確認します。大容量の場合は圧縮またはクラウド共有への切り替えを検討します。大容量ファイル送る無料|8つの方法で即日解決の記事に共有方法がまとまっています。
チェック7: 複数倍率ファイルの確認（Retina対応素材）
@1x/@2x/@3xの3ファイルが揃っているか、各ファイルのピクセル数が1:2:3の比率になっているかを確認します。
CHECK
▶ 今すぐやること: 次の納品前に上記7項目をチェックリストとして書き出し後の確認に使用する（3分）
Q: 納品チェックリストをクライアントに提出する必要はありますか？
A： クライアントに提出する必要はありませんが、自分の確認記録として保持しておくと、後から「このファイルはどの設定で書き出したか」を把握できて修正対応が速くなります。
Q： 複数ファイルをまとめてZIP圧縮して納品してよいですか？
A： 問題ありません。ZIPファイルはmacOS・Windows両方で展開できるため、フォルダー構成を維持したままクラウドまたはメールで納品する際に便利です。フォルダー名にプロジェクト名・日付・バージョンを含めると管理しやすくなります。
Illustrator PNG書き出しを3メソッドで完全習得：設定ミスをゼロにする実践まとめ
IllustratorのPNG書き出しは、目的に合ったメソッドを選べば設定ミスと再作業が防止できます。「書き出し形式」「スクリーン用に書き出し」「アセットの書き出し」の3経路と、透明背景・倍率・用途別設定の組み合わせを把握するだけで、納品作業は大幅に効率化されます。書き出し後の7項目チェックを習慣化することで、クライアントへの再納品という信頼損失リスクを実質ゼロにできます。
迷ったときは「1枚だけ書き出したい→書き出し形式」「複数・倍率違い→スクリーン用に書き出し」「パーツ単位→アセットの書き出し」という3分岐を起点にしてください。設定一つひとつの意味を理解すると、次の案件からは書き出し前に設定ミスを予防できるようになります。
| 状況 | 次の一歩 | 所要時間 |
| 初めて書き出す | 「書き出し形式」でPNGオプションを確認してテスト書き出し | 3分 |
| 複数アートボードを書き出す | 「スクリーン用に書き出し」で全アートボードを選択して実行 | 5分 |
| Retina対応素材を作る | 「スクリーン用に書き出し」で1x/2xを追加してサフィックスを設定 | 5分 |
| ファイル容量を削減したい | PNG-8への変更またはTinyPNGで圧縮を試す | 3分 |
| 納品前に確認したい | 7項目チェックリストをブラウザで実行 | 3分 |
Illustrator PNG書き出しに関するよくある質問
Q: IllustratorでPNGを書き出す最も基本的な方法は何ですか？
A： 「ファイル ▶ 書き出し ▶ 書き出し形式」でPNGを選択するのが最も基本的な手順です。表示されるPNGオプションで解像度と透明設定を確認してから書き出してください。操作手順の詳細はAdobe公式で確認できます（Adobe公式「アートワークの書き出し」）。
Q： アートボードが複数あるとき、全部まとめてPNGにできますか？
A： 「スクリーン用に書き出し」を使うと複数のアートボードを選択して一括書き出しできます。倍率（1x/2x/3x）も同時に設定できるため、納品に必要なすべてのサイズを1回の操作で生成できます（Adobe公式「スクリーン用にアートボードとアセットを書き出し」）。
Q： 書き出したPNGの背景が白くなってしまいます。どうすればいいですか？
A： PNGオプションダイアログの「背景色」が白になっている可能性があります。「透明」に変更して書き出し直してください。またIllustrator上に白塗りの長方形を背景として配置している場合は、そのオブジェクトを削除してから書き出してください。
Q： Web用とRetina用で書き出し設定はどう違いますか？
A： Web用は「スクリーン（72ppi）」でアートボードのピクセルサイズをそのまま書き出します。Retina対応は「スクリーン用に書き出し」で倍率を2x/3xに設定して縦横2〜3倍のピクセル数で書き出します。解像度（ppi）の数値を上げる方法より、倍率設定を使う方が意図通りの結果になりやすいです。
Q： IllustratorのPNG書き出しでファイルが重くなる場合はどうすればいいですか？
A： 色数が少ない素材はPNG-8に切り替えて容量を削減できます。PNG-24のまま維持したい場合はTinyPNGなどの外部ツールで無劣化に近い形で圧縮することをお勧めします。
【出典・参照元】
Adobe公式「Illustrator – アートワークの書き出し」 – PNG書き出しの基本操作とPNG形式の特徴
Adobe公式「スクリーン用にアートボードとアセットを書き出し」 – 複数アートボード・倍率指定の書き出し手順
Adobe公式「アセットの収集と一括書き出し」 – PNG-8/PNG-24の選択とアセット単位の書き出し
Adobe公式「Illustrator export file format options」 – アンチエイリアス・解像度などのPNGオプション詳細
Adobe公式「出力用ファイルを保存する」 – 印刷用途の書き出し形式の考え方