Tweet
Tweet

Slide 1

Slide 1 text

ZOZOマッチの アーキテクチャと技術構成 2025年9月4日 ナレッジナイト｜Flutter×20代エースによるLT 株式会社ZOZO
 IT統括本部 技術戦略部 CTOブロック
 テックリード
 堀江 亮介
 
 Copyright © ZOZO, Inc. 1

Slide 2

Slide 2 text

© ZOZO, Inc. 2 ZOZOについて

Slide 3

Slide 3 text

© ZOZO, Inc. https://zozo.jp/ 3 ● ファッションEC ● 1,600以上のショップ、9,000以上のブランドの取り扱い ● 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新着 商品を掲載（2025年6月末時点） ● ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 ● 即日配送サービス ● ギフトラッピングサービス ● ツケ払い など

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 https://2025.flutterkaigi.jp/

Slide 6

Slide 6 text

© ZOZO, Inc. 6 自己紹介

Slide 7

Slide 7 text

© ZOZO, Inc. 株式会社ZOZO IT統括本部 技術戦略部 CTOブロック テックリード 堀江 亮介 2018年 M&Aに伴いZOZOテクノロジーズに入社 ZOZOグループの組織再編に伴い転籍し現職 全社横断での課題解決と採用および技術広報業務を担当 7

Slide 8

Slide 8 text

© ZOZO, Inc. 8 これまでのキャリア

Slide 9

Slide 9 text

© ZOZO, Inc. 9 今どんな仕事をしている？ ● CTOブロック所属 ● 全社横断系の仕事とプロダクト開発 ● 開発だけでなく何でもやる

Slide 10

Slide 10 text

© ZOZO, Inc. 10 今どんな仕事をしている？ ● AI導入推進 ● 技術広報 ● 社内勉強会企画 ○ Miro, Figma, Claude Code etc. ● 新卒・中途採用 ● 社外との関係構築 ● 開発ガイドライン作成 ・ ・ ・ https://corp.zozo.com/news/20250729-007217/

Slide 11

Slide 11 text

© ZOZO, Inc. 11 今どんな仕事をしている？ https://zozomatch.jp/

Slide 12

Slide 12 text

© ZOZO, Inc. 12 ZOZOマッチ ● マッチングアプリ ● 新規事業 ● ZOZOで最初のFlutter製アプリ ● 開発チーム立ち上げのタイミングで手を挙げて参加🙋 https://zozomatch.jp/

Slide 13

Slide 13 text

© ZOZO, Inc. 13 Flutter採用の背景

Slide 14

Slide 14 text

© ZOZO, Inc. 14 Flutter採用の背景 ● ビジネス的背景 ○ 開発期間の短縮 ○ iOS/Android同時展開が必須 ○ クロスプラットフォーム開発体制の構築・ノウハウ蓄積 ● チーム的背景 ○ Androidエンジニア 3名がアサイン ■ 1名は個人開発でFlutterの利用経験あり ○ 全員が自走してアプリ開発可能 ○ 外部パートナー支援による高品質な内製Flutterアプリ開発チームの即時立ち上げ

Slide 15

Slide 15 text

© 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採用の背景

Slide 16

Slide 16 text

© ZOZO, Inc. 16 ZOZOマッチアプリの開発体制

Slide 17

Slide 17 text

© ZOZO, Inc. 17 ● ZOZOエンジニア 3名(現在は4名) ＋ 外部パートナー ● 時間経過でZOZO側メンバーのFlutterへの習熟度が向上 ● 開発のパフォーマンスとしては良い数値が出ていた ZOZOマッチアプリの開発体制 https://jp.findy-team.io

Slide 18

Slide 18 text

© ZOZO, Inc. 18 ZOZOマッチのアーキテクチャ

Slide 19

Slide 19 text

© ZOZO, Inc. 19 ● マルチパッケージ ● UI/Domain/Dataの3層構成 ● UI層は機能単位でfeature packageを作成 ● 標準アーキテクチャとしてドキュメント化 ● GitHub Repositoryで管理 ZOZOマッチのアーキテクチャ

