Webサイトに「カート機能」を実装するための3つの方法


既存のWebサイトで商品やサービスを販売する場合、ECの「カート機能」の追加実装が必要になります。カート機能を追加する方法には以下の3つがあります。

◆既存のWebサイトに「カート機能」を追加するための3つの方法

① WebページにASPサービスのカート機能へのリンク設定
② APIで外部のカートシステムとWebサイト間のデータ連携
③ Webサイトに新たに開発したカート機能を組み込む

今すぐオンライン販売を始めたい場合には、①のASPサービスへのリンクを設定する方法がおすすめです。初期費用・固定費用が不要のASPサービスを利用して、自社サイトの商品ページにリンクを設定するだけでカート機能を利用できます

しかし、カート機能の利用時に、ASPのサービスサイトに移動する(URLのドメインが変わる)ため不安を感じて離脱するユーザーが一定数出る可能性や、カスタマイズ性の低さなど、いくつか考慮が必要なポイントもあります。

この記事では、インターファクトリーでマーケティングを担当している筆者が、Webサイトに、新たにECの「カート機能」を実装する方法を紹介します。

Webサイトに「カート機能」を実装する3つの方法

以下は、筆者の経験から、既存のWebサイトに「カート機能」を追加するための3つの方法の特徴をまとめた表です。

◆既存のWebサイトに「カート機能」を追加するための3つの方法と特徴

①ASPサービスへのリンク設定 ②APIでデータ連携 ③機能開発
初期費用 0円 10万円~ 100万円程度~
労力 ×
カート機能使用時のドメイン 外部 自社 自社
セキュリティ 実装方法や運用方法により異なる
EC会員機能 使用するサービスにより異なる 使用するサービスにより異なる 仕様により異なる

出典:筆者の経験に基づき独自に作成

①のASPサービスへのリンクを設定する方法では、初期費用と固定費用は不要で決済ごとに手数料を支払う、「BASE(ベース)」「STORES(ストアーズ)」「Square(スクエア)」などのEC専用サービスやWeb決済代行サービスなどが利用できます。

この方法では、カート機能の使用時はASPのサービスサイトに移動するため、購入時のブラウザのURLに外部のドメインが表示されることになります。そのため、Webサイト自体の信頼性に不安を感じて離脱するユーザーが一定数出てくる可能性があります。

②のAPIでデータ連携する方法では、APIを使ってカート機能を担う外部システム(あるいはサービス)とWebサイト間でデータのみを連携する方法です。ユーザーはWebサイト(自社ドメイン)内で商品購入手続きを完了することができます。

③の機能開発で追加実装する方法は、自社で新たに開発したカート機能をWebサイトに組み込む方法です。①~③の中で導入までの期間とコストを最も要しますが、機能やデザイン、運用の自由度が最も高い方法です。

カート機能をどこに実装するのか?

~③の方法では、「『カート機能』をどこに持たせるか」が異なります。それぞれのカート機能とWebサイトの関係をそれぞれ図で確認してみましょう。

①ASPサービスへのリンクを設定する方法

出典(画像):筆者作成

②APIでデータ連携する方法

※一部外部ドメインに遷移するサービスもあります

出典(画像):筆者作成

③新たに開発したカート機能を組み込む方法

出典(画像):筆者作成

図で見ると分かるように、①と②は外部のカート機能を利用しており、③は自社のWebサイトにカート機能を組み込んでいます

それでは、①~③について詳しく説明していきます。

① ASPサービスへのリンクを設定する方法

◆特徴

✓固定費がかからない
✓すぐに利用できる
✓カートのデザインをテンプレートから選択できる
✓複雑なカスタマイズができない
✓外部ドメインに切り替わるためユーザーが離脱する可能性がある

初期費用・固定費用無料で、手軽にカート機能を使うことができる代表的なASPサービスとしては以下のサービスがあります。

◆代表的なASPサービス

初期費用 月額費用 決済手数料
BASE
(スタンダードプラン)
0円 0円 3.6%+40円
+サービス利用料3%
STORES
(フリープラン)
0円 0円 5%
Square
オンラインビジネス
0円 0円 3.6%

出典:BASEの料金プラン・手数料料金プラン│STORES ネットショップSquare オンラインビジネス(2023年8月現在)より筆者作成

繰り返しとなりますが、この方法はリンクを設定して外部のカートサービスに遷移させるため、ブラウザに表示されるURLも当然外部ドメインになります。

筆者が経営している会社のコーポレートサイトでは、STORESへのリンクを設定して教材販売のカート機能を実装しています。そのため、ブラウザに表示されるURLのドメインは下図のように切り替わります。急に外部ドメインに移動することで、不安を感じるユーザーもいる可能性についてはあらかじめ理解しておきましょう

◆カート機能を「STORES」へのリンクで実現している例(筆者のコーポレートサイト)

筆者のサイトでSTORESを採用した事例

出典(画像):forUSERS株式会社forUSERS オンラインストアより、筆者が一部加工して作成

