次世代ヘッドレス開発室が提供するヘッドレスEC

次世代ヘッドレス開発室のチャレンジであるヘッドレスECについてのスライドです

Transcript

1. 次世代ヘッドレス開発室が提供する
   ヘッドレスEC
   

   View Slide

2. 自己紹介

   森田　勝駿（@texdeath）
   AI事業本部 DX本部 次世代ヘッドレス開発室
   フロントエンドエンジニア
   ● 中途入社でまだ2ヶ月くらい
   ● Reactが好きで記事書いたり書籍に寄稿したりしてます
   

   View Slide

3. はじめに
   ● PWAの話というよりも事業として今やっていることの
   説明です
   ● 実装に関してのお話ではないです
   ○ 今後の展望としてPWAも視野に入っているので、
   そのお気持ち表明的な話をします
   

   View Slide

4. Agenda
   ● 次世代ヘッドレス開発室について
   ● ヘッドレスECとは？
   ● ヘッドレスECがもたらす効果
   ● PWAとの関係性
   ● 現実の壁/今後の課題
   ● さらにやっていきたいこと
   

   View Slide

5. 「次世代ヘッドレス開発室」🤔
   

   View Slide

6. 今年の4月に設立された新しい組織
   

   View Slide

7. View Slide

8. View Slide

9. 今回はDX推進の一環として
   行っている事業施策の紹介です
   

   View Slide

10. 次世代ヘッドレス開発室がやっていること
    ● ECシステム・販売データ基盤の『ヘッドレス化』
    ○ 基幹システムとフロントエンド環境を切り離し
    →より柔軟な開発を可能に
    ● サイト・アプリの改善提案・開発・運用支援
    ○ 小売企業に対しての設計・運用サポート
    ○ ECサイトのUI/UX改善など
    

    View Slide

11. 『ECのヘッドレス化』
    

    View Slide

12. 従来のECサイトは...
    ● サービスリリースからかなりの年月が経過しているものも
    珍しくない
    ● 基幹システムは頻繁な変更を想定した設計でないことが多い
    ○ 商品仕入/在庫管理/実店舗連動/売上管理etc…
    ● 「最適な顧客体験」を生み出すためには頻繁な改善が必要
    

    View Slide

13. ASPを使えば？
    ● ASPカートシステムは手軽に始められるが、カスタマイズが難
    しく独自性を持たせにくい
    ○ デザイン・分析のためのDB連携などに制約がある
    ● 凝ったことをしたければ別の構築手法が必要
    

    View Slide

14. 基幹システムを分離
    ● ECシステムをフロントエンドとバックエンドで分離
    フロントエンド
    アプリ/Webサイト
    ● APIと通信し情報を取得
    ● ユーザー体験を提供
    バックエンド
    基幹システム
    ● 業務ロジックを担当
    ● APIを提供
    

    View Slide

15. View Slide

16. フロントエンド環境の自由化
    ● ECの基幹システムとフロントが一体化している環境からの脱却
    ○ 既存のアーキテクチャに縛られない自由でモダンな技術選定が可能
    ○ フロントのみの改修が可能→スピーディなUX改善へ
    

    View Slide

17. ● それぞれの責任範囲が明確になり、シンプルな設計に
    ● 改修の影響範囲を最小限に留められる
    ○ デザイン刷新やUX向上の改修であればフロント側だけリリース
    ● 既存に縛られないモダンな技術選定は開発効率の向上につながる
    ○ 対応が後手後手にならず、常にUXを追求し続けられる
    基幹とフロントの分離がもたらす効果
    

    View Slide

18. 現実的な構成
    ● 理想的にはUI⇄APIの構成にしたいが、部分的にSSRしたいユースケー
    スもある
    ● BFF用のサーバを挟み、クライアント⇄BFFで解決する場合もある
    クライアント 基幹システム
    BFFサーバ
    

    View Slide

19. View Slide

20. PWAも選択肢に入りうる
    ● 既存のアーキテクチャだと構造上実現できなかったPWAも実現
    可能→DX最大化のひとつとしてPWAは重要な要素になる
    ○ コンテンツの読み込み時間短縮
    ○ ストアからのインストール不要で使える手軽さ
    manifest
    

    View Slide

21. ネイティブアプリとの比較
    ● PWAはネイティブアプリよりも初期費用を抑えた開発ができる
    ○ iOS/Android両方をサポートできるのがWebアプリのメリット
    ○ 顧客の参入障壁も低くなる
    ○ まずは自社ECサイトをヘッドレス化/PWA対応するなど
    

    View Slide

22. 現実の壁
    ● ヘッドレスコマースやPWAという概念の顧客理解
    ○ 現行システムに手を入れることに拒否反応示されると厳しい
    ○ 理解が得られなければ導入は難しい...
    

    View Slide

23. 今後の課題
    ● 既存のシステムを開発している人たちとの調整
    ○ 利害関係者が増えると調整が難しい
    ○ バックエンドとフロントエンドの運用する事業者が違うと苦
    労するかも
    ○ 責任分界点の整理などしっかりしたほうがいい
    ● パフォーマンスのモニタリング
    ○ 効果が上がっているかどうかを計測する方法をどうするか
    

    View Slide

24. さらにやっていきたいこと
    ● Jamstack x PWA
    ○ 部分的にSSGで静的ファイル化し、コンテンツのさらなる高
    速化を目指す
    ○ ユニバーサルフレームワークを使い倒す
    ○ ECサイトの特性上すべてというわけにはいかないが...
    

    View Slide

25. EOF
    

    View Slide