ホームページの制作を始めると、制作会社から「ロゴのデータをいただけますか。できれば AI か SVG で」と頼まれることがあります。社内を探すと、名刺の印刷用に作った古いファイルや、メールに貼られていた PNG の画像しか見つからない。AI・SVG・PNG がそれぞれ何を指すのかが分からないと、どのファイルを渡せばよいかも判断できません。

この記事は、ホームページの担当になった総務・広報・経営企画の方に向けて、ロゴのデータ形式の違いを「ベクター」と「ラスター」の2つに分けて説明します。あわせて、制作会社に渡すもののチェック表、ファビコン・OGP 画像・検索結果のロゴに必要なサイズ、データが見つからないときの対処をまとめます。

結論を先に書くと、制作会社には「元データ（AI、なければ PDF か EPS）」と「Web 用の SVG」「背景が透明な PNG」をそろえて渡すのが基本です。元データが無い場合も、手元の画像と色の情報を集めれば、描き直しを含めて進め方を決められます。形式の仕様や要件は、2026年11月時点で W3C・MDN・Google などの公式情報で確認した内容です。

ロゴのデータは「ベクター」と「ラスター」の2種類

画像のデータは、大きく分けてベクター形式とラスター形式があります。ベクター形式は、線や面を「どこからどこへ、どんな色で描くか」という図形の情報として記録します。表示するたびに図形を描き直すため、名刺の小さなロゴから看板の大きなロゴまで、同じデータで輪郭をぼやけさせずに使えます。AI・EPS・SVG がこちらの代表です。

ラスター形式（ビットマップ形式とも呼ばれます）は、画像を細かい点（ピクセル）の集まりとして記録します。写真の記録に向いていますが、元の大きさより拡大すると点が目立ち、輪郭がぼやけたりギザギザになったりします。PNG・JPEG・WebP がこちらです。

W3C の仕様では、SVG は XML をもとに2次元のベクター画像（ラスター画像との組み合わせを含む）を記述する言語と定義されています（W3C「Scalable Vector Graphics (SVG) 2」）。PNG は、ラスター画像を劣化させずに（可逆圧縮で）保存する形式で、透明度の情報（アルファチャンネル）を持てると定義されています（W3C「PNG Specification (Third Edition)」）。ロゴは「いろいろな大きさで使う」「写真や色の付いた背景に重ねる」ことが多いため、この2つの性質が形式の選び方に直結します。

注意したいのは、拡張子がベクターの形式でも、中身がラスター画像という場合があることです。たとえば、PNG の画像を Illustrator に貼り付けて AI 形式で保存しても、ロゴの部分は点の集まりのままです。受け取った元データを拡大して、輪郭がなめらかなままかを確かめると見分けられます。

形式ごとの違いと用途の一覧

ロゴのやり取りでよく出てくる形式を、種類・特徴・使い道の順に整理しました。「渡すかどうか」の列は、ホームページ制作の場面での目安です。

形式（拡張子）	種類	主な特徴	主な使い道	制作会社に渡すか
AI（.ai）	ベクター	Adobe Illustrator の保存形式。編集できる状態でデザインの情報を保つ	ロゴの元データ。修正や色違いの作成	渡す（あれば最優先）
EPS（.eps）	ベクター（作り方による）	Illustrator が保存できる形式の一つ。以前に作ったロゴのデータで見かけることがある	元データの代わり、印刷物	AI が無ければ渡す
PDF（.pdf）	ベクターまたはラスター（作り方による）	Illustrator から保存できる形式の一つ。多くのパソコンで開いて確認できる	元データの代わり、確認用	AI が無ければ渡す
SVG（.svg）	ベクター	W3C の形式。XML（テキスト）で図形を記述し、どの大きさでも輪郭がぼやけない	ホームページでのロゴ表示	渡す（作れる場合）
PNG（.png）	ラスター	可逆圧縮で劣化しない。背景を透明にできる	ホームページ・資料・SNS、ファビコンや OGP 画像の素材	渡す（大きめのサイズで）
JPEG（.jpg）	ラスター	非可逆圧縮。背景を透明にできない。写真向き	写真。ロゴには向かない	他に無い場合だけ
WebP（.webp）	ラスター	可逆・非可逆を選べ、背景を透明にできる	ホームページの表示を軽くする	不要（必要なら制作会社が書き出す）
ICO（.ico）	ラスター	複数の大きさのアイコンを1つのファイルに入れられる	ファビコン	不要（制作会社が作る）

MDN の画像形式のガイドは、スクリーンショット・図・ロゴ・線画には可逆圧縮を選ぶよう勧めています。文字や鋭い輪郭のまわりのにじみが目立ちやすいためです。また、JPEG は非可逆でアルファチャンネルを持たないため、透明な背景が必要な画像には PNG を使うこと、いろいろな大きさで正確に描く必要がある図には SVG を使うことも書かれています（MDN「Image file type and format guide」）。ロゴを JPEG で渡すと、文字のまわりがにじんだり、白い四角の背景が付いたままになったりするのはこのためです。

