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

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

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

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

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

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

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

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

『ECのヘッドレス化』

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

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

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

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

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

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

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

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

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

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

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

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

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

texdeath

More Decks by texdeath

Other Decks in Marketing & SEO

Featured

Transcript