図解 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 サイトにおける以下の流れ (桃色) と、関連する機能を一枚の図に整理しました。

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

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

ecommerce_screen

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

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

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

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

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

order_screens

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

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

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

まとめ

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

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

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

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

最後に

prismatix の導入事例 (五十音順)

  • サンリオ様
    • サンリオショップ / サンリオオンラインショップ / サンリオピューロランド共通の会員・ポイントプログラム『Sanrio+(サンリオプラス)』
  • スターバックス コーヒー ジャパン様
    • レジに並ばず決済 & 受け取りできる『Mobile Order & Pay』
  • 寺岡精工様
    • 専用アプリを使って商品スキャン・セルフ会計でレジ渋滞を解消する『Shop & Go(ショップ アンド ゴー)』
  • パルコ様
    • 店頭の商品を Web 上で取り置き & 購入できる『カエルパルコ』

prismatix にご興味をお持ちいただけましたら、ぜひ こちら からお問い合わせください。

prismatix の募集について

prismatix では、一緒にプロダクトを育ててくれる仲間の参加をお待ちしています!
ご興味をお持ちいただけましたら、ぜひ こちら からご応募ください。
「事業開発部」の記載がある募集が、 prismatix の募集となります。

それでは、よい春を!