第24回 前回のおさらい / ECサイトをつくろう②

事前準備

  • https://icc.firstelement.co.jp/ を開こう。
  • 「Local」を立ち上げて、icc-booksの左側のグレーの三角をクリックしてサイトを起動し、Localの右端にあるADMINボタンをクリックしてWP管理画面にログインしよう。

前回のおさらい

  • 「WooCommerce(ウーコマース)」はWordPressのECサイトプラグインとしてもっとも有名
  • ECサイトの”EC”は”electronic commerce”の略
  • ECサイト構築の選択枝
    • ショッピングモール = 楽天市場/Yahoo!ショッピング
    • マーケットプレイス = Amazon/ZOZOTOWN
    • ネットショップ構築サービス(ASP) = STORES/BASE/MakeShop/カラーミーショップ
    • 自社サイト = WordPress + WooCommerce/EC-CUBE
コスト自由度集客力特徴
ショッピングモール集客力あり / コスト高め / 競合多数
マーケットプレイス集客力あり / 独自色は出しにくい / 競合多数
ネットショップ構築サービス(ASP)独自色が出せる / システム管理はお任せ
自社サイト自分でつくれば無料(カード決済 / サーバ代などは別途) / カスタマイズ自由 / 集客のため努力が必要

「WooCommerce」でECサイトをつくる流れ

  • プラグインのインストール
  • ショップの基本情報
    • 店舗情報
    • 決済方法の設定
    • 配送方法の設定
    • 特商法の表記を入力
    • プライバシーポリシーの設定
  • 商品登録
  • 決済代行会社との契約、設定(銀行振込のみの場合は不要、サイトが未完成だと契約できない)
  • 決済モジュールのインストール、設定

WooCommerceの導入手順はこちら

商品注文の流れ(利用者)

  • 商品をカートに入れる
  • 決済画面に進む(チェックアウト)
  • 注文者情報の入力(氏名、住所、他)
  • 注文確定ボタンをクリック
  • 注文詳細メールが届くので代金を振り込む
  • 商品到着を待つ

商品が売れた後の流れ(店側)

  • メールで通知が届く
  • 管理画面にログインし注文を確認
  • 入金があったらステータスを「入金待ち」から「処理中」に切り替え、発送準備
  • 発送したらステータスを「完了」に切り替える

 

ECサイト構築に必要な周辺のもの

「特定商取引法に基づく表記」ページを用意

ECサイトを開設するときは必ず「特定商取引法に基づく表記」というページを設置する必要がある。お店の所在地、責任者、支払方法、返品対応など、明記する項目が「特定商取引に関する法律」第11条に定められている。法人・個人を問わず対応必須。ページはフッターや買い物かご付近など、購入者が見つけやすい場所にリンクを設置する。

ネットショップに必要な「特定商取引法に基づく表記」とは?(shopify):
https://www.shopify.jp/blog/specified-commercial-transactions

特定商取引法ガイド(消費者庁):
https://www.no-trouble.caa.go.jp/what/mailorder/

WooCommerceでは、WP管理画面 > WooCommerce > 日本対応 > 特定商取引法 タブに入力フォームが用意されているので、すべての項目を埋める。

「プライバシーポリシー」ページを用意

ECサイトに限らず、個人情報(=個人を特定できうる情報)を取得するサイトには「プライバシーポリシー(個人情報保護方針、個人情報の取り扱いについて、他)」ページを設置する必要がある。「個人情報保護法」に定められている。預かった個人情報はどのように取り扱うのか、何に利用するのか、など方針を明確にし記載する。

参考:

「個人情報の保護に関する法律についての経済産業分野を対象とするガイドライン」(経済産業省):
https://www.meti.go.jp/policy/it_policy/privacy/041012_hontai.pdf

決済代行会社との契約

商品代金の支払手段が「銀行振込」だけの場合は振込先口座を書くだけで購入者は代金を支払えるので決済代行会社との契約は不要だが、今日のECサイトはカード決済、コンビニ決済、キャリア決済、バーコード決済など複数の決済方法に対応することが多い(銀行振込しかないと機会損失になりかねない)。

