WordPressとショッピングカートを組み合わせ、占いプログラム入りの体験型ショッピングサイトを先日受注した仕事で作りました。事例としてご紹介します。
e-shopsカートSとWordPressの組み合わせでどんなことができるのかという参考事例としてご覧いただければ幸いです。技術的な面を含めて少し詳しく解説しています。
依頼主様の商売の妨げにならないよう、詳細は丸めたりぼかしたりしている部分もありますが、ご了承ください。
このような事例のウェブサイト構築にご興味がおありでしたら、ぜひ当事務所までご相談ください。
e-shopsカートSの特徴やメリットなどを知りたい方は、別の記事にまとめましたのでそちらをご覧ください。
e-shopsカートSとWordPressでショッピングサイト制作: 特徴・使い方・メリット&デメリットを解説
占い (診断) とショッピングの関係性
その企業様では、風水関連のエレメントを表した、20種類以上のオリジナルブレンド茶商品を開発されました。
ユーザーはそのウェブサイトで風水判定 (占い) を行い、自分のエレメントが何かを自ら診断できます。同時に、結果画面にはそのエレメントにマッチしたお茶がいくつか表示され、そこでユーザーはお茶を購入できる、という仕組みのものを作りました。
全体の仕組み (WordPress + e-shopsカートS)
サイト全体はWordPressでできています。占い (診断) の実行や設定はWordPressプラグインを独自に開発してその機能を持たせています。商品を購入するショッピングカートの部分にはe-shopsカートSを用いました。
ちなみに、この事案ではプラグイン開発だけではなく、デザインの再構築やサイト全体の構築、マニュアル作成やコンテンツ提案等まで行いました。
診断の入力画面
占いの入力欄はショートコード化しておき、サイト内のどこでも入力できるようにします。吐き出す内容はプラグイン内に仕込みます。
結果表示画面
画面の大枠
占い (診断) の結果画面の大枠はWordPressの固定ページを使用します。ブロックエディタで全体の構成を作り、結果ごとに表示が変わる部分をいくつかに分けてショートコード化。それぞれに対応する表示内容はプラグイン内で生成します。
商品の提示
このサイトの特徴として、占い (診断) 結果に応じて、そのエレメントをイメージした商品が表示されるようになっています。購入ボタン (直接動作するもの) と商品説明・商品画像が表示される作りになっています。
購入ボタンの部分にe-shopsカートSのカートコードを使用しています。
設定画面
WordPressの管理画面内に占い関連の設定画面を設けるようにしました。
エレメントごとの結果コメント
占い結果のエレメントごとのコメント (この星座のあなたは◯◯に注意が必要ですよ、などといったもの) や、エレメントを表すアイコン画像などは、管理画面内で変更できるようにしました。
診断の元データ
今回はベースが風水診断なので、あらかじめ決まった数値データをもとに判定をします。
将来的に元データの更新をする必要があるため、CSVファイルをアップロードすることでデータを更新できる仕組みを設けました。
商品ページの作り
カートコードの入力欄の扱い
e-shopsカートSの特徴は、コードを貼り付けるだけでどこにでもショッピングカートを表示できることです。この際にWordPressのブロックエディタに用意されている「HTMLブロック」を使うととても簡単に入力できます。
ただ、今回の占いプラグインについては、商品IDとカートコードを確実に結びつけないと、占い結果ページから呼び出して表示させることができません。
そのため、商品ページで自由な位置にカートコードを入力してもらうのではなく、ある程度商品ページの形を定型化し、カスタムフィールド内にe-shopsカートSのカートコードを入力してもらうことにしました。商品ページの自由度は下がりますが、これがベストの方法だと思います。
ちなみに、この枠組みにかかわらず投稿内に自由にカートコードを挿入することはできますので、1商品ページに2回ショッピングカートが出てくるような作りもやろうと思えばできるようになっています。
またこのような作りのおかげで、カテゴリページの個々の商品にカートボタンを表示させることも可能で、一覧から直接購入できるようになりました。
商品情報の入力欄
カートコードと同じく、商品情報が確実に取れないと困るため、商品情報も一部をカスタムフィールド化。
カスタムフィールドの実装
カスタムフィールドの実装はACFなどを使っても可能ですが、安定性を取って制作したプラグインに含めることにしました。
e-shopsカートSが採用された理由
この仕組みは、占い結果表示に単に商品ページへのリンクを表示させるだけでよければ、他のショッピングカートシステムを利用しても実現できます。
ただ、e-shopsカートSの埋め込みコードは、単なるリンクではなく、直接カートに入れることができるので、離脱されにくいといえます。「ゼロステップカート」利用であれば、画面遷移なく決済方法の選択までできます。
「単純リンク方式」だと、ユーザーは占いを実行したあと、結果から商品ページへ移動、そこでカートボタンを押してもらう、という2段階のハードルを超えてもらわないといけないので、せっかく占いプログラムを用意するうまみがもったいないように思います。
大半のECシステム (ショップツール) では、中に独自のプログラムを組み込むことはできません。WordPressなら、プラグイン開発という形でオリジナルの機能を組み込むことは比較的簡単で、そこに相性がいいのがe-shopsカートSであった、といえます。
占い (診断) プログラムとショッピングカートを組み合わせる他の方法
実際には他の方法も検討しましたが、結局マッチしたのはWordPress + e-shopsカートSでした。
- 方法1: BASEやカラーミーショップなどでショップサイトを作り、別でWordPress製の「占いサイト」を作る
- 方法2: Wixやジンドゥーなどの持っているショップ機能を使い、占い機能はJavascriptで作る
- 方法3: 全体をWordPressサイトを作り、ショップ機能は既存のプラグイン (WooCommerceなど) で作る
- 方法4: ECサイトのAPIを工夫して作る
方法1は、2つのウェブサイトができることになります。検索エンジンからの評価が分かれるため、ウェブサイトの成長を考えると損ですし、管理も大変です。
また、占い結果から商品への誘導は単純リンクでしかできないため、それなりに離脱されるであろうという懸念もあります。その場で直接カートボタンを表示できるe-shopsカートS方式の方が適していました。
方法2は、ジンドゥー等ではJavascriptの利用はいちおう可能なので、ごく簡単な占いプログラムであれば作れます。
しかし結果画面を切り分けたり、占いの結果コメントを設定できる画面を設ける、などのことまではできないので、作れたとしてもあまりメンテナンス性のいいものにはなりません。
方法3は、WooCommerceには商品IDを指定して商品を直接カゴへ追加する機能が使えるので、これを活用すれば占い結果から画面遷移も少なく購入に結び付けられそうです。
ただ、WordPressプラグインですので、顧客の個人情報もWordPressと同じサーバーに保存されることになります。またお客様も使い慣れていないため、運用のハードルが高そうなので見送りました。
方法4のAPIは、ShopifyやBASEなどで利用できます (APIとは、外部のプログラムからショップのデータを呼び出す仕組みのこと)。これを使ってオリジナルのウェブアプリを開発し、診断結果から商品やカートを操作する方法が考えられます。
ただし、サービスごとにAPIでできることには違いがあり、それらを確認しながら開発するとなると負担が重く、時間がかかります。将来のメンテナンスも手間がかかります。開発費用は相当嵩むことになるでしょう。
e-shopsカートSだと、あらかじめ保存しておいたカートコードを呼び出すだけで購入ボタンを表示させられますから、開発においてはさほど複雑なロジックがいりません。
結論として、
- 追加機能自体の開発があまり複雑にならず
- そのため開発期間と費用も抑えられ
- お客様側での管理もしやすい
そんな都合のいい方法が、WordPress + e-shopsカートSだったのです。
e-shopsカートSの使い方、メリット・デメリット
占いプログラムなどのWordPressプラグイン開発とe-shopsカートSを組み合わせたショッピングサイト構築にご興味がおありでしたら、ぜひ当事務所までご相談ください。
e-shopsカートSは、商品ごとに発行されるコードをウェブページに埋め込み、好きな場所にショッピングカートボタンを設置できるという特徴があるので、ページの構成やデザインをかなり柔軟にできるメリットがあります。
e-shopsカートSの特徴やデメリット、活用法などは他の記事にまとめましたので、もう少し詳しく知りたい方はそちらをお読みいただければ幸いです。
