【完全保存版】名刺・SNS・Webサイトに使えるロゴのサイズと形式

はじめに

「名刺に入れたロゴがぼやけた」「SNSアイコンにしたら切れてしまった」「Webのヘッダーでやたら大きく（小さく）見える」──これらはサイズと保存形式の選び方が原因で起こる定番の失敗です。印刷とWebでは考え方が異なり、用途ごとに“最適値”があります。本記事は完全初心者向けに、名刺・Web・SNSで失敗しないロゴの最適サイズと形式の選び方を、最初に結論、次に理由、最後に具体的なやり方とチェックまで一本道で解説します。

ロゴ運用の大原則（1分で分かる結論）

• 印刷物（名刺・パンフ）：ベクター形式のAI／EPS／PDFが基本。どうしても画像で渡すなら300dpi以上。
• Webサイト（ヘッダー／フッター）：まずはSVGが本命。画像が必要なら透過PNGを横幅250〜400px程度から調整。
• SNSアイコン：正方形PNG（目安400×400px前後）にロゴを中央配置。丸抜き想定で四隅に文字を置かない。
• 迷ったら：最低限 「PDF（印刷）＋PNG（透過）」 を確保。余裕があればSVGを足すと万能度が上がります。

基礎知識：解像度・拡張子・色モード

dpi / PPI：印刷はdpi、画面表示はPPI/pxが基準。印刷向けは高解像度、Webは無闇に大きくしない。

形式の役割

• AI/EPS/PDF：ベクター＝拡大縮小で劣化しない（印刷や多用途の“原本”）
• PNG：透過背景可、Web汎用。ロゴの白フチ問題（JPEGの白背景）を避けやすい。
• SVG：ベクターのままWebで表示可。可変レイアウトや高解像度端末で有利。

色モード：印刷＝CMYK、Web＝RGB。

ロゴサイズと形式が重要な理由

ロゴは単なるマークではなく、企業やブランドの信頼感を左右する大切な要素です。特に以下の理由から「サイズと形式」に注意が必要です。

• 印刷とWebでは基準が違う
  印刷は「dpi（解像度）」、Webは「px（ピクセル数）」が基準になります。印刷に72dpiの画像を使うと、ぼやけた仕上がりになります。
• 形式の選び方で使いやすさが変わる
  JPEGは背景を透過できないため、名刺やWebで不便。PNGやSVGを使えば透過や拡大縮小に対応できます。
• ブランドの統一感を保つため
  各媒体に適したロゴを用意することで、どこで見ても同じ印象を与えられます。

名刺に最適なロゴサイズと形式

名刺サイズの基本

日本の標準名刺は 91×55mm（東京4号／大阪9号）。
ロゴは目立ちすぎないよう、短辺の20〜30mm程度に収めると視認性と情報量の両立がしやすい（目安）。社名や肩書・連絡先と干渉しない余白を意識しましょう。

推奨形式

• AI / EPS / PDF（印刷所が推奨する形式）
• 解像度：300dpi以上
• 注意：JPEGや低解像度PNGは印刷でぼやけやすい

初心者がCanvaで作成する場合は「PDF（印刷用）」を選ぶのが安全です。Illustratorで作成する場合は、AI（CMYK）をマスターに、入稿はPDF（必要に応じてPDF/X）。塗り足し・トンボ・余白を確認する必要があります。

ありがちな失敗の回避法

• JPEGで白背景が残る → 透過可能なPNGかベクターで入稿
• 低解像度を拡大してモヤる → そもそもAI/EPS/PDFのベクターで受け渡す。

Webサイトに最適なロゴサイズ・形式

ヘッダー（ナビ付近）

設計次第ですが、初心者がまず試す目安は250×150px／350×75px／400×100px。縦型・正方形ロゴは160×160pxの想定から調整すると収まりがよく、ナビゲーションの高さにロゴの高さを合わせるとレイアウトが安定します。
形式は第一にSVG（劣化しない・軽い・ダーク/ライトに強い）。画像が必要ならPNGを適正ピクセルで書き出し、200KB未満を意識（表示速度対策）。実運用では横幅250〜400pxのバリエーションを準備しておくと、テーマ差・デバイス差に対応しやすいです。

ファビコン（ブラウザのタブ等）

