ロゴデータには 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は開かない
SVG にはスクリプトを含められ、<img> タグで表示する場合は実行されませんが、ファイルをブラウザで直接開くと実行されることがあります。このため、ロゴは公式の配布元から入手したものを使ってください。MediaKit™ では、スクリプトやイベントハンドラを含む SVG はアップロードの時点で受け付けません。
PNG・JPEG・WebPの使い分け
PNG
PNG は可逆圧縮なので画質が落ちず、背景を透明にもできます。ベクターが使えない場面では透過PNG を使うのが一般的です。大きさは実際に表示する最大サイズの2倍程度が目安で、表示幅が200pxの場所なら、幅400pxの PNG を用意しておくと高解像度の画面でもぼやけません。
JPEG
JPEG は写真向けの非可逆圧縮で、背景を透明にできないため、色付きの背景に載せると白い四角が残ります。縁のまわりには圧縮によるにじみも出て、保存し直すたびに画質が落ちるので、ロゴには使わず、配布物にも含めないほうが安全です。
WebP
WebP は主要なブラウザで表示でき、PNG より軽くできますが、Office やデザインツール、印刷入稿では扱えないことがあります。WebP を配る場合も、ラスター形式を WebP だけにはせず、PNG を一緒に付けてください。
PDF・AI・EPSは印刷でどう使われるか
入稿形式として PDF を指定する印刷会社は多くあり、ベクターのまま渡せて、開く環境も選びません。書き出すときはフォントを埋め込むか、アウトライン化しておいてください。
AI
Adobe Illustrator の形式で、編集できる元データです。AI を渡すと相手がロゴを加工できるので、配ってよいかどうかはガイドラインの方針に沿って決めます。また、新しいバージョンで保存した AI は古い Illustrator では開けないことがありますが、PDF 互換で保存した AI なら、表示だけであれば PDF ビューアでも開けます。
EPS
昔から印刷で使われてきたベクター形式です。半透明の効果（影やぼかし）を保てないので、今は PDF で代用されることが多くなっています。ただし、古い制作環境の相手から EPS を指定されることがまだあり、書き出すのはそのときだけで十分です。
ロゴを配る側がそろえる形式と点数
最低限必要なのは、バリエーションごとの SVG と透過PNG。バリエーションは、水平セット・垂直セット・シンボル単体と、明るい背景用・暗い背景用の組み合わせを指します。印刷にも使われるロゴには、PDF か AI も添えます。
たとえば水平セット・垂直セット・シンボルの3種類を明るい背景用と暗い背景用に分け、それぞれ SVG と PNG で用意すると 3 × 2 × 2 = 12 ファイルになります。これだけあると見分けにくいため、acme-logo-horizontal-dark.svg のように、ファイル名に組織名・バリエーション・背景の別を入れておきます。
ZIP1つにまとめるより形式ごとに個別にダウンロードできるようにしておくほうが、受け取る側は必要なファイルだけを持っていけます。
MediaKit™での扱い
MediaKit™ には SVG・PNG・JPEG・WebP・GIF・BMP・PDF・PS（PostScript）・AI・XD をアップロードでき、1つのロゴに複数の形式をまとめて登録できます。一方、EPS は登録できないため、EPS が必要な相手には PDF か AI を案内してください。一括アップロードでは、SVG だけ、または AI・PDF だけのロゴに、ブラウザ上で PNG を自動生成して加えます。この自動生成はオフにもできます。なお、PDF 互換で保存されていない AI からは、PNG を作れないことがあります。手順はアップロードガイドにまとめています。
受け取る側は、迷ったときどう判断するか
- 使う場所が 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 はロゴの配布物に含めていない
- ファイル名に、組織名・バリエーション・背景の別が入っている
- 形式ごとに個別にダウンロードできる
配布するファイルの置き場所や公開範囲の決め方は、メディアキットとはで説明しています。また、ロゴの周りの余白や最小サイズについては、ロゴのクリアスペースと最小サイズの決め方を参照してください。
よくある質問
ロゴはSVGとPNGのどちらを使えばよいですか？
WebサイトやアプリにはSVGを使い、SVGを挿入できない、または表示が崩れるスライドやWordでは背景が透過するPNGを使います。なお、PNGは実際に表示する最大サイズの2倍程度の大きさを用意すると、高解像度の画面でもぼやけません。
ロゴにJPEGが向かないのはなぜですか？
JPEGは背景を透明にできないので、色付きの背景に載せるとロゴの周りに白い四角が残ります。圧縮で縁がにじむうえ、保存し直すたびに画質が落ちていくため、ロゴには透過PNGかSVGを使ってください。
印刷会社にはどの形式でロゴを渡せばよいですか？
入稿先の指定に従い、指定がなければPDFを使います。書き出すときはフォントを埋め込むかアウトライン化しておき、古い制作環境の相手からEPSを求められたときだけEPSを用意すれば十分です。
ロゴのAIファイルが開けないときはどうすればよいですか？
新しいバージョンのIllustratorで保存したAIは、古いバージョンでは開けないことがあります。PDF互換で保存されたAIなら表示だけはPDFビューアでもできますが、それでも開けなければ、配布元にPDFかSVGを頼むのが早道です。
