Save 37% off PRO during our Black Friday Sale! »

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

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

Miro
https://miro.com/

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

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

Dbab5e5a1fd54531e1119ede6b3b9e65?s=128

Ryosuke Horie

October 26, 2021
Tweet

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を使用
 • 物理ホワイトボードで実施していた内容が電子化、開発効率が向上
 • リニューアルのような大きな案件で関係者全員がリモートの状態でも問題

    なくリリース完了
 まとめ

  59. None