Miro × ZOZO ZOZOのMiro活用事例紹介

Miroマスターズ 2024資料
https://miro.com/ja/blog/event/masters-2024/

■関連資料
Miroを使った開発効率向上のための取り組み
https://speakerdeck.com/horie1024/using-miro-efforts-to-improve-development-efficiency

コロナ禍で入社したZOZOエンジニアが語る、リモートベースの働き方
https://technote.zozo.com/n/n26639cda3707

Transcript

1. Miro × ZOZO ZOZOのMiro活用事例紹介 2024年12月5日 Miroマスターズ 株式会社ZOZO
 技術本部 技術戦略部 CTOブロック
 テックリード
 堀江 亮介 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 2 目次 • ZOZOについて • 自己紹介 • Miro × ZOZO ◦ 利用状況 ◦ 導入のきっかけ ◦ 活用事例 ◦ 導入の効果 ◦ 導入後の課題 • 今後の展望
3. © ZOZO, Inc. 3 ZOZOについて
4. © ZOZO, Inc. 4
5. © ZOZO, Inc. 5
6. © ZOZO, Inc. https://zozo.jp/ 6 • ファッションEC • 1,600以上のショップ、9,000以上のブランドの取り扱い • 常時102万点以上の商品アイテム数と毎日平均2,600点以上の新着 商品を掲載（2024年9月末時点） • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
7. © ZOZO, Inc. https://wear.jp/ 7 • あなたの「似合う」が探せるファッションコーディネートアプリ • 1,700万ダウンロード突破、コーディネート投稿総数は1,400万 件以上（2024年9月末時点） • コーディネートや最新トレンド、メイクなど豊富なファッション 情報をチェック • AIを活用したファッションジャンル診断や、フルメイクをARで試 せる「WEARお試しメイク」を提供 • コーディネート着用アイテムを公式サイトで購入可能 • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレン ト・デザイナー・インフルエンサーといった各界著名人も参加
9. © ZOZO, Inc. 9 自己紹介
10. © ZOZO, Inc. 株式会社ZOZO 技術本部 技術戦略部 CTOブロック テックリード 堀江 亮介 2018年 M&Aに伴いZOZOテクノロジーズに入社 ZOZOグループの組織再編に伴い転籍し現職 2022年よりCTOブロックに異動 組織横断での課題解決と採用および技術広報業務を担当 10
11. © ZOZO, Inc. 11 自己紹介: ZOZOでの直近の業務内容 • 社内各プロダクトの開発サポート ◦ WEARリニューアル開発サポート • 組織横断での課題解決 ◦ GitHub Copilotの全社導入 ◦ 開発生産性向上施策の推進 • 技術広報業務 ◦ テックブログ運営 ◦ 勉強会の開催 ◦ 技術カンファレンススポンサー ◦ 外部勉強会への登壇 ◦ 外部メディアへの記事寄稿・インタビュー取材対応
12. © ZOZO, Inc. 12 自己紹介: Miroとの関わり • ZOZOでMiroを使ってみたいと最初に言い、実際に使い始めた(2019年12月)
13. © ZOZO, Inc. 13 自己紹介: Miroとの関わり • ZOZOでMiroを使ってみたいと最初に言い、実際に使い始めた(2019年12月) • 自身でZOZOTOWNの開発業務においてMiroを活用、その後社内に拡大 • 2024年3月から全社でのMiroの有効活用の推進を担当 ◦ 利用者向けにMiroの情報発信を強化 ◦ 社内向け初級者・中級者向け勉強会の開催 初級者向け勉強会をシリーズで全4回開催
14. © ZOZO, Inc. 14 自己紹介: Miroとの関わり • Miro APIやMiro SDKの記事と技術同人誌を執筆 ◦ Miro API入門 ◦ ZOZO TECH BOOK VOL.1 • 開発者向けドキュメントが充実していてとてもわかりやすい ◦ https://developers.miro.com/
15. © ZOZO, Inc. 15 自己紹介: 好きなMiroの使い方 • iPad + Apple Pencil ◦ デジタルとアナログ ◦ 手書きで情報を整理 ◦ 写真はアプリ開発での例 ▪ デザインを画像で貼り付け ▪ 手書きで書き込みざっくりと設計
16. © ZOZO, Inc. 16
17. © ZOZO, Inc. 17 Miro利用状況
18. © ZOZO, Inc. 18 Miro利用状況 • 2024年9月 ◦ アクティブユーザー数: 1,088
19. © ZOZO, Inc. 19 Miro利用状況 • 2024年9月 ◦ アクティブユーザー数: 1,088 ◦ アクティブボード数: 1,731(既存ボード: 1,403 + 新規ボード: 328)
20. © ZOZO, Inc. 20 Miro利用状況 • 2024年9月 ◦ アクティブユーザー数: 1,088 ◦ アクティブボード数: 1,731(既存ボード: 1,403 + 新規ボード: 328) ◦ アクティブコラボレーション数: 7,573
21. © ZOZO, Inc. 21 Miro利用状況 • 2024年9月 ◦ 1,088ユーザーが1,731ボードを使って7,573回コラボレーションが行われた ◦ 社員とパートナーの6割がMiroを活用、利用者は増加中 • 利用部署 ◦ 開発部門を中心にビジネス、デザイン、カスタマーサポート等多くの部署でMiroを活用 • よく使われているテンプレート ◦ マインドマップ、フローチャート、カンバン、ロードマップ計画 • よく使われているアプリ ◦ Confluence Embed Integration、GitHub for Miro、Jira Cards
22. © ZOZO, Inc. 22 Miro導入のきっかけ
23. © ZOZO, Inc. 23 Miro導入のきっかけ • 2019年頃のZOZOTOWN開発体制 • テレワークと出社のハイブリッド勤務 • 複数拠点 (当時) ◦ 青山オフィス ◦ 幕張オフィス ◦ 宮崎オフィス ◦ 福岡オフィス 出典：国土地理院 日本全図
24. © ZOZO, Inc. 24 Miro導入のきっかけ • 複数拠点とハイブリッド勤務 • コラボレーションの課題 ◦ ユーザーストーリーマッピング ◦ UIデザインの共有とフィードバック ◦ 技術的な課題の検討 ◦ 開発タスクの整理と分解、見積もり ◦ スムーズな情報共有 ◦ 円滑なプロジェクト推進 ・ ・ ・ ホワイトボードを使ったタスクの整理と分解の様子(2019年12月) 

