- BASEを始めたけどデザインってどう変えるの？
- せっかくなら人と違うショップデザインにしたい
- ネットショップ開設予定で各サービスのデザイン仕様を知りたい
このような方向けにこの記事では次のことを解説します。
- BASEのショップデザインでできること
- ショップデザインの変更方法
下記にあてはまる場合、この記事を読むことで『BASEショップのデザインの仕様』『デザインの変え方』が理解できるはず。
- いずれかのネットショップ開設を検討している
- BASEでショップを作ろうと思ってる
- 立ち上げたけど、デザイン変更の方法がわからない
少しでも参考になれば幸いです。
BASE（ベイス）のショップデザインの基本情報
BASEのショップデザインの特徴を簡単に説明すると、こんな感じです。
- 無料テーマから選んで着せ替え
- デザイン性、機能性が優れた有料テーマもある
- HTML編集Appを利用してオリジナルカスタマイズも可能
- オリジナルロゴを無料で作る拡張Appもある
テーマ（テンプレート機能）があるので、Web制作の知識がなくてもデザイン変更が可能。
より細かい変更がしたかったら、HTML編集App（無料）を使いましょう。カスタマイズの規模次第ですが、Web知識を要します（HTML/CSS/JavaScript）
無料テーマでもセンスの良いショップは作れる
BASEの無料テーマは2020年5月現在で下記の11種類（公式画像より編集転載）。
BASEの無料テーマ一覧色は変えることができるので、テーマによる違いは『大まかなデザイン設計』。
- 商品画像はどのように並べたいか？
- ナビゲーションメニューはどこに配置したいか？
- サイドバーはあった方がいいか？
などで選べばイメージに近いものになりやすいです。
また、次の要素は無料テーマ内の標準機能で簡単に変更できます。
- ショップロゴ（文字/画像）
- 背景（色/画像）
- ナビゲーションメニューの色
- スマホ用デフォルトテーマの適用有無
無料テーマを利用してもシンプルでセンス良いECサイトを作ることができます。
デザイン性、機能性を上げるなら有料テーマ
BASEには無料テーマ以外にも、デザイン性、機能性に優れた有料テーマがあります。
【参考】BASEデザインマーケット
BASEの有料テーマ（一部）- 価格：5,000円～13,200円
- 全50種類
- 支払い方法：クレジットカード
※2020年5月時点の情報
無料テーマではロゴ、背景、ナビゲーションくらいしか調整できませんが、有料テーマだと調整できる要素が多くなります。
- メイン写真
- サイドバー固定ON/OFF
- カラーパターン
- 商品画像のエフェクト
- ボタン色
- スライドショー写真
- 付帯機能のON/OFF など
テーマはすべて買い切りで月額費用は発生しません。
HTML編集Appを利用したカスタマイズ
BASEにはApps機能があり、目的に応じてAppをインストールすることでショップ内の機能を追加できます。
HTML編集AppAppsのひとつ『HTML編集App』というアプリをインストールすることで、ルール内でのコーディングが可能になります。
- 編集できるのはHTMLのみ
- HTML内にCSS、JavaScript等記述可能
- BASE独自のタグや変数、ルールあり
- 全部自由にできる訳ではない
【参考】HTML編集App
【参考】BASE Developers
HTML編集を行うことで次のような弊害もあるので、しっかりと自身で保守できる場合のみ利用するのが賢明です。有料テーマならなおさら。
- 表示崩れなどトラブルが起きた場合、修正してもらうのが難しい
- テーマの自動アップデートが適用されなくなる
HTML編集Appのインストール、使い方は後述します。
BASE（ベイス）のデザイン変更方法
ザックリとここまでをまとめると、BASEのデザイン変更は以下の通り。
- 無料テーマを使用
- デザインマーケットから有料テーマを購入
- HTML編集Appを使ってオリジナルカスタマイズ
それぞれの手順を解説していきます。
無料テーマを利用したデザイン設定方法
-
STEP1デザイン選択
BASEにログインして上部メニューバー『デザイン』を選択します。
-
STEP2テーマの選択
左メニュー『デザイン編集』内の『テーマの選択』を選択します。
-
STEP3テーマを選択
一覧の中からテーマを選択すると右側にプレビューが表示されます。テーマが決まったら上部の『使用する』をクリックします。
-
STEP4デザイン調整
ロゴや背景などを調整します。
調整が完了したら上部の『保存』をクリックして完了です。
HTML/CSSの知識があれば、HTML編集Appを用いてカスタマイズも可能です（手順は後述）。
有料テーマの購入・デザイン設定方法
-
STEP1デザインマーケットへアクセス
-
STEP2テーマを選ぶ
テーマ一覧は中央上部のプルダウンから表示を変更できます。
- オススメのテーマ
- 人気のテーマ
- 新着のテーマ
- すべてのテーマ
各テーマの詳細画面にはテーマの説明のほか、使い方やデモサイトを用意しているものもあるので、希望に則しているかしっかり確認しましょう。
『プレビュー』ボタンを押すと、実際にどうなるのか確認することができます。
有料テーマ「Helsinki」 -
STEP3プレビュー機能
プレビュー機能ではテーマ固有の細かい設定も確認できます。
- 編集可能項目は何があるか？
- スライドショーはどのように設定するか？
- 表示/非表示切り替えるとどうなるか？
など、テーマによる違いなどもわかるので、
- 実際にコンセプトカラーやロゴなどを適用してみてどうなるか？
- 使いやすいか？
といった角度でもしっかり確認しましょう。
Helsinkiのプレビュー画面 -
STEP4気にいったら購入
テーマが決まったら『購入』ボタンをクリックして進めましょう。
決済方法はクレジットカードのみです。
オリジナルデザインカスタマイズ方法（HTML編集App）
BASEにはテーマ（テンプレート）によるデザイン変更のほか、自身でHTMLを編集する機能もあります。
- HTMLファイル内にstyleやJavaScript記述可能
- 外部ファイルを参照させることも可能
カスタマイズするには『HTML編集App』が必要です（無料）。
-
STEP1HTML編集Appのインストール
-
STEP2HTMLの編集①
HTMLの編集は『デザイン編集』画面から行います。
-
STEP3HTML編集②
HTMLエディターが表示されるので、ここで編集を行います。
詳しい仕様は公式ドキュメントを見てください。
【参考】BASE Developers
独自のテンプレートタグを利用しながらマークアップしていくので、少しクセはあります。
【参考】ショップデザインを外注する
デザインは外注することもできます。
coconala（ココナラ）だと有名ですし、募集も多いです。
BASEのネットショップ作成だけでなく、ロゴ、バナー、ヘッダー作成などの仕事依頼も出ています。
【参考】coconala（ココナラ）
BASE（ベイス）のショップデザインまとめ
デザイン性の高いショップにしたければ、有料テーマの導入が最も手軽。価格も安いですし。
とはいえ、商品写真のクオリティが良ければ、無料テーマのままでもハイセンスなECサイトに仕上げることも可能です。
- テーマ（テンプレート機能）で簡単にデザイン変更できる
- テーマは無料・有料あり
- 無料テーマでもオシャレなショップはある
- 有料テーマは買い切り（5,000円~13,200円）
- HTML編集Appをインストールすることでオリジナルカスタマイズも可能
- カスタマイズにはHTML、CSSだけじゃなく、独自テンプレートタグの理解が必要
- デザインを外注できるプラットフォームもある（ココナラなど）
これからECサイトを運営したいと考えている人は、実際に作ってみた方が理解が早いです。
BASEは初期費用も月額費用も無料なので、コストリスクはありません。
開設手順を画像付きで説明しているので、『よし！やってみよう！』と思った方は、下記記事を参考にしてみてください。
【関連記事】BASEの始め方（開設手順）
最後まで読んでいただきありがとうございました。
