Tweet
Tweet

Slide 1

Slide 1 text

Miroを使った
 開発効率向上のための取り組み
 TechTalk iOS＆AndroidエンジニアによるLT 〜 開発効率向上のための取り組み 〜
 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOTOWNアプリ部 Androidブロック
 テックリード
 堀江 亮介 Copyright © ZOZO, Inc.

Slide 2

Slide 2 text

© ZOZO, Inc. 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOTOWNアプリ部
 Androidブロック テックリード 堀江 亮介
 ● 自動化とビールが好き ● @Horie1024 
 2

Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

© ZOZO, Inc. https://wear.jp/
 4 ● ファッションコーディネートアプリ
 ● 1,500万ダウンロード突破、コーディネート投稿総数は1,000万件以上 （2021年6月末時点）
 ● ピックアップタグから最新のトレンドをチェック
 ● コーディネート着用アイテムをブランド公式サイトで購入可能
 ● WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレント・デザ イナー・インフルエンサーといった各界著名人も参加


Slide 5

Slide 5 text

© ZOZO, Inc. 5 2021年3月期 決算説明会補足資料 - 株式会社ZOZO, https://d31ex0fa3i203z.cloudfront.net/assets/ja/ir/pdf/webup_fy20204q_j.pdf

Slide 6

Slide 6 text

© ZOZO, Inc. Miro？
 6

Slide 7

Slide 7 text

© ZOZO, Inc. 7 Miro
 ● オンラインホワイトボードサービス
 ● 複数人で同時に作業が可能
 ● 自由度が高い
 https://miro.com/how-development-teams-use-miro/

Slide 8

Slide 8 text

© ZOZO, Inc. 8 ZOZOTOWNでのMiroの利用
 ● 多くの場面で利用
 ○ カジュアル面談
 ○ 仕様の検討と共有
 ○ 振り返り
 ○ ...


Slide 9

Slide 9 text

© ZOZO, Inc. 9 ● 普段の開発業務でもMiroを利用
 ● ZOZOTOWNの開発体制・開発フローに合わせて工夫
 ● 開発効率の向上に寄与
 開発業務でのMiroの利用


Slide 10

Slide 10 text

© ZOZO, Inc. 10 ● Miroを使用した開発効率向上の取り組み
 ○ 具体例: 
 ■ Miroを使用した開発タスクの整理と分解
 今日話す内容


Slide 11

Slide 11 text

© ZOZO, Inc. 11 ● スクラムのプラクティスを取り入れた開発
 ZOZOTOWN Androidの開発フロー


Slide 12

Slide 12 text

© ZOZO, Inc. 12 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ZOZOTOWN Androidの開発フロー


Slide 13

Slide 13 text

© ZOZO, Inc. 13 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ● タスクの整理と分解にMiroを使用
 ZOZOTOWN Androidの開発フロー


Slide 14

Slide 14 text

© ZOZO, Inc. 14 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ● タスクの整理と分解にMiroを使用
 ○ 物理ホワイトボードで実施していた作業をMiroに移行
 ZOZOTOWN Androidの開発フロー


Slide 15

Slide 15 text

© ZOZO, Inc. 15 タスクの整理と分解の様子(2019年12月頃)


Slide 16

Slide 16 text

© ZOZO, Inc. 16 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ● タスクの整理と分解にMiroを使用
 ○ 物理ホワイトボードで行なっていた作業をMiroに移行
 ZOZOTOWN Androidの開発フロー


Slide 17

Slide 17 text

© ZOZO, Inc. 17 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ● タスクの整理と分解にMiroを使用
 ○ 物理ホワイトボードで行なっていた作業をMiroに移行
 ○ 全員がリモートでも問題なし
 ZOZOTOWN Androidの開発フロー


Slide 18

Slide 18 text

© ZOZO, Inc. 18 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ● タスクの整理と分解にMiroを使用
 ○ 物理ホワイトボードで行なっていた作業をMiroに移行
 ○ 全員がリモートでも問題なし
 ○ Jiraと連携することで簡単にチケット化可能
 ZOZOTOWN Androidの開発フロー


Slide 19

Slide 19 text

