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

Miro × ZOZO ZOZOのMiro活用事例紹介 2024年12月5日 Miroマスターズ株式会社ZOZO  技術本部技術戦略部 CTOブロック 
テックリード  堀江亮介 Copyright © ZOZO, Inc. 1

© ZOZO, Inc. 2 目次 • ZOZOについて • 自己紹介 •
Miro × ZOZO ◦ 利用状況 ◦ 導入のきっかけ ◦ 活用事例 ◦ 導入の効果 ◦ 導入後の課題 • 今後の展望

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

© ZOZO, Inc. https://wear.jp/ 7 • あなたの「似合う」が探せるファッションコーディネートアプリ • 1,700万ダウンロード突破、コーディネート投稿総数は1,400万件以上（2024年9月末時点）
• コーディネートや最新トレンド、メイクなど豊富なファッション情報をチェック • AIを活用したファッションジャンル診断や、フルメイクをARで試せる「WEARお試しメイク」を提供 • コーディネート着用アイテムを公式サイトで購入可能 • WEAR公認の人気ユーザーをWEARISTAと認定。モデル・タレント・デザイナー・インフルエンサーといった各界著名人も参加

© ZOZO, Inc. 株式会社ZOZO 技術本部技術戦略部 CTOブロックテックリード堀江亮介
2018年 M&Aに伴いZOZOテクノロジーズに入社 ZOZOグループの組織再編に伴い転籍し現職 2022年よりCTOブロックに異動組織横断での課題解決と採用および技術広報業務を担当 10

© ZOZO, Inc. 11 自己紹介: ZOZOでの直近の業務内容 • 社内各プロダクトの開発サポート ◦ WEARリニューアル開発サポート
• 組織横断での課題解決 ◦ GitHub Copilotの全社導入 ◦ 開発生産性向上施策の推進 • 技術広報業務 ◦ テックブログ運営 ◦ 勉強会の開催 ◦ 技術カンファレンススポンサー ◦ 外部勉強会への登壇 ◦ 外部メディアへの記事寄稿・インタビュー取材対応

© ZOZO, Inc. 13 自己紹介: Miroとの関わり • ZOZOでMiroを使ってみたいと最初に言い、実際に使い始めた(2019年12月) • 自身でZOZOTOWNの開発業務においてMiroを活用、その後社内に拡大
• 2024年3月から全社でのMiroの有効活用の推進を担当 ◦ 利用者向けにMiroの情報発信を強化 ◦ 社内向け初級者・中級者向け勉強会の開催初級者向け勉強会をシリーズで全4回開催

© ZOZO, Inc. 14 自己紹介: Miroとの関わり • Miro APIやMiro SDKの記事と技術同人誌を執筆
◦ Miro API入門 ◦ ZOZO TECH BOOK VOL.1 • 開発者向けドキュメントが充実していてとてもわかりやすい ◦ https://developers.miro.com/

© ZOZO, Inc. 15 自己紹介: 好きなMiroの使い方 • iPad + Apple
Pencil ◦ デジタルとアナログ ◦ 手書きで情報を整理 ◦ 写真はアプリ開発での例 ▪ デザインを画像で貼り付け ▪ 手書きで書き込みざっくりと設計

◦ アクティブボード数: 1,731(既存ボード: 1,403 + 新規ボード: 328)

◦ アクティブボード数: 1,731(既存ボード: 1,403 + 新規ボード: 328) ◦ アクティブコラボレーション数: 7,573

© ZOZO, Inc. 21 Miro利用状況 • 2024年9月 ◦ 1,088ユーザーが1,731ボードを使って7,573回コラボレーションが行われた ◦
社員とパートナーの6割がMiroを活用、利用者は増加中 • 利用部署 ◦ 開発部門を中心にビジネス、デザイン、カスタマーサポート等多くの部署でMiroを活用 • よく使われているテンプレート ◦ マインドマップ、フローチャート、カンバン、ロードマップ計画 • よく使われているアプリ ◦ Conﬂuence Embed Integration、GitHub for Miro、Jira Cards

© ZOZO, Inc. 23 Miro導入のきっかけ • 2019年頃のZOZOTOWN開発体制 • テレワークと出社のハイブリッド勤務 •
複数拠点 (当時) ◦ 青山オフィス ◦ 幕張オフィス ◦ 宮崎オフィス ◦ 福岡オフィス出典：国土地理院日本全図

