Tweet
Tweet

Slide 1

Slide 1 text

WEAR Webリプレイスの進め方 株式会社ZOZO
 ブランドソリューション開発本部 WEARフロントエンド部 Webブロック
 岩崎 拳志 Copyright © ZOZO, Inc. 1

Slide 2

Slide 2 text

© ZOZO, Inc. 2 目次 ● 自己紹介 ● WEARについて ● リプレイス状況について ● リプレイスの進め方 ● リプレイス期間中やっててよかったこと ● おわりに

Slide 3

Slide 3 text

© ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 WEARフロントエンド部 Webブロック 岩崎 拳志 (いもけん) 2024年新卒でZOZOに入社 (2023/06~内定者アルバイト) WEARのWebフロントエンド開発に従事 x: @iimokeenpi 3

Slide 4

Slide 4 text

© ZOZO, Inc. https://wear.jp/ 4 ● あなたの「似合う」が探せるファッションコーディネートアプリ ● 1,900万ダウンロード突破、コーディネート投稿総数は1,400万 件以上（2025年6月末時点） ● コーディネートや最新トレンド、メイクなど豊富なファッション 情報をチェック ● AIを活用したファッションジャンル診断や、フルメイクをARで試 せる「WEARお試しメイク」を提供 ● コーディネート着用アイテムを公式サイトで購入可能 ● WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレン ト・デザイナー・インフルエンサーといった各界著名人も参加

Slide 5

Slide 5 text

© ZOZO, Inc. 5 リプレイス状況について

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

© ZOZO, Inc. 7 リプレイスの進め方

Slide 8

Slide 8 text

© ZOZO, Inc. 8 リプレイスの進め方 基本的に以下のフロー ● 仕様検討(既存機能洗い出し・必要機能取捨選択・追加機能) ● デザイン作成(新規仕様やレスポンシブに対応したデザインの作成) ● バックエンド実装 ● フロントエンド実装 ● デザインレビュー ● 仕様書作成 ● QA ● リリース

Slide 9

Slide 9 text

© ZOZO, Inc. 9 リプレイス期間中 やっててよかったこと

Slide 10

Slide 10 text

© ZOZO, Inc. 10 定期的なLighthouseの数値確認 ● Lighthouse CIとLooker Studioを 組み合わせてスコアを可視化 ● 毎週月曜日の朝会にてチームで確認 ● 問題の早期発見 ● モチベーション向上

Slide 11

Slide 11 text

© ZOZO, Inc. 11 依存関係の最新化 ● 毎週月曜日に作成されるRenovateによる依存関係更新PRをランダムでアサイン ● アサインされた人は木曜日までに確認して更新内容を取り込む ● 更新内容はリリース前にチーム全体にも共有 ● ライブラリの新規機能などを開発に取り込める ● セキュリティリスクの低減

Slide 12

Slide 12 text

© ZOZO, Inc. 12 アラート・パフォーマンスの確認 ● 毎週火曜日の朝会にてSentryとDatadogを用いて、アラートやパフォーマンス を確認 ● 各サービスでの確認事項 ○ Sentry: クライアントで発生したエラー ○ Datadog: サーバーエラー/レイテンシ/CPU・メモリの使用率/ Core Web Vitalsのスコア推移/不正アクセス ● 問題の早期発見

Slide 13

Slide 13 text

© ZOZO, Inc. 13 おわりに 自分がジョインしてから、リプレイス完了まで特別大きいバグや障害を起こすこ となく開発できた 様々な要因はあるものの、そのうち一つとして開発環境や進め方は整っていたと 感じる 今後もリプレイスする機会少なくないと思うので、今回の経験は活かしていきた い

Slide 14

Slide 14 text

No content