© ZOZO, Inc. 19 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ● タスクの整理と分解にMiroを使用
 ○ 物理ホワイトボードで行なっていた作業をMiroに移行
 ○ 全員がリモートでも問題なし
 ○ Jiraと連携することで簡単にチケット化可能
 ○ JiraとGitHubを連携することで開発状況もMiroに同期
 ZOZOTOWN Androidの開発フロー


Slide 20

Slide 20 text

© ZOZO, Inc. 20 ● スクラムのプラクティスを取り入れた開発
 ● 1スプリント1週間、スプリント計画で実装するタスクを決定
 ● タスクの整理と分解にMiroを使用
 ○ 物理ホワイトボードで行なっていた作業をMiroに移行
 ○ 全員がリモートでも問題なし
 ○ Jiraと連携することで簡単にチケット化可能
 ○ JiraとGitHubを連携することで開発状況もMiroに同期
 ○ 作業効率向上！
 ZOZOTOWN Androidの開発フロー


Slide 21

Slide 21 text

© ZOZO, Inc. Miro使用した開発タスクの整理と分解方法の紹介
 21

Slide 22

Slide 22 text

© ZOZO, Inc. 22 ● ZOZOTOWNホーム画面


Slide 23

Slide 23 text

© ZOZO, Inc. 23 ● ZOZOTOWNホーム画面
 ● バナーを実装するタスクを洗い出す


Slide 24

Slide 24 text

© ZOZO, Inc. 24 ● 実装者(2-3名)がそれぞれMiroを開く
 ● Google Meet等で会話できるようにする
 ● 話し合いながらタスクの洗い出し、整理・分解、見積もりを行う
 タスクを洗い出す際には


Slide 25

Slide 25 text

© ZOZO, Inc. ● MiroのUser Story Mapテンプレートを利用
 25 タスクの洗い出し・整理・分解に使用するフレームワーク


Slide 26

Slide 26 text

© ZOZO, Inc. 26

Slide 27

Slide 27 text

© ZOZO, Inc. 27 ● フレームワークを埋める
 ○ 青ラベル: 画面
 ○ 黄色ラベル: 機能


Slide 28

Slide 28 text

© ZOZO, Inc. 28 ● やりたいこと
 ○ バナー画像を表示しスワイプで切り替え
 ● ※今回参照しないが実際には仕様書あり


Slide 29

Slide 29 text

© ZOZO, Inc. 29

Slide 30

Slide 30 text

© ZOZO, Inc. 30 ● 話し合いながらタスクを整理・分解
 ● Miro上で共同で編集していく


Slide 31

Slide 31 text

© ZOZO, Inc. 31

Slide 32

Slide 32 text

© ZOZO, Inc. 32

Slide 33

Slide 33 text

© ZOZO, Inc. 33

Slide 34

Slide 34 text

© ZOZO, Inc. 34

Slide 35

Slide 35 text

© ZOZO, Inc. ● ざっくりとした見積もりを出す
 ● タスクの詳細を詰めていく
 ○ タスクの優先順位とどれから取り掛かるかの決定
 ○ タスクのゴールとやることの決定
 35 タスクを洗い出せたら


Slide 36

Slide 36 text

© ZOZO, Inc. ● ざっくりとした見積もりを出す
 ● タスクの詳細を詰めていく
 ○ タスクの優先順位とどれから取り掛かるかの決定
 ○ タスクのゴールとやることの決定
 36 タスクを洗い出せたら


Slide 37

Slide 37 text

© ZOZO, Inc. ● どのタスクから取り掛かると効率良く実装できるか
 ● 他のタスクをブロックするタスクは優先順位を上げる
 ● 難易度が高いタスクは優先順位を上げる
 37 タスクの優先順位とどれから取り掛かるかの決定


Slide 38

Slide 38 text

© ZOZO, Inc. 38

Slide 39

Slide 39 text

© ZOZO, Inc. 39 ● 後続のタスクをブロック
 ○ バナーレイアウト実装
 ○ スワイプでの切り替え
 ● 先にこの2つから実装
 ● 優先順位の表現
 ○ 優先順位が高いタスクを
 上に移動
 


Slide 40

Slide 40 text

© ZOZO, Inc. ● ざっくりとした見積もりを出す
 ● タスクの詳細を詰めていく
 ○ タスクの優先順位とどれから取り掛かるかの決定
 ○ タスクのゴールとやることの決定
 40 タスクを洗い出せたら


