PNG・JPG・PDF・AI・SVGの違い｜ロゴ・印刷・Webで使うデータ形式の選び方

01

PNGは透明背景に強い画像形式

PNGは、WebやSNS、簡単なロゴ画像の受け渡しでよく使われる形式です。大きな特徴は、透明背景を扱えることです。背景を透明にしたロゴ、アイコン、Web用パーツなどではPNGが便利です。JPGのように背景が白く残らないため、色付きの背景や写真の上に重ねる用途にも向いています。

ただし、PNGは画像形式なので、元の解像度以上に大きく使うと荒れます。横幅500pxのPNGロゴをTシャツの胸いっぱいに大きく使おうとすると、輪郭がギザギザになる可能性があります。ロゴの確認用やWeb表示用には便利ですが、本格的な印刷や加工では、AIやPDFなどのベクターデータが求められることが多いです。

拡張子だけで中身を断定できない点にも注意します。特にPDFは、画像だけの場合も、編集可能なベクターを含む場合もあります。

同じPNGでも、幅400pxのロゴと幅4000pxのロゴでは使える範囲が違います。透明背景が必要かだけでなく、配置する実寸と必要な画素数を先に決めます。Webヘッダーへ置くデータと、展示会パネルへ出力するデータを、同じ「PNGだから」で扱わないためです。

02

JPGは写真に向いているがロゴには不向き

JPGは写真に向いている形式です。色の階調が多い写真を軽いファイルサイズに圧縮できるので、Webサイトの商品画像やブログの写真ではよく使われます。一方で、ロゴや文字、細い線のデータにはあまり向きません。JPGは保存時に圧縮がかかるため、輪郭の周りににじみやノイズが出ることがあります。

白背景のロゴ画像をJPGで保存すると、よく見ると文字の周りがモヤっとしていることがあります。さらに、JPGは透明背景を扱えません。ロゴを背景なしで使いたい場合は、JPGではなくPNGやSVGを選ぶ方が自然です。

商品写真はJPGに向きますが、保存を繰り返すたびに圧縮の跡が増えます。細い文字やロゴの縁に蚊が飛んだようなノイズが見えたら、元画像へ戻ります。「軽くなりました」は成功ですが、輪郭まで軽くしないでください。

03

PDFは確認用にも入稿用にも使われる

PDFは、デザインの見た目を保ったまま共有しやすい形式です。印刷会社への入稿、見積もり用の確認、校正用データ、仕様書など、幅広く使われます。ただし、PDFなら何でも印刷向きというわけではありません。Illustratorなどからきちんと書き出されたPDFであれば、文字や図形の情報を保持したまま入稿できます。しかし、低解像度画像を貼っただけのPDFは、印刷すると荒れる可能性があります。

PDFは「形式」だけでなく「中身」が重要です。見た目はPDFでも、画像だけで作られているのか、ベクター情報が残っているのかで、加工側の扱いやすさは大きく変わります。

PDFは便利な箱ですが、中へ入れた画像の解像度までは直してくれません。入稿用PDFを原寸で開き、細部を拡大して確認し、可能ならプリフライト情報でフォント、画像解像度、カラーモードを見ます。拡張子ではなく、中身が製作条件を満たしているかを判断します。

04

AIはIllustratorの編集用データ

AIはAdobe Illustratorの標準ファイル形式です。ロゴ、パッケージ、タグ、ラベル、印刷物など、デザイン制作の現場ではよく使われます。文字、線、面、色、レイヤーなどの編集情報を持っているため、後から色を変えたり、サイズを調整したり、パーツを取り出したりしやすいのが特徴です。

印刷会社や加工会社が「AIデータはありますか？」と聞くのは、デザインを確認したいだけでなく、必要に応じて加工用データとして調整できるからです。白版を作る、特色を確認する、線幅を調整する、刺繍やカット用にパスを整理する、といった作業はAIデータがあると進めやすくなります。

「開けたから使える」と「目的に合う」は別です。受け取った側が拡大、編集、印刷のどれをするかまで伝えます。

AIを渡すときは、編集できることが利点にも危険にもなります。不要な非表示レイヤー、古い案、アートボード外の部品を整理し、どのレイヤーが印刷色、白版、カット線なのか名前を付けます。開いた人が宝探しを始めない状態が、編集用データの最低条件です。

05

SVGはWebに強いベクター形式

SVGは、Web上で使いやすいベクター形式です。アイコン、ロゴ、簡単なイラスト、UIパーツなどに向いています。拡大しても荒れにくく、CSSで色を変えられる場合もあるため、Web制作では非常に便利です。ただし、印刷入稿の現場では、SVGよりAIやPDFを求められることが多いです。SVGはWeb向けには優秀ですが、特色指定、塗り足し、印刷用カラーモードなどは別途確認が必要になります。

SVGはコードとして読めるため、Webへ置く前に外部参照や不要なメタデータを確認します。複雑なぼかしやマスクはブラウザ間で見え方が変わることがあるので、実際に使うサイズと背景色で表示を試します。印刷へ転用するときは、RGBの色指定や効果をAIまたはPDF側で再点検します。

06

どの形式で送ればいいか

迷ったときは用途で考えると分かりやすいです。写真をWebに載せるならJPG、透明背景のロゴ画像ならPNG、印刷会社に確認用データを送るならPDF、ロゴや印刷データを編集・加工してもらうならAI、Webサイトのアイコンやロゴに使うならSVGが向いています。

実務では、ひとつの形式だけで完結しないことも多いです。ロゴなら、編集用にAI、確認用にPDF、Web表示用にPNGやSVGを用意しておくと安全です。印刷や加工が関係する場合は、相手先がどの形式を求めているかを確認し、その形式に合わせてデータを準備するのが一番確実です。

作れる入稿データのまとめでは、形式選びを白版や指示書を含む一式の中で整理しています。

納品時は「master.ai」「proof.pdf」「web.svg」「web@2x.png」のように役割を分けると、受け取った人が迷いません。形式を増やすことが目的ではなく、編集、確認、印刷、Web表示の入口を分けるためのセットです。五種類を全部送って説明を省くと、今度は選択問題が始まります。