ロゴのデータ形式は、編集用にai、Webにsvgとpng、印刷にpdfを使い分けるのが基本です。ai・svg・pngの違いは、拡大したときに荒れないベクター形式か、画素の集まりであるラスター形式かという点にあります。この記事では、各形式の特徴と使い道、納品や共有のときにそろえておきたいファイルの組み合わせを、制作会社の運用に沿って整理します。

ロゴを自分で作る手順はロゴを自分で作る手順、納品データの全体像は選ばれるロゴデザインのコツでも触れています。この記事では、形式そのものの違いと使い分けに絞って説明します。

ロゴのデータ形式は「ベクター」と「ラスター」の2種類に分かれます

ロゴのデータは、ベクターとラスターの2種類に大きく分かれます。この違いを理解しておくと、どの形式をいつ使うか迷わなくなります。

ベクター形式｜拡大しても荒れない

ベクター形式は、点と線の位置、曲線の形、色を数式として持つデータです。どれだけ拡大しても、線がぼやけたり、ギザギザになったりしません。ai、svg、pdf、epsが代表的な形式です。ロゴの元データは、ベクター形式で保管するのが基本です。

ラスター形式｜画素の集まりで、拡大すると荒れる

ラスター形式は、小さな点（ピクセル）の集まりで絵を表すデータです。png、jpg、webpなどが該当します。作成したサイズより大きく拡大すると、輪郭がぼやけます。そのため、使う大きさに合わせて、複数のサイズを書き出して使います。

ai形式｜編集用の元データです

ai形式は、Adobe Illustratorの標準の保存形式で、ロゴの編集用の元データとして保管します。この形式がないと、ロゴの形や色を後から正確に直すことができません。

ai形式でできること。パスの形、色、レイヤーの構造がそのまま残るため、色の変更、文字の差し替え、縦型・横型の作り直しが可能です。制作会社や印刷会社に渡すときも、ai形式があれば、細かな調整を依頼できます。

aiファイルを渡すときの確認

文字は、アウトライン化してから保存します。アウトライン化していないと、フォントが入っていない環境でファイルを開いたときに、別のフォントに置き換わります。リンク配置した画像を使っている場合は、画像も一緒に渡す必要があります。

Illustratorがない相手にはpdfも添える。Illustratorを持っていない相手には、aiファイルを渡しても開けないことがあります。その場合は、後述するpdfを添えて渡します。aiファイルは、保存時に「PDF互換ファイルを作成」を選んでおくと、他のソフトでも内容を確認しやすくなります。

svg形式｜Webで使うベクターデータです

svg形式は、Webサイトで使うベクター形式です。拡大しても荒れず、ファイルサイズも小さく済むため、Webサイトのロゴでは第一候補になります。

svgが向いている場面

Webサイトのヘッダーのロゴ、高解像度のディスプレイでの表示、ロゴの色をCSSで変えたい場面に向いています。ロゴの大きさが画面によって変わるサイトでも、同じデータで対応できます。

svgを書き出すときの注意

文字はアウトライン化してから書き出します。アウトライン化しないと、閲覧者の環境にフォントがない場合に、表示が崩れます。また、不要なレイヤーや隠れたパスは削除しておきます。

svgが使えない場面もある。メールのロゴ、SNSのプロフィール画像、Officeの一部の古いバージョンなどでは、svgが正しく表示されないことがあります。そのような場面では、次に説明するpngを使います。

png形式｜背景を透明にできるラスターデータです

png形式は、背景を透明にして保存できるラスター形式で、ロゴの画像形式として最もよく使われます。写真の上や色のついた背景にロゴを重ねるときに、必要になる形式です。

pngが向いている場面

メールの署名、SNSのプロフィール画像、スライド資料、Webサイトのsvgが使えない部分に向いています。背景が透明なので、どんな色の上にも重ねられます。

サイズは用途に合わせて複数用意する。pngは拡大に弱いため、1つの大きなデータだけでなく、使う場面に合わせたサイズを用意します。横幅1000pxや2000px程度の大きいものと、500px程度の中くらいのもの、正方形の小さなアイコン用の3種類があると、たいていの場面に対応できます。

透過pngと背景色つきpngを分ける。透過pngは、背景と合わせて使うときに便利ですが、SNSによっては透明部分が黒く表示されることがあります。そのような場合に備えて、白背景のpngも用意しておくと確実です。

pdf形式｜印刷や書類で使うデータです

pdf形式は、印刷会社への入稿や、書類の共有に使う形式です。ベクターデータを保持したまま、Illustratorがない環境でも開けます。

pdfが向いている場面

印刷会社に入稿するとき、取引先にロゴを共有するとき、Illustratorを持っていない相手にロゴを確認してもらうときに向いています。拡大しても荒れず、開ける環境も多いことが利点です。

書き出すときの確認。フォントは、アウトライン化するか、埋め込みます。色の設定は、印刷用ならCMYKで書き出します。印刷会社によって入稿の条件が決まっているため、指定がある場合はその条件に合わせて書き出します。

epsは古い印刷環境向けに用意する。eps形式は、古い印刷環境や一部のソフトで使われる形式です。最近のpdfで対応できる場面が多いため、特に指定がなければ作らなくても構いません。印刷会社やソフトから求められたときに書き出します。

jpg・webpの扱いと、用途別の使い分け早見表

