e-shopsカートSとWordPressでショッピングサイト制作: 特徴・使い方・メリット&デメリットを解説

先日、仕事でWordPressとe-shopsカートSを組み合わせたECサイトを制作しました。この記事では、実際にウェブサイト制作の現場で扱った経験から、e-shopsカートSについて解説します。

e-shopsカートSは、コードをウェブページの好きな場所に埋め込むことでカート機能をつけられるショッピングカートシステムで、WordPressとの相性もよく、色々と面白い使い方ができそうです。

制作したサイトは、占いの結果に応じた商品が表示され、その場で購入できる、という体験ができる販売サイトです。これを実現するのにWordPressとe-shopsカートSの組み合わせがぴったりだったのです。

一方で、実際に使ってみたからこそわかったデメリットについても触れてみたいと思います。

• e-shopsカートS
  公式サイトを見る

e-shopsカートSの特徴

e-shopsカートSは、月額制のネットショップ構築サービスです。

一番大きな特徴は、商品ごとに発行されるコードをウェブページに埋め込むことでショッピングカートボタンを設置できること。好きな場所にカートボタンを設置できるため、ページの構成やデザインをかなり柔軟にできます。

コードはもちろんWordPressサイトにも貼り付けられます。ページの大部分は使い慣れたブロックエディタで作り、そこにコードを入れるだけでショッピングサイト化できるので、WordPressとの相性はすごくいいと思います。

ちなみにカートのコードはHTML製サイト (静的サイト) にもつけられます。

その他の機能はこんな感じです。

• 「カートを見る」「マイページ」はリンク方式
• 商品管理、受注・顧客管理はe-shopsカートSにログインして行う。顧客情報はWordPress内には保存されない
• 「シンクロカゴ」機能 …… 価格や在庫数を変更すると自動的にカートにも反映され、コードを貼り直す必要がない機能
• 独自のサイト作成機能 (ハイブリッドCMS機能) …… テンプレート選択でショッピングサイトが簡単に作れる機能。ビジネス以上のプランのみ
• レンタルサーバーの付属 …… ビジネス以上のプランではWordPressのインストールも可能

このように、e-shopsカートSの契約だけで、別途レンタルサーバーを利用せずにショッピングサイトを構築することも可能です。

WordPressとe-shopsカートSを組み合わせるメリット

私が実際に仕事で使ってみて感じたメリットはこちらです。

• ページ作成の自由度が高い
• 機能追加の自由度が高い
• 顧客情報がWordPress内に保存されない

ページ作成の自由度が高い

もっとも目立ったメリットだと思います。e-shopsカートSでは、コードを埋め込んだところにカートを表示させられるので、ページ作成の自由度が高いです。

例えば、ページ自体はWordPressで作り、カートを表示したい位置に「HTMLブロック」などを使ってコードを貼り付けば商品ページの完成です。WordPressのブロックエディタの使いやすさを享受しつつ、ショッピングカート機能も追加できます。

カートコードは1ページに複数埋め込むこともできるので、LP (ランディングページ) のように説明部分を長くし、ページの上部にも下部にもカートボタンを出すような作りも可能です。

他の多くのショッピングカートシステムでは、商品ページは型 (テンプレート) が決まっており、好きな場所にカートボタンを設置することはできません。

機能追加の自由度が高い

占いプログラム (後述) のような独自の機能を追加したければ、レンタルサーバーの用意が必要です。WordPressをベースにショッピングサイトを作る方法なら、プラグインの開発という方法で機能を追加できます (技術力は必要です)。

一般的なECシステムやウェブサイト制作ツール(サービス)は、技術がない人でも簡単にショッピングサイトが作れる一方、PHPなどのプログラムを中で使うことはできないので、独自機能の追加は困難です。

顧客情報がWordPress内に保存されない

e-shopsカートSを利用すると、顧客情報はe-shopsカートSの管理サーバーに保存されます。顧客情報がWordPress内には保存されないので、個人情報管理の負担が比較的少ないのがメリットです。

WordPressでECプラグインといえば、WooCommerceが有名です。プラグインの場合、顧客情報もWordPressと同じデータベースに保存されます。

外部サービスを使えばセキュリティを気にしなくていいという意味ではありませんが、e-shopsカートSであれば顧客情報の漏えいリスクをWordPressから切り離せるという意味で、安心感があります。

e-shopsカートS + WordPressの事例: 占い (診断) プログラムを組み込んだショッピングサイト

私が先日受注した仕事の事例を紹介します。WordPressとe-shopsカートSを組み合わせることで、オリジナリティの高いユーザー体験の場を作ることができました。

