2021年02月08日

売りたい商品の特集ページを作ってみよう|新生活応援ver.

春は入学や新学期、新入社など新しい生活が始まるタイミングです。

何かと物入りな新生活、何を揃えたらいいのか迷う方も多いと考えられます。そこで、新生活に必要な商品を陳列した特集ページを制作し、買い回っていただけるような売り場の準備をしましょう。

今回はB-Spaceサービスのshopleapを利用して、誰でも簡単に作れる特集ページ制作方法をご紹介します。

shopleapとは

shopleapとは、B-Spaceのサービスの1つで自社ECサイトが簡単に開設できるツールです。Yahoo!ショッピングと並行して独自ドメインでECサイトを運営でき、サイトの分析機能もついています。

shopleapの特徴は以下のとおりです。

  1. 商品詳細からカート以降はYahoo!ショッピングと共通化、商品管理・在庫管理・配送管理などすべて一括管理
  2. 豊富なテーマでお店のイメージとあったデザインが自分で制作でき、ランキングやおすすめ商品などのパーツも管理ツールから簡単設定
  3. 申込書、書類提出など面倒な手続きが一切不要、自社ECサイトを気軽に簡単に開設

「shopleap」について詳しくはこちら

フリーページ制作機能

shopleapはHTMLの専門知識がなくてもオリジナルのフリーページが制作、公開できる機能があります。この機能を使って、特集ページやキャンペーンページを作っていきます。

ページ制作は登載されているパーツをドラッグ&ドロップで入れ替えたり、差し込み画像を選定したり、テキストを打ち込んだりするだけです。

特集ページの作り方

shopleapで特集ページを制作する前に、特集ページで使う素材を用意しておきましょう。素材の制作にはB-Spaceの「GAZN(ガゾーン)」と「にぎわいバナー」を使用します。

特集ページで使う素材を用意する

特集ページで使う素材は以下のとおりです。

  • 特集ページのタイトルバナー
  • 特集ページへの誘導用看板バナー
  • 特集ページへの誘導用ひと言コメントバナー

特集用バナーの制作方法

バナーの制作にはB-Spaceのらくらく画像制作ツール「GAZN(ガゾーン)」を利用します。テンプレートが豊富にあるので、文字とが画像を変更するだけで誰でも簡単にバナーが制作できます。
「GAZN(ガゾーン)」について詳しくはこちら

■特集ページのタイトルバナー(2000px×1000px)

■特集ページへの誘導用看板バナー(2580px×400px)

■特集ページへの誘導用ひと言コメントバナー(640px×400px)

特集用バナーの設定方法

バナーをストアに設置するために、B-Spaceの「にぎわいバナー」を使って、バナーとリンク先、ターゲット、表示方法などを設定していきます。

「にぎわいバナー」を利用すると複数のバナーをスライド表示させたり、ターゲットに合わせて見せたいバナーを自動で切替たりできます。
「にぎわいバナー」について詳しくはこちら

今回は「にぎわいバナー」を利用して、先ほど「GAZN(ガゾーン)」で制作した特集タイトルバナーを以下のように設定していきます。

shopleapで特集ページを制作する

素材を準備したらshopleapで特集ページを制作していきましょう。B-spaceのトップページからshopleapに進んでください。

shopleapの左サイドメニューからフリーページを選択します。

ページを追加するボタンをクリックし、フリーページの種別を選びます。HTMLの知識のない方はCMSを選んでください。

新規作成画面に移るので、各種設定を行っていきます。Googleで検索されたときに表示されるページのタイトルと説明にあたる、「ページタイトル」「メタタイトル」「メタディスクリプション」を入力します。

ページのURLは任意の英語もしくはローマ字を入れておきます。(ここではnewlifeとしておきました)

入力したら保存をして、ページ設定に戻り「セクション追加」で必要なパーツを選んでページを作っていきます。

ページ設定>セクションを追加>にぎわいバナーを追加する>にぎわいバナー設定で作成しておいたバナーを選択します。

その後は同じようにセクションを追加していきます。

今回はセクション設定>商品リストを選択し、見出しのテキスト、配置を以下のように設定しました。

陳列する商品は任意の商品を選んで手動で設定ができ、自動でも設定できます。

セクションを自由に追加し、ページを完成させます。

画面右上の「ページを見る」で最終ページを確認し、各種設定で公開/非公開を公開にして保存するとページが公開されます。

これでフリーページを利用した特集ページが作成できました。

ページのURLは画面左上に示されています。左端のアイコンをクリックするとページURLがコピーできます。

ストアトップから特集ページに誘導する

作成した特集ページへお客様を誘導する際にも「にぎわいバナー」を利用します。

看板バナーにページリンクを設定する方法

「特集ページで使う素材を用意する」の項目で用意した特集ページ誘導用バナーに、以下のように特集ページリンクを登録し、設定を保存、ストクリProへの貼り付け用タグを取得します。

看板バナーをストアに設定する方法

「にぎわいバナー」で取得した貼り付け用タグを、ストアクリエイターPro>ストア構築>ページ編集>編集画面内のフリースペースにタグを貼り付けます。

これでストアトップページに誘導バナーが設定できます。

同様に特集ページ誘導用ひと言バナーも作成し、「にぎわいバナー」で特集ページリンクの登録と貼り付け用タグを取得しておくと、商品詳細ページに特集バナーを表示させることもできます。

ひと言コメントについては以下の記事をご参照ください。

以上で、特集ページの制作からストアトップ、商品詳細ページから特集ページへの導線が作るまでができました。

まとめ

今回はshopleapを利用した新生活応援特集ページの制作方法をご紹介しました。新生活応援商品が並んでいると、そのページ内で買い回ってもらえるので、購入点数アップ、客単価アップが期待できます。

特集ページ作成は専門知識が必要で難しそうと思いがちですが、B-Spaceの「shopleap」「GAZN(ガゾーン)」「にぎわいバナー」を使えば、このように簡単に特集ページが作成でき、ストアへの設定もスムーズです。

この記事で紹介したページ制作方法を習得すれば、同じ工程で他の特集ページも制作できます。

shopleapは本来自社ECサイトを作成できる便利なツールですが、今回ご紹介したように特集やキャンペーンページのみでも活用できるので、「特集ページをどんどん作ってみたい!」とお考えのストア様はぜひご利用ください。

shopleapのご利用はB-Spaceのお申込みが必要です。お申込みについてはこちら

こちらの記事もどうぞ