Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

texdeath

October 16, 2021
Tweet

More Decks by texdeath

Other Decks in Marketing & SEO

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