PerfectVector
著者: Claire Yoon

ロゴはどのファイル形式で用意する?用途別に選ぶ実用ガイド

ウェブ、印刷、刺繍、業者への納品に使うロゴ形式を1つの表で整理します。PNGしかない場合に、編集可能なベクターマスターを復元する方法も説明します。

2 分で読める
目次

ロゴに使う正しいファイル形式は1つではありません。使用先と受け取る側の公開要件によって決まります。ウェブサイトはSVG、印刷業者はPDF、EPS、AI、SNSは通常ラスター作品を求めます。重要なのは、編集可能なベクターマスターを1つ保管し、必要に応じて検証した納品用コピーを書き出すことです。

ベクターマスターに編集可能な文字が含まれるなら、フォント情報をそこで保持し、アウトライン化した納品用コピーを作ります。SVGのフォント置き換えガイドで、文字を編集可能なまま残す場合とパスに変える場合を説明しています。

このガイドでは、よくある形式一覧が省きがちな2点を扱います。用途ごとに明確な答えを示すこと、そして保管すべきマスター自体が存在しない場合の対処です。

時間がない方へ:用途に形式を合わせる
  • ウェブサイト、アプリ、メール署名: プラットフォームが許可するならSVG、しないならPNG。
  • 印刷、看板、グッズ、印刷会社から「ベクター」を求められた場合: EPSまたは印刷用PDF。看板店から依頼された場合には専用の説明もあります。
  • SNSのアバターや投稿: 透明な背景の高解像度PNG。
  • 編集やバリエーション制作: 元ファイル(AI、またはレイヤー付きSVG/EPS)。
  • PNGしかなく、ベクターを求められた場合: 復元が必要です。後で説明します。

最初に理解する違い:ベクターとラスター

ロゴの形式は2種類に分かれます。この違いが分かれば、後は簡単です。

ベクターファイルは、固定のピクセル格子ではなく、パスや図形で作品を保存します。そのため、形状を拡大してもピクセルは見えません。Adobeのラスターとベクターの概要は、一般的なベクター形式としてAI、EPS、SVG、CDR、PDFを挙げる一方、実際の文書ではベクターとラスターが混在する場合があると説明しています。

ラスターファイルは、ピクセルの格子として保存します。保存したサイズでは鮮明でも、それを超えると四角く見えます。すぐ使えるデジタル画像で、PNG、JPG、WebPが当てはまります。

ベクターとラスター
左は鮮明に拡大できるベクターロゴ、右は拡大するとピクセルが分かれて見えるラスターのロゴ
同じロゴでも、ベクターはどのサイズでも鮮明です。ラスターは解像度を超えて拡大すると粗くなります。

この区別で、日常的なロゴの問題の多くを説明できます。粗く見えるロゴは、ラスターをピクセル寸法に見合う範囲を超えて引き伸ばしている場合がよくあります。Adobeの現在の形式ドキュメントは、JPEGを非可逆、PNGを透明部分に対応する可逆形式と説明しています。業者にファイルを断られる理由は、色、フォント、塗り足し、アプリ固有の要件の場合もあるため、正確な仕様を確認してください。

主な形式を簡単に整理

よく使うのは6つです。

形式種類適した用途向かない用途
SVGベクターウェブサイト、アプリ、ファビコン一部の印刷業者は受け付けない
EPSベクター従来の印刷や、指定する業者の作業通常のウェブ配信
AIベクター編集可能な原本・マスター共有やアップロード(Illustratorが必要)
PDFベクターまたはラスター印刷会社への送付、環境を問わない共有ウェブ利用。本当にベクターか確認する
PNGラスターウェブ、SNS、メール、透明な配置印刷、大きなサイズ、拡大
JPGラスター手軽なプレビュー、背景を気にしないメールロゴ全般(透明不可、非可逆)

仕様一覧では省かれがちな注意点が2つあります。PDFは保存方法によってベクターにもラスターにもなるため、「PDFがある」だけでは使えるマスターがあるとは限りません。また、AIとEPSは自分で開けなくても残す形式です。ほかの形式をそこから書き出せるためです。

EPSの拡張子も、中のすべてのオブジェクトがベクターである証拠ではありません。業者に疑問を持たれたら、再送する前にEPSが本物のパスか埋め込み画像かを確認してください。

用途ごとに選ぶ形式

形式の説明に埋もれがちな実用部分です。ファイルではなく、やりたいことから考えます。

