真の使いやすさを追求したWPテーマ『JIN』
BASE

BASE(ベイス)のテンプレート(無料・有料)を上手に活用!コツやショップ事例も解説

コツやショップ事例も解説

BASEはWeb制作の知識がなくても、手軽にネットショップを作れるのが魅力です。テンプレートを活用すれば、Web制作の知識がなくてもおしゃれなショップを簡単にデザインでき、設定しだいでレイアウトにも個性が出せます。

この記事では、BASEのショップをどのようにデザインしたらいいか悩む人に向けて、テンプレートの種類や上手な活用方法、ショップの活用事例、HTML編集によるカスタマイズなどを解説しているため、ショップ作りに役立ててください。

BASEで使えるテンプレ―トには無料版・有料版がある

BASEには無料のテンプレートと、BASEの「デザインマーケット」で提供されている有料テンプレートの2種類があります。ネットショップのデザインは売上に大きな影響を与える重要な要素です。ここでは、無料版・有料版それぞれのメリット・デメリットを解説します。

初心者・コストを抑えたい場合に適した「無料テンプレート」

無料テンプレートは、全部で11種類あります(2020年10月時点)。「SIMPLE」「COOL」「VIVIT」「NATURAL」「FANCY」などがあり、ショップのイメージにあわせて選べます。また、すべてのデザインがスマートフォンでの閲覧に対応しています。手軽に作れるため、初心者やコストを抑えたいショップ経営者におすすめです。

無料テンプレートのメリット

11種類の無料テンプレートは、どれも標準的なデザインに仕上げられています。テイストも一通り揃っているため、細かなこだわりがなければ、大抵のショップコンセプトに対応できるでしょう。どのテンプレートでも、カラーやロゴ画像などの設定変更が可能です。人気ショップのなかにも、無料テンプレートを使っているところがあります。

無料テンプレートのデメリット

それぞれの無料テンプレートは色使いやデザインは異なるものの、レイアウトはほぼ同じです。そのため、個性的なショップ作りをしたい経営者にとっては、やや物足りない部分があるかもしれません。

扱う商品や品数などによっては、チープな印象や素人が経営している印象を持たれてしまう可能性があります。外観でショップの存在感や信頼を得にくいことがデメリットといえます。


デザイン性に優れた「有料テンプレート」

BASEの「デザインマーケット」で提供されている有料テンプレートは50種類あります(2020年10月現在)。これらは主にWeb制作会社やWebデザイナーが制作しており、BASEが機能やデザインをチェックしてから公認されています。審査が厳しいこともあり、どれもクオリティが高くなっています。

有料テンプレートは無料テンプレートよりも凝ったデザイン、個性的なデザインが多いです。種類も多く、ショップイメージにぴったりのテンプレートをみつけやすいことがメリットです。

ショップの印象がよくなれば、信頼感と売上のアップが期待できます。実際、人気ショップの多くは有料テンプレートを使っています。価格は数千円~数万円とそれほど高くなく、月額使用料もかかりません。

有料テンプレートのデメリット

一部の有料テンプレートはアップデートを終了しており、不具合の修正やBASEの仕様変更などに対応していません。購入前に最終更新日をチェックしておきましょう。また、値段が高くても無料テンプレートとあまり変わらないものもあります。内容重視で比較検討することが大切です。

ここからは、BASEのテンプレートを上手に活用するうえでの重要なポイントを7つ解説します。

ショップのコンセプトとターゲットを明確にしてテンプレートを選ぶ

まずは、ショップのコンセプトとターゲットを決めてからテンプレートを選ぶと、訴求力が高まり、売上向上が見込めます。テンプレートの変更は、BASEの管理画面から「デザイン」をクリックし、デザイン編集項目のなかの「テンプレート」から選んで行えます。いろいろと試してみたうえで、イメージに近いものを選びましょう。

統一感を出す

全体的な色合いやフォント、使用する画像の色や雰囲気を統一すると、ショップ全体にまとまりが出ます。細かなところまでテイストを統一すれば、全体として世界観やオリジナリティも演出できます。ただし、テンプレートにはすでに統一感があるため、調整しすぎないこともポイントです。

人気ショップのレイアウトを真似る

見やすい商品レイアウト・わかりやすい商品説明などと、おしゃれなレイアウト・インパクトのある色使いなどは両立しにくいものです。商品の見せ方やデザイン性とのバランスの取り方は、人気ショップに学ぶのが効率的です。外観だけでなく、写真の撮り方や商品説明の内容、分量なども含めて、よいところを取り入れていきましょう。

ショップと商品のイメージにあったカラーを選ぶ

モダン、クールな印象を出したい場合は寒色系、暖かみや活気を出したい場合は暖色系など、色の選択でショップのイメージは大きく変わります。テンプレートを選んだ時点で基調色は決まっていますが、設定を変更できるものもあります。レイアウトやデザインが気に入った場合は、カスタマイズが可能か調べてみましょう。

手軽に個性を出せる背景画像を活用する

手軽にショップの個性を演出できるのが、広いスペースを占める背景画像です。画像は自由に選べるため、自分でこだわって撮影・制作して使うのもよいですし、フリー素材を使うのもひとつの方法です。ただし、主役である商品が見にくくなったり目立たなくなったりする画像は避けましょう。