Slide 41

Slide 41 text

© ZOZO, Inc. ● どこまでやれば完了かの基準作り
 ● 実装者間で合意を得る
 ● 実装方針や設計についても話す
 ● 取り掛かることに決めたタスクから実施
 41 タスクのゴールとやることの決定


Slide 42

Slide 42 text

© ZOZO, Inc. ● スワイプでのバナー切り替えの例
 ○ このタイミングで見積もりを実施
 42 タスクのゴールとやることの決定
 
 


Slide 43

Slide 43 text

© ZOZO, Inc. 43 ● タスクの詳細を詰める中で不足している
 タスクに気付いた場合


Slide 44

Slide 44 text

© ZOZO, Inc. 44 ● タスクの詳細を詰める中で不足している
 タスクに気付いた場合
 ● 次のバナーが見える実装
 ○ スワイプでの切り替えに含めるか？
 ○ 別タスクにするか？


Slide 45

Slide 45 text

© ZOZO, Inc. 45

Slide 46

Slide 46 text

© ZOZO, Inc. 46 ● 今回は別タスク
 ● 実装者間で合意が取れればOK
 ● スワイプの実装に含めても良い


Slide 47

Slide 47 text

© ZOZO, Inc. ● ViewPager2での実装は初めて取り組む
 ● 以前ViewPagerを使って実装した際に時間がかかった
 ● ViewPager2 + TabLayoutは調べながら実装することになりそう
 ● ...
 47 スワイプでのバナー切り替えが難易度高そうという意見


Slide 48

Slide 48 text

© ZOZO, Inc. 48

Slide 49

Slide 49 text

© ZOZO, Inc. 49 ● 優先順位を入れ替える
 ● 難易度が高い(不安な)タスクを
 先に取り組む
 ● 不確実性を減らす


Slide 50

Slide 50 text

© ZOZO, Inc. 1. 大まかで良いのでタスクの洗い出し
 2. 優先順位と取り掛かるタスクの決定
 3. タスクのゴールとやることを決定
 4. 不足したタスクがあれば追加、不要なタスクがあれば削除
 50 タスクの整理と分解の流れ
 2-4を繰り返して必要なタスクを整理して適切な粒度に分解


Slide 51

Slide 51 text

© ZOZO, Inc. ● 長くとも0.5人日で完了できる程度とチームで決定
 ● 見積もりで1人日以上のタスクは分割
 ○ 見積もりは人日で0.1, 0.25, 0.5, 1の中から選択している
 ● 1人日は8時間換算
 51 適切な粒度とはどれぐらい？


Slide 52

Slide 52 text

© ZOZO, Inc. 52 ● タスクの整理・分解が完了
 ● Jiraチケット化・情報同期
 


Slide 53

Slide 53 text

© ZOZO, Inc. 53 ● タスクの整理・分解が完了
 ● Jiraチケット化・情報同期
 ○ 優先度
 ○ 担当者名
 ○ GitHubと連動したステータス
 


Slide 54

Slide 54 text

© ZOZO, Inc. 54 ● タスクの整理・分解が完了
 ● Jiraチケット化・情報同期
 ○ 優先度
 ○ 担当者名
 ○ GitHubと連動したステータス
 ● Jiraでスプリントを管理
 
 https://ja.confluence.atlassian.com/jirasoftwareserver/using-active-sprints-938845497.html

Slide 55

Slide 55 text

© ZOZO, Inc. ● ZOZOTOWNリニューアルプロジェクト
 55 実際の業務での活用例


Slide 56

Slide 56 text

© ZOZO, Inc. 56

Slide 57

Slide 57 text

© ZOZO, Inc. ● ZOZOTOWNリニューアルプロジェクト
 ● ほぼ全ての画面の修正、ZOZOGLASS対応...
 ● スケジュール通りのリリース
 57 実際の業務での活用例


Slide 58

Slide 58 text

© ZOZO, Inc. 58 ● 普段の開発で実施しているタスクの整理・分割にMiroを使用
 ● 物理ホワイトボードで実施していた内容が電子化、開発効率が向上
 ● リニューアルのような大きな案件で関係者全員がリモートの状態でも問題 なくリリース完了
 まとめ


Slide 59

Slide 59 text

No content