← Back to work
EC · ヘッドレス · BigCommerce
XPEL
BigCommerce で B2B と DTC を一本化
This case study is written in Japanese. Happy to walk through it in English — just ask.
Visit the live siteLanding Pages · CMS · E-commerceWeb Application DevelopmentFull-Stack DevelopmentUI / UX DesignCustom Development
Overview
自動車・船舶・住宅向けプロテクションフィルムブランドのデジタル体験を、B2B と DTC の両方に耐える形で再構築した案件です。
Contentstack（CMS）× BigCommerce（DTC）× Bynder（DAM）のヘッドレス構成で、コンテンツ運用とコマースを分離しました。
Challenge
施工店・ディーラー向け情報と一般消費者向け購入導線が同じナビに混在し、双方の離脱が増えていました。
施工店ロケーターが静的リストで、国際向けコンテンツ管理やモバイル最適の DTC マーチャンダイジングも不足していました。
Approach
オーディエンス別ジャーニーにナビを再設計。BigCommerce の商品一覧と CMS コンポーネントを接続。
社内 DAP API と Google Maps で動的な施工店ロケーターを実装。構造化データで SEO も強化。
再利用可能なデザインシステムと Bynder 連携で、マーケが開発なしにページを量産できる状態にしました。
Outcome
B2B リードと DTC 購入の摩擦を減らし、ブランド刷新後の体験を一本化。
国際コンテンツとアセット運用をチームが自走できる基盤を残せました。
My role
- ヘッドレス構成の設計・実装
- B2B / DTC ナビと LP
- Maps ロケーター API 連携
- デザインシステム / コンポーネント
Process
- オーディエンス調査と IA
- コンポーザブルなアーキテクチャ設計
- 実装と SEO / パフォーマンス調整
- 運用引き継ぎ
Highlights
- B2B / DTC ナビ分離
- Google Maps 施工店ロケーター
- コンポーザブルなデザインシステム
Tools & technologies
- BigCommerce
- Contentstack
- Bynder
- React / Next.js
- TypeScript
- Google Maps API
- GitHub
- REST / GraphQL
