2025年 第11回 ECサイト Part1

お問い合わせフォームの続き

• 前回、お問い合わせフォームを作り込んだ
• トップページを見ると、その作り込んだフォームがトップにも表示されている
• トップページにはちょっと大袈裟すぎるのでもっとシンプルなフォームにしたい
  • トップページはシンプルなフォーム、Contactページは詳細なフォーム
• Contact Form 7 で「コンタクトフォームを追加」ボタンで新規作成
  • 内容はデフォルトのまま
  • タイトルを「お問い合わせフォーム（Home）」とする
  • 詳細なフォームの編集画面を開きタイトルを「お問い合わせフォーム（詳細）」とする
• 固定ページをひらく
  • 固定ページを新規追加する
    • タイトルは「Contact」　→スラッグは被らないように自動的にcontact-2になるはず
    • Contact Form 7のブロックを追加し、「お問い合わせフォーム（Home）」を選択
    • 保存
• 外観 > カスタマイズ > テーマ設定
  • フロントページ 第4セクションのコンテンツ　にて、今つくったシンプルなほうの「Contact」固定ページを割り当て直す

CORE CAFE v2 をインポートしてください

前回までの「メニュー」「お問い合わせフォーム」を含めた完成形を元に、この先の実装を進めてもらいます。

Localで新規にWordPressをインストールしてください。

• サイト名：CORE CAFE V2
  • 「Advanced options」をクリックしてアドレスが core-cafe-v2.local になっていることを確認
• Preferred
• ユーザー名　kanri
• パスワード　icc2025
• SSLのTrustボタンをクリック（有効化）

ログインし、言語を日本語に、タイムゾーンを UTC+9に設定。

WordPress アドレス (URL)とサイトアドレス (URL)を「https://」に打ち直す。

プラグイン「All in One WP Migration」をインストール。

下記の完成形エクスポートデータをダウンロード。

All in One WP Migration > インポート　から完成形データをインポート。

再ログイン。

※今日以降、この「v2」を立ち上げて作業してください。

ECサイト構築の基礎知識

ECサイトとは

• ECサイト（EC = electronic commerce）
• ネットショップ
• オンラインショップ

ECサイトの選択枝

1. ショッピングモール = 楽天市場, Yahoo!ショッピング
   • 店ごとに出店、決済、デザインも独自。出店者が多数集まる。
2. マーケットプレイス = Amazon, ZOZOTOWN
   • 店も決済もデザインも同じ。出品者が多数集まる。
3. ネットショップ構築サービス（ASP） = Shopify, STORES, BASE, MakeShop, カラーミーショップ
   • 独自のECサイト構築を支援してくれるサービス。店も決済もデザインも独自。独立したサイト。
4. 自社サイト = WordPress + WooCommerce, EC-CUBE
   • 完全自社サイト。店も決済もデザインも独自。自由度は一番高い。
     

コスト

• １〜３は他社サービスのため、利用料/手数料が発生（月額料金/販売手数料/他）
• ４は自社なので手数料はかからないが、サーバ契約料はかかる。自分でつくれない場合は制作会社に依頼することになるので初期コストがかかる（数十万円〜）。
• １〜４いずれも、カード決済を導入した場合は決済代行業者への支払手数料が別途発生する。

集客

• １〜２は人が集まっているので売りやすい（←→出店料がかかる）
• ３〜４は知られないと売れないので、広告を出すなど（←→宣伝費がかかる）

将来的な展開…

• １〜２はメールアドレスなどの顧客情報は持ち出せない（のちに自社サイトを始めるにはゼロベースで始めなければならない）
• ３は他社プロダクトのため、拡張性はプロダクト次第（未知数）
• ４はオープンソースであり、プラグインもしくは独自開発で拡張できる

セキュリティ

• １〜３は他社プロダクトのため、システム的なセキュリティはお任せ
• ４は自社サイトのため、システムを含めセキュリティは自己管理（または有料で保守を依頼するなど）

どの形態も良し悪しがある

誰でも知っている説明不要な商品、どこで買っても品質は変わらない商品ならショッピングモールやマーケットプレイスが向いている可能性が高い。他のどこにもないオリジナル商品であれば、自社サイトであっても訪れてくれる可能性があるが、知ってもらうための施策（SNS、広告など）は必要。