jpgとwebpは写真向けの圧縮形式のため、ロゴの標準形式にはしません。用途ごとの使い分けは、次の表のとおりです。迷ったときは、この表を見て選びます。

jpgは透明にできず、輪郭が荒れやすい

jpgは、背景を透明にできません。また、保存のたびに画質が落ち、輪郭の周りにノイズが出ることがあります。ロゴの画像として配布するのは避けます。ただし、白背景の上に置くことが決まっている資料では、jpgを求められる場面もあります。

webpはWebサイトの表示を軽くしたいときに使う

webpは、Webサイトの表示速度を上げたいときに使われる形式で、透明にも対応しています。ただし、ロゴの元データやメールで渡すデータとしては、pngやsvgのほうが安全です。

ファビコンとSNSアイコンは正方形を用意する。ブラウザのタブに表示されるファビコンや、SNSのアイコンは正方形で表示されます。横長のロゴをそのまま入れると、小さくなりすぎるため、マークだけを抜き出した正方形の版を用意します。

OGP画像は別に作る。SNSで共有したときに表示されるOGP画像は、一般的に横1200px、縦630pxの比率が使われます。ロゴを使う場合は、ロゴのデータをそのまま使わず、この比率の画像の中に収めます。

納品や共有でそろえるファイルのセット

ロゴを納品したり、他の会社に共有したりするときは、形式、色の版、レイアウトの版の組み合わせでファイルをそろえます。後から「このデータがない」とならないよう、はじめにセットで用意します。

色の版を3種類そろえる

フルカラー、黒1色、白抜き（反転）の3種類を用意します。背景の色が変わる場面や、1色印刷の場面でも、困りません。

レイアウトの版をそろえる

ロゴが、マークと文字を組み合わせたものなら、横型、縦型、マークのみ、文字のみの版を用意します。使える場所の形が決まっている場面でも、無理なく置けます。

フォルダとファイル名のルール

形式ごとにフォルダを分けて、ファイル名に版の違いが分かる言葉を入れます。たとえば、logo_color_horizontal.svg、logo_black_vertical.pngのように、ロゴ名・色・レイアウトの順に並べます。

ロゴの使い方の注意をまとめた1枚を添える。余白の取り方、最小サイズ、やってはいけない使い方（変形、色の変更）を1枚にまとめて添えます。ガイドがあると、後から他の人が使うときに、ロゴの見た目が崩れにくくなります。

よくあるトラブルと対処

データ形式のトラブルは、形式の選び間違いと、書き出し時の設定漏れがほとんどです。症状ごとに、確認する点をまとめます。

拡大するとぼやける

ラスター形式のデータを、作成サイズより大きく使っている可能性があります。ベクター形式のデータから、必要なサイズで書き出し直します。

背景が白く残る

jpgで保存したか、pngでも透過の設定をせずに書き出した可能性があります。png書き出しの設定で、背景が透明になっているかを確認します。

フォントが変わって表示される

文字のアウトライン化を忘れた可能性があります。文字をアウトライン化してから、書き出し直します。

印刷すると色が違う

RGBのデータを、そのまま印刷に使った可能性があります。CMYKに変換したpdfを書き出し、印刷会社の指示に合わせて確認します。色の決め方はロゴの色の決め方で説明しています。

デザインの腕試しに「ロゴデザインバトル」

作ったロゴの見え方を確かめたいときは、当社の「ロゴデザインバトル」が使えます。2つのロゴから好きなほうを選ぶゲームです。

ロゴデザインバトルとは

ロゴ2点を並べて、好きなほうを選びます。投票の結果から順位が出ます。他の人のロゴを見比べると、自分の目の傾向が分かります。無料で、会員登録なしで遊べます。

エントリーの流れ

エントリーは審査制で、公開前に当社で内容を確認します。ロゴは、白または透明以外の範囲を自動で検出して枠に収めます。そのため、透過pngでエントリーすると、ロゴ以外の余白が整理されて表示されます。本人は、受付時に表示される取り下げ用のURLから、いつでも削除できます。

ロゴデザインバトルにエントリーする／ロゴデザインバトルで投票してみる

よくある質問

Q. ロゴのデータは最低何種類あればよいですか？

最低限、ai、svg、png（透過）、pdfの4種類があると、ほとんどの場面に対応できます。

Q. pngしか手元にありません。どうすればよいですか？

pngだけの場合は、元のデータを作った制作会社に、ai形式を請求します。見つからない場合は、ロゴを描き起こし直すことになります。トレースで再現する方法もありますが、細部は作り直しが必要です。

Q. svgは、どのソフトで開けますか？

ブラウザで開けます。編集は、IllustratorやInkscapeなどのベクターを扱えるソフトで行います。

Q. 解像度は何dpiで書き出すべきですか？

印刷用のラスターデータは、一般的に350dpi程度が使われます。ただし、ロゴは基本的にベクターで渡すため、解像度を気にする場面は多くありません。

Q. 制作会社にロゴを頼んだとき、どのデータをもらえばよいですか？

ai、svg、png、pdfを、色の版とレイアウトの版でそろえてもらいます。あわせて、使用したフォントのライセンス情報も確認します。

Q. ロゴの形式で迷ったときは、どこに相談すればよいですか？

お問い合わせから受け付けています。

まとめ。ロゴのデータは、編集用のai、Webのsvgとpng、印刷のpdfを使い分けます。納品では、色の版とレイアウトの版をそろえ、形式ごとにフォルダを分けて整理します。