ショップの第一印象を決めるのが「ショップロゴ」です。
BASE（ベイス）なら、テキストだけのシンプルなロゴから、オリジナル画像のロゴまで簡単に設定できます。
ただ、画像ロゴは「スマホで見ると見切れる」「PCだと小さい」など、サイズで悩みがちです。
私自身、Adobe Illustratorで300×60pxのロゴを作ったところ、スマホではちょうどよくても、PCでは小さく見えてしまいました。
この記事では、BASEのショップロゴの設定方法、画像サイズの考え方、無料ツールCanvaでの作り方までを解説します。
BASEのサービスについて知りたい方は、こちらの記事を参考にしてください。
BASEのショップロゴの画像サイズ
結論から言うと、BASE公式にはロゴの推奨サイズはありません。
条件は「1MB以下、かつ4500×4500px以内」の画像であることだけです。
表示される大きさはテーマ（テンプレート）によって変わるため、アップロード後にPCとスマホの両方で確認しながら調整するのが基本です。
失敗しにくいサイズの目安
公式の推奨ではありませんが、私が作ってみて使いやすかった目安は次のとおりです。
| 項目 | 目安 |
|---|---|
| 形 | 横長（縦横比 4:1〜5:1 程度） |
| サイズ | 横600〜1000px × 縦150〜250px程度 |
| 解像度 | 表示したい大きさの2倍で作る（スマホやMacの高画質画面でぼやけにくい） |
| 形式 | 背景を透明にしたPNG |
| 容量 | 1MB以下 |
イラストと文字を組み合わせたロゴは、スマホの狭い画面で見切れたり、文字が小さくなりすぎたりしがちです。まずはシンプルな横長ロゴで試すのがおすすめです。
有料テーマを使う場合は、テーマのマニュアルにロゴの推奨サイズが書かれていることもあるので確認してみてください。
ロゴが表示される場所
現在のBASEでは、ショップ全体のロゴに加えて、表示場所ごとに別のロゴを設定できます。
| 表示場所 | 設定できる内容 |
|---|---|
| ショップ全体 | テキスト、またはロゴ画像 |
| スマホのヘッダー | ページタイトル、またはロゴ画像 |
| スマホのサイドメニュー | テキスト、またはロゴ画像 |
たとえば「PCでは横長ロゴ、スマホのヘッダーでは小さめのシンボルマーク」のように使い分ければ、私が悩んでいた「PCだと小さい、スマホだと見切れる」問題も解決しやすくなります。
ショップロゴの作り方3パターン
| 作り方 | 難易度 | 向いている人 |
|---|---|---|
| テキストロゴ（BASEの設定のみ） | かんたん | まずはすぐに公開したい人 |
| ショップロゴ作成 App | かんたん | 文字ロゴを少しおしゃれにしたい人 |
| Canvaなどで画像ロゴを作る | ふつう | イラストやアイコンも入れたい人 |
1. テキストロゴで設定する
いちばん手軽なのは、ショップ名をテキストのまま表示する方法です。
文字色などを変えるだけでも雰囲気が出ます。
迷ったら、まずはテキストロゴで公開して、あとから画像ロゴに変えても問題ありません。
2. ショップロゴ作成 Appを使う
BASE Appsには、無料の「ショップロゴ作成 App」があります。
フォントの種類・サイズ・色を選ぶだけで、ショップの背景に合わせたロゴを作成できます。
デザインツールを使ったことがない方におすすめです。
※提供状況は変わる可能性があるため、管理画面の「Apps」から確認してください。
3. Canvaで画像ロゴを作る
もう少しこだわりたい場合は、無料のデザインツールCanvaがおすすめです。
ロゴのテンプレートも豊富で、初心者でも短時間でおしゃれなロゴが作れます。
- Canvaで「カスタムサイズ」を選び、横1000px × 縦250px程度で新規デザインを作る
- テンプレートや素材を使い、ショップ名とイラストを配置する
- スマホでも読めるよう、文字は太めで大きめにする
- 「共有 ＞ ダウンロード」でPNGを選び、「背景透過」にチェックを入れて保存する
※背景透過はCanvaの有料プラン（Canva Pro）の機能です。
無料プランの場合は、ショップの背景色と同じ色を背景にして作ると自然になじみます。
BASEにショップロゴを設定する手順
ロゴの設定は、管理画面の「デザイン」から行います。
- 管理画面の「デザイン」を開く
- 「ロゴ」メニューから「ショップ全体のロゴを設定する」を選ぶ
- テキストで表示する場合は「テキスト」を選び、ショップ名を入力する
- 画像で表示する場合は「ロゴ画像」を選び、用意した画像をアップロードする
- プレビューでPC表示とスマホ表示を切り替えて、見切れや小ささがないか確認する
- 問題なければ保存して反映する
スマホのヘッダーやサイドメニューだけロゴを変えたい場合は、同じ「ロゴ」メニューの中で表示場所ごとに設定できます。
ロゴをきれいに見せるコツと注意点
余白を詰める
画像の上下左右に余白が多いと、ロゴが小さく表示されます。
書き出す前に余白をトリミングしましょう。
2倍サイズで作る
表示したい大きさの2倍で作ると、スマホやMacの高画質画面でもぼやけにくくなります。
背景は透明に
背景を透明にしたPNGなら、テーマの背景色を変えてもなじみます。
容量は1MB以下に
大きすぎる画像はアップロードできません。圧縮ツールで軽くしておきましょう。
スマホ表示を最優先に確認
ネットショップの閲覧はスマホが中心です。
小さい画面でも読めるかを必ずチェックしましょう。
もっとカスタマイズしたい場合
- ロゴのサイズや位置、ヘッダー全体を細かく調整したい場合は「HTML編集 App」で編集できます。ただしHTMLやCSSの知識が必要です。
- ブラウザのタブに表示される小さなアイコン（ファビコン）を自分のロゴにしたい場合は、「BASEロゴ非表示 App（有料）」でオリジナルのファビコンを設定できます（BASEヘルプ）。
BASEのショップロゴに関するよくある質問
Q. ロゴ画像の推奨サイズはありますか？
公式の推奨サイズはありません。
1MB以下かつ4500×4500px以内の画像をアップロードし、表示を確認しながら調整します。
目安としては横長（4:1〜5:1程度）がおすすめです。
Q. スマホでロゴが見切れてしまいます。
横幅が広すぎるか、余白が多い可能性があります。
余白をトリミングするか、スマホのヘッダー用に小さめのロゴを別に設定してみてください。
Q. ロゴがぼやけて見えます。
画像が小さすぎることが原因です。
表示したい大きさの2倍のサイズで作り直すと、くっきり表示されやすくなります。
Q. 画像ロゴはあとから変更できますか？
いつでも変更できます。
まずはテキストロゴで公開し、準備ができてから画像ロゴに変えても大丈夫です。
Q. ファビコン（タブのアイコン）も変えられますか？
「BASEロゴ非表示 App（有料）」を使えば、オリジナルのファビコンを設定できます。
まとめ：まずはシンプルに作って、表示を見ながら調整しよう
BASEのショップロゴには公式の推奨サイズがなく、テーマによって見え方が変わります。
だからこそ、作ってアップして、PCとスマホで確認しながら調整していくのが近道です。
- 条件は1MB以下・4500×4500px以内
- 横長、透過PNG、表示サイズの2倍で作ると失敗しにくい
- PCとスマホで別のロゴを設定できる
- こだわるならCanva、手軽さ重視ならテキストロゴやショップロゴ作成 App
ロゴが決まると、一気に「自分のお店」らしくなります。
楽しみながら作ってみてください。