決済代行会社はそれらの決済手段に必要な一式で提供してくれる会社であり、契約してアカウントが開設できれば、あとは追加プラグインをインストールすることでWooCommerceと連携させることができる(ただし追加プラグインが用意されていれば…)。

決済代行会社:PayPalの場合

  • 初期費用/月額手数料:無料
  • 手数料:3.6% + 40円 ※前月の売上に応じて手数料が変動
  • VISA、Master、JCBなどクレジットカード各社に一括対応
  • 売上はいつでも銀行口座に引き出し可能(3万円以上なら手数料無料)

アカウント登録の流れ

PayPal導入済みの購入画面

PayPalの取引履歴(home)画面

「今すぐ購入」ボタンを簡単に作成できる

売りたいものは1つだけ、手っ取り早く物を売りたいとき…PayPalの管理画面から「購入ボタン」をつくって、WordPressでも静的ページにでも埋め込める。ただし商品点数が増えると商品ごとにボタンを作成する必要があるので非効率。その場合はWooCommerce+決済プラグインを導入しカートと連動させたほうが効率的。

WooCommerceと組み合わせて使う決済プラグイン

WooCommerce向けのプラグイン開発やサポートを提供する「職人工房」さんのサイトでは各社に対応する追加プラグインが販売されている(有料/無料):
https://wc.artws.info/shop/

画像:「職人工房」サイトより

配送会社、物流倉庫など

配送会社は、当然ながら各社料金や対応可能なサイズなど異なる。「メール便」など安価だが追跡ができなかったり、配送事故の補償がないものなど。出荷量が多い大口は特約契約で配送料を安くすることもできる。

「フルフィルメント」と呼ばれる類の物流/倉庫サービスと契約すると、在庫の入庫・保管・発送までやってくれるので、社内に在庫スペースを持たなくて済む。

ECサイト運営者なら押さえておきたい!国内の大手配送会社5つの特徴と料金一覧(ECのミカタ):
https://ecnomikata.com/ecnews/32068/

フルフィルメントとは?勘違いしない基本情報まとめ(ECのミカタ):
https://ecnomikata.com/ecnews/19461/

インターネットバンキング

  • Webやアプリからいつでも入出金や取引明細が確認できる
  • 入金があるとメールで通知してくれる
  • 振込手数料が安い(PayPay銀行の場合:同口座間は0円、他行宛は145円)
  • コンビニATMから預入れ/引き出し可能

WooCommerceの設定(続き)

送料の設定

WP管理画面 > WooCommerce > 設定 > 配送 タブから行う。

配送地域 × 配送クラス の掛け合わせで送料が決まる。

まず、配送クラスを設定する。おもには「60サイズ」「80サイズ」…など箱のサイズに応じたグループを作る。

次に、配送地域を設定する。「クロネコヤマト」など実際に利用する配送会社の料金テーブルを参考に、送料を切り替える区分ごとに地域を登録する。

地域を登録したら、配送方法を登録する。「定額送料」でサイズ×地域ごとの送料を登録する。先に作成した配送クラスの入力フォームが表示されるので、サイズごとの送料を登録する。「送料無料」は「〇〇円以上送料無料」の設定ができる。

クロネコヤマト 宅急便料金一覧表:
https://www.kuronekoyamato.co.jp/ytc/search/estimate/ichiran.html



商品に送料の設定を反映させる

商品 > すべての商品 > 登録した商品の編集画面を開く。

本文欄の下の詳細欄 > 配送 タブを開く。

先に設定した配送クラスが選択できるようになっているので、商品サイズに合わせて選択する。

以上により、注文者(配送先)の地域と商品サイズの掛け合わせで送料が計算される設定ができた。

決済の設定

WooCommerce > 設定 > 決済 タブを開く。