依頼主様は和風ブレンド茶を販売されていて、風水のエレメントをイメージした20種以上のお茶商品があります。そこで、風水占いとお茶の販売を結びつけました。

ユーザーはそのサイトで風水判定 (占い) を行うと、自分のエレメントが判定されると同時に、そのエレメントのお茶がカートごと表示されます。そこでユーザーはお茶を購入できます。

この事例ではサイト全体をWordPressで作っているので、このような独自の機能をプラグインとして作ることが可能でした。e-shopsカートSはカートのコードを貼り付ける方式なので、占いの結果ページで直接購入できる形を作れます。他のECシステムだと、独自機能を追加すること自体が難しいところです。

この事例は別の記事でも解説しますので、もう少し詳しく知りたい方は読んでみてください。

占い (診断) プログラムを組み込んだショッピングサイトの構築: e-shopsカートSとWordPressを使った事例

WordPressにショッピング機能を追加する方法

WordPressにショッピング機能を追加する方法自体は、他にもあります。

1. WooCommerceなどのEC機能プラグインを使う
2. BASEやカラーミーショップなどで別にショップサイトを作り、お互いにリンクする
3. 決済サービスが発行する購入ボタンや決済リンクを設置する
4. e-shopsカートSと同様の埋め込み機能を使う

ECプラグインを使う

WooCommerceなどのEC機能プラグインを使う場合、お客様の個人情報はWordPressと同じサーバーに保存されるのですが、この点、セキュリティの心配をする声をよく聞きます。

別にショップサイトを作る

先ほど紹介したような機能を追加したい場合、BASEやカラーミーショップなどのECツールでショッピングサイトを作り、別にWordPressサイトを作って、お互いをリンクし合う方法も考えられます。

ただ、私はこの方法はあまり良いとは思いません。1つのショッピングサイトを作りたいのに、2つのウェブサイトができることになり、管理が大変なうえ、検索エンジンからの評価も分かれ、ウェブサイトの成長が鈍化するからです。

決済サービス発行の決済リンク

Stripeなどの決済サービスで購入ボタンや決済リンクを発行できるので、これをWordPressサイトに埋め込む方法もあります。この場合は顧客情報の保存を決済サービス側に一任できますが、ECサイト専用の機能とは限らないため、商品管理や受注処理はひと工夫が必要な場合があります。

e-shopsカートSと同様の埋め込み機能

e-shopsカートSと同じカートコードの埋め込み機能は、他のECサービスでも提供されています。例えばこんなサービスがあります (カッコ内は機能名)。

• カラーミーショップ (どこでもカラーミー)
• おちゃのこネット (外部カート機能)
• Shopify (ボタン埋め込み)
• STORES (STORES BUTTON)
• makeshop (カゴだけmakeshop)
• futureshop (外部サイト設置)
• イージーマイショップ (カートモード)

ちなみに、e-shopカートSの運営会社が「シンクロカゴ機能」のビジネスモデル特許を持っており、他社にライセンス提供もしているとのことです (ビジネスモデル特許 | 株式会社ネクストハンズ)。

以上、WordPressにショッピング機能を追加する方法は色々ありますが、e-shopカートSの方式が結局使いやすいのかもしれません。

e-shopsカートS + WordPressで商品ページの作り方

では実際、WordPressでe-shopsカートSを使うとしたら、どんな感じなのか? イメージしやすいように、使い方を簡単に説明します。

価格や在庫数などをe-shop側で登録する

先にe-shopsカートSにログインして商品情報を追加しておきます。価格、在庫情報はe-shopsカートSで入力します。

商品ページをWordPressで作る

WordPressでショッピングサイトを作るなら、商品ページ用の投稿タイプを追加しておくのがおすすめです。それには Advanced Custom Fields などのプラグインが便利です。

商品説明はWordPressで作る。ブロックエディタで編集

他のブログ投稿を作るのと同じように、WordPressの管理画面で商品ページを作って、ブロックエディタで編集できます。商品説明を入力したり、画像を追加したり、表や左右のカラム分けなども、コードを書かずにブラウザ上で全て編集できます。各要素のマージンや背景色なども見たまま編集できます (WordPress公式テーマなどを使う場合)。

e-shopsカートSにログインしてカートコードを取得

e-shopsカートSにログイン、商品一覧から専用コードをコピーします。

WordPressの編集画面に戻り「カスタムHTML」ブロックを追加、「HTML」の欄に先ほどコピーしたコードを貼り付けます。

「カラム」などを利用して商品画像と組み合わせれば、ショップらしい画面を自在に作れます。

