EC ストアフロント刷新

ファッション EC の商品一覧・詳細 UI を刷新。パフォーマンスと回遊性の改善が目的でした。

Client
ダミーアパレル株式会社
Role
Frontend Developer
Scope
  • 商品一覧フィルタ UI の実装
  • 画像 lazy load・CLS 対策
  • デザインシステム準拠のコンポーネント化
Lang
TypeScript, React, Next.js, Tailwind CSS
Desktop

PC キャプチャ

/images/works/ec-storefront/pc.webp

Mobile

SP キャプチャ

/images/works/ec-storefront/sp.webp

概要

レガシーな jQuery 実装からモダンなスタックへ段階的に移行する中で、ストアフロント部分を先行リプレイスしました。

ポイント

  • Core Web Vitals の改善(LCP / CLS)
  • SP ファーストの商品詳細レイアウト
  • Storybook による UI レビュー体制
← Works