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.
   

   View Slide

2. © ZOZO, Inc.
   株式会社ZOZO

   ZOZOTOWN開発本部 ZOZOTOWNアプリ部

   Androidブロック テックリード
   堀江 亮介

   ● 自動化とビールが好き
   ● @Horie1024
   

   2
   

   View Slide

3. © ZOZO, Inc.
   https://zozo.jp/

   3
   ● ファッション通販サイト

   ● 1,400以上のショップ、8,400以上のブランドの取り扱い

   ● 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品
   を掲載（2021年6月末時点）

   ● ブランド古着のファッションゾーン「ZOZOUSED」や

   コスメ専門モール「ZOZOCOSME」、靴の専門モール

   「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン

   「ZOZOVILLA」を展開

   ● 即日配送サービス

   ● ギフトラッピングサービス

   ● ツケ払い など

   

   View Slide

4. © ZOZO, Inc.
   https://wear.jp/

   4
   ● ファッションコーディネートアプリ

   ● 1,500万ダウンロード突破、コーディネート投稿総数は1,000万件以上
   （2021年6月末時点）

   ● ピックアップタグから最新のトレンドをチェック

   ● コーディネート着用アイテムをブランド公式サイトで購入可能

   ● WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレント・デザ
   イナー・インフルエンサーといった各界著名人も参加

   

   View Slide

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

   View Slide

6. © ZOZO, Inc.
   Miro？

   6
   

   View Slide

7. © ZOZO, Inc.
   7
   Miro

   ● オンラインホワイトボードサービス

   ● 複数人で同時に作業が可能

   ● 自由度が高い

   https://miro.com/how-development-teams-use-miro/
   

   View Slide

8. © ZOZO, Inc.
   8
   ZOZOTOWNでのMiroの利用

   ● 多くの場面で利用

   ○ カジュアル面談

   ○ 仕様の検討と共有

   ○ 振り返り

   ○ ...

   

   View Slide

9. © ZOZO, Inc.
   9
   ● 普段の開発業務でもMiroを利用

   ● ZOZOTOWNの開発体制・開発フローに合わせて工夫

   ● 開発効率の向上に寄与

   開発業務でのMiroの利用

   

   View Slide

10. © ZOZO, Inc.
    10
    ● Miroを使用した開発効率向上の取り組み

    ○ 具体例: 

    ■ Miroを使用した開発タスクの整理と分解

    今日話す内容

    

    View Slide

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

    ZOZOTOWN Androidの開発フロー

    

    View Slide

12. © ZOZO, Inc.
    12
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ZOZOTOWN Androidの開発フロー

    

    View Slide

13. © ZOZO, Inc.
    13
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ● タスクの整理と分解にMiroを使用

    ZOZOTOWN Androidの開発フロー

    

    View Slide

14. © ZOZO, Inc.
    14
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ● タスクの整理と分解にMiroを使用

    ○ 物理ホワイトボードで実施していた作業をMiroに移行

    ZOZOTOWN Androidの開発フロー

    

    View Slide

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

    

    View Slide

16. © ZOZO, Inc.
    16
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ● タスクの整理と分解にMiroを使用

    ○ 物理ホワイトボードで行なっていた作業をMiroに移行

    ZOZOTOWN Androidの開発フロー

    

    View Slide

17. © ZOZO, Inc.
    17
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ● タスクの整理と分解にMiroを使用

    ○ 物理ホワイトボードで行なっていた作業をMiroに移行

    ○ 全員がリモートでも問題なし

    ZOZOTOWN Androidの開発フロー

    

    View Slide

18. © ZOZO, Inc.
    18
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ● タスクの整理と分解にMiroを使用

    ○ 物理ホワイトボードで行なっていた作業をMiroに移行

    ○ 全員がリモートでも問題なし

    ○ Jiraと連携することで簡単にチケット化可能

    ZOZOTOWN Androidの開発フロー

    

    View Slide