e-shopsカートSでの販売管理のしかた

WordPressサイトとe-shopsカートSを組み合わせる場合、どちらにログインして作業すればいいのか? というと、次のように分かれます。

• 商品ページの作成、説明文の編集 = WordPress
• 顧客対応、販売フロー等の管理、価格、在庫情報 = e-shopsカートS

顧客情報や商品マスター情報は、e-shopsカートSに保存されています。WordPress側には顧客情報は保存されません。

「シンクロカゴ」「ゼロステップカート」の利用がおすすめ

これは実際にe-shopsカートSを使い始めると迷いやすいと思うので記しておきます。

ショッピングカートを貼ろうとするといくつかの種類・用語が出てきますが「シンクロカゴ」と「ゼロステップカート」の利用がおすすめです。ただし、少々注意点もあります。

「シンクロカゴ」(マニュアル) は、いちどカートのコードをウェブページに貼り付けると、その後価格や属性を変更しても自動的に反映される仕組みです。これはぜひあったほうがいいので「シンクロカゴ」の利用がおすすめです。

「ゼロステップカート」(マニュアル) は、ユーザーが商品をカゴに入れたあと、画面遷移なしに決済指定までできるタイプのカートです。いわゆる「カゴ落ち」を起こしにくいので「ゼロステップカート」の利用がおすすめです。これ以外に「3ステップカート」(決済までにページ移動のあるタイプ) があります。

ただし「ゼロステップカート」の利用には少し条件があります。まず、利用できる決済サービスが限られています。利用可能な決済サービスはマニュアルに記載がありますので、初めてショップを作成する場合ならその中から選ぶのがよいと思います。
また、「ゼロステップカート」は定期購入に対応していません。

e-shopsカートSのデメリット

ここまでe-shopsカートSの良い点ばかりをご紹介してきましたが、実際に制作に携わってみて感じたデメリット的な点もありますので、それについて説明します。

WordPressプラグインは実際には使えなかった

e-shopsカートSが開発・提供しているWordPressプラグインがあるということで期待していたのですが、私たちの環境ではエラーが出て使えませんでした。

本来の機能としては、登録済みの商品をWordPressの投稿にすることができるようです (デフォルトの投稿タイプに投稿できる)。利用には申請してAPIキーをもらう必要があります。

Javascriptを停止されていると動かない機能

e-shopsカートSのシンクロカゴはJavascriptで動くので、ユーザーがJavascriptを停止していると購入できません。サイト側からONを強制する手段はなく、ONにしてくださいとお願いするしかありません。もっとも、他のECツールでも似たような事情はよくあります。

カートとウェブサイトの独自ドメイン

カート、マイページのドメインをウェブサイトと統一したい場合、エキスパートプランが必要です。それ以外の場合はサービス側が用意する規定のドメインでカートが動きます。

「カートを見る」リンクの制限

管理画面や公式サイトのデザインがちょっと古い

見た目のデザインに加えて「ホームページビルダー対応」「スマホ対応」といった古い概念がまだ残っているのでちょっとだけ不安をおぼえるかもしれない。もちろん動作に問題はなく実用上は関係ありません。それだけ歴史のあるサービスだということですね。

決済サービスに限りがある

利用できる決済の種類は一通り揃っており、ペイジェント、SBペイメントサービス、ZEUSなど様々利用できるのですが、ゼロステップカート (画面遷移が少ないタイプ) を利用したい場合は決済サービスが限られます。

また、Amazon Payを利用したい場合はe-shopsカートS「エキスパートプラン」契約が必要です。

e-shopsカートSが向いている用途・活用法

診断プログラムや占いにからめたショッピング体験

アイデア次第で様々な診断で利用できそうです。

• ギフト選び …… 贈る相手、予算、目的を選ぶと候補を提案し、そのまま商品をカートへ入れられる
• 化粧品やサプリメントの診断販売 …… 肌質や生活習慣への回答からタイプを判定。診断結果に合った商品やセットを購入できる
• 学習教材のレベル判定 …… 簡単なテストを設け、その結果レベルに合った教材や問題集を提案する

いくら良い商品でも、単にネットショップを公開するだけでは埋もれてしまいがち。占い・診断コンテンツはユーザーが自らすすんで入力して結果を得る体験なので、その結果と紐付けた商品提案は注目してもらいやすいと思います。

コンテンツの中で商品が購入できる

「商品ページ」だけで売るのではなく、いろんなコンテンツの途中にカートボタンを埋め込んで、コンテンツ自体を「売り場」としてしまう活用方法。
商品ページへのリンクではなく、ユーザーが画面遷移なしに購入までできる特性を活かせます。

