BASEでECサイトを作る場合に最低限やっておきたいこと

ここ1年くらい、ECサイトの公開相談をYouTubeやTwitterのスペースで何回かやってみたんですが、お問合せ頂いた方がお使いのカートはshopify or BASEのほぼ2択。shopifyの場合、アプリも豊富ですから事業者の方々も何かしらググったりして対策を取っていることが多かったのですが、全く手付かずだったのがBASE。筆者もBASEは数年触っておらず、これを機に「どの程度のことが実現可能か？」を簡単に確認してみましたが、意外とやりようあるなぁという印象。せっかくなので学生さんの授業でも「BASEを使ったECサイトの簡易な制作」を実行するにまで至っております。

BASEをお使いの事業者の方々はもしかすると、BASEの使い方をそこまで掘っていない可能性があるかも？と思いましたので、ここで簡単に記載しておきたいと思います。

（余談ですが、2013年にファッション専門学校の授業でBASEを初めて使ったのは私です。）

今年もBASEでＥＣ授業！ pic.twitter.com/YLU4qN4Qsb

— 深地雅也 (@fukaji38) December 5, 2014

◯ショップのロゴでか過ぎ問題

まず、あるあるなのがこちら。BASEでは初期、めちゃくちゃプレーンなデザインテーマが設定されており、デフォルトの設定のまま使われている方がちらほらいらっしゃいます。その場合、

まぁこんな感じでヘッダーど真ん中にロゴが出てきます。ここに自社のロゴを設定することができるのですが、サイズの調整をしていないケースが多く、めちゃくちゃでかいロゴだけの画像が表示されていることが多いです。また、どうしてもロゴが真ん中にくるので、PCで見た時に「よくあるECサイト」の見え方になりません。

ベイクルーズストア

（こんな感じ。）

上記のようなよくある感じにする場合、まずはデザインテーマの選択から間違っています。管理画面の「デザイン」をクリックし、左のメニューにある「テーマ」をクリック。

ロゴが左に寄っているデザインテーマ（この場合は「STANDARD」）を選択。あとはロゴの画像データサイズを調整してあげますと、

このような感じに調整できました。グローバルナビゲーションの下にスライドショーを差し込むと、これもまたよくあるメインヴィジュアルの見せ方になりますね。

◯商品リスト無限スクロール問題

では続いてこちら。「商品を並べたい」という時に、皆さん使われるのが「商品一覧（グリッド）」というパーツが最多なんですが、これを使いますと登録した商品が全て表示されてしまいます。商品が多過ぎますと無限スクロールにしか見えません。しかし、普段お使いのECサイトはそうなっていますでしょうか？

デイトナパーク

よくあるECサイトは、このように「ランキング」とか「新着商品」ごとにセクションが区切られていて、複数点表示させた後はCTAで一覧へ飛ばすリンクを設置しています。これをBASEでやろうと思うと使うパーツは「ピックアップ商品」なんです。

で、その下に「ボタン」を設置してください。

そうすると下記のような見え方になります。（パーツごとの名前やボタンに表示されるテキストもそれぞれ編集可能）

問題は、こちらのパーツは全て手動でアイテムを設定しないといけないので、それだけは手間がかかりますね。例えば「アウター」という項目で商品を並べた際、表示されている6点は手動でアウターを自分で設定します。ボタンにはリンクの設定が可能なので、この場合は「アウター一覧ページ」をあらかじめ作成しておき、そのURLを設定すればOKですね。（「カテゴリー管理」というアプリをインストールすると作成できます。）

◯トップページに導線がほぼ無い問題

先ほどの問題とつながってくるのですが、トップページはほぼ商品の羅列で終わってしまいますのでグローバルナビゲーションが過ぎ去った後は商品詳細ページにしか飛べません。しかし、あらかじめ商品以外のサイトコンテンツを作り込んでおけば色々とやりようはありますね。まずはブログ機能でしょうか。（アプリで「Blog」をインストール。記事を複数作成しておく。）

そうすると、ブログ記事が新着から複数並びます。タイトルとアイキャッチ画像が見えますので、興味関心を引くタイトルで記事を随時作成しましょう。

あとは「ページ追加」というアプリをインストールしておけば、ショッピングガイドやアクセス、FAQページなども簡易に作成可能です。（テンプレートが用意されております。）これを応用すれば、ちょっとしたLPから、リッチなABOUTページの作成、会員特典ページなども簡易に作れます。それらが作成できた後、パーツで「画像とテキスト（上下）」を選択して差し込んでください。

このパーツ、3枚の画像を設定することが可能で、全て差し込むとこのようにサイズが調整されます。先ほど作成しました固定ページをこれらのバナーのリンクに設定しますと、トップページにそれぞれの固定ページへの導線が作成されます。ページ追加は、ページを作成するごとにグローバルナビゲーションに項目が追加されていきますが、ここが多すぎると見栄えが悪いので、いらないものは非表示にしておきましょう。（デザインの「ナビゲーション」から設定可能）

◯search console設定していない問題

最後にsearch consoleの設定ですね。Googleアナリティクスはアプリが用意されており、トラッキングIDを設定するだけで計測は可能なのですが、そのGoogleアナリティクスの権限を用いてsearch consoleの設定も可能です。ほぼ皆様、やってませんでした。

と言いますのも、BASEには一応SEO設定というアプリがありまして、そこからトップページや商品ページのディスクリプションが設定できるようになっているのです。（商品一覧ページは不可。しかしなんでまだmeta keywordの設定項目があるんや…。）タイトルに関しては「商品名」等で調整するしかありませんが、一応簡易に対策ができますから、効果検証にはsearch consoleが必要になるでしょう。

ちなみに先述しましたGoogleアナリティクスの連携は可能なものの、eコマース設定は不可。更には今のところGA4に対応しておりません。（この1点で個人的にはSTORESを選んでしまう。）

このあたりが目立った点でしょうか。細かい部分にフォーカスすると他にも色々ありますので、それはまた「応用編」としてどこかで書きたいと思います。これだけでも素人っぽさはやや無くなりますし、回遊する為の導線も複数作れますので、BASEのEC運用でお困りの方は是非実行してみてください。