皆さんはどう思いますか…？

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

• 「WooCommerce」はもっとも有名なECサイト構築プラグイン
• 世界のECサイト上位100万サイトにおけるシェアは27%、猛烈な伸びを見せる「Shopify」よりもまだシェアが大きい（参考： https://trends.builtwith.com/shop）
• 無料
• ほぼ公式? ＝多くのWordPressコア開発メンバーが所属するAutomattic社が開発を主導しており、周辺ソフトウェアも多い

「WooCommerce」によるECサイト構築の大まかな流れ

1. プラグイン「WooCommerce」をインストール
2. 初期設定を行う
   • 1.決済手段の設定
   • 2.配送料の設定
   • 3.特商法のページ作成
   • 4.プライバシーポリシーのページ作成
   • 5.その他（ゲスト購入/クーポン/ポイント/他）
3. カード決済代行会社との契約・設定（今回は「PayPal」を利用）
4. PayPal決済モジュール（プラグイン）をインストール・設定
5. 商品を登録

「CORE CAFE」のオンラインショップでコーヒー豆を販売することを想定してショップを作り込んでみます。

WooCommerceインストール方法と有効化

まずは、WordPress管理画面＞プラグイン＞新規追加＞プラグインの検索に”WooCommerce”と入力します。

すると検索結果にWooCommerceが表示されますので、「今すぐインストール」をクリックします。

続いて有効化をクリックします。

WooCommerce初期設定

有効化をクリックすると、WooCommerceの設定の画面へと移ります。

さて、設定を進めましょう。

…が、その前に。プラグインのインストール直後は言語ファイルがまだインストールされていない可能性が高く、そのまま進むと設定画面が英語のまま。一度、ダッシュボード > 更新 ページをひらき、翻訳ファイルの更新があるか確認する。更新がある場合は「更新」ボタンが表示されるのでクリック。これにより、WooCommerceの日本語翻訳ファイルがダウンロードされて、日本語で進めることができる。

WooCommerce > ホーム を開くと以下のような画面になる。

この画面は触らずに、WooCommerce > 設定 を開く。

以下のような画面。

いくつかのタブに分かれた項目を、最終的にすべて確認し、必要な項目を入力していきます。

一般タブの入力

店舗の住所

• 住所1行目：松尾明７５９１
• 住所2行目
• 市区町村：飯田市
• 都道府県：日本ー長野県
• 郵便番号：395-0823

基本設定

• 税金を有効化にチェックをいれる

下までスクロールしてをクリックして設定を保存します。

WooCommerceの設定から地域、クラス（箱の大きさ）を設定する。

箱のサイズ別にクラスを設定する
まずは60cmサイズの設定
参考にしたクロネコサイトはこちら

WooCommerce＞設定を開き「配送」タブをクリック

「配送クラス」をクリック

「配送クラスを追加」ボタンをクリック

配送クラス名に「ヤマト60サイズ」
スラッグに「yamato60」
ショップ運営者向けの説明は空欄のまま

以上を入力して「配送クラス」を保存ボタンをクリック

繰り返し「ヤマト80サイズ」「ヤマト100サイズ」も作っていきます。

「ヤマト80サイズ」の配送クラス作成

• 「配送クラスを追加」ボタンをクリック
• 配送クラス名に「ヤマト80サイズ」
• スラッグに「yamato80」
• ショップ運営者向けの説明は空欄
• 以上を入力して「配送クラス」を保存ボタンをクリック

「ヤマト100サイズ」配送クラス作成

• 「配送クラスを追加」ボタンをクリック
• 配送クラス名に「ヤマト100サイズ」
• スラッグに「yamato100」
• ショップ運営者向けの説明は空欄
• 以上を入力して「配送クラス」を保存ボタンをクリック

次に、発送元である長野県からの距離によって送料が変わってくるので都道府県別区分で値段の設定をしていきます。

「配送地域」を設定

「配送地域」をクリック

「配送地域を追加」ボタンをクリック

クロネコヤマトの料金表に従い下記のように入力・選択・分類していく。
参考サイト：クロネコヤマト料金表

