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
570
次世代ヘッドレス開発室が提供するヘッドレスEC
次世代ヘッドレス開発室のチャレンジであるヘッドレスECについてのスライドです
texdeath
October 16, 2021
Tweet
Share
More Decks by texdeath
See All by texdeath
クライアントワークと管理画面の話
texdeath
0
80
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.4k
おさらいVue Composition API
texdeath
0
340
React使いがVueと仲良くなるためにやったこと
texdeath
0
230
Optional Chainingについて
texdeath
3
140
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
97
Container Componentは必要なのか
texdeath
4
590
Kotlin/JSでReactアプリを作ってみた
texdeath
1
800
Other Decks in Marketing & SEO
See All in Marketing & SEO
Auditorías SEO en 2023 - Aprende Cómo Alcanzar el Éxito #ViñaSEO
aleyda
1
450
Uncovering 3 Sneaky Technical SEO Issues That Can Harm Your Rankings
azarchick
0
470
Short term wins to build compounding SEO ROI
kevingibbons
0
130
WhitePress - SEO Vibes On Tour - The importance of Localization for International SEO
sarafernandezseo
1
370
VALUE FIRST 2024-2025 RECRUIT
hrdivision
PRO
3
260
Scale a global SEO strategy with limited resources (and buy-in!)
sukhsingh
2
580
Keys to SEO Success in 2024 - #IGBAffiliate
aleyda
2
840
'Money page' link building success: don't skip these three critical elements
citationlabs
0
140
How Specify launched on Product Hunt
fmerian
PRO
1
800
How JAWS UG Nagoya thrives ~ Secret tips tips of monthly meetups since 2010
katzueno
2
220
Food for (AI) Thought: Peak Ace Dinner Series - SMX Munich 2024
bastiangrimm
PRO
0
510
Everything Google Lied to Us About
ipullrank
4
4k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
How to name files
jennybc
64
93k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
16
1.4k
GraphQLとの向き合い方2022年版
quramy
31
12k
For a Future-Friendly Web
brad_frost
171
8.9k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Practical Orchestrator
shlominoach
181
9.7k
Docker and Python
trallard
33
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Code Review Best Practice
trishagee
54
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
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