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
600
次世代ヘッドレス開発室が提供するヘッドレス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
250
クライアントワークと管理画面の話
texdeath
0
150
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
2
7.6k
おさらいVue Composition API
texdeath
0
400
React使いがVueと仲良くなるためにやったこと
texdeath
0
260
Optional Chainingについて
texdeath
3
150
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
100
Container Componentは必要なのか
texdeath
4
590
Kotlin/JSでReactアプリを作ってみた
texdeath
1
870
Other Decks in Marketing & SEO
See All in Marketing & SEO
BrightonSEO - When it's right to send Google the WRONG data
inders
1
110
Automating SEO with AI-Driven App Scripts
pkondylis
0
200
Making Your Site Bloom: From 0 to 50K Organic Visits Monthly in One Year – The Plan, the Tactics, and the GPTs by Katarina Dahlin
katarinadahlin
PRO
0
530
SEO + SEA | SEO Benelux juni 2024 | SEO Spot
seospot
0
310
Een kijkje in de keuken van een SEO specialist @ SEO Benelux - Erik Hettinga
mrrivers
0
130
Crawling, Indexation and Logfiles
andorpalau
1
230
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
520
Humanising ChatGPT - brightonSEO April 2024
jonjorowlands
2
380
Stop Headaches With Merged Data Content Scoring
portentint
PRO
0
220
BrightonSEO 2024 | LinkedIn SEO - How to blend social and search optimisation
telitsa
0
130
Rachel Anderson - Gaining Velocity: Building SEO into a Continuous Development Process
techseoconnect
PRO
0
150
Turing Fest 2023: The Rise of AI
peakace
PRO
0
430
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Agile that works and the tools we love
rasmusluckow
327
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Site-Speed That Sticks
csswizardry
0
28
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
GitHub's CSS Performance
jonrohan
1030
460k
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