19. © ZOZO, Inc.
    19
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ● タスクの整理と分解にMiroを使用

    ○ 物理ホワイトボードで行なっていた作業をMiroに移行

    ○ 全員がリモートでも問題なし

    ○ Jiraと連携することで簡単にチケット化可能

    ○ JiraとGitHubを連携することで開発状況もMiroに同期

    ZOZOTOWN Androidの開発フロー

    

    View Slide

20. © ZOZO, Inc.
    20
    ● スクラムのプラクティスを取り入れた開発

    ● 1スプリント1週間、スプリント計画で実装するタスクを決定

    ● タスクの整理と分解にMiroを使用

    ○ 物理ホワイトボードで行なっていた作業をMiroに移行

    ○ 全員がリモートでも問題なし

    ○ Jiraと連携することで簡単にチケット化可能

    ○ JiraとGitHubを連携することで開発状況もMiroに同期

    ○ 作業効率向上！

    ZOZOTOWN Androidの開発フロー

    

    View Slide

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

    21
    

    View Slide

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

    

    View Slide

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

    ● バナーを実装するタスクを洗い出す

    

    View Slide

24. © ZOZO, Inc.
    24
    ● 実装者(2-3名)がそれぞれMiroを開く

    ● Google Meet等で会話できるようにする

    ● 話し合いながらタスクの洗い出し、整理・分解、見積もりを行う

    タスクを洗い出す際には

    

    View Slide

25. © ZOZO, Inc.
    ● MiroのUser Story Mapテンプレートを利用

    25
    タスクの洗い出し・整理・分解に使用するフレームワーク

    

    View Slide

26. © ZOZO, Inc.
    26
    

    View Slide

27. © ZOZO, Inc.
    27
    ● フレームワークを埋める

    ○ 青ラベル: 画面

    ○ 黄色ラベル: 機能

    

    View Slide

28. © ZOZO, Inc.
    28
    ● やりたいこと

    ○ バナー画像を表示しスワイプで切り替え

    ● ※今回参照しないが実際には仕様書あり

    

    View Slide

29. © ZOZO, Inc.
    29
    

    View Slide

30. © ZOZO, Inc.
    30
    ● 話し合いながらタスクを整理・分解

    ● Miro上で共同で編集していく

    

    View Slide

31. © ZOZO, Inc.
    31
    

    View Slide

32. © ZOZO, Inc.
    32
    

    View Slide

33. © ZOZO, Inc.
    33
    

    View Slide

34. © ZOZO, Inc.
    34
    

    View Slide

35. © ZOZO, Inc.
    ● ざっくりとした見積もりを出す

    ● タスクの詳細を詰めていく

    ○ タスクの優先順位とどれから取り掛かるかの決定

    ○ タスクのゴールとやることの決定

    35
    タスクを洗い出せたら

    

    View Slide

36. © ZOZO, Inc.
    ● ざっくりとした見積もりを出す

    ● タスクの詳細を詰めていく

    ○ タスクの優先順位とどれから取り掛かるかの決定

    ○ タスクのゴールとやることの決定

    36
    タスクを洗い出せたら

    

    View Slide

37. © ZOZO, Inc.
    ● どのタスクから取り掛かると効率良く実装できるか

    ● 他のタスクをブロックするタスクは優先順位を上げる

    ● 難易度が高いタスクは優先順位を上げる

    37
    タスクの優先順位とどれから取り掛かるかの決定

    

    View Slide

38. © ZOZO, Inc.
    38
    

    View Slide

39. © ZOZO, Inc.
    39
    ● 後続のタスクをブロック

    ○ バナーレイアウト実装

    ○ スワイプでの切り替え

    ● 先にこの2つから実装

    ● 優先順位の表現

    ○ 優先順位が高いタスクを

    上に移動

    

    

    View Slide

40. © ZOZO, Inc.
    ● ざっくりとした見積もりを出す

    ● タスクの詳細を詰めていく

    ○ タスクの優先順位とどれから取り掛かるかの決定

    ○ タスクのゴールとやることの決定

    40
    タスクを洗い出せたら

    

    View Slide