© ZOZO, Inc. 24 Miro導入のきっかけ • 複数拠点とハイブリッド勤務 • コラボレーションの課題 ◦
ユーザーストーリーマッピング ◦ UIデザインの共有とフィードバック ◦ 技術的な課題の検討 ◦ 開発タスクの整理と分解、見積もり ◦ スムーズな情報共有 ◦ 円滑なプロジェクト推進・・・ホワイトボードを使ったタスクの整理と分解の様子(2019年12月)  

© ZOZO, Inc. • コラボレーションの課題の解決策を模索 • 2019年12月に他社でMiroを活用している事例を目撃 • 課題の解決に使えるのでは？と考え導入を推進 25
Miro導入のきっかけ

© ZOZO, Inc. • ホワイトボードで行っていた作業をMiroに移行 ◦ ユーザーストーリーマッピング ◦ 技術的な課題の検討 ◦
開発タスクの整理と分解、見積もり 27 Miro導入のきっかけ

© ZOZO, Inc. 28 Miro導入のきっかけ: コロナ禍での影響 • 2020年2月16日からテレワーク推奨 ◦ プロダクト開発チームも全員がテレワーク
◦ テレワーク前提の開発フローに変化 • 当時はZOZOMATの開発途中 ◦ 自チームではMiroを導入済み ◦ スムーズにテレワーク前提の開発フローに移行できた ◦ 当初のスケジュール通りにリリース完了 https://zozo.jp/zozomat/

© ZOZO, Inc. 30 Miro活用事例: 目次 • プロダクト開発での活用事例 ◦ ZOZOTOWNのリニューアル
◦ WEARのリニューアル • 広がるMiroの活用 ◦ 様々な図式化 ◦ 勉強会・知見共有 ◦ チームビルディング

© ZOZO, Inc. 32 Miro活用事例: ZOZOTOWNのリニューアル • 2021年の3月にリニューアル • 企画からリリースまで関係者全員がテレワークで進められたプロジェクト
• ZOZOでMiroを本格的にプロダクト開発に活用した最初の事例

© ZOZO, Inc. 34 Miro活用事例: ZOZOTOWNのリニューアル • UIデザインと仕様をMiroに集約 ◦ 視覚的にわかりやすい
◦ ボードにアクセスしてMTGすることでスムーズに情報共有可能 ◦ 付箋・コメントでの効率的な仕様検討

© ZOZO, Inc. 36 Miro活用事例: ZOZOTOWNのリニューアル • UIデザインと仕様をMiroに集約 ◦ 視覚的にわかりやすい
◦ ボードにアクセスしてMTGすることでスムーズに情報共有可能 ◦ 付箋・コメントでの効率的な仕様検討

© ZOZO, Inc. 37 Miro活用事例: ZOZOTOWNのリニューアル • デメリット ◦ 継続的な維持運用が難しい
◦ 仕様・デザインの更新 ◦ バージョン管理の問題 ◦ 集約しすぎた結果ボードが重い • 現在の運用 ◦ ボードを分割 ◦ 最終的な仕様管理はConﬂuence ◦ Miroに複数のツールを組み合わせ運用

© ZOZO, Inc. 38 Miro活用事例: ZOZOTOWNのリニューアル • 開発タスクの整理と分解・見積もり ◦ Miro
User Story Mapテンプレートを利用した開発タスクの整理と分解・見積もり

© ZOZO, Inc. 39 Miro活用事例: ZOZOTOWNのリニューアル • 開発タスクの整理と分解・見積もり ◦ Miro
User Story Mapテンプレートを利用した開発タスクの整理と分解・見積もり ◦ MiroとJiraの連携 ▪ チケット化・情報同期 ▪ 優先度 ▪ 担当者名 ▪ GitHubと連動したステータス ◦ Jira上でプランニングし週次でイテレーション

© ZOZO, Inc. 41 Miro活用事例: WEARのリニューアル • 2024年の5月に「WEAR by
ZOZO（以下WEAR）」としてリニューアル • Miroの活用場面 ◦ UIデザイン・仕様検討 ◦ プロダクトロードマップ

© ZOZO, Inc. 43 Miro活用事例: WEARのリニューアル • UIデザイン・仕様検討 ◦ Miroのボード上でUIデザインと仕様について議論
◦ 確定したUIデザインをFigmaで管理 ◦ 確定した仕様をConﬂuenceで管理

© ZOZO, Inc. 44 Miro活用事例: WEARのリニューアル • プロダクトロードマップ ◦ WEARのミッション/ビジョン/バリュー
◦ 経営/プロダクトのKPI ◦ 中長期・月単位でのロードマップ ◦ 今後検討予定の機能バックログ

