Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
次世代ヘッドレス開発室が提供するヘッドレスEC
Search
texdeath
October 16, 2021
Marketing & SEO
0
630
次世代ヘッドレス開発室が提供するヘッドレスEC
次世代ヘッドレス開発室のチャレンジであるヘッドレスECについてのスライドです
texdeath
October 16, 2021
Tweet
Share
More Decks by texdeath
See All by texdeath
コードメトリクス計測による課題可視化と品質確保 / Visualize issues and ensure quality by measuring code metrics
texdeath
0
290
クライアントワークと管理画面の話
texdeath
0
200
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.7k
おさらいVue Composition API
texdeath
0
430
React使いがVueと仲良くなるためにやったこと
texdeath
0
280
Optional Chainingについて
texdeath
3
170
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
620
Kotlin/JSでReactアプリを作ってみた
texdeath
1
900
Other Decks in Marketing & SEO
See All in Marketing & SEO
Topical Authority in the Age of Entity SEO - BrightonSEO San Diego
felipebazon
0
200
Crawling, Indexation and Logfiles
andorpalau
1
290
BrightonSEO 2024 | LinkedIn SEO - How to blend social and search optimisation
telitsa
0
230
Folashade Uba
folashadeuba
0
200
Tactics vs strategy: why SEO’s shouldn’t focus on industries
petervz
0
220
PMMとは? … モダンなSaaSプロダクトに必須な役割(「プロマネチョットデキル#5」より)
piacerex
0
140
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.1k
Future-Proof Links: Users, Updates & AI
tamaranovitovic
0
170
Cómo alcanzar el éxito en Ecommerce SEO - #MarketingxValencia
aleyda
0
110
How Smart Bidding Really Works Behind The Scenes
nathanifill
0
210
Link Wars: The SEO Awakens
ajordanseo
0
140
MIXI における技術広報とその役割
mixi_engineers
PRO
2
380
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Documentation Writing (for coders)
carmenintech
69
4.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Making Projects Easy
brettharned
116
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
RailsConf 2023
tenderlove
29
1k
Code Reviewing Like a Champion
maltzj
522
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
Transcript
次世代ヘッドレス開発室が提供する ヘッドレスEC
自己紹介 森田 勝駿(@texdeath) AI事業本部 DX本部 次世代ヘッドレス開発室 フロントエンドエンジニア • 中途入社でまだ2ヶ月くらい • Reactが好きで記事書いたり書籍に寄稿したりしてます
はじめに • PWAの話というよりも事業として今やっていることの 説明です • 実装に関してのお話ではないです ◦ 今後の展望としてPWAも視野に入っているので、 そのお気持ち表明的な話をします
Agenda • 次世代ヘッドレス開発室について • ヘッドレスECとは? • ヘッドレスECがもたらす効果 • PWAとの関係性 •
現実の壁/今後の課題 • さらにやっていきたいこと
「次世代ヘッドレス開発室」🤔
今年の4月に設立された新しい組織
None
None
今回はDX推進の一環として 行っている事業施策の紹介です
次世代ヘッドレス開発室がやっていること • ECシステム・販売データ基盤の『ヘッドレス化』 ◦ 基幹システムとフロントエンド環境を切り離し →より柔軟な開発を可能に • サイト・アプリの改善提案・開発・運用支援 ◦ 小売企業に対しての設計・運用サポート
◦ ECサイトのUI/UX改善など
『ECのヘッドレス化』
従来のECサイトは... • サービスリリースからかなりの年月が経過しているものも 珍しくない • 基幹システムは頻繁な変更を想定した設計でないことが多い ◦ 商品仕入/在庫管理/実店舗連動/売上管理etc… • 「最適な顧客体験」を生み出すためには頻繁な改善が必要
ASPを使えば? • ASPカートシステムは手軽に始められるが、カスタマイズが難 しく独自性を持たせにくい ◦ デザイン・分析のためのDB連携などに制約がある • 凝ったことをしたければ別の構築手法が必要
基幹システムを分離 • ECシステムをフロントエンドとバックエンドで分離 フロントエンド アプリ/Webサイト • APIと通信し情報を取得 • ユーザー体験を提供 バックエンド
基幹システム • 業務ロジックを担当 • APIを提供
None
フロントエンド環境の自由化 • ECの基幹システムとフロントが一体化している環境からの脱却 ◦ 既存のアーキテクチャに縛られない自由でモダンな技術選定が可能 ◦ フロントのみの改修が可能→スピーディなUX改善へ
• それぞれの責任範囲が明確になり、シンプルな設計に • 改修の影響範囲を最小限に留められる ◦ デザイン刷新やUX向上の改修であればフロント側だけリリース • 既存に縛られないモダンな技術選定は開発効率の向上につながる ◦ 対応が後手後手にならず、常にUXを追求し続けられる
基幹とフロントの分離がもたらす効果
現実的な構成 • 理想的にはUI⇄APIの構成にしたいが、部分的にSSRしたいユースケー スもある • BFF用のサーバを挟み、クライアント⇄BFFで解決する場合もある クライアント 基幹システム BFFサーバ
None
PWAも選択肢に入りうる • 既存のアーキテクチャだと構造上実現できなかったPWAも実現 可能→DX最大化のひとつとしてPWAは重要な要素になる ◦ コンテンツの読み込み時間短縮 ◦ ストアからのインストール不要で使える手軽さ manifest
ネイティブアプリとの比較 • PWAはネイティブアプリよりも初期費用を抑えた開発ができる ◦ iOS/Android両方をサポートできるのがWebアプリのメリット ◦ 顧客の参入障壁も低くなる ◦ まずは自社ECサイトをヘッドレス化/PWA対応するなど
現実の壁 • ヘッドレスコマースやPWAという概念の顧客理解 ◦ 現行システムに手を入れることに拒否反応示されると厳しい ◦ 理解が得られなければ導入は難しい...
今後の課題 • 既存のシステムを開発している人たちとの調整 ◦ 利害関係者が増えると調整が難しい ◦ バックエンドとフロントエンドの運用する事業者が違うと苦 労するかも ◦ 責任分界点の整理などしっかりしたほうがいい
• パフォーマンスのモニタリング ◦ 効果が上がっているかどうかを計測する方法をどうするか
さらにやっていきたいこと • Jamstack x PWA ◦ 部分的にSSGで静的ファイル化し、コンテンツのさらなる高 速化を目指す ◦ ユニバーサルフレームワークを使い倒す
◦ ECサイトの特性上すべてというわけにはいかないが...
EOF