WordPressでECサイト完成 〜そのノウハウについて〜
2021/07/29
１ ECサイトを作ることになったきっかけ
きっかけは、中小企業診断士の某区会の出前相談業務から、ホームページでの集客戦略を図りたいという御相談を受け、三回、御訪問させていただいたことでした。
その中で既存のホームページでは充分販促に活かせない現状があるので、作り直すかなんとかして欲しいとのご依頼を受け、制作させていただきました。
社長へのヒアリングによると、制作会社へは初期費用は無料でしたが、毎月、1万円の管理料を支払っているとのことで、費用だけかかり、販促（販売促進）効果が少ないので改善して欲しいとのことでした。ショップは花屋さんです。板橋区の某商店街にある個人経営の花屋さんで奥様と２人で営まれています。白山にももう１店舗持ち、物腰柔らかな店長さんでした。WordPressでのサイト制作はかなり慣れてきて安心感がありましたが、ECサイトへの挑戦は、それなりにハードルのあるもので緊張しました。
また、以前のコンテンツのうち写真の一部流用以外は全て１から作り直しという大変な状況がありました。しかし、大きな技術的壁を超えることができてホッとしています。
２ ホームページ制作でECサイト構築にあたる技術的障壁
今までのホームページ作りのスキルから、ECサイトを構築するには、大きく３つの障壁があると思っています。
・１つ目は、カート（買い物かご）機能の設定
・２つ目は、クレジットカードなどの電子決済機能の設定です。
・３つ目は、ネット上のセキュリティ－の強化・商取引法に係る法的対策です。
1つ目のカート（買い物かご）はホームページソフト（WordPress）の中でもWooCommerce という汎用されているプラグインを使えば可能です。このプラグインではダッシュボードで商品登録（価格・在庫数・写真・説明文・配達期日・買い上げ時の連絡メール先）などの設定ができます。それ（価格・数量・規格など）が上手く固定ページで表示されれば第一段階はOKです。
2つ目の電子決済機能は大変です。次章で詳しく、その方法について記載させていただきたいと思います。
（※ 今のところpaypayなどの電子マネーの対応はWordPressにはないようです。）
３つ目には、このECサイトを実現するには、商取引法に関する対応やネットセキュリティーの強化も必要です。具体的には、基本的にはSSL（暗号化通信）がなされていること、消費者向けに「特定商取引法に関する標記」を行うなどの設定が必要です。
３ 今回実施した内容（特記事項）
（１）Woo commerceの設定
WooCommerseとはアメリカのAutomattic社が開発する、WordPress上でショッピングカートが動作するプラグインです。
Automattic社は、wordpress.comを運営する会社で、代表のマット・マレンウェッグはWordPressの創設者でもあります。
WordPressのEC機能のプラグインにはWelcartというものもありますが、こちらはプラグイン同士の干渉があったり、若干使い勝手が悪かったりする面もあるようです。しかし、WooCommerseは、「他のプラグインと干渉しない安全性の高いもの」をモットーに作成されているようで、より使い易いものとなっております。
世界でのシェアはBuiltWith Pty Ltdによれは、28%となっており、非常に多くのユーザーがいることがわかります。
このプラグインは、WordPressで使用できるものなので、shopfyなどのホームページ一体型の提供サービスとは成立が異なります。
また、基本料は無料なので、毎月のランニングコストが8千円程度〜３万円程度かかるshopfyに比べても手が出し易いものと言えるかと思います。
その特長としては以下の点が挙げられます。
① 商品掲載について…ビジュアル的にも機能的にも通常のカートに引けを取らないものとなっています。バリエーション商品（サイズ違い、色違い）の設定や、ダウンロード商品等の販売も可能です。（専用の有料themeもある。）
② 配送方法について…配送区分を設定することができます。県ごとや郵便番号での地域指定なども可能です。商品の種類毎に配送料を設定出来るようになっています。配送商品の種別やエリアについても、柔軟な送料計算を行えるようになっています。
③ 決済機能について…以下の決済サービスが利用可能です。（大手ASP型のメイクショップやオープンソースのECキューブなどサービスができることは全てできるのではないでしょうか？）
・Paypal
・Stripe（クレジットカード決済）
・銀行振り込み
・代引きの利用が可能です。
ここで嬉しいのが、国内で大変使われているJCBがStripeを使えば利用可能な可能性があることです。
（２）Stripe（オンライン決済サービス）の設定
Stripeは、2010年にアイルランド出身のパトリック・コリソンとジョン・コリソンの兄弟によって、米国で起業されました。日本では、三井住友銀行と資本業務提携し、2016年10月から正式にオンライン決済サービスの取り扱いを開始しています。
（３）Stripeの特徴
その特長は、Stripeのホームページ上で公開されているAPIコードをECサイト内に埋め込むだけでクレジットカード決済機能を導入することができる点です。
米国では、Twitter、Facebook等のインターネットビジネスを支えるソフトウェア型の決済プラットフォームとなっております。国内でも多くの企業が活用しています。
Stripe加盟店では130通貨以上でのクレジットカード決済の取り扱いが可能となります。
４ 具体的導入方法（Woo ＣommerceとSTRIPEの連携）
①webサイトにECページを作成
②Woo-Commerceの管理画面の決済欄からStripeを選択
③Stripeの管理画面へ移動…そこでアカウントを作成（既にある場合は不要。外部サイトへ移動）
④Stripe管理画面で個人情報（振り込み先銀行口座、住所、氏名、年齢など）を入力する。本人確認の為の「免許証などの写し」をメールで送付する。
⑤利用可能許可が出る。利用許可が出たら、売りたい商品の商品登録を商品タブから行っていく。
⑥テストモードで実際に購入ができるかテストする。
⑦本番モードにする。（この設定にするとカード会社から実際に引き落としがなされるので要注意）
⑧決済用ページのコードを書き換え、③で取得したキーを打ち込む
⑨特定商取引法に関する標記のページを作成し、購入ページなどに張ること（※これがないと、決済サービスが利用できません。）
５ stripe導入のメリット
・初期費用が不要
・手数料…３．６％（２０１９年１２月１日現在）のみと他社と比較して安い。
・国内銀行（三井住友銀行）とも提携しているので、信頼度が高い。
・導入までの手続きが比較的に早い
・メールでの問い合わせに対して、比較的に早いレスポンスがあり丁寧に教えてくれる。（ヘルプデスク機能）
・バリエーション商品（サイズ違い、色違い）の設定や、ダウンロード商品等の販売も可能。（Woo Ｃommerce利用に特化した有料themeもある。）
等ビジュアル的にも機能的にも通常のECサイトサービスに引けを取らないものとなっているものと考えられます。
６ その他制作した内容での特記事項
（１） htmlとcssのカスタマイズ
・背景画像の設定（background-size;contain）
・スマホ対応設定（＠media,display:block）
・ヘッダーphpを２カラムから３カラムへの設定変更（display：flex）
（２） バナーの作成
・お店ロゴの作り直し（Illustrator）
・電話番号バナーづくり（Illustrator）
・トップページスライダーバナー作成 （Photoshop Illustrator）2枚
（３） 店舗や商品の写真撮影
（４） セキュリティー設定
・サイトのSSL化
・スパム対策プラグインの設定
（５） EC機能の設定
・プラグインwoo commerceでのショッピングカート機能設定
・電子決済機能設定Stripe
・商材のアップロード及び設定（価格・数量・写真）
（６） SNSとの連携設定
・Instagram設定及び写真のアップロード
・facebookpage設定
（７） ギャラリー固定ページの設定
・店舗及び商品（花）
（８） お問い合わせページの設定
（９）ドメインのサーバー移行作業（ロリポップ → Xサーバー）
（１０） WordPressの設定
有料theme（テーマ）、stinger＋の設定
（１１） アクセス解析設定
GoogleAnalytics、Search Consoleの設定
７ まとめ（IT補助金でのECサイト登録も視野に入れて…）
ECサイト作りは技術的ハードルは高かったですが、完成すれば、販促（販売促進）に関して画期的な飛び道具的として役立つ可能性を秘めていると思っています。無事決済・入金ができたとのご報告も受けているので、安心しています。次年度はIT補助金でネットショップはその対象になるとのことなので、早い内に各中小企業様のニーズを把握し、より多くの「お役立ち」ができるよう頑張りたいと思います。是非、問題が起こらず、軌道にのり、有効活用していただければと思っています。
