BiNDクラウドでオンラインショップサイトを即席オープン｜いまどきWEB07

2015年01月06日 16時00分更新

オンラインショップはカートがめんどう

　こんにちは。ライターの松下です。会社のホームページをBiNDクラウドを使ってリニューアルしていくWeb企画の7回目です。前回までで、SNS連携、モバイル対応、Facebookページのカスタマイズして、会社の紹介はこれで十分といったところです。

　前回のお話はこちらをご覧ください。

　実は、弊社ではオンラインショップを運営しています。というか、運営しておりました。

『ZenCart』というオープンソースのオンラインショップ構築プログラムを使っていたのですが、オープンソースプログラムは、バグも多く、ちょくちょくバージョンアップします。その都度、自力で対応しなければならず、管理が大変なのです。タダより高いものはないですね。ということで、いったん閉店してつくり直すことにしたのです。

　BiNDクラウドにはカート機能があり、プロコース（月額2980円）なら1000個までの商品販売ができるそうです。オンラインショップ用のテンプレートもあるし、いまどきのショップに新装開店できそうです。

　ということで、さっそくつくってみましょう！

“BiND Cart”でショップを開設！

　おおまかな手順としては、まず“BiND Cart”機能でショップ情報や商品を登録して、次に、BiNDクラウドでショッピングサイトを作成します。



↑コントロールパネルの“各種設定”から“BiND Cart”を開き、“新規にショップを開設”ボタンをクリック。



↑ショップ設定ウィザードがはじまる。ショップコード、パスワードに任意の文字を入力しよう。“ショップ名”には店の名称、“ショップURL”は実際にショップページを設置するURLを入力しておく。最後に“ショップを開店”ボタンをクリック。

　無事に開店すると、BiND Cartの“ダッシュボード”という画面が開きます。ここでは、支払い方法、送料、販売する商品の登録といった販売を始めるために必要な情報を入力します。また、受注、顧客管理もこの画面から行ないます。



↑BiND Cartのダッシュボード。ここでショップの商品や受注管理を行なう。



↑支払方法は、“銀行振込”、“郵便振替”、“代引き決済”から選択。決済代行会社イプシロンと契約すればクレジットカード決済も利用できる。定型文が入力されているので、口座番号などを書き換えるだけ。

　支払方法、送料などを入力したら、次は商品の登録です。



↑“商品管理”画面を開き、“新しい商品を登録する”ボタンをクリック。

↑商品管理番号、商品名、価格、商品画像、在庫の数などを入力する。商品がたくさんある場合は、CSVファイルによる一括登録も可能だ。

　ショップ情報と商品を登録したら、ダッシュボードでの作業はおしまい。次は、ショッピングサイトづくりです。

BiNDクラウドでオンラインショップを作成

　ここからはいつもどおり。BiNDクラウドを起動して、新規サイトを作成していきます。オンラインショップ用のテンプレートが用意されているので、商品のイメージ写真や説明文を入れ替えていきます。



↑サイトの種類から“オンラインショップ”を選択して、好みのテンプレートでサイトを作成する。



テンプレートの画像や文章を入れ替えていく。“プライバシーポリシー”や“特定商取引法に基づく表記”といった通販必須の項目も忘れずに入力しよう。

BiND Cartを組み込む！

　ショッピングカートのブロックに、“カートに入れる”ボタンにBiND Cartを組み込みましょう。



↑カートに入れるボタンパーツを選択して、右パネルにある“BiND　Cartを起動する”ボタンをクリック。



↑ショップコードとパスワードを入力して、BiND Cartにログイン。



↑“カートに入れる”を選択して、“次へ”ボタンをクリック。次の画面に進むまで時間がかかることがあるので、反応がなくてもしばらく待とう。



商品を選択して、“次へ”ボタンをクリック。



↑商品タグのデザインを選択して“次へ”ボタンをクリック。



↑ボタンのデザインを選択して、“次へ”ボタンをクリック。



↑以上で設定は完了。“適用”ボタンをクリック。



↑商品購入ページの“カートに入れる”ボタンがBiND Cartの商品と結びつけられた。

注文を試してみよう

　完成したショップサイトは、“shop”という名前のディレクトリーを作成してアップロードしました。カートが正しく機能するか、注文を試してみましょう。



↑商品のページを開き、“カートに入れる”をクリックしてみる。



ショッピングカートの画面が表示された。商品や送料の表示が正しいかどうかを確認して“ご注文手続きへ”をクリック。

↑注文者情報を入力し、次の画面ではお支払方法を選択。自分が買い物するときは読み飛ばしてしまいがちな部分だが、内容に誤字脱字がないかもよく確認しておこう。

↑確認画面が表示される。実際に注文してみよう。注文メールが自分宛てに届き、BiNDCartのダッシュボードに注文内容が登録されていればオーケーだ。

　BiNDカートのダッシュボードでは、売上額や受注数が表示されます。また「受注管理」画面で、出荷や入金情報の管理、納品書の印刷などが可能です。



ダッシュボード画面。最近の受注や在庫状況、売上/受注の推移グラフなどが確認できる。



受注管理の画面では、発送や入金のステータス管理や納品書の印刷を行なう。

Facebookでオープニングキャンペーンを打ってみた

　ショップを開店したら、次は宣伝です。SNSで広めなくては。前回、BiND for Facebookの“タブ設定”には、訪問者が“いいね！”しているかどうかで、表示するページを切り替えられる機能がありました。これを使って、キャンペーンを打とうと考えていたのですが、どうやらFacebookのプライバシーポリシーが変更され、現在は“いいね！”の有無でページを切り替えることは不可能になったようです。

　とはいえ、Facebookページに誘導できればそれだけでも十分。Facebookページにキャンペーン用のコンテンツを追加して、ショップのヘッダーにFacebookページへのリンクを追加しました。Facebook側で新商品情報や使いこなし紹介などを更新していくようにすれば、ショップとうまく連携していけそうですね。