図解 EC サイトの画面機能

早川貴裕

2021.04.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！事業開発部の早川です。
早くも入社して 5 ヶ月が経ちました汗

引き続き、 prismatix の導入支援を行っています。
今回は、 EC サイトの画面機能についてお伝えします。

想定される読者

EC / CRM に関心のある方。
API / マイクロサービスという言葉は知っている (ただしマイクロサービスのイメージはあまりわかない) 方。
prismatix にご興味をお持ちの方ﾁﾗｯ

目標

本記事をご覧いただいた後、以下のように感じていただけていることを目標とします。

EC サイトの画面機能を整理できた~~気がする~~。
事例を通じて、マイクロサービスの活用イメージが少しわいた~~気がする~~。
prismatix に興味を持った / 話を聞いてみたいﾁﾗﾁﾗｯ

目的

EC サイトの機能を整理する過程において、機能レベルの関係性を把握できるような資料はあまり公開されていないと感じました。
そこで、一般的な EC サイトの画面と、画面に関連する機能について整理を行うことにしました。

また、並行して、以下のような課題に直面しました。
prismatix は、 EC / CRM に必要な機能をマイクロサービス (API) として提供するプロダクトです。
そのため、営業 / 導入の過程において、お客様から「イメージがわかない。」とのご意見をいただくことがよくあります。
私も入社するまでは同じ感覚を持っていました。

これを使えば、 EC / CRM に必要な箱 (データモデル / 項目) と、その操作 (API) を自社で作らなくてもよさそう。しかも、画面 (UI / UX) と BFF (Backends For Frontends) を自分達の好きなように作れるし、マイクロサービスだから必要な機能だけを選べそうだな。 OMO まで視野に入れると、この柔軟性は魅力的。でも、イメージがわかないな・・・まだちょっと、話を聞くのは早いかもな。

という感覚です。

結果的に、上記をともに解決できそうな形で整理を行うことができました。
よって、上記いずれかの課題感をお持ちの方にとって意味があると考え、お伝えすることにしました。

画面 (UI / UX) と BFF (Backends For Frontends) を自分達の好きなように作れる の部分について、先日公開されたスターバックスコーヒージャパン様の事例をご覧いただくことで、よりイメージをお持ちいただけるかと思います。
この他にも、これまでに、 prismatix を用いて価値の高い体験を提供されている事例があります。
ご興味のある方は、先に「最後に > prismatix の導入事例」をご覧ください。

それでは、本題に入ります。

EC サイトの画面機能

EC サイトにおける以下の流れ (桃色) と、関連する機能を一枚の図に整理しました。

会員登録 or ログイン
商品を閲覧
商品をカートに入れて注文

「xx サービス」という枠は、画面に対応する prismatix のマイクロサービス (API 群) となります。
灰色の機能については、対応する API が prismatix にありません。

図を大まかに右上と左下に二分すると、右上が CRM / 左下が EC 関連に分かれています。
このように、一般的な EC サイトの画面を、 prismatix のマイクロサービスの粒度を用いて整理することができました。

宣伝になりますが、このように、 prismatix をご利用いただくことで、 EC / CRM に必要な箱 (データモデル / 項目) と、その操作 (API) を利用し、価値の高い体験の提供にご活用いただけると考えています。

ここまでで、目的に対する記載は終わりです。
発展編として、商品をカートに入れてから注文を行うまでの、マイクロサービス (prismatix) の利用フロー例を記載します。
難易度が上がりますので、参考程度にご覧ください。

発展編 (マイクロサービス利用の流れ)

以下の画面と、お客様に商品が届くまでのフロー例となります。

order_screens

フロント
- 画面と BFF
xx サービス
- prismatix のマイクロサービス
外部 xx
- 関連する外部サービス / 組織

API 呼び出しに限定し、レスポンスや内部処理などの詳細を省略しています。

これだけでも、結構大変ですよね・・・
自社で全てを構築する場合、これらの箱 (データモデル / 項目) や操作 (API) についても検討することになります。
部品の取捨選択が可能な prismatix などのサービスを利用し、より価値の高い体験の提供にご活用いただければと思います。

まとめ

お疲れさまでした！
今回は以下の内容について、ご紹介しました。

一般的な EC サイトの画面機能の整理
- prismatix のマイクロサービスとの対応
マイクロサービス (prismatix) を活用し、価値の高い体験を提供されている事例
- 「最後に > prismatix の導入事例」を参照
マイクロサービス (prismatix) を利用した注文フローの例

少しでも、「目標」に記載の気持ちをお持ちいただくことができ、今後サービスやシステムに関わる上でいかしていただければ、とても嬉しいです。

理解を深めるための参考記事

クラスメソッドの自社開発EC/CRMプラットフォーム「prismatix」のご紹介
- prismatix のサービス概要や技術スタックをご覧いただけます。
EC の在庫はどのように管理しているのか？
- EC サイトの在庫管理に関する概要が、分かりやすく解説されています。
「ECサイトの決済システムを作るなら知っておきたいこと」というテーマで話をしました
- EC サイトの決済システム連携に関する概要が、動画付きで分かりやすく解説されています。
本当に怖い軽減税率対応
- 軽減税率の切り口から、 prismatix でどのように注文情報を扱っているのかが、動画付きで分かりやすく解説されています。
よりよくわかる認証と認可
- 認証 / 認可について、 prismatix でも利用されている概念について、解説しています。