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
Rachel Anderson - Gaining Velocity: Building SEO into a Continuous Development Process
techseoconnect
PRO
0
190
Using Python to create 1000 GSC properties in 3 seconds! BrightonSEO Oct. 2024
saji
2
310
How to cluster content to enhance your relevance
pablolopezm
0
170
Gokce Yesilbas - Transforming Data Into Stories with Tableau - MeasureFest
gokceyesilbas
1
840
How Smart Bidding Really Works Behind The Scenes
nathanifill
0
210
JAWS-UGとは -JAWS-UG茨城支部#0勉強会-
awsjcpm
0
110
Topical Authority in the Age of Entity SEO - BrightonSEO San Diego
felipebazon
0
200
Creating data-driven SEO apps with AI - Brighton SEO
michaelvdr
0
300
MIXI における技術広報とその役割
mixi_engineers
PRO
2
380
Conversion optimisation strategies for business owners
olajiga
0
140
(再)ひとり技術広報からの脱却 / Re:Breaking away from one-man technical public relations
seike460
PRO
1
180
BtoB企業の指名検索・商標検索を意図的に狙って増やす「検索創出型マーケティング(SCM)」とは
080fe121
0
110
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
We Have a Design System, Now What?
morganepeng
51
7.5k
Unsuck your backbone
ammeep
670
57k
Side Projects
sachag
452
42k
A Philosophy of Restraint
colly
203
16k
Bash Introduction
62gerente
611
210k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Music & Morning Musume
bryan
46
6.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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