25. © ZOZO, Inc. • コラボレーションの課題の解決策を模索 • 2019年12月に他社でMiroを活用している事例を目撃 • 課題の解決に使えるのでは？と考え導入を推進 25 Miro導入のきっかけ
26. © ZOZO, Inc. 26 Miro導入のきっかけ
27. © ZOZO, Inc. • ホワイトボードで行っていた作業をMiroに移行 ◦ ユーザーストーリーマッピング ◦ 技術的な課題の検討 ◦ 開発タスクの整理と分解、見積もり 27 Miro導入のきっかけ
28. © ZOZO, Inc. 28 Miro導入のきっかけ: コロナ禍での影響 • 2020年2月16日からテレワーク推奨 ◦ プロダクト開発チームも全員がテレワーク ◦ テレワーク前提の開発フローに変化 • 当時はZOZOMATの開発途中 ◦ 自チームではMiroを導入済み ◦ スムーズにテレワーク前提の開発フローに移行できた ◦ 当初のスケジュール通りにリリース完了 https://zozo.jp/zozomat/
29. © ZOZO, Inc. 29 Miro活用事例
30. © ZOZO, Inc. 30 Miro活用事例: 目次 • プロダクト開発での活用事例 ◦ ZOZOTOWNのリニューアル ◦ WEARのリニューアル • 広がるMiroの活用 ◦ 様々な図式化 ◦ 勉強会・知見共有 ◦ チームビルディング
31. © ZOZO, Inc. 31 プロダクト開発での活用事例
32. © ZOZO, Inc. 32 Miro活用事例: ZOZOTOWNのリニューアル • 2021年の3月にリニューアル • 企画からリリースまで関係者全員がテレワークで進められたプロジェクト • ZOZOでMiroを本格的にプロダクト開発に活用した最初の事例
33. © ZOZO, Inc. 33 Miro活用事例: ZOZOTOWNのリニューアル • UIデザインと仕様をMiroに集約
34. © ZOZO, Inc. 34 Miro活用事例: ZOZOTOWNのリニューアル • UIデザインと仕様をMiroに集約 ◦ 視覚的にわかりやすい ◦ ボードにアクセスしてMTGすることで スムーズに情報共有可能 ◦ 付箋・コメントでの効率的な仕様検討
35. © ZOZO, Inc. 35 Miro活用事例: ZOZOTOWNのリニューアル • 品質管理・保証チームがテスト観点をMiroボード上にコメント
36. © ZOZO, Inc. 36 Miro活用事例: ZOZOTOWNのリニューアル • UIデザインと仕様をMiroに集約 ◦ 視覚的にわかりやすい ◦ ボードにアクセスしてMTGすることで スムーズに情報共有可能 ◦ 付箋・コメントでの効率的な仕様検討
37. © ZOZO, Inc. 37 Miro活用事例: ZOZOTOWNのリニューアル • デメリット ◦ 継続的な維持運用が難しい ◦ 仕様・デザインの更新 ◦ バージョン管理の問題 ◦ 集約しすぎた結果ボードが重い • 現在の運用 ◦ ボードを分割 ◦ 最終的な仕様管理はConfluence ◦ Miroに複数のツールを組み合わせ運用
38. © ZOZO, Inc. 38 Miro活用事例: ZOZOTOWNのリニューアル • 開発タスクの整理と分解・見積もり ◦ Miro User Story Mapテンプレートを利用した開発タスクの整理と分解・見積もり
39. © ZOZO, Inc. 39 Miro活用事例: ZOZOTOWNのリニューアル • 開発タスクの整理と分解・見積もり ◦ Miro User Story Mapテンプレートを利用した開発タスクの整理と分解・見積もり ◦ MiroとJiraの連携 ▪ チケット化・情報同期 ▪ 優先度 ▪ 担当者名 ▪ GitHubと連動したステータス ◦ Jira上でプランニングし週次でイテレーション
40. © ZOZO, Inc. 40 Miro活用事例: ZOZOTOWNのリニューアル • こちらの資料でタスク分解の流れを紹介しています。 https://speakerdeck.com/horie1024/using-miro-efforts-to-improve-development-efficiency
41. © ZOZO, Inc. 41 Miro活用事例: WEARのリニューアル • 2024年の5月に 「WEAR by ZOZO（以下WEAR）」 としてリニューアル • Miroの活用場面 ◦ UIデザイン・仕様検討 ◦ プロダクトロードマップ
42. © ZOZO, Inc. 42 Miro活用事例: WEARのリニューアル • UIデザイン・仕様検討
43. © ZOZO, Inc. 43 Miro活用事例: WEARのリニューアル • UIデザイン・仕様検討 ◦ Miroのボード上でUIデザインと仕様について議論 ◦ 確定したUIデザインをFigmaで管理 ◦ 確定した仕様をConfluenceで管理
44. © ZOZO, Inc. 44 Miro活用事例: WEARのリニューアル • プロダクトロードマップ ◦ WEARのミッション/ビジョン/バリュー ◦ 経営/プロダクトのKPI ◦ 中長期・月単位でのロードマップ ◦ 今後検討予定の機能バックログ
45. © ZOZO, Inc. 45 Miro活用事例: WEARのリニューアル • WEARのミッション/ビジョン/バリュー ◦ プロダクトのミッション/ビジョン/バリュー ◦ 今後の事業戦略と方針 ◦ 経営戦略と事業の関係
46. © ZOZO, Inc. 46 Miro活用事例: WEARのリニューアル • 経営/プロダクトのKPI 目標と実績を見える化 月毎の経営/プロダクトのKPI
47. © ZOZO, Inc. 47 Miro活用事例: WEARのリニューアル • 中長期ロードマップ ◦ 今後数年でプロダクトが提供する価値・機能・売上等KPI
48. © ZOZO, Inc. 48 Miro活用事例: WEARのリニューアル • 短期ロードマップ ◦ FY24にリリースする機能ベースのロードマップ ◦ 機能・プラットフォーム別で5チーム構成 ◦ 各チームがいつ何に取り組むかのロードマップ
49. © ZOZO, Inc. 49 広がるMiroの活用
50. © ZOZO, Inc. Miro活用事例: 様々な図式化 50
51. © ZOZO, Inc. 51 Miro活用事例: 様々な図式化 • 画面遷移図
52. © ZOZO, Inc. Miro活用事例: 様々な図式化 52 • KPIツリー ◦ 目標達成のためのKPIを分解・図式化 ◦ 各KPIの関係も記述
53. © ZOZO, Inc. Miro活用事例: 様々な図式化 53 • シーケンス図 ◦ 商品発送関連処理の図式化
54. © ZOZO, Inc. Miro活用事例: 様々な図式化 54 • フローチャート ◦ 検索クエリ構築処理の図式化
55. © ZOZO, Inc. 55 Miro活用事例: 様々な図式化 • ステークホルダーマップ ◦ ビジネスに影響を与える利害関係者を洗い出して相関図にしたもの
56. © ZOZO, Inc. 56 Miro活用事例: 様々な図式化 • プロジェクト体制図 ◦ 指示命令系統の図式化 ◦ 各チームの役割とコミュニケーションチャネルの整理
57. © ZOZO, Inc. 57 Miro活用事例: 様々な図式化 • ユーザーストーリーマッピング ◦ FAANS(ショップスタッフの販売サポートツール)でパスワード変更機能を開発した時のもの
58. © ZOZO, Inc. 58 Miro活用事例: 様々な図式化 • リーンキャンバス ◦ 新規事業の検討でMiroを活用
59. © ZOZO, Inc. 59 Miro活用事例: 様々な図式化 • カスタマージャーニーマップ ◦ ZOZOTOWN特集企画の検討でMiroを活用
60. © ZOZO, Inc. 60 Miro活用事例: 勉強会・知見共有
61. © ZOZO, Inc. 61 Miro活用事例: 勉強会・知見共有 • Google I/O 2023のキャッチアップ勉強会 ◦ Recap: Google I/O 2023 • パネルディスカッション用のMiroボードを用意 • 登壇者・参加者の両方から好評
62. © ZOZO, Inc. 62 Miro活用事例: 勉強会・知見共有 • DroidKaigi2024参加メモの共有 DroidKaigi 2024 https://2024.droidkaigi.jp/
63. © ZOZO, Inc. 63 Miro活用事例: 勉強会・知見共有 • 技術書の輪読会 ◦ チーム全員で決まった章を読みメモを付箋に書く ◦ 1回30分の枠で15-20分読み、残り時間で議論 ◦ 週2回実施 引用: 脳に収まるコードの書き方 https://www.oreilly.co.jp/books/9784814400799/
64. © ZOZO, Inc. 64 Miro活用事例: チームビルディング
65. © ZOZO, Inc. 65 Miro活用事例: チームビルディング • チーム振り返り
66. © ZOZO, Inc. 66 Miro活用事例: チームビルディング • 今週のいいね • 良かったことをメンバー同士でフィードバック
67. © ZOZO, Inc. 67 Miro活用事例: チームビルディング • Findy Team+での開発指標の確認 ◦ サイクルタイム分析の参照 ◦ Pull Request作成数 ◦ コードをコミットしてからマージされる までの時間 ◦ 先週と今週の比較
68. © ZOZO, Inc. 68 Miro活用事例: チームビルディング • KPTでの振り返り
69. © ZOZO, Inc. 69 Miro活用事例: チームビルディング • KPTでの振り返り ◦ 別チームでの例 ◦ よりシンプルなフォーマット
70. © ZOZO, Inc. 70 Miro活用事例: 採用活動(カジュアル面談)
71. © ZOZO, Inc. 71 Miro活用事例: 採用活動(カジュアル面談) • カジュアル面談 ◦ 応募前に求職者と社員がカジュアルにコミュニケーションを取る場 ◦ 会社やポジションについて理解を深めてもらう ◦ 求職者の今後のキャリアの選択肢にZOZOが入ることが目的 • Miroを活用したカジュアル面談 ◦ 事前に作成したボードを候補者に共有、一緒にボードを見ながら面談を進行 ◦ ボードに会社やチームの情報をまとめ、求職者が興味がある話題について説明 ◦ 面談は単方向になりがちだがMiroを活用すると求職者の方と双方向でのやりとりが可能
72. © ZOZO, Inc. • Miroに情報をまとまめることで求職者と双方向で対話する面談に 72 Miro活用事例: 採用活動(カジュアル面談)
73. © ZOZO, Inc. 73 Miro活用事例: 採用活動(カジュアル面談) “業務内容・各サービスの開発体制・技術的な課題・福利厚生・働き 方、他にも現場のエンジニアが挙げた会社の良いところや、プロダク トの裏側などの項目がいくつもMiro上に並んでいて、その中から気に なるテーマを選び、1時間ほどかけて細かく説明してもらえたんで す。 資料の説明を一方的に受けるよりも、カジュアルな会話を通じて現場 の雰囲気が伝わってきて、課題など一部の内情に関しても生の声を聞 くことができたので、とても参考になりました。” https://technote.zozo.com/n/n26639cda3707
74. © ZOZO, Inc. 74 Miro導入の効果
75. © ZOZO, Inc. 75 Miro導入の効果 • テレワーク・ハイブリッド勤務で非同期な業務フローが当たり前になった状況 • Miroを導入した結果 ◦ 紹介しきれないほどの利用事例 ◦ 各種業務に合わせた多様な活用方法 ◦ ビジネス部門・開発部門の両方で活用 • 社内の様々なチーム・個人がMiroを活用して業務改善する取り組みを自ら考え実施 ◦ ボードの自由度の高さ、豊富なアプリ・テンプレート ◦ Miroは不可欠なツールとして社内で活用
76. © ZOZO, Inc. 76 Miro導入後の課題
77. © ZOZO, Inc. 77 Miro導入後の課題 • 社内向け勉強会のアンケート結果 ◦ 具体的にどんな業務に使用できるのかを知りたい ◦ 活用している部署の具体的な活用例を知りたい ◦ 企業でよく使われるテンプレがあれば知りたい
78. © ZOZO, Inc. 78 • 「Miroをどう使っていけば良いかわからない」という課題感 • どのように課題を解決していくのか模索中 ◦ 社内向け勉強会の開催 ◦ 他社事例の紹介 ◦ 社内事例の収集と紹介 • Miroマスターズは他社さんの事例を知れるとても良い機会 Miro導入後の課題
79. © ZOZO, Inc. 79 今後の展望
80. © ZOZO, Inc. 80 今後の展望 • 事業部全体としてビジネスとして価値のあるサービスを多く届けられるようにしたい 引用: 開発生産性について議論する前に知っておきたいこと https://qiita.com/hirokidaichi/items/53f0865398829bdebef1
81. © ZOZO, Inc. • 事業部全体としてビジネスとして価値のあるサービスを多く届けられるようにしたい • BizDevOps ◦ ビジネス部門と開発部門が効果的なコラボレーションを取れることが重要 81 今後の展望
82. © ZOZO, Inc. • 事業部全体としてビジネスとして価値のあるサービスを多く届けられるようにしたい • BizDevOps ◦ ビジネス部門と開発部門が効果的なコラボレーションを取れることが重要 • その実現のためのツールの一つとしてMiroを活用できる環境を整えていきたい ◦ 社内向け勉強会、他社事例紹介、社内事例共有 ◦ Miro AIの活用 ◦ より有効なMiroの活用方法の模索 82 今後の展望