この記事のポイント
JPGは透明を保存できない
作例ではチェックなし366×366px、あり1200×800px
何もない部分が市松模様なら透明のまま書き出せる
こんにちは！ユアムーン編集部です！
Adobe® Illustrator®（イラレ）で作ったロゴや文字を、背景が透明な画像にして、Web サイトや動画、ほかのデザインに重ねたいことはないでしょうか。ところが書き出してみると、背景が白くなってしまったり、思っていた大きさにならなかったりすることがあります。
この記事では、作例のロゴ（円と「うすあかりの色」の文字）を使って、背景を透過した PNG を書き出す方法を、実際の画面で解説します。「アートボードごとに作成」のチェックによって、書き出される画像の大きさがどう変わるかも、実際に書き出して確かめました。画面写真は Illustrator の画面全体をそのまま縮小しているため、本文で「画面のどこを見ればよいか」をあわせてご案内します。
2026年10月、Adobe Illustrator 2026（バージョン 30.8.2）の Mac 版で手順を確認しています。バージョンや Windows 版では、表記や画面が異なる場合があります。
まず知っておきたい「白い部分」と「透明」
Illustrator のアートボードは白く表示されていますが、多くの場合、その白い部分には何も置かれていません。何もない部分は、書き出しのときに「透明」として扱うことができます。
ただし、透明を保存できるかどうかは画像の形式によって違います。PNG は透明な部分を保存できますが、JPG（JPEG）は透明を保存できません。背景を透過したいときは、PNG を選びます。
手順1：透明グリッドで、背景が本当に透明か確かめる
作例は、横長のアートボード（1200×800 px）の中央に、藍色の線の円と「うすあかりの色」の文字を置いたものです。作例は、編集部が作った架空の展覧会のロゴです。
「表示」メニューの「透明グリッドを表示」を選ぶと、何も置かれていない部分が白とグレーの市松模様で表示されます。作例では、画面中央のアートボードのうち、円と文字以外がすべて市松模様になりました。白い部分は、白い色が塗られているのではなく、何もない（透明な）部分だったことが分かります。
もし白い四角などを背景に敷いている場合は、その部分は市松模様にならず、書き出しても白いまま残ると考えられます。透明にしたいときは、背景の図形を消すか非表示にしておきます。
手順2：「書き出し形式…」で PNG を選ぶ
「ファイル」メニューの「書き出し」から、「書き出し形式…」を選びます。画面の中央に「書き出し」の画面が開きます。
この画面の中ほど、「ファイル形式：」で「PNG (png)」を選びます。その下の段に「アートボードごとに作成」のチェックがあります。1回目は、このチェックを外したまま、右下の「書き出し」をクリックしました。名前は「作例_ロゴ.png」です。
チェックが外れているときは、右に並ぶ「すべて」「範囲：」は薄く表示され、選べない状態でした。
手順3：「PNG オプション」で背景色を「透明」にする
「書き出し」をクリックすると、画面の左上に「PNG オプション」の画面が開きました。上の「オプション」の欄に「解像度：」「アンチエイリアス：」「インターレース」、下の「プレビュー」の欄に「背景色：」と、書き出される画像の小さなプレビューが並んでいます。作例では、「解像度：」は「スクリーン (72 ppi)」、「アンチエイリアス：」は「文字に最適 (ヒント)」、「背景色：」は「透明」になっていました。
小さなプレビューを見ると、円と文字のまわりが市松模様になっていて、背景が透明のまま書き出されることが分かります。
「背景色：」の右の矢印をクリックすると、一覧に「透明」「ホワイト」「ブラック」が並んでいました。Adobe の公式ヘルプでは、「ホワイト」や「ブラック」を選ぶと、透明な部分がその色で塗られると説明されています。背景を透過したいときは「透明」のままにします。
「OK」をクリックすると、背景が透明な PNG が書き出されました。書き出された画像の大きさは 366×366 px で、アートボード全体ではなく、円と文字がある範囲だけの正方形の画像になりました。円の大きさ（360 px）に、線の太さの分が加わった大きさです。
手順4：アートボードと同じ大きさで書き出す
アートボードの大きさ（作例では 1200×800 px）のまま書き出したいときは、「書き出し」の画面で「アートボードごとに作成」にチェックを入れます。チェックを入れると、右の「すべて」「範囲：」が選べるようになりました。作例ではアートボードが1つなので、「すべて」が選ばれた状態のまま「書き出し」をクリックしました。
作例では、書き出し先に同じ名前のファイルがあったため、「”作例_ロゴ.png” はすでに存在しています。置き換えてもよろしいですか？」という確認が出ることがありました。作例では置き換えて進めました。
続く「PNG オプション」で、左上の「解像度：」の一覧を開くと、「4 ppi」「18 ppi」「36 ppi」「スクリーン (72 ppi)」「標準 (150 ppi)」「高解像度 (300 ppi)」「その他」が並んでいました。作例では、どちらの書き出しも「スクリーン (72 ppi)」にしています。
背景色は「透明」のまま「OK」をクリックすると、1200×800 px の、背景が透明な PNG が書き出されました。アートボードの大きさと同じです。
書き出した PNG を確かめる
書き出した PNG（1200×800 px のほう）を、市松模様・生成り・藍色の背景に重ねてみました。円と文字のまわりは透明なので、下に置いた背景の色がそのまま見えます。
右の藍色の背景では、円と文字がほとんど見えなくなりました。透明な PNG は背景の色をそのまま通すため、作品と背景の色が近いと見えにくくなります。暗い背景に重ねる予定があるときは、明るい色の版も用意しておくと使いやすくなります。
2回の書き出しの大きさを、同じ縮尺で並べると、次のようになりました。
大きさが変わる仕組み
- 「アートボードごとに作成」のチェックなし：円と文字があるところだけが書き出されました（366×366 px）。余白のないロゴ画像がほしいときに向いています。
- 「アートボードごとに作成」のチェックあり：アートボードの範囲がそのまま書き出されました（1200×800 px）。余白も含めて、作った大きさどおりにしたいときに向いています。
- 解像度：作例の書類は単位がピクセルで、「スクリーン (72 ppi)」で書き出すと、アートボードの 1200×800 px がそのまま 1200×800 px になりました。「標準 (150 ppi)」や「高解像度 (300 ppi)」を選ぶと、書き出されるピクセル数が増えると考えられますが、この記事では 72 ppi 以外では書き出していません。
書き出しで余白ができる、画質が粗いといった別の悩みについては、イラレで書き出すと色が変わる・画質が悪い・余白ができるときの直し方でも紹介しています。アートボードの大きさを変えたいときは、イラレでアートボードを追加する方法をご覧ください。
よくあるつまずきと確認方法
- 書き出したら背景が白くなった：「PNG オプション」の下の「プレビュー」の欄で、「背景色：」が「ホワイト」になっていないか確かめます。小さなプレビューが市松模様になっていれば、透明のまま書き出されます。また、形式に JPG を選ぶと透明は保存できません。白い図形を背景に敷いている場合も白く残ると考えられるので、「透明グリッドを表示」で市松模様になるかを先に確認しておくと安心です。
- 思っていた大きさにならない：「書き出し」の画面の「アートボードごとに作成」のチェックの有無で、書き出される範囲が変わります。作例では、チェックなしは 366×366 px、チェックありは 1200×800 px になりました。
- 「すでに存在しています」と確認が出た：同じ名前のファイルが同じ場所にあると、「”作例_ロゴ.png” はすでに存在しています。置き換えてもよろしいですか？」と表示されました。置き換えると前のファイルは上書きされると考えられるため、両方残したいときは名前を変えて書き出します。
- 暗い背景に置くと見えない：透明な PNG は背景の色がそのまま見えます。作例でも、藍色の背景では藍色の円と文字がほとんど見えなくなりました。
なお、「スクリーン用に書き出し…」など、ほかの書き出し方法でも PNG を書き出せますが、この記事ではこれらの方法は試していません。写真の背景を消して透過したい場合は、Photoshop を使うフォトショで背景を削除して透過する方法も参考にしてください。
まとめ
- 背景を透過するなら、形式は PNG を選びます。JPG は透明を保存できません。
- 「ファイル」→「書き出し」→「書き出し形式…」で「PNG (png)」を選び、「PNG オプション」の「背景色：」を「透明」にします。
- 「アートボードごとに作成」のチェックなしは作品の範囲だけ（作例は 366×366 px）、チェックありはアートボードの大きさ（作例は 1200×800 px）で書き出されます。
- 作例の書類は、「解像度：」が「スクリーン (72 ppi)」のとき、アートボードと同じピクセル数になりました。
- 書き出す前に「表示」→「透明グリッドを表示」で、背景が本当に透明かを確かめておくと安心です。
Adobe product screenshots reprinted with permission from Adobe.
Adobe and Illustrator are either registered trademarks or trademarks of Adobe in the United States and/or other countries.
画面写真は、画面全体をそのまま縮小して掲載しています。
画面写真はユアムーン編集部が2026年10月に撮影したものです。画面に写っている作例は、ユアムーン編集部が作成しました。