© ZOZO, Inc. 45 Miro活用事例: WEARのリニューアル • WEARのミッション/ビジョン/バリュー ◦ プロダクト/事業のミッション/ビジョン/バリュー
◦ 今後の戦略と方針 ◦ 経営戦略と事業の関係

© ZOZO, Inc. 48 Miro活用事例: WEARのリニューアル • 短期ロードマップ ◦ FY24にリリースする機能ベースのロードマップ
◦ 機能・プラットフォーム別で5チーム構成 ◦ 各チームがいつ何に取り組むかのロードマップ

© ZOZO, Inc. 61 Miro活用事例: 勉強会・知見共有 • Google I/O 2023のキャッチアップ勉強会
◦ Recap: Google I/O 2023 • パネルディスカッション用のMiroボードを用意 • 登壇者・参加者の両方から好評

© ZOZO, Inc. 63 Miro活用事例: 勉強会・知見共有 • 技術書の輪読会 ◦ チーム全員で決まった章を読みメモを付箋に書く
◦ 1回30分の枠で15-20分読み、残り時間で議論 ◦ 週2回実施引用: 脳に収まるコードの書き方 https://www.oreilly.co.jp/books/9784814400799/

© ZOZO, Inc. 67 Miro活用事例: チームビルディング • Findy Team+での開発指標の確認 ◦
サイクルタイム分析の参照 ◦ Pull Request作成数 ◦ コードをコミットしてからマージされるまでの時間 ◦ 先週と今週の比較

© ZOZO, Inc. 71 Miro活用事例: 採用活動(カジュアル面談) • カジュアル面談 ◦ 応募前に求職者と社員がカジュアルにコミュニケーションを取る場
◦ 会社やポジションについて理解を深めてもらう ◦ 求職者の今後のキャリアの選択肢にZOZOが入ることが目的 • Miroを活用したカジュアル面談 ◦ 事前に作成したボードを候補者に共有、一緒にボードを見ながら面談を進行 ◦ ボードに会社やチームの情報をまとめ、求職者が興味がある話題について説明 ◦ 面談は単方向になりがちだがMiroを活用すると求職者の方と双方向でのやりとりが可能

© ZOZO, Inc. 73 Miro活用事例: 採用活動(カジュアル面談) “業務内容・各サービスの開発体制・技術的な課題・福利厚生・働き方、他にも現場のエンジニアが挙げた会社の良いところや、プロダクトの裏側などの項目がいくつもMiro上に並んでいて、その中から気になるテーマを選び、1時間ほどかけて細かく説明してもらえたんで
す。資料の説明を一方的に受けるよりも、カジュアルな会話を通じて現場の雰囲気が伝わってきて、課題など一部の内情に関しても生の声を聞くことができたので、とても参考になりました。” https://technote.zozo.com/n/n26639cda3707

© ZOZO, Inc. 75 Miro導入の効果 • テレワーク・ハイブリッド勤務で非同期な業務フローが当たり前になった状況 • Miroを導入した結果 ◦
紹介しきれないほどの利用事例 ◦ 各種業務に合わせた多様な活用方法 ◦ ビジネス部門・開発部門の両方で活用 • 社内の様々なチーム・個人がMiroを活用して業務改善する取り組みを自ら考え実施 ◦ ボードの自由度の高さ、豊富なアプリ・テンプレート ◦ Miroは不可欠なツールとして社内で活用

© ZOZO, Inc. 78 • 「Miroをどう使っていけば良いかわからない」という課題感 • どのように課題を解決していくのか模索中 ◦ 社内向け勉強会の開催
◦ 他社事例の紹介 ◦ 社内事例の収集と紹介 • Miroユニバースは他社さんの事例を知れるとても良い機会 Miro導入後の課題

© ZOZO, Inc. • 事業部全体としてビジネスとして価値のあるサービスを多く届けられるようにしたい • BizDevOps ◦ ビジネス部門と開発部門が効果的なコラボレーションを取れることが重要 •
その実現のためのツールの一つとしてMiroを活用できる環境を整えていきたい ◦ 社内向け勉強会、他社事例紹介、社内事例共有 ◦ Miro AIの活用 ◦ より有効なMiroの活用方法の模索 82 今後の展望

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

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

More Decks by Ryosuke Horie

Other Decks in Technology

Featured

Transcript