Share
Embed

Slide 1

Slide 1 text

AIで超えろ！Flutterエンジニアの枠 株式会社ZOZO ブランドソリューション開発本部 新規事業部 フロントエンドブロック 大野 純平 Copyright © ZOZO, Inc. 1

Slide 2

Slide 2 text

© ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 新規事業部 フロントエンドブロック 大野 純平 2025年　株式会社ZOZO新卒入社 FlutterでのZOZOマッチアプリの開発を担当 X: junjun_1345 Github: junjun-1345 2

Slide 3

Slide 3 text

© ZOZO, Inc. 3 https://zozomatch.jp/ 3 ● 2025年6月30日提供開始 ● ファッションジャンル診断などの情報をもとに、ZOZO独自の AIが「好みの雰囲気」のお相手を紹介 ● 好きなお相手のコーディネートや、よく着るブランドを紹介で きるプロフィールで、ファッションを通じた個性やライフスタ イルをアピールしやすい設計 ● 公的証明書を利用した本人確認や24時間365日の監視体制

Slide 4

Slide 4 text

© ZOZO, Inc. 4 アジェンダ 1. 困りごと — デザインレビューのキャッチボール問題 2. 具体ケース — アニメーション調整で1週間 3. 解決アイデア — デザイナーがAI Coding Agentで直接修正 4. Devinへの実際の指示 5. デザイナーの操作フロー 6. 検証：確認方法の選定 7. 検証：スコープと環境構築 8. 効果 9. 今後の課題

Slide 5

Slide 5 text

© ZOZO, Inc. 5 デザインレビューのキャッチボール問題 非同期のやり取りのたびに約1営業日のロス。最小1往復でもマージまで2営業日。

Slide 6

Slide 6 text

© ZOZO, Inc. 6 デザインレビューに時間がかかる要因 何が起きたか 結果 ● アニメーション動きの緩急・イージングの 微修正 ● ピクセルパーフェクトな実装要求 ● 動画やスクショでは伝わらず実機確認が必須 ○ ビルド〜配布までは最短で30min ● 非同期のやり取りが5往復 ● 合計約1週間 ● 最終的にMTGを組んでリアルタイムで確認 して完了 本質：軽い修正で優先度も高くないのに、エンジニアの手が取られる REAL CASE

Slide 7

Slide 7 text

© ZOZO, Inc. 7 デザイナーがAI Coding Agentで直接修正 背景 結果 ● 弊社ではデザイナーもDevinとCodexが利用 可能 ● 自部署でAI活用を推進する方針があった 待ち時間の削減 — 指摘から修正・確認まで同一人物で完結 エンジニアはコードレビューに集中 IDEA デザイナー自身がAIでコード修正すればキャッチ ボールが不要になる

Slide 8

Slide 8 text

© ZOZO, Inc. 8 デザイナーからDevinへの実際の指示 HOW エンジニアが普段書くチケットの粒度と同じ。特別なスキルは不要 Jiraリンク チケット番号の取得 UI番号 修正画面の特定 修正箇所 どこを直すか 修正内容 どう直すか @Devin 【UI-1.0.0 吹き出しの幅修正】 自己紹介の吹き出しが横幅が中の文字数によって可変になっているので、 画面の横幅に左右20pxマージン固定で中の吹き出しの横幅を可変にしていただきたいです。 プロンプト例 プロンプトに含める項⽬

Slide 9

Slide 9 text

© ZOZO, Inc. 9 デザイナーの操作フロー 修正した内容の例 ポイント ● paddingの調整（数px単位） ● タップ領域の拡大 ● 吹き出しの横幅を固定マージンに変更 ● デザイナーがコードを書くわけではない — Devinが書く ● デザイナーは「確認と判断」に集中 ● エンジニアはコードに集中 HOW

Slide 10

Slide 10 text

© ZOZO, Inc. 10 Q1 出来上がったコードをどう確認するか ポイント VALIDATION ⽅法 課題 判定 ビルド配布を⼩さく 配布⾃体に時間がかかる ⾒送り CI上でスクショ OIDC連携で複雑化 ⾒送り WidgetCatalog モックデータで肥⼤化 ⾒送り デザイナーの端末で実⾏ ハンズオンなら⼀緒にサクサク 採⽤ 判断基準：PoC中なのでスピード優先かつ、ストレスフリーで

Slide 11

Slide 11 text

© ZOZO, Inc. Q2 スコープと⾮エンジニアへ向けての環境構築と運⽤ VALIDATION 3段階すべて試してLv.1に決定 Lv.3 1画面作成 大幅修正が必要 Lv.2 1コンポーネント作成 数回で完了 Lv.1 1コンポーネント修正 一発OK 実装スコープ　：　AIの精度 環境構築 ● 環境構築の際の操作は説明なしで指示のみ ○ 不要なインプットを避けるため ● git pull / switch は概念から説明 ○ 運用でよく使うため ● 運用手順をドキュメント化し自走可能に できるだけ敷居を低く

Slide 12

Slide 12 text

© ZOZO, Inc. 効果 RESULT Before（⾮同期の待ち込み） 2営業⽇ → After 30min Engineer ‧実装↔レビューのサイクル負担が軽  くなった ‧コードレビューに集中できるように  なった Designer ‧ドキュメントがあれば⾃⾛できる ‧実機確認するまでのリードタイムが0に

Slide 13

Slide 13 text

© ZOZO, Inc. 今後の課題 NEXT Git操作の⾃動化 どこまで⾃動化できるか 実装コストに⾒合っているか 実装スコープの拡⼤ Lv.1 → Lv.2 → Lv.3 へ段階的にチャレンジ Flutter特有のエラー対処 ⾮エンジニアが⾃⼒で解決できる仕組み →カスタムコマンド、docsの整備 双⽅向の職能越境 エンジニアもFigmaを触り、チーム全体で 職能の範囲を越える

Slide 14

Slide 14 text

No content