ロゴデータをもらうと、SVG、PNG、AI、PDF と何種類も入っていて、どれを使えばいいのか迷います。選び方は単純で、使う場所で決まります。
この記事では、まず用途別の早見表で答えを示し、そのあと形式ごとの違いと注意点、ロゴを配る側がそろえるべき形式までを順に説明します。
ロゴはどのファイル形式を使えばよいか — 用途別の早見表
| 用途 | 第一候補 | 使えないとき | 理由 |
|---|---|---|---|
| Webサイト・アプリ | SVG | 透過PNG | 拡大しても縁が荒れず、ファイルも軽い |
| スライド・Word | 透過PNG | SVG | 古い版や一部のツールではSVGが挿入できなかったり、表示が崩れたりする |
| SNSのプロフィール画像 | 背景色を塗った正方形のPNG | 透過PNG | 多くのSNSは画像を円形に切り抜き、透過部分を黒や白で塗ることがある。受け付けるのもラスター画像が多い |
| 名刺・チラシ・パンフレットの入稿 | PDF または AI | なし | 入稿先の指定に合わせるのが基本。ベクターのまま渡せる。SVGでは入稿できない印刷会社もある |
| 看板・大判印刷 | AI または PDF（ベクター） | なし | 大きく引き伸ばすので、ラスター画像では非常に大きな解像度が要る。ベクターが確実 |
| 写真や色付きの背景に載せる | 透過PNG または SVG | なし | 透過がないと、ロゴの周りに白い四角が残る |
| デザイナーが編集する | AI | SVG | 編集できる元データ。加工してよいかはガイドラインで確認する |
ベクターとラスターは何が違うのか
ベクター形式は、線や面を数式で記録した画像です。拡大しても縁が荒れません。SVG・PDF・AI・EPS が代表です。
ラスター形式は、色のついた小さな点（ピクセル）を格子状に並べて記録した画像です。拡大すると点が見えてぼやけます。PNG・JPEG・WebP・GIF・BMP が代表です。
ロゴの元データはほとんどの場合ベクターです。そのためベクターを最優先で使い、ラスターは「ベクターが使えない場所のための代替」と考えると迷いません。
主なロゴ形式を比べると
| 形式 | 種類と拡大 | 透過 | 主な用途 | 注意点 |
|---|---|---|---|---|
| SVG | ベクター。拡大しても劣化なし | ○ | Web・アプリ | 文字をアウトライン化していないと書体が崩れる |
| PNG | ラスター（可逆圧縮）。拡大するとぼやける | ○ | Web・Office・SNS | 使う最大サイズの2倍程度の大きさで用意する |
| JPEG | ラスター（非可逆圧縮）。拡大するとぼやける | × | 写真 | ロゴには不向き。背景が白い四角になり、縁が荒れる |
| WebP | ラスター。拡大するとぼやける | ○ | Web（軽量化） | アプリや印刷入稿では扱えないことがある |
| ベクターまたはラスター。ベクターなら劣化なし | ○ | 印刷入稿・配布 | フォントの埋め込みかアウトライン化が必要 | |
| AI | ベクター。拡大しても劣化なし | ○ | 編集・印刷入稿 | Illustrator（または互換ソフト）が必要 |
| EPS | ベクター。拡大しても劣化なし | △ | 古い印刷環境 | 半透明の効果を保てない。現在は PDF が代わりになる |
GIF と BMP は、いまロゴの配布形式として選ぶ理由がほとんどありません。PNG で足ります。
SVGを使うときの注意点
SVGは、テキストで書かれたベクター形式です。ブラウザがそのまま表示でき、ファイルが軽く、どこまで拡大しても縁が荒れません。Webでロゴを出すなら第一候補です。
文字が別の書体になる
ロゴの中の文字が「フォント指定」のままだと、受け取った人の環境にそのフォントがなければ、別の書体で表示されます。ロゴがロゴでなくなる、典型的な事故です。書き出す前に、文字をアウトライン化（文字を図形に変換）してください。
出所の分からないSVGは開かない
SVG にはスクリプトを含められます。<img> タグ経由の表示では実行されませんが、ファイルをブラウザで直接開くと実行されることがあります。ロゴを受け取るときは、公式の配布元のものを使ってください。MediaKit™ は、スクリプトやイベントハンドラを含む SVG を、アップロード時に拒否します。
PNG・JPEG・WebPはどう使い分けるか
PNG — ロゴの標準的なラスター形式
PNGは、画質が落ちない可逆圧縮で、背景を透明にできます。ベクターが使えない場面でのロゴは、透過PNGが標準です。大きさは、実際に表示する最大サイズの2倍程度を目安にします。表示幅が200pxの場所なら、幅400pxのPNGです。高解像度の画面でもぼやけません。
JPEG — ロゴには使わない
JPEGは写真向けの非可逆圧縮で、背景を透明にできません。色付きの背景に載せると白い四角が残り、縁のまわりには圧縮によるにじみが出ます。保存し直すたびに画質も落ちます。ロゴの配布物には含めないのが安全です。
WebP — Webでは軽いが、唯一のラスターにはしない
WebPは主要なブラウザで表示でき、PNGより軽くできます。ただし Office やデザインツール、印刷入稿では扱えないことがあります。配るなら、PNG を必ず添えてください。
PDF・AI・EPSは印刷でどう使われるか
多くの印刷会社が入稿形式として指定します。ベクターのまま渡せて、開く環境を選びません。書き出すときは、フォントを埋め込むかアウトライン化しておきます。
AI
Adobe Illustrator の形式で、編集できる元データです。渡すことは「加工できる状態で渡す」ことでもあるので、配ってよいかはガイドラインの方針で決めます。新しいバージョンで保存した AI は、古い Illustrator では開けないことがあります。PDF 互換で保存された AI は、表示だけなら PDF ビューアでも開けます。
EPS
古くから印刷で使われてきたベクター形式です。半透明の効果（影やぼかし）を保てないため、現在は PDF が代わりに使われます。古い制作環境から今も指定されることがあり、その場合だけ書き出します。
ロゴを配る側は、どの形式を何点そろえるか
最小構成は、SVG と透過PNGを、バリエーションごとにそろえることです。バリエーションとは、水平セット・垂直セット・シンボル単体と、明るい背景用・暗い背景用の組み合わせを指します。印刷に使われるなら、PDF か AI を添えます。
たとえば水平セット・垂直セット・シンボルの3種類を、明るい背景用と暗い背景用で用意し、SVG と PNG を付けると 3 × 2 × 2 = 12 ファイルです。数が増えるので、ファイル名に組織名・バリエーション・背景の別を入れて、acme-logo-horizontal-dark.svg のように一目で分かるようにします。
ZIP1つにまとめず、形式ごとに個別にダウンロードできるようにしておくと、受け取る側は必要な1つだけを取れます。
MediaKit™での扱い
MediaKit™ では、SVG・PNG・JPEG・WebP・GIF・BMP・PDF・PS（PostScript）・AI・XD をアップロードでき、1つのロゴに複数の形式をまとめて登録できます。登録できる形式の一覧に EPS はないので、必要な相手には PDF か AI を案内します。一括アップロードでは、SVG だけ、または AI・PDF だけのロゴに、PNG をブラウザ上で自動生成して加えます（オフにもできます。PDF 互換で保存されていない AI では、作れないことがあります）。手順はアップロードガイドにあります。
受け取る側は、迷ったときどう判断するか
- 使う場所が Web やアプリなら、SVG を使う。
- SVG が使えない、または崩れるなら、透過PNG を使う。
- 印刷の入稿なら、入稿先の指定を確認する。指定がなければ PDF を使う。
- ロゴの周りに白い四角が出たら、JPEG か、背景が塗られた PNG を使っている。透過PNG か SVG に替える。
- ぼやけたら、小さなラスター画像を引き伸ばしている。大きな PNG か、ベクターに替える。
- それでも合わなければ、自分で作り直さず、配布元に依頼する。
自分で作り直したロゴは、公式が配布していない形なので、改変にあたります。他社のロゴを使うときの判断は他社ロゴの使用許可と改変NG例にまとめています。
よくある失敗と、その直し方
NG
JPEG のロゴを色付きの背景に載せ、白い四角が残ってしまう。
小さな PNG を引き伸ばして使い、輪郭がぼやける。
ウェブサイトの画面を切り取って、ロゴとして使う。
OK
透過PNG か SVG を使い、背景に合うバリエーションを選ぶ。
表示サイズの2倍の PNG か、ベクターを使う。
公式の配布元から、指定された形式で入手する。
- Web・アプリ用に SVG、それ以外に透過PNG を用意した
- SVG の文字はアウトライン化してある
- 印刷で使われるなら、PDF か AI を添えた
- JPEG はロゴの配布物に含めていない
- ファイル名に、組織名・バリエーション・背景の別が入っている
- 形式ごとに個別にダウンロードできる
配布するファイルの置き場所や公開範囲の決め方は、メディアキットとはで説明しています。ロゴの周りの余白や最小サイズの決め方はロゴのクリアスペースと最小サイズの決め方へ。