また、ASPサービスでは複雑なカスタマイズに対応できない点も注意が必要です。何も考えずに選定すると、運用開始後に必要な機能が不足していることに気付く可能性もあります。例えばSTORESには領収書作成機能がなく、筆者の場合は、領収書が必要なユーザーには都度手作業で作成して送付することで運用できていますが、領収書の作成頻度が多い場合などにはかなりの負担になるでしょう。

ASPサービスは低コストで手軽に利用できる半面、個別のカスタマイズに対応できない場合がほとんどです。そのため、カート機能の導入前にあらかじめ必要な要件を洗い出した上で、取引数やユーザー数が少ない場合や、新規事業のテスト環境として使用する場合などには①の方法を検討するのがよいでしょう。

② APIでデータ連携する方法

◆特徴

✓外部のカートシステムとデータ連携を行う
✓API連携なので短期間で実装できる
✓自社ドメイン内で運用できる
✓カートのデザインは自社で任意に開発できる
✓複雑なカスタマイズが難しい

APIを使って外部のカートシステムとWebサイト間でデータ連携することで、自社サイト内で買い物を行うように見せる方法です。

代表的なカートシステムには以下のサービスがあります。

◆API連携が可能なカートシステム(例)

・Shopify(ショッピファイ)
・EC-CUBE(イーシーキューブ)
・ebisumart(エビスマート)

「Shopify」と「EC-CUBE」では多様なプラグインやAPIが提供されています。

例えば、Shopifyでは「Storefront API(ストアフロントAPI)」で、自社のWebサイトにカート機能を実装することもできます。

参考:機能一覧│EC-CUBEShopify APIリファレンスドキュメント、Shopify「Shopify Storefront API:カスタムストアフロントを強化するアップデート」(2021年11月17日掲載)

「ebisumart」は中大規模向けECのクラウドプラットフォーム自社ドメイン内で決済を完結させることもできます

APIの仕様や開発規模にもよりますが、APIでデータ連携を行うために必要な開発期間は数日~数か月程度が一般的で、③の機能開発と比べると導入時のハードルも低めです。

③ 機能開発で追加実装する方法

◆特徴

✓新たに開発したカート機能を自社サイト内に組み込む
✓新規開発のため時間もコストもかかる
✓自社サイト内だけで運用できる
✓カートのデザインも自由に設計できる
✓複雑な機能も実装できる
✓セキュリティ関連の仕様と運用への考慮と対応が必要

自社のWebサイトに、新たに開発したカート機能を組み込みます。

開発手法は大きく次の2つの方法が考えられます。

開発の手法

1. フルスクラッチで開発する
2. オープンソースソフトウェアあるいはパッケージを利用する

すべてをゼロから開発するフルスクラッチは、時間とコストがかかりますが、機能やデザインの自由度は高い手法です。しかし、開発者がECシステムに精通していない場合には、機能の過不足が発生したり、既製ツールを利用した方が性能も費用対効果も高い機能を無理して作り込み失敗したりする場合があります。「ECサイトをリリースしたものの会員情報の管理ができなかった!」などという笑い話みたいな出来事が起こったりすることもあるのです。

ECシステムの知識の不足を補うためにも、可能であれば、主要なEC機能を備えたパッケージを使用して不足する部分をカスタマイズあるいはアドオンする方法を選択すべきでしょう。基本機能をゼロから開発しなくて済むので、フルスクラッチよりも開発期間を短縮できてコストも抑えられる可能性が高いです。

これらの方法は、固有の機能や運用要件を組み込むことができるため、開発に必要な技術力を備えた企業や個別要件が多い企業などで採用されています。

自社(あるいは外部委託)でEC機能を開発する場合には、PCI DSSに準拠した決済機能を実装する必要があるという点に留意しましょう。システム機能だけでなく、完璧なセキュリティ対策のための開発および運用コストが必要になります。

関連記事:EC事業者が行うべきセキュリティ対策とは?PCI DSS準拠が必要な理由

セキュリティ関連の開発や運用の負荷を軽減するためには、「ebisumart」のようなPCI DSSに準拠したクラウド型ECプラットフォームを利用することをおすすめします。

公式サイト:クラウドECプラットフォーム「ebisumart(エビスマート)」

まとめ

この記事では、既存のWebサイトにカート機能を実装するための3つの方法を紹介しました。

もし、カート機能の導入を考えている場合には、インターファクトリーの「ebisumart(エビスマート)」もぜひご検討ください。カスタマイズやAPI連携にも柔軟に対応可能なECプラットフォームです。クラウドサービスなので、常に最新のシステムやセキュリティ環境を利用でき、大規模サイトでも安心して運用することができます

詳しくは下記の公式サイトでご確認ください。

公式サイト:クラウドECプラットフォーム「ebisumart(エビスマート)」


セミナー情報

ABOUT US
井幡 貴司
forUSERS株式会社 代表取締役。 株式会社インターファクトリーのWEBマーケティングシニアアドバイザーとして、ebisumartやECマーケティングの支援、多数セミナーでの講演を行う。著作には「図解 EC担当者の基礎と実務がまるごとわかる本」などあり、執筆活動にも力を入れている。