※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
Salesforce B2C Commerceと商品を購入するユーザを繋げるUIを作成する手段には大きく分けて下記の３つあります。
- SFRA (Storefront Reference Architecture)
- PWA Kit
- Headless
この記事ではこの３つの違いとそれぞれのメリットを紹介したいと思います！
SFRA
Storefront Reference Architectureの略です。
B2C Commerceに標準でビルドインされているUIのベストプラクティスを詰め込んだテンプレートで、そのテンプレートに対して修正を加えながらサイトを構築していくので、短期間でのサイトの立ち上げが可能です。モバイルファーストなのでモバイル対応もバッチリです。
A/Bテストができたり、プロモーションでサイトを訪れた顧客に合わせたUIの切り替えができたり、分析ツールでAPIの応答時間を確認できる機能が標準でついているので、導入後のUI/UXを向上させていくのも容易です。
さらに、パートナーが提供してくれるカートリッジを利用して簡単に機能を拡張していったり、自分でカートリッジを作成して機能を追加することもできます。
MVCモデルを採用していたり、コードはJavascriptを利用して実装するので、初めての方でもかなりとっかかりやすいと思います。
使い方については今後の記事で紹介できればいいなと思っております。
詳細はDeveloper CenterのSFRAの記事が参考になります。
PWA Kit
B2C CommerceでPWAを実現するためのテンプレートです。
こちらもSFRA同様、UIのベストプラクティスが詰め込まれていますし、もちろんモバイル対応です。
PWA KitはSFRAとは違い、フロントエンドがB2C Commerceから分離されており、Managed Runtimeというプラットフォーム上に構築します。
Nodejs, Express.jsやReactといったオープンソースを利用しているので、他の案件で経験がある方が参画しやすいようになっています。必要となりそうなスキルセットに関してはこちらに記載あります。
PWA KitのコードはNPMに公開されているので、実際に見てみて確認してみてもいいかもしれません。isomorphic/universal javascriptで実装されているので、開発効率も非常に高いです。
Managed Runtimeには標準でCDNやWAFなどが搭載されているので、インフラ構築にかける手間が大幅に軽減されますし、デプロイも非常に早く、多くの場合１分程度で完了します。
使い方については今後の記事で紹介できればと考えています。
詳細はDeveloper CenterのPWA Kitの記事が参考になります。
Headless
Headlessは上記で紹介したテンプレートと違い、API群のことです。
B2C CommerceにはCommerce APIというフロントエンドを実装する際に利用できるAPIがあり、そのAPIを利用すれば、ネイティブアプリやIoTデバイスなどの様々なフロントエンドからB2C Commerceへアクセスできます。その様々なフロントエンド(=ヘッド)はユーザの要件によって変えることができるので、そのヘッドはなんでもいいよ的な意味合いでヘッドレスと呼ばれています。上記で紹介したPWA KitもCommerce APIを利用しているので、ヘッドレスの一部と言えます。
ちなみに「ヘッドレスコマース」は一般用語なので是非検索してみてください。
ここではB2C Commerceではヘッドレスコマースを実現するためにCommerce APIとAPIに接続するためのSDKが提供されているということだけ理解していただければいいなと思います。
詳細はDeveloper CenterのHeadlessの記事が参考になります。
まとめ
概念図と考えられるメリットを下に掲載しておきます。
SFRAでは短期の導入ができたり、標準で豊富な機能が組み込まれているので、サイトの改善が非常にしやすくなっています。
最近では自社で開発チームを持って、フロントエンドとバックエンドを分離させて、スピード感を持って新しいソリューションを導入していくような動きもあるので、そんな時はCommerce APIを利用してフロントエンドは自社で実装できるようになっています。また、新たにPWA Kitが出てきたことによって、短期間にCommerce APIを利用したサイトが作成でき、さらにPWAも実現できるようになりましたし、これからどんどん機能が実装されていくようなので、非常に楽しみです！
| メリット | |
|---|---|
| SFRA | ・新しいユーザー体験を実現するサイトを早くリリースできる ・ EC管理者やマーケターにとって役立つ機能をすぐに提供できる ・ サイトを運営するための機能が一揃いになっている ・ AIドリブンの検索やレコメンド ・ モバイルファースト、マルチサイト、マルチロケーションのグローバルプラットフォームである ・ ノーコードでのページの作成や編集、プロモーション、キャンペーン施策が可能 ・ パートナーカートリッジを利用した機能の拡張 |
| PWA Kit | ・ 柔軟で無限なユーザ体験の提供ができる ・ サイトの表示スピードの向上とモバイル最適化 ・ サイト運用のアジリティの向上 ・ 1からヘッドレスを利用するよりもリスク・コストを低減できる ・ すぐにサイトをローンチできる ・ PWA Kitを自社ブランドの要件に沿ってカスタマイズできる ・ プリビルドされた疎結合のストアフロントである ・ 自社ブランドのグローバル展開に合わせてローカライズされたマルチサイトを提供できる ・ スケーラブルなManaged Runtimeを利用してリスク・コストの低減が可能 ・ Commerce APIを利用しさまざまな顧客接点を実装可能 |
| Headless | ・ ITチームに完全コントロールを与え、フロントエンドの体験を自立させる ・ 既存のフロントエンドに対する投資にレバレッジかけれる ・ Commerce APIを利用し、どんなフレームワークでも、フロントエンドを構築できる。 ・ Commerce APIを利用しさまざまな顧客接点を実装可能 |