2020年05月13日

サクサクできる!話題のshopleapでフリーページを作ってみた

shopleap(ショップリープ)って何?

Yahoo!ショッピングのストア運営における強い味方であるB-Spaceのネットショップ反映ツール。その1つであるshopleapは「10分で自社ECサイトが作れる」と噂のECサイト作成ツールです。

しかし、「簡単に作れる」と聞くとストア運営の現場担当者からはこんな不安の声も。

テンプレートのみで思うようにページが作れないのでは?
・カスタマイズ性が少ないのでは?

ご安心ください。shopleapはストアが自由にページをカスタマイズできる「フリーページ作成機能」があります。そこで今回は、shopleapで実際にフリーページを作成して、その難易度や自由度を検証してみました。

フリーページとは

フリーページとは、内容を自由に作成できるページのことで、特集ページやイベントページなど、好きな内容をサイト内に掲載するために使用します。

shopleapでのフリーページの作成方法は以下の2種類です。

  • CMSを使って作成する方法
  • HTMLを使って作成する方法

CMSを(※1)使って作成する方法は、あらかじめshopleap内に用意されているコンテンツの中からお好きなものを選んで作成する方法です。

HTML(※2)を使って作成する方法は、ご自身でHTMLを組んで作成していただく方法になります。

※1:CMSとはContents Management System の略で、web制作に必要なコーディングの専門的な知識が無くてもwebサイトを構築・管理・更新できるシステムのことを指します。

※2:HTMLとはHyper Text Markup Language の略で、Webページ作成の際に使用されるプログラミング言語です。HTMLを使用したページの作成方法について詳しく知りたい方はコチラをご覧ください。

フリーページ制作のメリット

programmer

フリーページを作ることで、ストアのオリジナル性をアピールできます。

フリーページを使ってオリジナルのコンテンツを掲載することで、競合ストアとの差別化を図り、ストア独自の個性や優位点を明確にすることができます。

フリーページ制作例

ストア内のどのようなページにフリーページを使用しているか、代表的な例を以下に挙げました。フリーページを作成するときの参考にしてみてください。

⑴「ランディングページ
ランディングページ(Landing Page, LP)とは、広告やバナーをクリックした際に表示されるページのことで、ある商品やサービスを販売することに特化しています。商品の販売に焦点を当てることができるので、ストア内のイチオシ商品の販売促進に有効です。

⑵「よくある質問」
お客様からよくある質問をまとめたページです。購入を迷っているお客様に安心感を与えることができます。特に単価が高い商品の場合は特に求められるページです。画像などを使用してお客様の不安を拭いましょう。

⑶「お客様の声のご紹介

実際に購入したお客様の声を掲載するページです。前述した「よくある質問」のページ同様に、購入を迷っているお客様に安心感を与えたり、購買意欲を促進させる役割があります。

⑷「スタッフ紹介

スタッフの顔とコメントを出すことでお客様が安心して購入することができます。実店舗でも、特に食品などでは「生産者の声」として顔写真やコメント掲載が増えるようになりました。

⑸「実店舗のご案内
「実店舗のアクセスマップ
実店舗がある場合は、実店舗の紹介をするページを設けましょう。一般的にECサイトはオンライン販売のためのサイトのため、実店舗への案内についてはフリーページを活用して作りましょう。

では、実際にshopleap内でフリーページ作成に挑戦してみましょう!

フリーページを作成してみよう

まずは、B-Spaceのツール選択画面から一番下にある「shopleap」を選択します。

shopleapの管理画面に切り替わるので、トップページ左側メニューの中から「フリーページ」を選択します。

フリーページ作成画面に切り替わりるので、画面上部の「ページを追加する」を選択します。

作成方法をCMSかHTMLから選択します。今回はCMSを選択します。

以下のように、白紙状態のフリーページができますので、ここからページをカスタマイズしていきましょう。

フリーページ作成画面の各操作説明

作成にあたり、まず、フリーページ作成画面の操作方法を説明します。

No.機能詳細
プレビュー切り替えプレビュー画面をパソコン用もしくはスマートフォン用に変更します。
戻るホーム画面に戻ります。
保存操作の保存をします。
設定項目ページを構成する要素を設定します。
非表示設定項目を非表示にします。
プレビュープレビューが表示されます。

ページ公開までの手順は以下です。

  1. ページ設定を行う
  2. ページを作成する
  3. 公開する

1.ページ設定を行う

まずは、作成するフリーページの設定を行いましょう。画面左上部にある「ページ設定」を選択します。

画面左側が設定画面に切り替わり、ページの設定項目が表示されます。


入力項目詳細
ページタイトルページのタイトルを入力します。ページの内容を反映した、わかりやすいタイトルをつけましょう。
メタタイトルメタタイトルを入力します。※メタタイトルとは、検索エンジンの検索結果で表示されるページのタイトルのことです。
メタディスクリプションメタディスクリプションを入力します。※メタディスクリプションとは検索エンジンの検索結果で表示されるページの説明のことです。