AI 形式は、Adobe の説明では編集のしやすさとデザインの情報を保つための形式です（Adobe「Save artwork in Illustrator AI format」）。Adobe の対応形式の一覧では、Illustrator は AI・PDF・EPS・SVG で保存でき、PNG・JPEG・WebP などに書き出せるとされています（Adobe「Supported file formats for Illustrator」）。つまり AI のデータが1つあれば、ほかの形式は後から作れます。逆に PNG や JPEG から AI や SVG を作ることはできず、描き直しが必要です。写真を中心とした画像の形式の使い分けは「ホームページの画像を軽くする方法」で説明しています。

Service

コーポレートサイト制作のご相談はフェニックスデザインへ

ナレッジベースを運営するフェニックスデザインが、今のサイトの数字を見るところから対応します。URLを入れるだけの無料簡易診断から。

無料で簡易診断コーポレートサイト制作のサービスを見る

ホームページ制作で制作会社に渡すもの

ロゴのファイルだけを渡しても、制作の途中で「白抜きの版はありますか」「画面で使う色の指定は決まっていますか」と確認が入ることがあります。最初にまとめて渡せるよう、次の表で社内の手持ちを確かめておくと、やり取りの回数を減らせます。

渡すもの	内容	確認のポイント
元データ	AI。無ければ PDF・EPS	拡大しても輪郭がなめらかか。文字が図形に変換（アウトライン化）されているか
Web 用のデータ	SVG と、背景が透明な PNG	PNG は表示する大きさより大きめに書き出したものか
形のバリエーション	横組み・縦組み、シンボルマークだけ、社名の文字（ロゴタイプ）だけ	ファビコンに使える正方形に近い形があるか
色のバリエーション	カラー、白抜き（暗い背景用）、黒一色	写真や濃い色の上に置く場面で使える版があるか
色の指定	画面用のカラーコード（#から始まる英数字）や RGB の値、印刷用の CMYK や特色の番号	画面用の色が決まっているか。印刷用の指定しか無い場合は制作会社と決める
使用規定	ロゴのまわりに空ける余白、最小の大きさ、してはいけない使い方（変形・色の変更など）	規定が無ければ、制作の初めに最低限を決めておく
書体の情報	ロゴタイプや社名の表記に使った書体の名前	見出しの書体をロゴに合わせたい場合に必要
作成の経緯	作成者・作成した会社、契約で決めた権利の扱い、商標登録の有無	手を加えてよいか、誰に確認すればよいか

元データの確認で特に見ておきたいのが、文字のアウトライン化です。ロゴの文字がフォントのデータのまま保存されていると、そのフォントが入っていないパソコンで開いたときに、別の書体に置き換わって表示される場合があります。社内で判断できなければ、データを作ったデザイナーか制作会社に「文字はアウトライン化されていますか」と聞けば確かめられます。

色の指定は、名刺や封筒の印刷のために CMYK や特色で決めていても、画面用の値は決めていない会社もあります。画面と印刷では色の表し方が違うため、同じ数値をそのまま使えるとは限りません。画面用の色を新しく決める場合は、印刷物と並べて見比べ、社内の決裁者に確認してから使い始めます。

データの受け渡しは、メールの添付よりも、置き場所を1つ決めて共有する方法が向いています。共有の方法と保管のルールは「制作会社とのデータ受け渡し」を、ロゴ以外に用意する原稿の分担は「ホームページの原稿の書き方」を参考にしてください。

ファビコン・OGP 画像・検索結果のロゴに必要なサイズ

ロゴはサイトのヘッダーだけでなく、ブラウザのタブや検索結果に出る小さなアイコン（ファビコン）、SNS でページが共有されたときの画像（OGP 画像）、Google の検索結果やナレッジパネルのロゴにも使われます。それぞれ求められる形や大きさが違うため、1つのロゴ画像を使い回すのではなく、用途ごとに作り分けます。