41. © ZOZO, Inc.
    ● どこまでやれば完了かの基準作り

    ● 実装者間で合意を得る

    ● 実装方針や設計についても話す

    ● 取り掛かることに決めたタスクから実施

    41
    タスクのゴールとやることの決定

    

    View Slide

42. © ZOZO, Inc.
    ● スワイプでのバナー切り替えの例

    ○ このタイミングで見積もりを実施

    42
    タスクのゴールとやることの決定

    

    

    

    View Slide

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

    タスクに気付いた場合

    

    View Slide

44. © ZOZO, Inc.
    44
    ● タスクの詳細を詰める中で不足している

    タスクに気付いた場合

    ● 次のバナーが見える実装

    ○ スワイプでの切り替えに含めるか？

    ○ 別タスクにするか？

    

    View Slide

45. © ZOZO, Inc.
    45
    

    View Slide

46. © ZOZO, Inc.
    46
    ● 今回は別タスク

    ● 実装者間で合意が取れればOK

    ● スワイプの実装に含めても良い

    

    View Slide

47. © ZOZO, Inc.
    ● ViewPager2での実装は初めて取り組む

    ● 以前ViewPagerを使って実装した際に時間がかかった

    ● ViewPager2 + TabLayoutは調べながら実装することになりそう

    ● ...

    47
    スワイプでのバナー切り替えが難易度高そうという意見

    

    View Slide

48. © ZOZO, Inc.
    48
    

    View Slide

49. © ZOZO, Inc.
    49
    ● 優先順位を入れ替える

    ● 難易度が高い(不安な)タスクを

    先に取り組む

    ● 不確実性を減らす

    

    View Slide

50. © ZOZO, Inc.
    1. 大まかで良いのでタスクの洗い出し

    2. 優先順位と取り掛かるタスクの決定

    3. タスクのゴールとやることを決定

    4. 不足したタスクがあれば追加、不要なタスクがあれば削除

    50
    タスクの整理と分解の流れ

    2-4を繰り返して必要なタスクを整理して適切な粒度に分解

    

    View Slide

51. © ZOZO, Inc.
    ● 長くとも0.5人日で完了できる程度とチームで決定

    ● 見積もりで1人日以上のタスクは分割

    ○ 見積もりは人日で0.1, 0.25, 0.5, 1の中から選択している

    ● 1人日は8時間換算

    51
    適切な粒度とはどれぐらい？

    

    View Slide

52. © ZOZO, Inc.
    52
    ● タスクの整理・分解が完了

    ● Jiraチケット化・情報同期

    

    

    View Slide

53. © ZOZO, Inc.
    53
    ● タスクの整理・分解が完了

    ● Jiraチケット化・情報同期

    ○ 優先度

    ○ 担当者名

    ○ GitHubと連動したステータス

    

    

    View Slide

54. © ZOZO, Inc.
    54
    ● タスクの整理・分解が完了

    ● Jiraチケット化・情報同期

    ○ 優先度

    ○ 担当者名

    ○ GitHubと連動したステータス

    ● Jiraでスプリントを管理

    
 https://ja.confluence.atlassian.com/jirasoftwareserver/using-active-sprints-938845497.html
    

    View Slide

55. © ZOZO, Inc.
    ● ZOZOTOWNリニューアルプロジェクト

    55
    実際の業務での活用例

    

    View Slide

56. © ZOZO, Inc.
    56
    

    View Slide

57. © ZOZO, Inc.
    ● ZOZOTOWNリニューアルプロジェクト

    ● ほぼ全ての画面の修正、ZOZOGLASS対応...

    ● スケジュール通りのリリース

    57
    実際の業務での活用例

    

    View Slide

58. © ZOZO, Inc.
    58
    ● 普段の開発で実施しているタスクの整理・分割にMiroを使用

    ● 物理ホワイトボードで実施していた内容が電子化、開発効率が向上

    ● リニューアルのような大きな案件で関係者全員がリモートの状態でも問題
    なくリリース完了

    まとめ

    

    View Slide

59. View Slide