BASEのデザイン – テーマとHTML編集でショップをブランドらしく

BASEのデザインを整える3つの方法

BASEのデザインを変える方法は、大きく分けて3つあります。どこまで手を入れたいかによって、選ぶ方法が変わります。

• 無料テーマと標準設定：管理画面の「デザイン」から、ロゴ、メインカラー、背景、トップ画像、商品の並べ方などを変更できます。コードは不要で、まず最初に試したい方法です
• 有料テーマ：BASEのデザインマーケットで購入できる、作り込まれたデザインです。レイアウトや雰囲気が大きく変わり、買い切りで使えるものが一般的です
• HTML編集App：BASE Appsの「HTML編集」を入れると、テーマのHTMLとCSSを直接編集できます。トップページの構成や細かな見た目まで、自由度が大きく上がります

一方で、カート・購入手続きの画面や決済まわりはBASEが管理しているため、どの方法でも大きくは変えられません。デザインで工夫できるのは、トップページ、商品一覧、商品詳細、ショップ情報などのお客様が最初に目にする部分です。ここを整えるだけでも、ショップの印象は大きく変わります。

選ばれるBASEショップのデザインに共通すること

BASEのカスタマイズで目指したいのは、初めて訪れたお客様が「何のお店で、何を買えばいいか」をすぐに理解できる状態です。うまくいっているショップには、次のような共通点があります。

• トップの最初の画面で、ブランドの世界観と主力商品が伝わる
• 商品写真の背景や明るさ、縦横比がそろっていて、一覧が整って見える
• カテゴリが少なく分かりやすく、スマホで2タップ以内に目的の商品へ届く
• 送料、発送までの日数、返品の条件が、商品ページから迷わず確認できる
• ブランドの想いや作り手の紹介があり、どんなお店かが分かる
• ロゴやフォント、色づかいがInstagramなど他のSNSと統一されている

BASEのお客様はスマホからの訪問が中心になりやすいため、デザインの確認はまずスマホで行うのがおすすめです。ショップ全体の設計の考え方はECサイトのデザインでも詳しくまとめています。

BASEの有料テーマを選ぶときのチェックポイント

有料テーマは手軽にデザインを一新できる方法ですが、見本の写真の印象だけで選ぶと、自分の商品を載せたときにイメージと違うことがあります。購入前に次の点を確認しておくと安心です。

• 商品数との相性：商品が少ないなら大きな写真を見せるタイプ、多いなら一覧性の高いタイプが向いています
• 写真の形：見本が正方形の写真なのか縦長なのかを確認し、手持ちの商品写真と合うかを見る
• スマホ表示：デモショップをスマホで開き、メニューの使いやすさや文字の大きさを確かめる
• 使いたいAppとの相性：予約販売、定期便、レビューなど、使う予定のBASE Appsが問題なく表示されるか
• HTML編集との関係：テーマによってはHTML編集で手を加えにくいものもあるため、後から細かく直したい場合は説明を確認する
• 更新の状況：作者による更新やサポートの案内があるかどうか

有料テーマは「土台」と考えると選びやすくなります。全体の雰囲気が近いものを選び、足りない部分を標準設定やHTML編集で補うのが、費用と仕上がりのバランスがとりやすい進め方です。

BASEのHTML編集でできることと注意点

HTML編集Appを使うと、BASEのデザインの自由度は大きく広がります。たとえば次のようなカスタマイズが可能です。

• トップページに、ブランド紹介、特集、季節のおすすめなど独自のセクションを追加する
• フォントや余白、ボタンの色と形をブランドに合わせて細かく調整する
• ヘッダーとフッターのメニュー構成を変え、よく使うページへの導線を作る
• お知らせ帯やバナーで、送料無料の条件や発送のお知らせを目立たせる
• 商品詳細ページの説明の見せ方を整え、サイズ表や注意事項を読みやすくする

注意したいのは、HTML編集はBASE独自のタグを使ったテンプレートを書き換える作業だという点です。編集したテーマでは、BASE側の機能追加や一部のAppの表示が自動で反映されず、タグを追記する必要が出ることがあります。編集前にバックアップを取る、変更した箇所を記録しておく、公開前にスマホと購入までの流れを必ず確認する、という3つを習慣にしておくと安心です。また、ページの構成や見出しの付け方は検索での見つかりやすさにも関わるため、BASEのSEO対策もあわせて意識しておくと効果的です。

BASEのデザインを依頼するときの進め方と準備するもの

自分で整えるのが難しい場合は、BASEのデザインを制作者に依頼する方法もあります。依頼の範囲は、テーマ設定と画像作成だけの軽いものから、HTML編集によるトップページの作り込みまでさまざまです。進め方はおおむね次のとおりです。

• 目的の共有：新規のお客様を増やしたい、客単価を上げたい、ブランドの印象を高めたいなど、優先したいことを決める
• 範囲の決定：テーマ選び、標準設定、HTML編集、バナーや画像の制作のうち、どこまで頼むかを決める
• デザインの確認：トップページから方向性を固め、商品一覧や商品詳細に展開する
• 公開前の確認：スマホ表示、カートへの追加、Appの動作、リンク切れを点検する
• 公開後の調整：アクセスや売れ筋を見ながら、並び順や特集を入れ替える

依頼の前に準備しておくと話が早いのは、ロゴのデータ、ブランドカラー、商品写真、参考にしたいショップ2〜3件、現在使っているBASE Appsの一覧です。BASEのアカウントや独自ドメインはご自身の名義のまま管理し、作業用の権限だけを共有する形にしておくと安心です。これからショップを開く段階なら、BASEでのネットショップ開設の流れもあわせてご覧ください。

UNANOBOのBASEデザイン：新しい見た目をまず無料デモで

UNANOBOでは、ご依頼の前に、今のBASEショップの商品とブランドを元にした新しいデザインを無料デモとして制作します。トップページを中心に、パソコンとスマホで実際に見ていただき、方向性に納得できてから進めるかどうかを決めていただけます。テーマと標準設定で足りるのか、HTML編集まで必要なのかも、デモを見ながら一緒に判断できます。

流れは「無料デモ → フィードバック → 公開 → 成長」です。代表が最初のデモから公開後の改善まで一人で担当するため、窓口が変わることはありません。やり取りはメッセージで、日本語・英語のどちらでも対応します。公開後のSEO、Instagram広告、Googleショッピングなどの集客も同じ窓口でご相談いただけます。