16×16／32×32／48×48pxの3種が定番。複雑なロゴは象徴部分（シンボル）だけに簡略化すると判別しやすくなります。

上級の現場Tips

• ロゴは高さ基準で揃える（ナビ高60〜80pxなら、その範囲で最適化）
• SVG優先＋PNG保険の二刀流で、Retinaやダークテーマでも破綻しにくい
• 速度とSEOを意識し、ヘッダーロゴは軽量（目安200KB未満）。社内ガイドで横幅250px以内・50KB以下を推奨する運用もあります

SNSに最適なロゴサイズ

SNSは丸抜きが主流。四隅に文字や細かい装飾を置かず、中心に要素を集約。代表的な目安は次の通りです。

サービス	推奨サイズ（プロフィール）	推奨サイズ（ヘッダー）	注意点
X（旧Twitter）	400×400px	1500×500px	丸型に切り抜かれる
Instagram	110×110px	ー	正方形必須
Facebookページ	180×180px	カバー820×312px	小さめに表示される
YouTubeアイコン	800×800px	チャンネルカバー2560×1440px	丸く表示される
LinkedIn	400×400px	バナー1584×396px	ビジネス向けに見やすく

形式はPNG（透過）が扱いやすく、円形トリミングを見越して余白を広めにするのがよいでしょう。

形式別の使い分け早見表

形式	特徴	向いている用途
JPEG	背景透過不可、軽量、再圧縮で劣化	写真向け（ロゴは非推奨）
PNG	背景透過可、Webで使いやすい	Webサイト、SNS、資料
SVG	拡大縮小しても劣化なし	Web、アプリ
PDF	印刷に適した形式	名刺、パンフレット
AI / EPS	ベクターデータ、プロ仕様	印刷会社提出用

利用シーン別「これだけ保存」セット

初心者必見の形式の使い分けと注意することをを抜粋した「これだけ保存」セットをご用意しました。全部覚えるのは大変・・・。忘れそうで不安・・・。という方はこの部分だけでも是非保存して活用してくださいね。

• 名刺・印刷物　→　AI/EPS/PDF（CMYK）＋画像で渡すなら300dpi以上
• Webヘッダー／フッター　→　SVG本命＋PNG保険（横幅250〜400pxの複数書き出し）
• ファビコン　→　16/32/48pxセット
• SNS　→　400×400px級の正方形PNGから丸抜き前提で余白多め
• 資料（PowerPoint/Word）　→　背景透過PNG

出す前の10秒チェック

データ使用時や作成のお願いをする時、データを渡して発注する時などに、間違いはないか？渡しているデータや依頼内容に間違いがないか下記の項目をチェックしてみましょう。

1. 背景は本当に透過している？（PNG）
2. 小さくしても読める？（faviconやスマホ表示を想定）
3. 容量が重すぎない？（ヘッダーは軽量が正義）
4. 色の意図は守れている？（Web=RGB、印刷=CMYK）
5. SNSの丸抜きで欠けない？（外周の安全域OK？）

FAQ（超・初心者むけ）

Q. ロゴファイルは1種類で全部に使えますか？
A. 使えません。最低でも**印刷（AI／EPS／PDF）とWeb（SVG／PNG）**の2系統が必要です。

Q. 名刺にJPEGでも大丈夫？
A. 非推奨。白背景や再編集不可でトラブルの元。PDF／AIを推奨。

Q. WebはPNGとSVGどちらがいい？
A. SVGが第一候補。固定画像や効果の都合でPNGも併用すると安全です。

Q. dpiはどれくらい？
A. 印刷は300dpiが基本。Webはpx（ピクセル）ベースで最適化します。

Q. 日本の名刺サイズは？
A. 91×55mmが一般的な標準です。

まとめ

名刺：AI／EPS／PDF。ロゴは短辺20〜30mm前後。画像なら300dpi以上。

Webヘッダー：SVG本命、保険で透過PNG。横幅250〜400pxから調整。

SNS：正方形PNG 400×400px前後、丸抜き想定で余白を広く。

最低限の汎用セット：AI（原本）＋PDF（印刷）＋SVG（Web）＋PNG透過（Web／SNS）。

色：RGB（Web）／CMYK（印刷）を分け、ブランドカラーを両軸で定義。