Logo ファイル形式を解説: SVG, PNG, PDF, AI, EPS

ロゴファイル形式について覚えておくべきことはひとつだけ

ロゴはファイルではない。ファイルのシステムだ。PNG を1枚送って「納品完了」とするのは、クライアントの前でブランドをアマチュア扱いする行為だ。

本当に重要な形式は5つ: SVG、PNG、PDF、AI、EPS。それぞれに役割がある。間違った用途に間違ったファイルを使えば、ロゴはビルボードでピクセル化し、取引先のマシンで開けなくなり、刺繍店から「フリップフォンで作ったみたいな仕上がり」で戻ってくる。

ベクターとラスターの違い、一段落で

以上が違いのすべて。ロゴは必ずベクター形式で存在させ、ラスターはそこからエクスポートする。

SVG: Web ネイティブのベクター形式

SVG は Scalable Vector Graphics の略だ。ブラウザがネイティブに読み取れる XML ベースの形式で、レンダリングオーバーヘッドなし、ぼやけた Retina ディスプレイなし、メンテナンスが必要な別の 2x ファイルも不要。<img> タグに入れるか HTML に直接インラインで記述すれば、余分なバイトを使わずあらゆる解像度にスケールする。

elevenlabs.io でライブを確認する

SVG が適しているのは:

• ウェブサイトのヘッダー
• アプリアイコン
• メール署名 (対応プラットフォームのみ)
• コントロールできるあらゆるデジタル表面

ほとんどのデザインツールから直接エクスポートできる。

SVG が苦手な場面:

• Microsoft Office: Word と PowerPoint はバージョンと OS によって SVG のサポートが一貫していない
• レガシーな印刷ワークフロー: 一部の制作ツールは SVG に対応していない。PDF か EPS を使うこと

PNG: 印刷を台無しにする安全なフォールバック

PNG はラスター形式だ。ピクセルを保存する。地球上のあらゆるアプリケーションが PNG を開けるという点が唯一の競争優位で、デジタル用途ではそれは本物のアドバンテージだ。

名刺の 300 DPI ロゴはベクターソースから来なければならない。

PNG は常に大きいサイズでエクスポートすること。最長辺 2000px 以上で、白背景と透明背景の2バージョンを用意する。

PDF: どこへ行っても壊れない形式

PDF はベクターデータを埋め込む。Illustrator か Figma からエクスポートすれば、ソフトウェア不要で、完全にスケーラブルな状態であらゆるデバイスで開ける。

moo.com で印刷仕様を確認する

フォントの問題なし。アセットの欠落なし。取引先から「Illustrator がない」という返信なし。

印刷作業では、PDF は最も実用的なベクター納品形式だ:

• 商業印刷会社はワークフローに直接取り込める
• サイネージ業者はワイドフォーマットのレイアウトソフトウェアに配置できる
• 刺繍店はライン精度を失わずに変換できる
• Illustrator を持っていない取引先も開ける

相手がどのアプリケーションを使っているかわからない場合に送る形式で、ほとんどの外部への引き渡しがこれに該当する。

PDF はロックアップバリアント (ロゴとタグライン、スタック、横並び) の形式でもある。取引先は変換なしで InDesign か Acrobat に直接配置できる。

AI: デザイナーが保持するワーキングファイル

AI は Adobe Illustrator のネイティブワーキングファイルで、納品物ではない。すべてが保存されている:

• レイヤーとオブジェクト
• カラースウォッチ
• ガイドとアートボード
• オリジナルフォントが保持されたライブテキスト
• アピアランス属性
• スポットカラー

デザイナーは AI ファイルを保持する。あなたはそこからエクスポートを受け取る。関係が終わり、後でロゴを編集する必要が生じたとき、その AI ファイルが編集を可能にするものだ。

契約書にはプロジェクト完了時にデザイナーが引き渡すことを明記すべきだ。そうなっていないなら、変更が必要になる前に対処する価値があるギャップだ。

AI ファイルは Illustrator でのみ完全に開ける (Affinity Designer では部分的に開ける)。デッキにロゴを貼り付けるクライアントには PNG を送ること。AI を指定してくる取引先には送って、クロスバージョンの互換性が信頼できないため Illustrator のバージョンを確認すること。

EPS: あなたの印刷店がまだ求めてくる旧世代の形式

EPS (Encapsulated PostScript) は PDF より古い。PDF が主流になる前のスタンダードなベクター交換形式で、数十年間事業を続けている印刷業者はいまも惰性でこれを求めてくる。

about.gitlab.com でプレスキットを見る

EPS と AI は同じベクターデータを持っている。主な違い: EPS は古い制作ソフトウェア全体でより広く読み取れる。一方 AI は、EPS がエクスポート時にフラット化するライブテキストや透明度などの Illustrator 固有の機能を保持する。

取引先が EPS を求めているなら EPS を送ろう。誰も求めていないなら、PDF が同じ仕事をより優れた互換性でこなす。

ファビコンとソーシャルアバターの罠

ファビコンはロゴを縮小したものじゃない。別のデザイン作業だ。32x32 ピクセルではほとんどのロゴの詳細が消える。タグライン付きのワードマークは灰色のしみになり、300px でクリーンに読めるものが 32px では判読不能になる。

