Solution
ヘッドレスコマース
既存システムの中に、EC機能をAPI呼び出しによって組み込む構築方法です。
ヘッドレスコマースは近年のフロントエンド・バックエンド分離型システムのトレンドに合わせた
ECシステム構築手法として、大変注目を浴びています。
弊社ではSpreeCommerceを使ったヘッドレスコマース実現のお手伝いをしております。
ヘッドレスコマースのメリット
- 既存システムの見た目や使い勝手を
維持したままEC機能を付与できる従来の組み込み方の問題点- 既存システムとECシステムで、UIが一致しない
- あるいは、ECシステム側のデザインカスタマイズのノウハウが必要
ヘッドレスコマースでは、データの取得、データの更新などのビジネスロジックはAPI呼び出しによって行います。
そして、その結果を画面に表示する部分は、既存の仕組みの中で行うことができます。
EC部分に対して既存のUIコンポーネントを適用することも可能になります。 - フロントエンド・バックエンドの構成の
メリットをそのまま享受できるヘッドレスコマースでは、以下のようなフロントエンド・バックエンド構成のメリットをそのまま教授することができます。- フロントエンドとバックエンドを並行で(別チームで)開発できる
- フロントエンドとバックエンドがそれぞれリリースでき、リリースが簡単になる
- 描画が速くなる
- バックエンドがよりセキュアになる
Spree
Commerceの
ヘッドレスコマースの特徴
SpreeCommerceはRuby on Railsで構築されたオープンソースのカートシステムです。
オープンソースですのでシステム自体は無料で利用することができます。(インストール先のサーバー代金は別途かかります)
2007年の初回リリース以降現在も非常に活発に機能追加・リリースを繰り返しており、国内ではそれほど有名ではありませんが、海外では非常に有名でスタンダードなカートシステムです。
SpreeCommerceはヘッドレスコマースに非常に力をいれており、様々な特徴があります。
- Javascript/TypeScript SDK完備、OpenAPI完備
Javascript/TypeScript SDKを利用可能です。
OpenAPI準拠のYAMLファイルを提供しており、オンラインでドキュメントを確認できます。
https://api.spreecommerce.org/docs/api-v2/api/docs/v2/storefro-testtesttesttesttest…
- Vue Storefront 2, Next.js Commerceに対応
Vue Storefront 2やNext.js CommerceはNuxt.jsやNext.jsを採用しているフロントエンドシステムに、ECシステムをかんたんに構築するための仕組みです。
SpreeCommerceは、この両者に対応しています。デモショップ
Next.js Commerce
https://spreecommerce.org/integrations/nextjs-commerce-and-s…
Vue Storefront 2
これらのフレームワークを利用して、素早くECサイトを既存のシステムに組み込むことができます。
- iOSやAndroidのフロントエンドサンプルがある
iOSやAndroidネイティブアプリの中にEC機能を組み込みたい場合も、以下のサンプルを活用することができます。
iOS / フロントエンドサンプル
Android / フロントエンドサンプル
- カスタマイズ性の高さ
SpreeCommerceはRuby on Railsを採用しており、あらゆる機能に対して、非常にシンプルかつ柔軟にカスタマイズ可能となっています。
また、巨大なオープンソースコミュニティによってもたらされる非常に多数のコントリビューションを活用することができますので、かんたんに機能の追加ができます。
- 多言語、他通貨、既存顧客データや認証システムとの連動が可能
SpreeCommerceは多言語、他通貨対応、マルチテナント対応、あらゆる決済システムに対応可能など非常に拡張性のあるシステムです。
また、他の既存システムの顧客データ及び認証システムと連動して動作させることができます。
こんな人におすすめです
- 既存のシステムの中にECをシンプルに統合したい方
- 最適なECを追求していきたい方
- フロントエンドだけに集中したい業者の方
弊社の実績
- フロントエンド担当の別会社と連携して開発してほしい
- 他の会員データベース及び認証と連動させたい
- 自社ポイントシステムと連動させたい
- 既存Webサイト内にシームレスに組み込みたい
- 既存の物流システムと連動させたい
- フロントエンドは別業者がNuxtJSで構築、SpreeのOpenAPI仕様書でスムーズに協調作業
- 基幹システムと別のシステムとして新たにSpreeのシステムを構築
- 基幹システム側との認証連携や、商品マスタ、在庫情報の同期ができるようにした
- 注文をSpreeで受けつけて基幹システムに自動取り込み
- ポイント値引きをSpreeでできるようにした
- システム全体設計
- バックエンドシステム開発
- 2名4ヶ月
- CVR向上のため配送先住所、支払い方法選択、ユーザー登録をすべて1画面で完結させたい
- サブスクの課金をしたい(ただし初月は無料としたい)
- 他の会員データベース及び認証と連動させたい
- アクセス元ユーザーごとや商材ごとに表示項目などを変化させて最適化させたい
- Rails製業務システムSpreeをそのまま導入
- ReactJSによるフロントエンド構築
- Spreeをサブスクプラン管理システムに拡張
- デザイン制作
- フロントエンド及びバックエンドシステム開発
- 2名、約2ヶ月
美容サロン、美容商材メーカー U社 様
美容商材販売サイトをSpreeのヘッドレスコマースで構築
基幹システム連携と既存Webサイト組み込みをSpreeのヘッドレスコマースですべて解決!
元々の課題
実現したこと
担当内容
開発人数・期間
スマートカメラメーカー J社 様
サブスク課金システムをSpreeのヘッドレスコマースで構築
変則的な画面遷移をヘッドレスコマースでCVR最適化!
元々の課題
実現したこと
担当内容
開発人数・期間
よくある質問
WordPressなど、サーバーサイドで描画を行うシステムに対して組み込み可能ですか?
フロントエンドのみ、バックエンドのみといった依頼は可能ですか?
継続的に画面修正やシステム維持・メンテナンスを依頼可能ですか?
基本自社開発したいのですが、アドバイザーとしてのみの依頼も可能ですか?
弊社はSpreeCommerceを使ったヘッドレスコマースの構築に特化したサービスを実施しております。
SpreeCommerceはRuby on Railsを採用したオープンソースのカートシステムであり、無限のカスタマイズ可能性があります。
お客さまが目指すECシステム実現のために、Ruby on Rails、SpreeCommerceを熟知した弊社に是非お気軽にご相談ください。