受け付ける決済方法を有効化する。「銀行振込(日本国内向け)」と「PayPal Checkout」を有効化。

銀行振込の場合

銀行振込…の「管理」をクリックすると振込先口座の登録画面が開くので、口座を登録する。銀行振込の場合は口座情報がメールとサイト上に表示されるのみで、システムと何ら連動しているわけではない。書いたとおりに表示されるので、間違いがないか確認する。

口座情報(サンプル)
  • PayPay銀行
  • 本店営業部
  • 普通
  • 1459695
  • カ)ファーストエレメント

PayPal(クレジットカード決済)の場合

PayPalの管理画面からAPIの認証情報を発行する。APIとは、異なるアプリケーション間で認証情報など共有するなどしてシステム間で連携する仕組み。この場合、PayPalとWooCommerce(のPayPal決済プラグイン)が連携するためにAPIを設定する。

PayPal > アカウント設定 > ウェブペイメント 画面

上記画面から次の3つの情報を発行し、WooCommerce側の設定画面にコピー&ペーストする。

  • APIユーザー名
  • APIパスワード
  • 署名
WooCommerce > 設定 > 決済 > PayPal Checkout の画面

※詳細については説明を省略

以上で、注文時の決済方法として銀行振込の他、PayPalが表示されるようになる。

グローバルメニューにショップに関連するページを追加

  • 外観 > メニュー を開く
  • 「編集するメニューを選択」ドロップダウンから「メイン(デスクトップ水平メニュー)」を選択
  • 左の「固定ページ」からマイアカウントお買い物カゴショップ の3つのページを選択し「メニューに追加」ボタンをクリック
  • 以上で、グローバルメニューにショップ関連のリンクが追加された

注文の流れ

  • 商品をカートに入れる(お買い物かごに追加)
  • お買い物かごを見る
    • 送料のシミュレーターに住所を入力するとあらかじめ送料がわかる
  • お支払いへ進む
  • 詳細情報を入力する
    • 都道府県を選択すると、送料がリアルタイムに更新される
  • 最後に決済方法を選択する
    • PayPalを選択し「注文する」をクリックするとPayPalの決済画面がポップアップするが設定が完了していないためにエラーとなる
    • ここでは銀行振込を選択し「注文する」をクリック
  • 「注文を完了しました」画面が表示され、振込先の銀行口座が表示される。注文明細のメールも送信される
    • グローバルメニューのマイアカウント > 注文 を開くと、今注文した内容が登録されている。ショップ側はまだ確認していないので、ステータスは「保留中」になっている。
    • LOCAL > icc-books > TOOLS > OPEN MAILHOG で注文明細のメールを確認する
    • 「ICCブックス でのご注文を受け付けました。」というメールが届いている。
      • 銀行口座が明記されているので注文者は代金を振り込むことができる
      • 名字が表示されていなかったり、設定が足りていない箇所がある
        • メールテンプレートの編集が必要
    • 「[ICCブックス] 新規注文番号 ##」というタイトルの管理者宛のメールも届いている
  • WP管理画面から注文内容を確認してみる
    • WooCommerce > 注文 を開く
      • 注文者のお名前が表示されているのでクリックして詳細画面を開く
      • ステータスを「支払い待ち」に切り替え、右上の「更新」ボタンをクリック
      • おもてのページでマイアカウント > 注文 を確認すると「支払い待ち」に変わっている
      • 入金があったと仮定し、ステータスを「処理中」に切り替え、右上の「更新」ボタンをクリック
      • おもてのページでマイアカウント > 注文 を確認すると「処理中」に変わっている
      • MailHogでメールを確認すると新規メールが届いており、「現在処理中です」と表示されている
      • 発送が完了したと仮定し、ステータスを「完了」に切り替え、右上の「更新」ボタンをクリック
      • おもてのページでマイアカウント > 注文 を確認すると「完了」に変わっている
      • MailHogでメールを確認すると「ICCブックス の注文が完了しました」というメールが届いている
      • 商品到着を待つ

以上

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x