• LPに直接埋め込む …… 上から下へスクロールしながら閲覧する中で、画面遷移せずその場で購入してもらう
• ストーリーを読みながら買う …… 漫画、小説、旅行記などの途中で、作中に登場した商品や関連商品が購入できる
• 日々のブログ投稿、アドベント企画にカートボタンを埋め込む

顧客情報をレンタルサーバーに保存したくない

ウェブサイトをWordPressで作ってショッピング機能を設けたい、が顧客情報をレンタルサーバー上に保存したくない、という場合にはe-shopsカートSはおすすめです。WooCommerceを扱うのが難しいという方にも。

HTMLページをショッピングサイト化する (古いサイト/ページ速度)

e-shopsカートSのコード埋め込みはHTMLページ (静的ページ) にもでき、古いサイトの活用にも使えます。また、HTMLページ (静的ページ) はページ表示速度が速いので、ユーザーへの配慮やSEO的な観点から昨今あえてHTMLページ (静的ページ) を使うことがあり、それでもショップ機能を搭載することができます。

無料試用期間にできること

e-shopsカートSは30日間の無料お試しが利用できます。お試し期間中は、レンタルサーバを除く全ての機能を利用できます。

実際私も、仕事の準備としてお試し利用させてもらいました。商品登録や、WordPressサイトやHTMLページへのカートコード埋め込みも試せました。実際やってみましたが、ちゃんと動作していましたよ (決済の設定をしていなかったので、購入まではできないのですが)。

無料試用の申込にはクレジットカード情報の入力は必要なく、お試し期間中に代金支払の設定をしなければ、30日経つと請求もなくそのままお試し期間は終了です。大変良心的で使いやすいので、気になる方はぜひ試してみてください。

FAQ (よくある疑問)

既存のWordPressサイトにも導入できますか?

導入できます。e-shopsカートSで発行したカートコードを、WordPressの「カスタムHTML」ブロックなどを使って設置します。新しくサイトを作り直さなくても、既存のページにカート機能を追加できます。

WordPressプラグインは必要ですか?

必要ありません。公式のWordPressプラグインも提供されていますが、カートコードを直接貼り付ける方法で利用できます。私が仕事で制作したサイトでは、占いプログラムとの紐付けのため、コード専用のカスタムフィールドを設けてそこに入力してもらうようにしました。

商品情報はWordPressとe-shopsカートSのどちらで管理しますか?

価格や在庫はe-shopsカートSで管理します。「シンクロカゴ」を使っていれば、e-shopsカートSで価格や在庫を変更すると、設置済みのカートにも反映されます。商品ページそのものはWordPressで作ります。

顧客情報はWordPressに保存されますか?

保存されません。購入者の情報や受注情報はe-shopsカートS側に保存されます。顧客管理もe-shopsカートSの管理画面で行います。

どのプランを選べばよいですか?

• すでに別のサーバーでWordPressサイトを運営していて、そこにカートを追加したい => スタンダードプランが候補
• e-shopsカートS付属のサーバーにWordPressをインストールする場合 => データベースが使えるビジネスプラン以上が必要
• カートにもウェブサイトと同じ独自ドメインを使いたい場合や、Amazon Payを利用したい場合 => エキスパートプランが必要

専門知識がなくても導入できますか?

通常の商品ページにカートコードを設置するだけなら、それほど難しくありません。ただし、今回紹介した占いのような独自プログラムを組み込む場合は、WordPressやプログラム開発の知識が必要です。

好きな決済サービスを利用できますか?

e-shopsカートSと連携できる決済サービスから選びます。また、ゼロステップカートで利用できる決済サービスには制限があります。利用したい決済サービスが決まっている場合は、申込み前に対応状況を確認したほうがよいでしょう。

無料試用では何を確認できますか?

商品登録、カートコードの取得、WordPressやHTMLページへの設置、カートの動作などを確認できます。申込みにクレジットカード情報は必要なく、無料試用中に支払いの設定をしなければ、そのまま終了します。

WordPressと相性のいいショッピングカートシステム

占いプログラムやWordPressプラグイン開発とe-shopsカートSを組み合わせたショッピングサイト構築にご興味がおありでしたら、ぜひ当事務所までご相談ください。

e-shopsカートSは、工夫次第で様々な使い方ができるショッピングカートシステムです。まずはお試しで利用してみてから判断するのがおすすめです。ゆっくり検討したい場合は資料ダウンロードや直接の問い合わせも可能なので、公式サイトをチェックしてみてください。