画面下の「Google検索結果の表示イメージ」欄に、入力した情報がGoogleの検索結果と同じように表示されるので、こちらを参照しながら入力すると良いでしょう。

記入が終わったら、右上の「保存」ボタンを押してください。

2.ページを作成する

今回はスタッフ紹介ページを作成してみます。

最初に、shopleapのCMS機能として用意されているセクションの中からトピックスを使用して、ヘッダーとページの内容を簡単に紹介するテキストを設定します。

画面左の「セクションを追加」を選択します。

セクション一覧の中から「トピックスを追加する」を選択します。

「見出し」を入力します。

「画像を選択する」ボタンからイメージ画像をアップロードします。

「画像をアップロード」を選択して端末内から画像をアップロードできます。掲載したい画像を「画像をアップロード」欄にドラッグ&ドロップすることでもアップロードできます。

アップロードした画像を選択します。

画像の幅を指定します。画像を横幅の何%に設定するかをプルダウンにて選択します。

ここでは100%で設定してみました。

画像の下に掲載されるテキストを入力します。

次は、スタッフ紹介コンテンツを作成してみましょう。今回は顔写真と紹介文を設定します。

「セクションを追加」を選択します。

セクション一覧の中から「画像付きテキストを追加する」を選択します。

画像付きテキストの作成画面です。「画像」ボタンを選択します。

「画像を選択する」ボタンから掲載したい画像をアップロードします。

アップロードした画像が、画面右側のプレビュー画面に反映されます。

次に、画像に対応するテキストを入力します。こちらも画面右側のプレビュー欄に反映されるので、掲載イメージを確認しながら入力します。テキストの編集機能は以下のとおりです。

No.詳細
文字列を太字にします。
文字列を斜体にします。
文字列にリンクを挿入します。
文字列の文字色を指定します。
文字列の背景色を指定します。
文字列の装飾を削除します。

上記の操作を繰り返して、あっと言う間にスタッフ3人分の紹介を作成できました。

次に、B-Spaceの機能であるにぎわいバナー(※)を追加して、ページを装飾します。

※にぎわいバナーとは:画像を用意して設定するだけで簡単にバナーを作ることができ、さらには性別や年代毎のターゲットに対して表示するバナーを自動で切り替えてくれるB-Spaceの機能です。
▶︎選ぶだけ簡単!ストアページをB-spaceで作ってみた | にぎわいバナー編

「セクションを追加」を選択します。

セクション一覧の中から「にぎわいバナーを追加する」を選択します。

標準ではshopleapのテンプレートバナーが表示されます。B-Spaceのにぎわいバナーに登録しているバナーをフリーページに掲載したい場合は、「にぎわいバナーを選択」ボタンを押します。

B-Spaceに登録されている、にぎわいバナーの一覧が表示されるので、フリーページに掲載したいバナーを選びチェックを入れます。変更内容が右側のプレビュー画面に反映されるので、プレビューを確認しながらの設定が可能です。

今回は5のつくキャンペーンバナーを挿入してみました。

これでスタッフ紹介ページの完成です。にぎわいバナーによって自動でスライドする動きのあるバナーも掲載され、ページに動きが加わりました。

この他にも、shopleapのCMS機能を使って多数のコンテンツをページ内に挿入できます。

  • セクション   
  • 商品リスト
  • リッチテキスト
  • 画像付きテキスト
  • カスタムHTML
  • にぎわいバナー
  • おすすめ商品
  • ランキング商品

各セクションの詳しい操作説明はこちらをご参照ください。

3.フリーページを公開する

作成したフリーページの公開や削除などの管理作業は、画面左のメニュー内にある「フリーページ」から行います。

作成したフリーページの一覧が表示されるので、公開したいページタイトルにチェックを入れて、「一括公開」ボタンを押します。

「公開されました」という表示が出れば公開作業完了です。

尚、公開したフリーページをshopleapで作成したECサイトに掲載するには、ナビゲーションメニューから導線を追加する必要があります。

追加方法については、近日公開の記事にてご紹介させていただきます。

まとめ

CMSを活用しても実際はかなり時間がかかるページ作成ですが、shopleapではとても簡単に作成することができました。

セクション一覧から必要な構成を選び、入力欄を埋めるだけで、手間をかけることなくスピーディーに作業することができます。

また、管理画面が非常にシンプルなため、フリーページを複数作成した場合でも、管理がしやすくなっています。

ぜひ、shopleapで自社ECサイトのフリーページを充実させて、競合他社に差を付けましょう。

※B-Spaceに関するお問い合わせは、当ブログ右上「B-Spaceのお問い合わせ」より、ストアアカウントを添えてご連絡ください。

こちらの記事もどうぞ

お申込はコチラ※初月無料特典実施中! 導入の合相談お問い合わせはコチラから