• 地域名：「関東」と記入
• ゾーン地域：
  • 「茨城県,日本」
  • 「栃木県,日本」
  • 「群馬県,日本」
  • 「埼玉県,日本」
  • 「千葉県,日本」
  • 「神奈川県,日本」
  • 「東京都,日本」
  • 「山梨県,日本」

ゾーン地域の右側空欄をクリックすると地域を選択できる。

「日本」と入力することで日本の地域だけを表示。

関東区分になっている１都７県を選択

「配送方法を追加」ボタンをクリック

定額送料を選択し、「配送方法を追加」の青いボタンをクリック

下記のように変わったら編集に入る

定額送料 設定

• メソッドのタイトル：関東送料
• 課税ステータス：なし
• 金額：「０」のまま

配送クラス料金

先に設定した配送クラスの入力欄が表示されているので、サイズごとに料金を入力します。

• 100サイズ：1,530
• 80サイズ：1,230
• 60サイズ：940
• 配送クラスの費用なし ：空白

※配送クラスを商品に割り当てなかったときに（割り当て忘れたなど）、適用される送料を決めておくこともできます。その場合、下から2番目の「配送クラス費用なし」の項目に金額を書き加えておきます。ここに何も記入しないと送料0円になります。

• 計算タイプ：注文ごと：最も高い配送クラスの送料を請求

※複数お買い上げされたときに一番高い送料に設定されます。

「作成して保存」をクリック

同様に、他の地域も登録する。ここでは「関西」「北海道」を登録する。

「関西送料」を作成

「配送地域」をクリック

「配送地域を追加」ボタンをクリック

• 地域名：関西
• ゾーン地域
  • 大阪府
  • 京都府
  • 滋賀県
  • 奈良県
  • 和歌山県
  • 兵庫県

「配送方法を追加」ボタンをクリック

「定額送料」を選択し「配送方法を追加」の青ボタンをクリック

定額送料の下にカーソルを合わせて「編集」をクリック

定額送料 設定

• メソッドのタイトル：関西送料
• 課税ステータス：なし
• 金額：「０」のまま

• メソッドのタイトル：関西送料
• 課税ステータス：なし
• 金額：「０」のまま

• メソッドのタイトル：関西送料
• 課税ステータス：なし
• 金額：「０」のまま

配送クラス料金

• 100サイズ：1500
• 80サイズ：1260
• 60サイズ：1040

• 配送クラスの費用なし ：空白
• 計算タイプ：注文ごと：最も高い配送クラスの送料を請求

「変更を保存」ボタンをクリック

「北海道送料」を作成

• 「配送地域」をクリック
• 「配送地域を追加」ボタンをクリック
• 地域名：北海道
• ゾーン地域
  • 北海道
• 「配送方法を追加」ボタンをクリック
• 「定額送料」を選択し「配送方法を追加」の青ボタンをクリック
• 定額送料の下にカーソルを合わせて「編集」をクリック

定額送料 設定

• メソッドのタイトル：北海道送料
• 課税ステータス：なし
• 金額：「０」のまま

配送クラス料金

• 100サイズ：1830
• 80サイズ：1590
• 60サイズ：1370
• 配送クラスの費用なし ：空白
• 計算タイプ：注文ごと：最も高い配送
• クラスの送料を請求

「変更を保存」ボタンをクリック

以上で、箱のサイズ、地域別の送料設定が出来ました。

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

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

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

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

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

登録した商品に同じ設定をしていきましょう。

決済の設定

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

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

銀行振込の場合

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

口座情報（サンプル）

• PayPay銀行
• ビジネス営業部
• 普通
• 1459695
• カ）ファーストエレメント

PayPal（クレジットカード決済）の場合

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

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

• APIユーザー名
• APIパスワード
• 署名

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

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

ここからは販売商品を追加していきます。画面に従って登録していきます。

①WooCommerceのメニューの下に「商品」があるのでクリック

「商品を作成」ボタンまたは「新商品を追加」をクリック

新商品を追加画面が出るので

下記の商品データ（エクセルファイルと商品画像）をダウンロードしてください。

