BASEの無料テンプレート（テーマ）とは
BASEのテンプレート（テーマ）とは、ネットショップの見た目とレイアウトを、まとめて設定できる仕組みです。「テンプレート」「テーマ」と呼び方は2つありますが、どちらも同じものを指します。
HTMLやCSSといった専門知識がなくても、好みのテンプレートを選んで適用するだけで、プロがデザインしたようなショップページが完成します。管理画面から色や画像を差し替えるだけで、自分のショップに合わせたデザインに仕上げられるのが魅力です。
テンプレートには、BASEが公式に用意している無料テンプレートと、クリエイターや制作会社が制作した有料テンプレートの2種類があります。この記事では、まず無料テンプレートで何ができるのか、どこまで自分で編集できるのかを中心に解説します。
BASEの無料テンプレート一覧はどこで見られる？
無料テンプレートは、BASEの管理画面から「デザイン」→「テーマ」と進むと一覧で確認できます。適用する前にプレビューで表示を確かめられるので、気になるものは片っ端から見てしまって構いません。適用しても商品データには影響しないので、実際に切り替えて見比べるのが一番早い方法です。
一覧を見るときは、デザインの好みだけでなくトップページにどんなパーツが並んでいるかに注目してください。ここが無料テーマごとに最も差が出る部分で、あとから「載せたい情報が置けない」となる原因もここにあります。
なお、有料テンプレートはBASEが運営する「BASE デザインマーケット」に別途一覧があります。無料テーマで物足りなくなったときの選択肢として、記事の後半で触れます。
無料テンプレートでできること・できないこと
無料テンプレートは「機能が少ない」と思われがちですが、実際にはできることのほうが多いです。まず境界線をはっきりさせておきましょう。
無料テンプレートでできること
- 費用がまったくかからない（月額も買い切りも不要）
- 背景色・ロゴ・ファビコン・フォントの変更（BASEの基本機能なので無料テーマでも全部できます）
- 商品の登録・カテゴリ分け・並び順の設定
- Apps（拡張機能）の利用。オフィシャルテーマは対応Appsの制限が少なく、むしろ有料テーマより広く使えます
- HTML編集Appを使ったコードの直接編集
- いつでも別のテーマに変更できる
無料テンプレートではできないこと
- トップページに置けるパーツが決まっていて、増やせない（商品一覧が中心の構成になります）
- スライド画像・お知らせ・おすすめ商品・特集といったパーツの追加
- パーツの表示ON/OFFや、並び順の入れ替え
- 商品画像の形（縦長・正方形・横長）の切り替え
- ボタンや文字リンクなど、パーツ単位での色指定
整理すると、色や文字といった「見た目の調整」は無料でもできる。「トップページの構成そのものを変える」ことができない、という区別になります。
結局、無料のままでいい？
判断はシンプルです。商品を並べるだけで十分なら無料で足ります。 トップページで見せ方を作り込みたい、読み物や特集で商品の魅力を伝えたい、という段階になってから有料を考えれば間に合います。
テーマは後からいつでも変更できて、商品データやショップの基本情報はそのまま引き継がれます。だから「最初にちゃんと選ばないと失敗する」ということはありません。まず無料で公開してしまい、運用しながら物足りなさを感じた時点で動くのが、いちばん失敗のない順番です。
失敗しない無料テンプレートの選び方・5つのポイント
とはいえ無料テーマにも種類があります。選ぶときに見ておきたい5つのポイントを紹介します。
1. スマホでの見え方を最優先で確認する
いまやネットショップへのアクセスは、半分以上がスマホからです。PCで見て綺麗でも、スマホで文字が詰まったり画像が切れたりするケースはあります。テーマを適用したら、必ず自分のスマホで実際のショップページを開いて確認してください。プレビューだけで判断しないのがコツです。
2. 商品の見せ方が自分の商材に合っているか
テンプレートによって、商品画像の見せ方は大きく異なります。
- 写真を大きく見せるタイプ → アパレル・雑貨・食品など、ビジュアルで魅力が伝わる商材向き
- 情報を整理して並べるタイプ → 種類が多い商材や、スペック重視の商材向き
自分の商品写真を実際に登録した状態で見比べてください。テーマのサンプル画像は綺麗に作られているので、そこで判断すると入れ替えたときの印象が変わります。
3. 使いたいApps（機能）に対応しているか
BASEは「Apps（拡張機能）」を追加してショップの機能を広げられます。無料のオフィシャルテーマは対応Appsの制限が少ないのが利点ですが、それでも組み合わせによっては表示位置が崩れることがあります。レビュー表示、商品説明のカスタマイズ、カテゴリ管理など、使いたい機能があるなら先にAppsを入れてからテーマを見比べると確実です。
（BASEのAppsについては「BASE 商品一覧を整える方法｜Apps全種の一覧とおすすめの使い方」で詳しく解説しています）
4. トップページに置けるパーツの数で選ぶ
無料テーマ同士でいちばん差が出るのがここです。同じ無料でも、商品一覧だけのものと、お知らせや説明文を置けるものがあります。ショップを開いたときにお客さまへ最初に伝えたいことがあるなら、それを置ける枠があるテーマを選んでください。あとから「載せる場所がない」と気づくのが、いちばん多いつまずき方です。
5. 自分の商品を並べた状態で最終判断する
テーマは何度でも切り替えられます。候補を2〜3個に絞ったら、実際に適用して自分の商品が並んだ状態を見比べてください。見るべきは写真の美しさではなく、パーツの構成と設定項目です。ここを実物で確認しておくと、後悔がほぼなくなります。
BASEテンプレートの作り方とHTML編集
BASEでテンプレートを自分の手で作る方法は、大きく2つあります。「既存のテーマを編集する」方法と、「一から作る」方法です。
既存テーマを編集する（ほとんどの方はこちら）
BASEの「HTML編集」Appを追加すると、いま適用しているテーマのHTML・CSSを直接編集できるようになります。手順は次のとおりです。
- 管理画面の「Apps」から「HTML編集」を追加する
- 「デザイン」→「HTML編集」を開く
- テーマのコードが表示されるので、必要な箇所を書き換える
- 保存してショップページで表示を確認する
編集を始める前に、必ず元のコードを全部コピーして手元のテキストファイルに保存してください。 上書きすると元の状態には戻せません。ここだけは面倒でも省かないことをおすすめします。
実際によく編集されるのは、フォントの指定、余白の調整、商品名や価格の文字サイズ、ボタンの色といったあたりです。この程度であればCSSの追記だけで済むことがほとんどで、HTMLの構造まで触る必要はありません。
一から作る
BASEのテーマは、HTML・CSSに加えて、商品情報などを差し込むBASE独自のタグで構成されています。BASEが公開しているデベロッパー向けのドキュメントに沿って書けば、自分だけのテーマを作ることも可能です。
ただし商品ループ・カート・決済まわりの記述まで自前で組む必要があり、1つ表示を間違えると購入導線が止まります。実務としては、既存テーマを複製して編集するところから入るのが現実的です。
編集してもデザインが変わらないとき
追記したCSSが効かない場合、原因のほとんどは記述位置です。テーマ側の指定にあとから負けているので、追記するCSSはコードの下のほうに置いてください。それでも効かないときは、セレクタをより具体的に書く（親要素から指定する）と通ります。
もうひとつ多いのが、ブラウザのキャッシュです。編集後に表示が変わらないときは、スーパーリロード（Macは command + shift + R）を試してください。
無料テンプレートのカスタマイズ方法
コードを書かなくても、管理画面の設定だけでできるカスタマイズは意外と多くあります。無料テーマでできるのは次の範囲です。
- 背景色：ショップ全体の印象が最も変わる項目です
- ロゴ：画像を設定するか、ショップ名をテキストで表示するかを選べます
- フォント：ゴシック体・明朝体などから選択できます
- ファビコン：ブラウザのタブに出る小さなアイコンです
- カバー画像：テーマによってはトップに大きな画像を置けます
ここはBASEの基本機能なので、無料テーマでも有料テーマでも同じように使えます。 カスタマイズ性で無料が劣るということはありません。
差が出るのは、繰り返しになりますがトップページに置けるパーツです。スライドを入れたい、おすすめ商品の枠を作りたい、特集ページへの導線を置きたい——こうした「構成そのものを変えたい」要望は、設定画面からは実現できません。HTML編集で組むか、パーツを持っているテーマに乗り換えるかの二択になります。
「やりたいことはあるけれど自分では書けない」という場合は、制作会社に相談するのも手です。流楽はBASEテーマを自社で制作しているので、ショップに合わせた調整や制作のご依頼も承っています。
BASEテンプレートの変更方法
「テンプレートは後から変えられるの？」という質問はとても多いのですが、答えは「いつでも変更できる」です。手順は次のとおりです。
- BASEの管理画面にログインする
- 画面上部のメニューから「デザイン」を開く
- 「テーマ」を開き、使いたいテーマを選ぶ（購入済みのテーマは「購入済み・カスタムのテーマ」に入っています）
- プレビューで表示を確認し、「このテーマに変更する」を選ぶ
- 「テーマ設定」で画像やテキストなど必要な項目を入力する
- 「保存する」を押すとショップページに反映される
テーマを変更しても、商品データやショップの基本情報はそのまま残ります。 リセットされるのは、スライド画像やおすすめ商品といったテーマ固有の設定だけです。ショップの成長に合わせて、シンプルなテーマから多機能なテーマへ乗り換えていくこともできます。
デザインが反映されないときは
「変更したのにショップに出てこない」という場合、ほとんどが「保存する」を押していないことが原因です。テーマ設定は保存するまで反映されません。
もうひとつ多いのが、画像が必要な項目に画像を入れていないケースです。画像を設定しないと、その項目自体が表示されない仕様のテーマが多くあります。空欄の項目がないか確認してください。
無料で物足りなくなったら
無料テンプレートで公開してみると、たいてい次のどこかで止まります。「トップページに載せたい情報が置けない」「他のショップと似てしまう」「商品写真の見せ方を変えたい」。
これは無料テーマの出来が悪いからではなく、置けるパーツの数が決まっているという仕様によるものです。ここから先は、HTML編集で自分で組むか、パーツが増える有料テーマに乗り換えるかの二択になります。
有料テーマを選ぶときは、デザインの好み以外に最終更新日を必ず見てください。BASEはAppsや仕様が更新され続けるため、長く更新されていないテーマは新しいAppsに対応できず、表示が崩れることがあります。目安は1年以内です。あわせて、複数のテーマを継続して販売しているデベロッパーかどうかも見ておくと、購入後のサポートが期待できます。
テーマはいつでも変更でき、商品データは引き継がれます。無料で始めたことが無駄になることはありません。
▶ BASE有料テンプレート販売｜おすすめ4種の一覧・比較を見る
まとめ｜無料から始めて、必要になったら広げる
BASEの無料テンプレートは、ショップを始めるには十分な機能があります。背景色もロゴもフォントも変えられますし、HTML編集Appを使えばコードで細かく調整することもできます。「無料だから中途半端」ということはありません。
選ぶときに見るポイントをおさらいすると、
- スマホでの見え方を実機で確認する
- 商品の見せ方が自分の商材に合っているか
- 使いたいAppsに対応しているか
- トップページに置けるパーツの数
- 自分の商品を並べた状態で最終判断する
この5つです。まずは無料で公開して、実際に商品を並べてみてください。そのうえで「トップページに置けるパーツが足りない」と感じたときが、有料テーマを検討するタイミングです。
▶ BASE有料テンプレート販売｜おすすめ4種の一覧・比較を見る
テンプレートを整えても「なかなか売れない」——そんなときは、集客の見直しが必要かもしれません。流楽はネットショップの集客サポートも行っています。