用途使う形式補足
ウェブサイトのロゴSVG小さく、どの画面でも鮮明。CMSが拒否するなら高解像度PNG
ファビコンSVGまたはPNGのセット最近のブラウザーはSVG、古いものは各サイズのPNG
メール署名PNG透明な背景、固定の表示サイズ
SNSプロフィールと投稿PNG高解像度、透明。圧縮されるため大きめにアップロード
名刺、チラシ、印刷業者指定のPDF、EPS、AI色、塗り足し、フォント、PDFプリセットの要件に従う
看板、バナー、車両ラッピングEPSまたはPDF品質を落とさず、どのサイズにも拡大可能
Tシャツやグッズ(シルクスクリーン)EPSまたはAIインクの色ごとに1つのベクターレイヤー
刺繍業者指定の原本から、ステッチファイルへ機械用に刺繍データ化が必要。受け付ける原本は業者による
レーザーカットやカッティングシートSVGなどのベクター機械がたどれる閉じたベクターパス
ロゴの編集や別版の制作AIまたはレイヤー付きSVG/EPS平坦化したラスターではなく、必ずマスターを編集

業者が単に「ベクターで」と言ったら、受け付ける形式と設定を聞いてください。ウェブサイトがSVGに対応していれば、通常は最も柔軟なロゴ納品形式です。SVGを拒否するプラットフォームではPNGを使います。

細かな構成と小さなマークの両方が必要なサイトでは、レスポンシブSVGロゴの組み合わせを用意し、ブラウザーがどの原本を選ぶか試してください。形式をSVGにするだけで、文字が消えたり、切り替え幅が選ばれたりするわけではありません。

刺繍は特に業者依存です。たとえばPrintfulは、外部で刺繍データ化したファイルを受け付けず、自社チームがデータ化するための高解像度透明PNGを推奨しています。別の刺繍店はAI、PDF、機械用ステッチ形式を求めるかもしれません。一般的なロゴ形式表より、業者の仕様を優先してください。

エナメルピンでは、拡張子だけで選ばず、ピン製造業者向けのベクター作品を準備します。フラットなPNGやJPGしか残っていなければ、エナメルピン作品の変換ツールで編集可能な図形を作り、業者の校正を頼む前に確認できます。

織りネームでは、寸法付きのロゴ校正を準備し、見える面と折り返し・縫い代を分けて、選んだメーカーが受け付ける形式に書き出してください。

PNGしかない場合にすること

形式ガイドがあまり触れないのに、最もよくある状況です。AIやEPSのマスターがありません。何年も前に作られたのか、Canvaなのか、PNGだけを出すAIロゴメーカーで生成したのか、古いサイトから誰かが取ったファイルなのかもしれません。印刷会社やグッズ業者にベクターを求められても、最初から持っていない人に「マスターを大切に保存する」と言っても役立ちません。

唯一残ったものが古いWindowsアイコンなら、ICOから編集可能なSVGを復元する手順から始めます。ICOには、見えているファビコンサイズのプレビューより大きな画像が含まれる場合があります。

解決策は2つです。ベクターを作り直すか、復元します。

作り直すとは、デザイナーや自分がロゴを最初からベクターで描き直すことです。これが唯一の方法と書かれることもあります。よくある説明では、ラスターのロゴを自動でベクターにすることはできず、「PNGからSVG」を約束するツールはすべて偽物だとまで言います。半分は正しいのですが、間違っている半分が重要です。

悪い変換ツールへの警告は本当です。PNGをSVGファイルで包むだけのものがあります。拡張子が.svgでも、実体はピクセルのままで、拡大すればすぐぼやけます。これが避けるべき「偽ベクター」です。開いて拡大し、輪郭が四角くなるなら、ベクターではなく埋め込みです。

印刷会社からJPGをEPSにするよう求められた場合も同じです。送る前に、EPSが本物のパスを含むか確認してください。

一方、本物のAIベクター化ツールは包むのではなく、トレースします。デザイナーが描くような実際の編集可能なベクターパスとしてロゴを再構築し、きれいに拡大でき、Illustrator、Figma、Inkscapeで開けます。通常はフラットな図形と明確な輪郭を持つロゴなら、復元に向いており、午後いっぱい描き直す代わりに数秒で済みます。作り直すべきか復元すべきかは、ラスターのきれいさとマークの複雑さによります。ロゴをベクター化する方法で、その判断を説明しています。

PerfectVectorでの例

ラスターのロゴから始め、業者がベクターを必要としているなら、PerfectVectorはその復元向けです。ロゴをきれいでノードの少ないベクターパスに再構築し、ウェブ用SVGとして書き出したり、印刷会社に渡したりできます。パスが本物なので、PNGをSVGで包んだものではなく、編集可能なマスターが得られます。