エクセル「ICC ECサイト構築 商品データ」のシート名[1]の値を

項目	値	情報の保存先
商品名	マイルドブレンド	一般＞商品名
商品紹介	当店の定番ブレンド。	一般＞商品の簡単な説明
価格	¥960	一般＞標準価格
商品の説明 （商品紹介よりも多め）	「香り高く、甘みのあるコーヒー」を追求し、バランスのとれた味わいに仕上げた逸品です。 内容量 : 200g	一般＞商品説明
画像ファイル1枚目	EC-001-1枚目.jpg	一般＞商品画像
画像ファイル2枚目以降	EC-001が付く上記以外の画像	一般＞商品ギャラリー

下記のように入れていく。

※ガイドが出ます。必要項目を入力したら次へボタンを押してナビに従って入力もできますが、ナビウインドウの右上の☓を押してナビを終了させて入力することもできます。

商品データはタブがあるのでそれぞれ入れていく。

在庫タブ

配送タブ（送料設定が終わってから作業します）

下ブロックの商品の簡単な説明

画像とカテゴリー設定は右ペインにて。

商品画像にはサムネイルとして使う画像を登録。

2枚目以降の画像は商品ギャラリーに登録。

商品カテゴリーは「uncategorized」（カテゴリー無しの意味）しかなく、uncategorizedにチェックが入っている状態です。

• １，uncategorizedのチェックを外し
• ２．新規カテゴリーを追加を押し「コーヒー豆」を入力　
• ３．親カテゴリー　のまま
• ４．ボタンを押す

※次回以降はコーヒー豆のカテゴリーのものは毎回カテゴリーの新規登録をしなくてもコーヒー豆にチェックをいれるだけで大丈夫です。この後リキッドやドリップなど新規カテゴリーが出てきますのでそのときはまた同じようにカテゴリーの新規登録をしてください。

必要な商品データーを入力し終えたら公開ブロック内のボタンを押して商品を登録します。

これで一つ商品が登録・確認されました、おつかれさまでした。

続けてエクセルのタブ２の商品「プレミアムマイルドブレンド」を同じように登録していきます。
（登録する商品は20商品あります。できるところまで登録しましょう。）

支払い設定をする

WooCommerceには日本独自の送料や支払い形態が標準装備されていないのでプラグインで対応していきます。

プラグイン「Japanized for WooCommerce」を入れて日本独自の環境に対応しよう

「Japanized for WooCommerce」とは、WooCommerceの仕様を日本向けにしてくれるプラグインです。

まずは、WordPress管理画面＞プラグイン＞新規追加＞プラグインの検索に「Japanized for WooCommerce」と入力します。

すると検索結果にJapanized for WooCommerceが表示されますので、「今すぐインストール」をクリックします。

続いて有効化をクリックします。

インストールができたら WooCommerce > 日本対応 ページを開く。

「支払方法」タブを開く。

「銀行振込 (日本国内向け) 」にチェックを付ける。

税率の追加

再び、 WooCommerce > 設定に戻り、税のタブを表示させます。

初期設定では税抜きの表示になっていますが、税込表示設定にしていきます。

---

WordPress管理画面からお店へアクセスしてみましょう。

「店舗へ移動」にて、今登録された商品が表示されているか確認できます。

---

商品をカートに入れてお買い物してみましょう。

買えない場合は設定不足です。主な原因は以下の通り。

• 配送の設定
• 支払い設定
  • 現金
  • クレジットカード
  • 銀行口座振り込み
  • etc…
• その他いろいろ
  • 在庫の設定
  • 価格の設定
  • etc…

買い物を買った時の画面や、お客様(今回は自分)に届くメールなどはテンプレートで当り障りないことが書いてあるだけなので設定・テンプレートでカスタマイズしていきましょう。

商品を追加していき、お店の品ぞろえを充実させ、ショップの外観(テーマ)、購入時の画面、お客様に届くメールの文言など作りこんでいけばネットショッピングが開けるのかな！という未来が見えたところでこの授業は終わりです。

WooCommerceの設定画面には様々な設定があるので一通り見てみると面白いと思います。どんどん自分好みのお店にしていきましょう。

（次回につづく）