Shopify・BASE・STORES は日本国内 EC の主要 3 プラットフォームで、それぞれヘッダーロゴ・favicon・商品サムネに異なる推奨サイズと制約があります。ロゴを 1 種類しか持っていないと、どこかで必ず縮小・トリミング・余白崩れが発生します。
この記事では、3 プラットフォームの推奨仕様を実数字で並べ、「1 つのロゴ案からどう派生させるか」を整理します。
EC プラットフォーム別の推奨仕様
| 項目 | Shopify | BASE | STORES |
|---|---|---|---|
| ヘッダーロゴ | 450×150px | 380×80px | 1200×400px |
| favicon | 32×32px | 自動生成 | 512×512px |
| 商品サムネ推奨 | 2048×2048px | 1200×1200px | 640×640px+ |
| 推奨形式 | PNG / SVG | PNG 透過 | PNG / JPEG |
| アスペクト | 3:1（横長） | 4.75:1 | 3:1 |
プラットフォーム別の落とし穴
Shopify
- ヘッダー: 推奨 450×150px（高さ ~70px 実表示）／PNG または SVG
- favicon: 32×32px、ico または PNG
- 商品サムネ: 商品サムネは 2048×2048px、正方形クロップ前提
Shopify はテーマによってヘッダー高さが異なるため、横長ロゴ（高さ 70px 程度）+ 正方形アイコン（512px）の 2 種類を用意するのが鉄板。Theme Editor で「Logo max width」を 200px に絞るとモバイル崩れが減ります。
BASE
- ヘッダー: 推奨 380×80px / PNG／背景透過
- favicon: BASE 側は自動生成（独自設定不可、Apps で代替）
- 商品サムネ: 商品画像 1,200×1,200px、正方形 1:1 推奨
BASE は「ショップロゴ」「ショップ名」「favicon」を別々に管理しないため、ヘッダー画像にショップ名のテキストを含めて入れるのが定石。背景は透過 PNG 推奨で、JPEG だと白フチが残ります。
STORES
- ヘッダー: 推奨 1200×400px、横長／PNG・JPEG
- favicon: STORES 側は手動アップロード可（512×512px）
- 商品サムネ: 商品画像 640×640px 以上、正方形
STORES は横長ヘッダーが広く取れる代わりに、モバイルではかなり縮みます。実機で iPhone 13 mini 想定の幅 375px で見ると、ロゴ部の高さは 50px 前後。文字は太め Sans Serif が読みやすいです。
1 つのロゴから派生させる
実務では「横長ヘッダー」「正方形 favicon」「商品サムネ ウォーターマーク」の3 派生を 1 つのロゴから作っておけば、3 プラットフォームのどれでも対応できます。
EC で使いやすいロゴサンプル
LogoLab AI のサンプルから、EC ヘッダーに収まりやすい横長構成を 4 つ。シンボル＋日本語／英字の 2 段組は、favicon ではシンボルだけ抜き出して使えるので便利です。
Bloom
Bluebird
Leafbean
Stardust
まとめ
Shopify・BASE・STORES のヘッダー仕様はすべて違うので、1 サイズで使い回すと必ずどこかで崩れます。SVG マスターを 1 つ持って、横長・正方形・サムネ署名の 3 派生を最初から作っておくのが現実的です。EC・D2C 向けロゴ作成ガイドに各プラットフォームの初期設定手順もまとめています。
LogoLab AI なら 1 つの生成結果から SVG・透過 PNG・正方形クロップを直接書き出せます。1 案 ¥2,980 から買い切り、6 ヶ月作り放題 ¥14,800。