ZOZOマッチのアーキテクチャと技術構成

2025/09/04 にオンラインで開催された「ナレッジナイト｜Flutter×20代エースLT&特別トーク・セッション」で発表した登壇資料です。

株式会社ZOZO
IT統括本部 技術戦略部 CTOブロック
テックリード
堀江 亮介

#ナレッジナイト

Transcript

1. ZOZOマッチの アーキテクチャと技術構成 2025年9月4日 ナレッジナイト｜Flutter×20代エースによるLT 株式会社ZOZO
 IT統括本部 技術戦略部 CTOブロック
 テックリード
 堀江 亮介
 
 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 2 ZOZOについて
3. © ZOZO, Inc. https://zozo.jp/ 3 • ファッションEC • 1,600以上のショップ、9,000以上のブランドの取り扱い • 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新着 商品を掲載（2025年6月末時点） • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
4. © ZOZO, Inc. https://wear.jp/ 4 • あなたの「似合う」が探せるファッションコーディネートアプリ • 1,900万ダウンロード突破、コーディネート投稿総数は1,400万 件以上（2025年6月末時点） • コーディネートや最新トレンド、メイクなど豊富なファッション 情報をチェック • AIを活用したファッションジャンル診断や、フルメイクをARで試 せる「WEARお試しメイク」を提供 • コーディネート着用アイテムを公式サイトで購入可能 • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレン ト・デザイナー・インフルエンサーといった各界著名人も参加
5. © ZOZO, Inc. 5 https://2025.flutterkaigi.jp/
6. © ZOZO, Inc. 6 自己紹介
7. © ZOZO, Inc. 株式会社ZOZO IT統括本部 技術戦略部 CTOブロック テックリード 堀江 亮介 2018年 M&Aに伴いZOZOテクノロジーズに入社 ZOZOグループの組織再編に伴い転籍し現職 全社横断での課題解決と採用および技術広報業務を担当 7
8. © ZOZO, Inc. 8 これまでのキャリア
9. © ZOZO, Inc. 9 今どんな仕事をしている？ • CTOブロック所属 • 全社横断系の仕事とプロダクト開発 • 開発だけでなく何でもやる
10. © ZOZO, Inc. 10 今どんな仕事をしている？ • AI導入推進 • 技術広報 • 社内勉強会企画 ◦ Miro, Figma, Claude Code etc. • 新卒・中途採用 • 社外との関係構築 • 開発ガイドライン作成 ・ ・ ・ https://corp.zozo.com/news/20250729-007217/
11. © ZOZO, Inc. 11 今どんな仕事をしている？ https://zozomatch.jp/
12. © ZOZO, Inc. 12 ZOZOマッチ • マッチングアプリ • 新規事業 • ZOZOで最初のFlutter製アプリ • 開発チーム立ち上げのタイミングで手を挙げて参加🙋 https://zozomatch.jp/
13. © ZOZO, Inc. 13 Flutter採用の背景
14. © ZOZO, Inc. 14 Flutter採用の背景 • ビジネス的背景 ◦ 開発期間の短縮 ◦ iOS/Android同時展開が必須 ◦ クロスプラットフォーム開発体制の構築・ノウハウ蓄積 • チーム的背景 ◦ Androidエンジニア 3名がアサイン ▪ 1名は個人開発でFlutterの利用経験あり ◦ 全員が自走してアプリ開発可能 ◦ 外部パートナー支援による高品質な内製Flutterアプリ開発チームの即時立ち上げ
15. © ZOZO, Inc. 15 • 技術的背景 ◦ 独自レンダリングで統一感のあるUI ▪ デザイン仕様を忠実に再現しやすい ◦ AndroidエンジニアはFlutterを学びやすい ▪ UI構築: Jetpack Composeの考え方に近い宣言的UI ▪ Riverpod: 依存解決(Hilt的)＋状態管理(ViewModel+StateFlow/SharedFlow的) ▪ 開発環境：Android Studio / VS Codeで違和感なく利用可能 ▪ 非同期処理：coroutines ⇔ async/await で概念が近い ▪ 言語：DartはKotlin/Java経験者にとって習得が容易 Flutter採用の背景
16. © ZOZO, Inc. 16 ZOZOマッチアプリの開発体制
17. © ZOZO, Inc. 17 • ZOZOエンジニア 3名(現在は4名) ＋ 外部パートナー • 時間経過でZOZO側メンバーのFlutterへの習熟度が向上 • 開発のパフォーマンスとしては良い数値が出ていた ZOZOマッチアプリの開発体制 https://jp.findy-team.io
18. © ZOZO, Inc. 18 ZOZOマッチのアーキテクチャ
19. © ZOZO, Inc. 19 • マルチパッケージ • UI/Domain/Dataの3層構成 • UI層は機能単位でfeature packageを作成 • 標準アーキテクチャとしてドキュメント化 • GitHub Repositoryで管理 ZOZOマッチのアーキテクチャ
20. © ZOZO, Inc. 20 ZOZOマッチのアーキテクチャ • 状態管理 ◦ Widget内に閉じる状態(Ephemeral state) ▪ flutter_hooks ◦ 画面単位/複数画面単位/グローバルな状態(App state) ▪ Riverpod
21. © ZOZO, Inc. 21 ZOZOマッチのアーキテクチャ • 状態管理 ◦ 画面の描画 ▪ ScreenからStateHolderを購読 ▪ StateHolder • FutureProvider: 状態の取得 • AsyncNotifierProvider:状態の取得・更新 ▪ feature packageに閉じない場合 • StateHolderをDomain層に配置
22. © ZOZO, Inc. 22 ZOZOマッチのアーキテクチャ • Domain層 ◦ Repository ▪ Screen / StateHolderから利用 ▪ Data層を介したデータ操作 ▪ APIのモデルとアプリ内のモデルを分離 • 変換処理を実装
23. © ZOZO, Inc. 23 ZOZOマッチのアーキテクチャ • Domain層 ◦ Repository ▪ Screen / StateHolderから利用 ▪ Data層を介したデータ操作 ▪ APIのモデルとアプリ内のモデルを分離 • 変換処理を実装
24. © ZOZO, Inc. 24 ZOZOマッチのアーキテクチャ • Domain層 ◦ Repository ▪ Screen / StateHolderから利用 ▪ Data層を介したデータ操作 ▪ APIのモデルとアプリ内のモデルを分離 • 変換処理を実装
25. © ZOZO, Inc. 25 ZOZOマッチのアーキテクチャ • Domain層 ◦ Repository ▪ Screen / StateHolderから利用 ▪ Data層を介したデータ操作 ▪ APIのモデルとアプリ内のモデルを分離 ◦ Service ▪ Screen / StateHolderから利用 ▪ Repositoryを参照 ▪ アプリケーションロジックを実装 ▪ 複雑化したロジックの集約・再利用 • 認証、課金等
26. © ZOZO, Inc. 26 ZOZOマッチのアーキテクチャ • Data層 ◦ データのCRUD操作を実行 ▪ API通信 ▪ ローカルストレージ
27. © ZOZO, Inc. 27 ZOZOマッチの技術構成
28. © ZOZO, Inc. 28 ZOZOマッチの技術構成 • 主要な使用ライブラリ ◦ ナビゲーション: go_router ◦ 状態管理: flutter_hooks, riverpod ◦ API通信: dio, graphql_flutter ◦ データストア: flutter_secure_storage, shared_preferences ◦ 認証 / 課金: flutter_appauth / in_app_purchase ◦ テスト / 品質管理: mocktail, test, alchemist / custom_lint
29. © ZOZO, Inc. 29 ZOZOマッチの技術構成 • デザインシステム ◦ デザイントークン ◦ コンポーネント
30. © ZOZO, Inc. 30 ZOZOマッチの技術構成 • デザインシステム ◦ デザイントークン ▪ FigmaからDartコードに変換 ◦ コンポーネント
31. © ZOZO, Inc. 31 ZOZOマッチの技術構成 • デザインシステム ◦ デザイントークン ▪ FigmaからDartコードに変換 ◦ コンポーネント ▪ 汎用コンポーネントとして実装 ▪ Widgetbookでカタログ表示
32. © ZOZO, Inc. 32 ZOZOマッチの技術構成 • Data層の自動生成 ▪ APIクライアントとモデルをOpen API Specから自動生成 ▪ Specに変更が発生すると自動でPull Requestを作成 ▪ APIの実装と仕様の一貫性を維持
33. © ZOZO, Inc. 33 ZOZOマッチの技術構成 • 開発環境 ◦ 開発効率化 / 環境構築 ▪ melos, mise ◦ CI/CD ▪ GitHub Actions, Xcode Cloud ▪ TestFlight / DeployGate ◦ エディタ / AI活用 ▪ Cursor, Claude Code, Gemini CLI, GitHub Copilot • 近日中利用開始: Devin / GitHub Copilot coding agent ▪ コードレビュー • Claude Code Actions, GitHub Copilot code review
34. © ZOZO, Inc. 34 まとめ
35. © ZOZO, Inc. 35 まとめ • Flutterを採用し新規事業「ZOZOマッチ」をリリースした • ZOZOとしてFlutterでの開発体制を構築した • 今後は開発プロセス全体でのAI活用、ZOZOマッチの成長に注力していきたい