Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
次世代ヘッドレス開発室が提供する ヘッドレスEC
Slide 2
Slide 2 text
自己紹介 森田 勝駿（@texdeath） AI事業本部 DX本部 次世代ヘッドレス開発室 フロントエンドエンジニア ● 中途入社でまだ2ヶ月くらい ● Reactが好きで記事書いたり書籍に寄稿したりしてます
Slide 3
Slide 3 text
はじめに ● PWAの話というよりも事業として今やっていることの 説明です ● 実装に関してのお話ではないです ○ 今後の展望としてPWAも視野に入っているので、 そのお気持ち表明的な話をします
Slide 4
Slide 4 text
Agenda ● 次世代ヘッドレス開発室について ● ヘッドレスECとは？ ● ヘッドレスECがもたらす効果 ● PWAとの関係性 ● 現実の壁/今後の課題 ● さらにやっていきたいこと
Slide 5
Slide 5 text
「次世代ヘッドレス開発室」🤔
Slide 6
Slide 6 text
今年の4月に設立された新しい組織
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
今回はDX推進の一環として 行っている事業施策の紹介です
Slide 10
Slide 10 text
次世代ヘッドレス開発室がやっていること ● ECシステム・販売データ基盤の『ヘッドレス化』 ○ 基幹システムとフロントエンド環境を切り離し →より柔軟な開発を可能に ● サイト・アプリの改善提案・開発・運用支援 ○ 小売企業に対しての設計・運用サポート ○ ECサイトのUI/UX改善など
Slide 11
Slide 11 text
『ECのヘッドレス化』
Slide 12
Slide 12 text
従来のECサイトは... ● サービスリリースからかなりの年月が経過しているものも 珍しくない ● 基幹システムは頻繁な変更を想定した設計でないことが多い ○ 商品仕入/在庫管理/実店舗連動/売上管理etc… ● 「最適な顧客体験」を生み出すためには頻繁な改善が必要
Slide 13
Slide 13 text
ASPを使えば？ ● ASPカートシステムは手軽に始められるが、カスタマイズが難 しく独自性を持たせにくい ○ デザイン・分析のためのDB連携などに制約がある ● 凝ったことをしたければ別の構築手法が必要
Slide 14
Slide 14 text
基幹システムを分離 ● ECシステムをフロントエンドとバックエンドで分離 フロントエンド アプリ/Webサイト ● APIと通信し情報を取得 ● ユーザー体験を提供 バックエンド 基幹システム ● 業務ロジックを担当 ● APIを提供
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
フロントエンド環境の自由化 ● ECの基幹システムとフロントが一体化している環境からの脱却 ○ 既存のアーキテクチャに縛られない自由でモダンな技術選定が可能 ○ フロントのみの改修が可能→スピーディなUX改善へ
Slide 17
Slide 17 text
● それぞれの責任範囲が明確になり、シンプルな設計に ● 改修の影響範囲を最小限に留められる ○ デザイン刷新やUX向上の改修であればフロント側だけリリース ● 既存に縛られないモダンな技術選定は開発効率の向上につながる ○ 対応が後手後手にならず、常にUXを追求し続けられる 基幹とフロントの分離がもたらす効果
Slide 18
Slide 18 text
現実的な構成 ● 理想的にはUI⇄APIの構成にしたいが、部分的にSSRしたいユースケー スもある ● BFF用のサーバを挟み、クライアント⇄BFFで解決する場合もある クライアント 基幹システム BFFサーバ
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
PWAも選択肢に入りうる ● 既存のアーキテクチャだと構造上実現できなかったPWAも実現 可能→DX最大化のひとつとしてPWAは重要な要素になる ○ コンテンツの読み込み時間短縮 ○ ストアからのインストール不要で使える手軽さ manifest
Slide 21
Slide 21 text
ネイティブアプリとの比較 ● PWAはネイティブアプリよりも初期費用を抑えた開発ができる ○ iOS/Android両方をサポートできるのがWebアプリのメリット ○ 顧客の参入障壁も低くなる ○ まずは自社ECサイトをヘッドレス化/PWA対応するなど
Slide 22
Slide 22 text
現実の壁 ● ヘッドレスコマースやPWAという概念の顧客理解 ○ 現行システムに手を入れることに拒否反応示されると厳しい ○ 理解が得られなければ導入は難しい...
Slide 23
Slide 23 text
今後の課題 ● 既存のシステムを開発している人たちとの調整 ○ 利害関係者が増えると調整が難しい ○ バックエンドとフロントエンドの運用する事業者が違うと苦 労するかも ○ 責任分界点の整理などしっかりしたほうがいい ● パフォーマンスのモニタリング ○ 効果が上がっているかどうかを計測する方法をどうするか
Slide 24
Slide 24 text
さらにやっていきたいこと ● Jamstack x PWA ○ 部分的にSSGで静的ファイル化し、コンテンツのさらなる高 速化を目指す ○ ユニバーサルフレームワークを使い倒す ○ ECサイトの特性上すべてというわけにはいかないが...
Slide 25
Slide 25 text
EOF