ファビコンの3ステッププロセス:

1. 専用のファビコンマークをデザインする。通常は最初の文字、モノグラム、または副次的なディテールを取り除いた最も認識しやすいロゴマーク要素。
2. ファイルをエクスポートする。.ico (16x16、32x32、48x48 の PNG のコンテナ) か、ブラウザがスケールする 192x192 PNG のいずれか。
3. ソーシャルアバターは別に処理する。Instagram は約 110x110px の円にクロップするため、プロフィールアイコンはロゴマーク単体にすること。ワードマーク付きのフルロックアップは絶対にダメ。

Brainy がすべてのロゴと一緒に納品するクライアント引き渡しキット

すべての Brainy のロゴ引き渡しは、ランダムなエクスポートの ZIP ではなく、構造化されたフォルダとして納品される。正確な構造は以下の通り:

YourBrand_Logo_Kit/ ├── 01_Web/ │ ├── logo-primary.svg │ ├── logo-primary@2x.png (2000px, transparent bg) │ ├── logo-reversed.svg │ ├── logo-reversed@2x.png │ ├── icon-only.svg │ └── favicon/ │ ├── favicon.ico │ ├── favicon-192.png │ └── favicon-512.png ├── 02_Print/ │ ├── logo-primary-CMYK.pdf │ ├── logo-primary-CMYK.eps │ ├── logo-reversed-CMYK.pdf │ └── logo-reversed-CMYK.eps ├── 03_Source/ │ └── logo-master.ai └── README.txt

すべてのフォルダには目的がある。README には、どの作業にどのフォルダを開くべきかの1段落のガイダンスが含まれている。

クライアントは推測する必要がない。README のないロゴキットは、クライアントではなくデザイナー向けに設計されたキットだ。

brand.github.com でブランドキットを確認する

Brainy にロゴをデザインしてもらうと、初回からラベル付きで構造化されたフルキットを受け取れる。

一目でわかる形式決定テーブル

以下の単一テーブルはあらゆる一般的なユースケースを正しい形式にマッピングしている。印刷して、スクリーンショットして、スタジオの Notion に貼り付けて、クライアントに「印刷に送るファイルはどれ?」と聞かれたときにすぐ参照できる場所に保存しておこう。

よくある質問

AI と EPS の違いは何ですか?

どちらもベクター形式だ。AI は Illustrator のネイティブワーキング形式で、ライブテキスト、透明度、アートボード、アピアランス属性を保持する。EPS は古くて広く読み取れるが、エクスポート時にそれらの機能をフラット化する。AI をソースオブトゥルースとして保持し、取引先が求めた場合は EPS を送ること。

すべてに PNG を使えばいいですか?

ダメ。PNG は印刷されるかエクスポートサイズを超えてスケールされると劣化する。取引先に拒否され、刺繍機は使えない。上のテーブルで代わりに送るものを確認しよう。

WebP、GIF、TIFF、BMP はどうですか?

これらはいずれもロゴ形式じゃない。WebP は写真の圧縮用、GIF の 256 色パレットはクリーンなエッジを台無しにする、TIFF はアーカイブ用、BMP には透明度がない。上の5つの形式はあらゆる正当なロゴのユースケースをカバーする。

デザイナーから PNG しか送られてきませんでした。どうすればいいですか?

フルキットを要求しよう: SVG、PDF、EPS、そして AI ソース。契約書に別途定めがない限り、ワーキングファイルはクライアントのものだ。デザイナーが応答しない場合は、Brainy にロゴをリデザインしてもらって今度は全ファイルを正しく手に入れよう。

ロゴは RGB か CMYK か、どちらにすべきですか?

スクリーン用は RGB、印刷用は CMYK。プロファイル間の色の変化は現実に起きるため、物理的な印刷物に向かうものはすべて校正しよう。印刷用の PDF と EPS は、取引先が別途指示しない限り CMYK にすること。

SVG はメール署名で機能しますか?

ほぼダメ。Gmail、Outlook、Apple Mail は SVG の処理が一貫しておらず、一部のクライアントは完全に削除する。メール署名には PNG を使おう。2x 解像度で幅 200px が信頼できるベースラインだ。

刺繍店にはどの形式が必要ですか?

マシンはデジタイザーがあなたのアートワークから作成するステッチ形式 (DST、PES) で動く。正確にトレースして変換できるよう、EPS か AI でベクターロゴを店に渡すこと。絶対に PNG を刺繍業者に送らないこと。

最初から正しい形式を送ろう

ウェブサイトには SVG。フォールバックは PNG。印刷には PDF。

将来の編集には AI。レガシーな取引先が求める場合は EPS。ファビコンはリサイズではなく独立したマークとしてデザイン。フルキットはラベル付きで構造化し、一度納品して永遠に参照される。

あらゆるタッチポイントで洗練されて見えるブランドは、より良いロゴを使っているわけじゃない。あらゆる表面に正しいファイルを使っているだけだ。

より実践的なブランドガイドは Brainy Papers ライブラリ全体を参照しよう。ロゴシステムを正しく構築して納品してほしいなら、Brainy にロゴをデザインしてもらおう。