用途	公式の要件・推奨（2026年11月時点）	ロゴから作るときの注意
ファビコン（Google 検索の結果に出るもの）	正方形（縦横比 1:1）で 8×8 ピクセル以上。48×48 ピクセルより大きいものを推奨。対応形式は BMP・GIF・ICO・PNG・JPEG・PPM・TIFF	横長のロゴは縮小すると読めない。シンボルマークや頭文字だけの正方形の版を用意する
OGP 画像（og:image）	Open Graph protocol では og:title・og:type・og:image・og:url の4つが必須のプロパティ。画像の大きさの決まりは書かれていない	og:image を指定するなら、画像の内容を説明する og:image:alt も指定するよう書かれている
OGP 画像（Facebook で共有されたとき）	最小 200×200 ピクセル、ファイルは 8MB 以下。1200×630 ピクセル以上を推奨し、縦横比は 1.91:1 に近づける	ロゴだけを載せる場合は、横長の画像の中央に、上下左右へ余白をとって配置する
検索結果・ナレッジパネルのロゴ（構造化データ Organization の logo）	112×112 ピクセル以上。クロールとインデックス登録ができる URL。形式は Google 画像検索が対応するもの（BMP・GIF・JPEG・PNG・WebP・SVG・AVIF）	背景を白にしても意図どおりに見えるかを確かめる（白やグレーが多いロゴは見えにくくなる）

ファビコンの要件は Google 検索セントラルの「検索結果に表示されるファビコンを定義する」によるものです。同じページでは、ファビコンはホスト名ごとに1つで、トップページの <link rel=”icon”> などで指定すること、URL を頻繁に変えないことも求めています。rel には icon のほか apple-touch-icon（iOS 端末向けのアイコン）も使えると書かれています。Google 検索の対応形式に SVG は含まれていないため、ブラウザのタブ用に SVG のファビコンを使う場合も、PNG などの版をあわせて用意しておくと検索結果の要件を満たせます。複数の <link rel=”icon”> を書いた場合、ブラウザは type や sizes などの属性を見て合うものを選びます（MDN「HTML attribute: rel」）。

OGP の必須プロパティと og:image:alt の扱いは The Open Graph protocol（ogp.me）に、Facebook での画像の要件は Meta の開発者向け資料「Images in Link Shares」に書かれています。ほかの SNS も OGP を読み取りますが、表示の仕方はサービスごとに違うため、公開前に実際に共有して確かめます。

検索結果のロゴの要件は、Google 検索セントラルの「組織（Organization）の構造化データ」の logo の項にあります。対応する画像形式は「Google 画像検索のベストプラクティス」に一覧があります。構造化データの書き方は「構造化データOrganizationの書き方」で、公開前にファビコンと OGP を確認する手順は「ホームページ公開前チェックリスト」で説明しています。

SVG のロゴをホームページで使うときの注意

SVG はどの大きさでも輪郭がぼやけないため、ヘッダーのロゴに向いています。一方で、SVG はテキストで書かれたデータで、W3C の仕様ではスクリプト（プログラム）を使って操作に反応する内容を作れることも定められています（W3C SVG 2）。このため、外部から受け取った SVG をそのまま管理画面からアップロードできるようにすると、安全面の確認が必要になります。

WordPress は、2026年11月時点でも標準の設定では SVG をメディアとしてアップロードできません。SVG を標準で許可するかどうかは WordPress の開発者の間で議論が続いており、埋め込まれたスクリプトの危険が理由として挙げられています（WordPress Trac「#24251」）。ロゴの SVG はテーマのファイルとして制作会社に組み込んでもらうか、プラグインなどで許可する場合は中身を確認する方法を制作会社と決めておきます。

もう一つは、ロゴの画像に付ける代わりのテキスト（alt 属性）です。W3C のアクセシビリティの解説では、トップページへのリンクになっているロゴの代わりのテキストは「Example.com のロゴ」ではなく「Example.com ホームページ」のように、リンク先が分かる内容にする例が示されています（W3C WAI「Functional Images」）。社名の表記ゆれが起きないよう、alt の文言も社内で決めた正式な表記にそろえます。

ロゴのデータが見つからないときの対処

ロゴを作った時期が古い、担当者が退職した、作った会社と連絡が取れない、といった理由で元データが見つからないことがあります。次の順番で探すと、むだな作り直しを避けられます。

社内の保管場所を探す：共有フォルダ、過去のメールの添付、会社案内やパンフレットを作ったときの入稿データを確認します。今のホームページのサーバーに SVG や大きな PNG が置かれていることもあります。
作った人・会社に問い合わせる：ロゴを作ったデザイナー、名刺・封筒・看板を作った印刷会社、前の制作会社に、元データを持っていないかを聞きます。
契約を確認する：ロゴの制作を外部に頼んだ場合は、データの納品と権利の扱いを契約書で確認します。考え方は「ホームページ制作の契約書で確認すること」で説明しています。
手元の画像から描き直す：大きめの画像や鮮明な印刷物があれば、デザイナーがベクター形式で描き直す（トレースする）方法があります。細部の形や文字の間隔が元と違わないかを、社内で並べて確認します。
色を確かめる：描き直す場合は、色の指定も合わせて決め直します。印刷物の色見本や看板の色を手がかりにします。

描き直しは、デザインを変えないつもりでも、元のロゴを作った人との契約によって権利の扱いが変わる場合があります。元の作成者が分かっているなら、まず相談するのが確実です。判断に迷う場合は、最終的に弁護士に確認してください。