Slide 20

Slide 20 text

© ZOZO, Inc. 20 ZOZOマッチのアーキテクチャ ● 状態管理 ○ Widget内に閉じる状態(Ephemeral state) ■ flutter_hooks ○ 画面単位/複数画面単位/グローバルな状態(App state) ■ Riverpod

Slide 21

Slide 21 text

© ZOZO, Inc. 21 ZOZOマッチのアーキテクチャ ● 状態管理 ○ 画面の描画 ■ ScreenからStateHolderを購読 ■ StateHolder ● FutureProvider: 状態の取得 ● AsyncNotifierProvider:状態の取得・更新 ■ feature packageに閉じない場合 ● StateHolderをDomain層に配置

Slide 22

Slide 22 text

© ZOZO, Inc. 22 ZOZOマッチのアーキテクチャ ● Domain層 ○ Repository ■ Screen / StateHolderから利用 ■ Data層を介したデータ操作 ■ APIのモデルとアプリ内のモデルを分離 ● 変換処理を実装

Slide 23

Slide 23 text

© ZOZO, Inc. 23 ZOZOマッチのアーキテクチャ ● Domain層 ○ Repository ■ Screen / StateHolderから利用 ■ Data層を介したデータ操作 ■ APIのモデルとアプリ内のモデルを分離 ● 変換処理を実装

Slide 24

Slide 24 text

© ZOZO, Inc. 24 ZOZOマッチのアーキテクチャ ● Domain層 ○ Repository ■ Screen / StateHolderから利用 ■ Data層を介したデータ操作 ■ APIのモデルとアプリ内のモデルを分離 ● 変換処理を実装

Slide 25

Slide 25 text

© ZOZO, Inc. 25 ZOZOマッチのアーキテクチャ ● Domain層 ○ Repository ■ Screen / StateHolderから利用 ■ Data層を介したデータ操作 ■ APIのモデルとアプリ内のモデルを分離 ○ Service ■ Screen / StateHolderから利用 ■ Repositoryを参照 ■ アプリケーションロジックを実装 ■ 複雑化したロジックの集約・再利用 ● 認証、課金等

Slide 26

Slide 26 text

© ZOZO, Inc. 26 ZOZOマッチのアーキテクチャ ● Data層 ○ データのCRUD操作を実行 ■ API通信 ■ ローカルストレージ

Slide 27

Slide 27 text

© ZOZO, Inc. 27 ZOZOマッチの技術構成

Slide 28

Slide 28 text

© 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

Slide 29

Slide 29 text

© ZOZO, Inc. 29 ZOZOマッチの技術構成 ● デザインシステム ○ デザイントークン ○ コンポーネント

Slide 30

Slide 30 text

© ZOZO, Inc. 30 ZOZOマッチの技術構成 ● デザインシステム ○ デザイントークン ■ FigmaからDartコードに変換 ○ コンポーネント

Slide 31

Slide 31 text

© ZOZO, Inc. 31 ZOZOマッチの技術構成 ● デザインシステム ○ デザイントークン ■ FigmaからDartコードに変換 ○ コンポーネント ■ 汎用コンポーネントとして実装 ■ Widgetbookでカタログ表示

Slide 32

Slide 32 text

© ZOZO, Inc. 32 ZOZOマッチの技術構成 ● Data層の自動生成 ■ APIクライアントとモデルをOpen API Specから自動生成 ■ Specに変更が発生すると自動でPull Requestを作成 ■ APIの実装と仕様の一貫性を維持

Slide 33

Slide 33 text

© 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

Slide 34

Slide 34 text

© ZOZO, Inc. 34 まとめ

Slide 35

Slide 35 text

© ZOZO, Inc. 35 まとめ ● Flutterを採用し新規事業「ZOZOマッチ」をリリースした ● ZOZOとしてFlutterでの開発体制を構築した ● 今後は開発プロセス全体でのAI活用、ZOZOマッチの成長に注力していきたい

Slide 36

Slide 36 text

No content