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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
texdeath
October 16, 2021
Marketing & SEO
0
670
次世代ヘッドレス開発室が提供するヘッドレス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
360
クライアントワークと管理画面の話
texdeath
0
270
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.9k
おさらいVue Composition API
texdeath
0
480
React使いがVueと仲良くなるためにやったこと
texdeath
0
300
Optional Chainingについて
texdeath
3
200
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
660
Kotlin/JSでReactアプリを作ってみた
texdeath
1
940
Other Decks in Marketing & SEO
See All in Marketing & SEO
The Mindset for Success: Future Career Progression
greggifford
PRO
0
240
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
280
The Practical Guide to Content that Dominates AI Search
samanyougarg
1
330
How to Build an AI Search Optimization Roadmap
aleyda
1
150
GEO? AEO? LLMO? What's With All This AI Stuff? - Patrick Stox Ahrefs Evolve 2025
patrickstox
2
5.1k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
130
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
220
AI Search: Where are we now and how to succeed - #SEOsummit Brasil
aleyda
0
450
Personas: nuevas oportunidades de encontrabilidad
fernandomacia
0
130
Unlocking the Power of Google Discover: Practical Workshop - Search 'n Stuff 2025
clarasoteras
0
110
The SEO Collaboration Effect
kristinabergwall1
0
360
Automating content optimisation with the help of semantic value
frankvandijk
2
990
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
160
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
What does AI have to do with Human Rights?
axbom
PRO
0
2k
How to Talk to Developers About Accessibility
jct
2
140
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
750
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
Designing for Timeless Needs
cassininazir
0
130
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
350
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