元データが無いことをきっかけに、ロゴそのものを作り直すかを考える会社もあります。ただし、ロゴの変更は名刺・看板・書類まで影響が広く、ロゴを変えるだけでは問い合わせは増えません。作り直すかどうかの考え方は「中小企業ブランディングの5つの誤解」が参考になります。

ロゴのデータを社内で管理する方法

一度そろえたロゴのデータは、次のリニューアルや印刷物の発注でも使います。担当者が代わっても探せるよう、置き場所とファイル名のルールを決めておきます。

置き場所を1つにする：会社の共有フォルダやクラウドストレージに「ロゴ」のフォルダを作り、個人のパソコンやメールに分散させない。
用途でフォルダを分ける：「元データ」「Web 用（SVG・PNG）」「印刷用」「ファビコン・OGP」「使用規定」のように分ける。
ファイル名で中身が分かるようにする：「社名_logo_横組み_カラー.svg」のように、形・色・形式を入れる。
作成の経緯を残す：作った人・会社、作った年、契約書の保管場所を1枚のメモにまとめて同じフォルダに置く。
納品物を受け取る：ホームページの公開時に、制作会社が作ったファビコン・OGP 画像・Web 用のロゴも受け取り、同じフォルダに加える。

ロゴのデータの確認からホームページの制作までまとめて相談したい場合は、当社のコーポレートサイト制作（ライト 600,000円〜、税別）でお受けしています。手元にある画像や印刷物だけの状態からでも、何を用意すればよいかを一緒に整理します。

よくあるご質問

PNG の画像しか無いのですが、ホームページは作れますか？

背景が透明で、表示する大きさより大きめの PNG があれば、ホームページに表示することはできます。ただし、拡大すると輪郭がぼやけるため、大きく見せる場所や印刷物には向きません。今後も使い続けるなら、描き直してベクター形式の元データを作っておくと安心です。

AI ファイルを開けるソフトが社内にありません。どうすればよいですか？

開けなくても、ファイルをそのまま制作会社に渡せば使ってもらえます。中身を社内で確認したい場合は、データを作ったデザイナーや制作会社に PDF か PNG で書き出してもらいます。Illustrator 以外のソフトで開ける場合もありますが、正しく表示されないことがあるため、確認用と考えてください。

ファビコンはロゴをそのまま縮小すればよいですか？

Google 検索のファビコンは正方形であることが条件で、表示も小さいため、横長のロゴをそのまま縮小すると読めなくなります。シンボルマークだけ、または頭文字だけの正方形の版を作り、48×48 ピクセルより大きいサイズで用意するのが Google の推奨に沿った方法です。

名刺とホームページで、ロゴの色が違って見えるのはなぜですか？

印刷はインクの色の組み合わせ（CMYK など）、画面は光の色の組み合わせ（RGB）で色を表すため、同じ色に見せるには別々に値を決める必要があります。画面の設定や紙の種類でも見え方は変わります。画面用の色の値を決め、印刷物と並べて確認したうえで社内の基準にします。

SVG のロゴを WordPress にアップロードできません。

WordPress は標準の設定では SVG のアップロードを受け付けません。不具合ではなく、安全面を理由とした仕様です。テーマのファイルとして組み込む方法と、プラグインなどで許可して中身を確認する方法があるため、サイトの保守を担当している制作会社に相談してください。

まとめ

ロゴのデータは、拡大してもぼやけないベクター形式（AI・EPS・SVG）と、点の集まりのラスター形式（PNG・JPEG・WebP）に分かれます。
制作会社には、元データ（AI、無ければ PDF・EPS）、Web 用の SVG、背景が透明な PNG を、形と色のバリエーション・色の指定・使用規定とあわせて渡します。
ファビコンは正方形で 48×48 ピクセルより大きいもの、Facebook の OGP 画像は 1200×630 ピクセル以上、検索結果のロゴは 112×112 ピクセル以上が、2026年11月時点の公式の推奨・要件です。
元データが無いときは、社内・作成者・契約の順に確認し、見つからなければ描き直しを検討します。権利の扱いに迷う場合は弁護士に確認します。
そろえたデータは置き場所とファイル名のルールを決めて、担当者が代わっても使えるように管理します。

フェニックスデザイン株式会社WEB制作会社が運営するナレッジベース編集部

コーポレートサイト・採用サイト・サービスサイトの制作と、公開後の運用保守・集客改善の現場で得た知見をもとに、発注する側の視点で記事を制作・更新しています。運営会社の所在地・事業内容は会社案内、制作の考え方はブランディング×マーケティング論をご覧ください。

この記事は 2026年11月11日に公開し、2026年11月11日に内容を確認・更新しました。

ロゴのデータ形式の違い：AI・SVG・PNGの使い分けと制作会社に渡すもの