きちんとしたロゴは、まったく違う場面で成立しなければなりません。ブラウザのタブでは小さなファビコンとして、サイトのヘッダーでは中くらいの大きさで、店頭の幕では大きく、Instagramのプロフィールでは正方形で、名刺では横長で。それぞれ必要な寸法も形式も違い、間違えるとロゴはぼやけたり、切れたり、比率が崩れたりします。
とはいえ、場面ごとにゼロから作り直す必要はありません。適切な形式の元データさえあれば、ImageToolsのサイズ変更ツールが、どの用途にも数秒で寸法を合わせてくれます。
手元に持っておくべきロゴの形式
具体的な寸法の前に、どの形式を保存しておくべきかを押さえましょう。きちんと管理されたロゴには、最低でも次のバージョンがあります。
- SVG（ベクター）：マスターとなるファイルです。16pxのファビコンから10メートルの屋外広告まで、どんな大きさにしても劣化しません。サイト、資料、印刷会社への入稿に欠かせません。
- 透過PNG（高解像度）： SVGが使えないデジタル用途のためのものです。あとから縮小しやすいよう、最低1000×1000pxで保存しておきます。
- 白背景のPNG：透過が好ましくない、あるいは使えない場面のためのものです。各種サービスの登録フォーム、Word文書、メールなどが該当します。
- 暗い背景用のPNGまたはJPG（要素を白抜きに）：色の濃い背景や暗い背景に載せるためのものです。濃い青のロゴは、黒い背景の上ではまったく見えません。
- ファビコン（.ico＋PNG）：ブラウザのタブ専用のバージョンです。ImageToolsのファビコン作成ツールを使えば、ロゴから必要なサイズをまとめて書き出せます。
☁️ すべてクラウドに保管する。これらのバージョンは、Google DriveやDropboxですぐ取り出せるようにしておきます。デザイナーに依頼するとき、SNSのプロフィールを更新するとき、印刷会社にデータを送るときに必ず必要になります。しかも、たいてい急ぎで必要になります。
早見表：用途別のロゴ寸法
| 用途 | 推奨サイズ | 最適な形式 | 補足 |
|---|---|---|---|
| サイトのヘッダー（PC） | 横幅200〜400px | SVGまたは透過PNG | 高さはレイアウトに合わせる |
| ファビコン（ブラウザのタブ） | 16×16, 32×32, 48×48px | .ico + PNG | ファビコン作成ツールを使う |
| Apple Touch Icon（iOS） | 180×180px | 透過なしPNG | 背景は不透明にする |
| Androidアプリアイコン（PWA） | 192×192 e 512×512px | PNG | webmanifestで必須 |
| Instagram — プロフィール写真 | 320×320px（表示は110px） | PNGまたはJPG | 円形に切り抜かれる |
| Facebook — プロフィール写真 | 170×170px | PNGまたはJPG | PCでは円形で表示 |
| Facebook — カバー写真 | 820×312px | JPGまたはPNG | ロゴは要素として配置し、全面には使わない |
| LinkedIn — 企業ロゴ | 300×300px | PNGまたはJPG | 最小300×300、最大4 MB |
| LinkedIn — 企業カバー | 1128×191px | PNGまたはJPG | カバーの中に要素として配置 |
| YouTube — チャンネルアイコン | 800×800px | PNGまたはJPG | 円形表示。テレビでは98px |
| YouTube — チャンネルアート | 2560×1440px | JPGまたはPNG | ロゴは要素として配置。セーフエリアは1546×423px |
| LINE公式アカウント — プロフィール | 640×640px | PNGまたはJPG | 円形で表示 |
| TikTok — プロフィール写真 | 200×200px（最小） | JPGまたはPNG | 円形で表示 |
| X（旧Twitter）— プロフィール写真 | 400×400px | PNGまたはJPG | 円形表示。タイムラインでは48px |
| メール（署名） | 横幅200〜300px | 白背景のPNGまたはJPG | 古いメールソフトでは透過を避ける |
| 名刺（データ） | 横幅400〜600px | 透過PNG | 名刺レイアウトへの配置用 |
| プレゼン資料（スライド） | 横幅200〜400px | 透過PNGまたはSVG | スライド（16:9）に合わせる |
サイト用のロゴ
ヘッダー
サイトのヘッダーでは、ロゴの横幅は150px〜400px、高さはそれに合わせるのが一般的です。正確な幅はレイアウト次第で、コンパクトなヘッダーなら150px、余白の広いサイトなら300〜400pxを使えます。いちばん大事なのは、Retinaディスプレイでくっきり見えることです。表示幅の2倍でPNGを書き出す（あるいはSVGを使えば自動的に解決します）、そして表示サイズはCSSで指定してください。
ヘッダーには必ずSVGか透過PNGを使ってください。ヘッダーの背景はデザインやスクロールによって変わるため、白背景のロゴだと色付きの背景の上で白い四角が浮き上がってしまいます。
Favicon
ファビコンは、ブラウザのタブ、ブックマーク、スマホのホーム画面に表示されるアイコンです。うまく機能するファビコンは、ロゴを簡略化したものです。読める文字を入れるには小さすぎるので、社名を入れず、シンボルか頭文字だけにするのがふつうです。
必要なサイズは、PCブラウザ用に16×16pxと32×32px、iOS用（Apple Touch Icon）に180×180px、AndroidとPWA用に192×192pxと512×512pxです。ImageToolsのファビコン作成ツールなら、ロゴからこれらすべてを自動で書き出せます。
SNS用のロゴ
ロゴが正方形と円形の両方で成立すべき理由
ほとんどのSNSは、プロフィール写真を円形で表示します。これは横長のロゴ（シンボルと社名が横並び）にとって厄介です。円の中では、読めないほど小さくなるか、端が切れてしまうかのどちらかになります。
いちばん確実な対処は、SNSのプロフィール専用に「アイコン版」のロゴを用意することです。シンボルかブランドの頭文字だけを、正方形の中央に置いたものです。これなら切り抜きの問題を避けつつ、ひと目でブランドだと分かります。
Instagramのプロフィール写真は320×320pxまで受け付けますが、実際の表示はプロフィール画面で110px、フィードでは32pxしかありません。ファイルは正方形にします。ロゴが横長なら、正方形の中央に十分な余白をとって配置し、円形の切り抜きで欠けないようにしてください。
Facebookページのプロフィール写真は、PCで170×170px、スマホで128×128pxで表示され、常に円形に切り抜かれます。カバー写真は820×312pxで、ここではロゴをカバー全体に広げるのではなく、デザインの一要素として配置するのが一般的です。
企業ページでは、LinkedInはロゴを300×300px（正方形）で表示し、一覧ではさらに小さく表示します。画質がそのまま企業の印象に響く場面のひとつなので、圧縮をかけすぎず、高品質のPNGを使ってください。
YouTube
YouTubeのチャンネルアイコンは、場所によって表示サイズが大きく変わります。スマートテレビで98px、PCのフィードで32px、スマホのプロフィールで88pxです。どのサイズでもくっきり見せるには、最低800×800pxが必要です。チャンネルアート（バナー）は2560×1440pxですが、すべての端末で見える「セーフエリア」は中央の1546×423pxだけです。ロゴはこの範囲に収めてください。
LINE公式アカウント
LINE公式アカウントのプロフィール写真も円形で表示され、トーク画面での表示は50px前後です。全画面で開いたときにもくっきり見えるよう、640×640pxのファイルを使ってください。他のSNSと同じく横長のロゴは向かないので、アイコン版かシンボルだけのバージョンを使います。
📐 SNSで横長ロゴを使うときのコツ：左右に余白（またはブランドの背景色）を足して正方形版を作ってください。理想は、ロゴが正方形の幅の60〜75%を占め、四辺の余白が均等になる状態です。こうすれば円形の切り抜きを避けられ、ロゴ全体がきちんと見えます。
印刷用のロゴ
印刷はデジタルとまったく考え方が違います。問題になるのはピクセル数そのものではなく、ピクセル数と実際の印刷寸法との関係、つまりDPI（dots per inch、1インチあたりのドット数）です。印刷業界の標準は300 DPIです。
印刷に必要なピクセル数の計算方法
計算式： ピクセル数 = 寸法(cm) ÷ 2.54 × DPI
具体例：
| 用途 | ロゴの一般的な寸法 | 必要なピクセル数（300 DPI） |
|---|---|---|
| 名刺（ロゴ部分） | 3 × 1.5 cm | 354 × 177px |
| レターヘッド（上部） | 5 × 2 cm | 591 × 236px |
| 小型パッケージ | 4 × 4 cm | 472 × 472px |
| Tシャツ（胸元） | 10 × 5 cm | 1181 × 591px |
| マグカップ（側面） | 8 × 4 cm | 945 × 472px |
| オリジナルバッグ | 15 × 8 cm | 1772 × 945px |
| バナー・ロールアップ（上部） | 20 × 10 cm | 2362 × 1181px |
毎回計算するのを避けたいなら、SVGを使うのがいちばん現実的です。ベクター形式なので拡大に限界がなく、どんな大きさで印刷しても劣化しません。プロの印刷会社ならSVG（またはIllustratorやInkscapeでSVGから書き出したベクターPDF）を問題なく受け付けます。
印刷会社が受け付ける形式
多くの印刷会社が受け付け、また好むのは次の形式です。
- ベクターPDF：業界の標準です。ベクターのロゴをIllustrator、Corel、Inkscapeから書き出します。
- AI（Adobe Illustrator）： Illustrator本来のベクター形式です。
- EPS：古くからあるベクター形式で、互換性が高いのが利点です。
- SVG：最近の印刷会社ならたいてい受け付けます。
- 高解像度PNG：ベクターデータがない場合に使えます。ただし印刷寸法に足りる解像度があることが条件です。
🖨️ 刺繍やレーザーカットでは：これらの加工には、パスの整ったベクターデータが必要です。グラデーションや影、写真的な効果の入ったロゴは、入稿前に簡略化しなければなりません。ベクターの原本がない場合は、デザイナーがPNGから「トレース」してベクター化できます。
用途ごとにロゴをリサイズする
高解像度のPNG（最低1000×1000px）かSVGの元データがあれば、ImageToolsのサイズ変更ツールで各プラットフォームの寸法に合わせられます。幅と高さをピクセル単位で指定でき、元の縦横比を保つことも変えることもできます。
ロゴの各バージョンを用意する手順は次のとおりです。
- 必ず手元でいちばん解像度の高いファイルから始めます。SVGか、1000px以上のPNGです。
- サイズ変更ツールで、使う場所の寸法に合わせます。
- SNS用なら圧縮ツールで軽く圧縮します。品質85〜90%を保てば、くっきりした見た目のままです。
- 印刷用にはSVGをそのまま入稿するか、ベクターPDFに変換します。
サイズ違いのロゴでよくある失敗
すべての場面で同じファイルを使う
メール署名に2000pxのロゴを入れれば、読み込みは遅く、表示は巨大になります。A4の印刷に100pxのロゴを使えば、粗く潰れます。場面ごとに最適な寸法は違います。このガイドを目安に、使う前にリサイズしてください。
暗い背景用のバージョンがない
多くのロゴは、明るい背景に濃い色で置く前提で作られます。黒や濃い色を背景にした投稿では、Instagramのストーリーズや LinkedInのカバーによくある形ですが、ロゴは消えてしまいます。主要な要素を白か明るい色にしたバージョンを必ず作って保存しておきましょう。
SNS用に大きすぎるPNGを上げる
Instagramのプロフィール写真に2000×2000pxのPNGを使っても、表示品質は良くなりません。必要なサイズを超えた分はInstagram側で圧縮されるからです。推奨サイズ（320×320px）で、品質90%の圧縮をかけて上げれば、二重圧縮を避けられます。
透過ロゴにJPGを使う
JPGは透過に対応していません。透過PNGのロゴをJPGで保存すると、透明部分は白に置き換わります。いろいろな色の背景に載せるために透過が必要なら、必ずPNGかWebPを使ってください。
SVGがあるのに小さいPNGを拡大する
SVGがあるなら、リサイズは必ずSVGから行ってください。小さいPNGを拡大してはいけません。拡大で生じた粗さは、ベクターの原本なしには直せません。
まだロゴがない場合は、いまつくれます
まだロゴがない場合や、きちんとしたものを作り直したい場合のために、ImageToolsには2つのツールがあります。ひとつはロゴ作成で、アイコン・配色・書体を自分で細かく選べます。もうひとつはAIロゴ作成で、ブランドを言葉で説明すると、AIがダウンロードできるベクター案を出してくれます。どちらもSVGとPNGで書き出せます。このガイドで挙げたすべての用途に必要な形式です。
よくある質問
prefers-color-schemeか、HTMLの<picture>タグにmediaを組み合わせる方法です。閲覧者が何もしなくても、OSの設定に応じて明るいロゴと暗いロゴが自動で切り替わります。