店の看板「ロゴ」にこだわる

ショップロゴを持っているなら、ぜひ使いましょう。BASEのショップにおいて「ロゴ」は店の看板です。個性的なロゴならユーザーの記憶に残りやすく、他社との差別化が図れます。BASEの「ショップロゴ作成App」は、手軽にロゴを作れるツールです。ロゴを持っていない場合は、インストールして活用してみてはいかがでしょうか。

有料版のテンプレートは機能もチェック

無料版の場合はレイアウトも機能もほとんど同じになっているため、デザインのみで比較検討しても問題ありません。しかし、有料版の場合は、バナーを追加する機能、おすすめの商品を目立つ位置に配置できるピックアップ機能、スライド表示機能などがあります。さまざまな機能があるため、細かく検討することが大切です。

無料テンプレートの事例

細かなカスタマイズをしたり高額の有料テンプレートを購入したりしなくても、魅力的なショップ作りは可能です。ここでは、無料テンプレートの活用事例を紹介します。

シンプルな商品にぴったり「民芸新時代」

農閑期の仕事(民芸)として製作された漆椀をリプロダクトして販売しているのが、「民芸新時代」です。素朴で温かみのある商品は、主張が少ない無料テンプレートにぴったりです。商品のよさをシンプルにアピールしたいショップ経営者は、ぜひ一度試してみてはいかがでしょうか。

ヘッダー画像を変えるだけでおしゃれに「haraotote」

ヘッダー画像を変えることで無料テンプレートをおしゃれに使いこなしているのは、ハンドメイドバッグを販売する「haraotote」です。手書きイラストがほんわかと可愛く、ショップのコンセプトを自然に伝えています。たった1カ所手を加えるだけで印象がよくなるため、画像やショップロゴなど、ワンポイントの工夫をしてみましょう。

有料テンプレートの事例

ここでは、BASEではめずらしい縦書き可能のテンプレートと、高級価格帯で人気のテンプレートの2つの活用事例を紹介します。

めずらしい縦書き対応「はんなり」

「はんなり」は、BASEではめずらしい縦書きに対応している有料テンプレートです。和テイストの商品を扱っているショップは、活用するメリットが大きいでしょう。「はんなり」を活用したデモショップも用意されており、完成イメージを確認できます。なお、商品名や説明文は横書きで、スマートフォン表示にも対応しています。

高級価格帯の人気テンプレート「Amsterdam(アムステルダム)」

「Amsterdam(アムステルダム)」の販売価格は13,200円であり、5,000円~8,000円ほどが一般的な有料テンプレートのなかでは高級価格帯です。それでも人気が高いのは、フォントやアニメーションなどデザインの質が全体的に高いからです。

また、縦型の画像に対応していることや、インスタグラムのフィードを埋め込めることから、ファッション関連のショップによく使われています。

BASEテンプレートを「HTML編集 App」でさらにカスタマイズ

テンプレートをより細かくカスタマイズしたい場合には、HTMLを編集します。ここでは、カスタマイズできる部分と方法を解説します。ただし、HTMLやCSSなどの知識が必要です。

カスタマイズできるのは3ページ

HTMLを含めた詳細なカスタマイズができるのは、「トップページ」「商品紹介ページ」「aboutページ」の3ページのみです。HTMLを編集することで、たとえばトップページにスライド表示を挿入できます。

BASE「HTML編集 App」をインストールする

HTMLを編集するには、「HTML編集 App」のインストールが必要です。2020年10月時点ではBASEにおいて無料で提供されています。「HTML編集 App」の基本機能は「デザイン・レイアウトの変更」「変更後のプレビュー確認」「HTML、CSS、Javascriptの編集」の3つです。

カスタマイズ(HTML編集)の流れ

HTMLやCSSなどの知識を前提とするため詳しい内容は省略しますが、HTML編集によるカスタマイズの一般的な流れは以下の通りです。

1.「HTML編集 App」を開き、ダッシュボードの「デザイン」にある「HTMLを編集する」をクリック

2.任意の場所のHTMLを編集

3.「プレビューの更新」をクリックして、変更後のデザイン、機能を確認

4.「保存」ボタンを押して編集完了

まとめ

BASEには11種類の無料テンプレートと50種類の有料テンプレートの2種類があります。自社ショップのコンセプトや目的にあったものを選びましょう。色や背景画像、ロゴなどをショップイメージにあわせてカスタマイズすることも重要です。

Crossma(クロスマ)は、あなたのEC事業を徹底サポートする画期的な一元管理システムです。楽天市場、Yahoo!ショッピングなどの主要モールにおける複数ショップ経営の業務を効率化し、キャッシュフローをよりよくサポートしてくれます。現在、詳しい資料を無料で配布中なので、ぜひ活用してみてください。

クロスマお問い合わせ・資料DLはこちら

公式LINEでお得な情報配信中!

ECのウンエイ LINE公式アカウントでは友だち申請募集中!! LINE公式アカウント限定で、ECサイトの運営に役立つコンテンツを提供しています。 また、LINEからのお問い合せも承っています。 友だち申請よろしくおねがいします!!