復元前
低解像度PNGだけが残るロゴを拡大し、柔らかくピクセルの見える輪郭を示した例
手元にあるのは、柔らかく粗い輪郭を持つラスターのPNGだけです。
復元後
同じロゴをPerfectVectorが編集可能なきれいなベクターに復元し、滑らかでノードの少ないパスを示した例
きれいで編集可能なベクターパスに復元でき、必要な形式へ書き出せます。

PNGロゴを本物のベクターにし、自分でパスを確認できます。ロゴ以外には一般の画像ベクター変換ツールを使ってください。クレジットカードなしで、最初の画像を無料変換できます。きれいなベクターができれば、形式ガイドが最初から想定していた簡単な状態になります。マスターは1つ、ほかの形式はすぐに書き出せます。

知っておきたい限界

  • ベクター化の品質は入力ラスターに左右されます。 鮮明でコントラストの高いロゴはきれいに復元できます。小さい、ぼやけた、強く圧縮されたJPGには、デザイナーの手作業が必要な場合があります。
  • 写真調やグラデーションの多いロゴは向きません。 マークが写真や複雑なグラデーションイラストなら、ラスターのまま保ち、高解像度PNGを使います。
  • 復元してもピクセル単位で同一とは限りません。 ベクター化は忠実に形を再構築しますが、すべての曲線が完全一致しなければならない商標では、デザイナーに原本と照合してもらってください。
  • 1形式で何でもできるわけではありません。 印刷に同じPNG、ウェブに同じEPSを使い回さず、マスターを残し、用途ごとに書き出します。

よくある質問

ロゴに最も適したファイル形式は何ですか? 1つの最適形式はなく、用途によります。編集可能なベクターマスターを残し、検証した納品用コピーを書き出します。対応サイトにはSVG、印刷会社には正確なPDF/EPS/AI仕様、ラスター専用プラットフォームには適切なサイズのPNGです。「ベクター」と言われたら、形式、色空間、フォント、書き出しプリセットを確認してください。

ロゴはPNGとSVGのどちらにすべきですか? ウェブサイトでは、対応していればSVGです。どのサイズでも鮮明で、読み込みも速いためです。SVGが使えない場合、SNSやメール署名には、透明な背景と固定サイズが適したPNGを使います。SVGはベクター、PNGはラスターです。

ロゴにはPNGとJPGのどちらが適していますか? ほとんどの場合PNGです。透明な背景に対応するので、どの色の上にもきれいに置け、圧縮で輪郭を鮮明に保ちます。JPGは透明にできず、ロゴの背後の白い四角の原因になり、非可逆圧縮で輪郭も柔らかくなります。背景を気にしない簡単なプレビューだけに使ってください。

PNGのロゴをベクター(SVGやEPS)にできますか? はい。本物のベクター化ツールを使います。PNGをSVGに埋め込むだけでは本当に拡大できないため、そうした変換ツールを避けてください。本物のAIツールはロゴを編集可能なパスにトレースし、SVG、EPS、PDFへ書き出せます。きれいでフラットなロゴが最も適し、極端な低解像度や写真調のロゴは、デザイナーの描き直しが必要な場合があります。

デザイナーにどのロゴファイルを頼むべきですか? 編集可能なベクターマスター、適切な場合はアウトライン化した納品用コピー、実際の媒体ですぐ使える書き出しを依頼します。一般にはデジタル用のSVGと透明PNG、印刷業者指定のPDF/EPS/AIです。色違いとフォント・ライセンス情報も依頼してください。平坦化やアウトライン化したコピーを配布しても、編集可能なマスターは残します。

出典

  1. W3C:SVG 2:SVGのベクター、テキスト、ラスター画像のコンテンツモデルです。
  2. Adobe:Photoshopの画像の基本:ラスターとベクターの違い、一般的なベクター形式です。
  3. Adobe:Photoshopで対応する画像形式:JPEGとPNGの圧縮、透明部分の動作です。
  4. Printful:自分の刺繍データファイルを使えますか?:PNGを受け付け、自社で刺繍データ化する業者固有の例です。
  5. Printful:刺繍データ化とは?:原作品を機械で読めるステッチデータに変換する説明です。
  6. W3C:SVGの埋め込みコンテンツ:SVGにもラスター画像データが含まれるため、確認が必要な理由です。

形式の問題は2段階で考えられます。ベクターマスターがあれば、上の表で用途に形式を合わせれば済みます。なければ、先にベクターを復元し、その後は簡単に書き出せます。どちらの場合も、保管するロゴは編集可能なものにしてください。

ブログのその他の記事

PerfectVector

ロゴやアートワークを
きれいで編集可能なSVGに変換

クレジットカード不要