Miroを使った開発効率向上のための取り組み / Using Miro Efforts to Improve Development Efficiency

Miro
https://miro.com/

ZOZO採用情報
https://corp.zozo.com/recruit/

カジュアル面談はこちら
https://meety.net/matches/hMCsVjDYOJeQ

Transcript

1. Miroを使った
 開発効率向上のための取り組み
 TechTalk iOS＆AndroidエンジニアによるLT 〜 開発効率向上のための取り組み 〜
 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOTOWNアプリ部 Androidブロック
 テックリード
 堀江 亮介 Copyright © ZOZO, Inc.
2. © ZOZO, Inc. 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOTOWNアプリ部
 Androidブロック テックリード 堀江 亮介
 • 自動化とビールが好き • @Horie1024 
 2
3. © ZOZO, Inc. https://zozo.jp/
 3 • ファッション通販サイト
 • 1,400以上のショップ、8,400以上のブランドの取り扱い
 • 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載（2021年6月末時点）
 • ブランド古着のファッションゾーン「ZOZOUSED」や
 コスメ専門モール「ZOZOCOSME」、靴の専門モール
 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
 「ZOZOVILLA」を展開
 • 即日配送サービス
 • ギフトラッピングサービス
 • ツケ払い など

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

5. © ZOZO, Inc. 5 2021年3月期 決算説明会補足資料 - 株式会社ZOZO, https://d31ex0fa3i203z.cloudfront.net/assets/ja/ir/pdf/webup_fy20204q_j.pdf
6. © ZOZO, Inc. Miro？
 6
7. © ZOZO, Inc. 7 Miro
 • オンラインホワイトボードサービス
 • 複数人で同時に作業が可能
 • 自由度が高い
 https://miro.com/how-development-teams-use-miro/
8. © ZOZO, Inc. 8 ZOZOTOWNでのMiroの利用
 • 多くの場面で利用
 ◦ カジュアル面談
 ◦ 仕様の検討と共有
 ◦ 振り返り
 ◦ ...

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

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

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

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

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

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

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

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

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

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

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

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

21. © ZOZO, Inc. Miro使用した開発タスクの整理と分解方法の紹介
 21
22. © ZOZO, Inc. 22 • ZOZOTOWNホーム画面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

54. © ZOZO, Inc. 54 • タスクの整理・分解が完了
 • Jiraチケット化・情報同期
 ◦ 優先度
 ◦ 担当者名
 ◦ GitHubと連動したステータス
 • Jiraでスプリントを管理
 
 https://ja.confluence.atlassian.com/jirasoftwareserver/using-active-sprints-938845497.html
55. © ZOZO, Inc. • ZOZOTOWNリニューアルプロジェクト
 55 実際の業務での活用例

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

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