WEAR Webリプレイスの進め方

2025/08/26 にクローズドで開催された「ちょっと株式会社 × 株式会社ZOZO 合同勉強会」で発表した登壇資料です。

株式会社ZOZO
ブランドソリューション開発本部 WEARフロントエンド部
Webブロック
岩崎 拳志

Transcript

1. WEAR Webリプレイスの進め方 株式会社ZOZO
 ブランドソリューション開発本部 WEARフロントエンド部 Webブロック
 岩崎 拳志 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 2 目次 • 自己紹介 • WEARについて • リプレイス状況について • リプレイスの進め方 • リプレイス期間中やっててよかったこと • おわりに
3. © ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 WEARフロントエンド部 Webブロック 岩崎 拳志 (いもけん) 2024年新卒でZOZOに入社 (2023/06~内定者アルバイト) WEARのWebフロントエンド開発に従事 x: @iimokeenpi 3
4. © ZOZO, Inc. https://wear.jp/ 4 • あなたの「似合う」が探せるファッションコーディネートアプリ • 1,900万ダウンロード突破、コーディネート投稿総数は1,400万 件以上（2025年6月末時点） • コーディネートや最新トレンド、メイクなど豊富なファッション 情報をチェック • AIを活用したファッションジャンル診断や、フルメイクをARで試 せる「WEARお試しメイク」を提供 • コーディネート着用アイテムを公式サイトで購入可能 • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレン ト・デザイナー・インフルエンサーといった各界著名人も参加
5. © ZOZO, Inc. 5 リプレイス状況について
7. © ZOZO, Inc. 7 リプレイスの進め方
8. © ZOZO, Inc. 8 リプレイスの進め方 基本的に以下のフロー • 仕様検討(既存機能洗い出し・必要機能取捨選択・追加機能) • デザイン作成(新規仕様やレスポンシブに対応したデザインの作成) • バックエンド実装 • フロントエンド実装 • デザインレビュー • 仕様書作成 • QA • リリース
9. © ZOZO, Inc. 9 リプレイス期間中 やっててよかったこと
10. © ZOZO, Inc. 10 定期的なLighthouseの数値確認 • Lighthouse CIとLooker Studioを 組み合わせてスコアを可視化 • 毎週月曜日の朝会にてチームで確認 • 問題の早期発見 • モチベーション向上
11. © ZOZO, Inc. 11 依存関係の最新化 • 毎週月曜日に作成されるRenovateによる依存関係更新PRをランダムでアサイン • アサインされた人は木曜日までに確認して更新内容を取り込む • 更新内容はリリース前にチーム全体にも共有 • ライブラリの新規機能などを開発に取り込める • セキュリティリスクの低減
12. © ZOZO, Inc. 12 アラート・パフォーマンスの確認 • 毎週火曜日の朝会にてSentryとDatadogを用いて、アラートやパフォーマンス を確認 • 各サービスでの確認事項 ◦ Sentry: クライアントで発生したエラー ◦ Datadog: サーバーエラー/レイテンシ/CPU・メモリの使用率/ Core Web Vitalsのスコア推移/不正アクセス • 問題の早期発見
13. © ZOZO, Inc. 13 おわりに 自分がジョインしてから、リプレイス完了まで特別大きいバグや障害を起こすこ となく開発できた 様々な要因はあるものの、そのうち一つとして開発環境や進め方は整っていたと 感じる 今後もリプレイスする機会少なくないと思うので、今回の経験は活かしていきた い