『じゃらんnet』アプリ 改善活動の軌跡

2025/2/19に開催したRecruit Tech Conference 2025の桐山のLT資料です

Transcript

1. 『じゃらんnet』アプリ 改善活動の軌跡 RECRUIT TECH CONFERENCE 2025 Flutter/KMPを用いたアジリティ追求の軌跡 Flutterリプレイスを起点に、さらなる改善を目指して 桐山　圭祐 株式会社リクルート プロダクトディベロップメント室
2. フットサル、キャンプ プロダクトディベロップメント室 販促領域エンジニアリング１ユニット マリッジ＆ファミリー・自動車・旅行領域 エンジニアリング部 旅行プロダクト開発グループ 桐山 圭祐 経歴 / Career 2019年にリクルートに新卒入社。 2019年7月から旅行領域にモバイルアプリエンジニアとして参 画し、『じゃらんnet』アプリのFlutterリプレイス等を推進。 現在は『じゃらんnet』アプリの開発チームリーダーを担当。 iOSDC 2020 をはじめ、複数のイベントで登壇。 趣味 / Hobbies
3. • 国内の宿・ホテル予約サービス • iOS/Androidで運用中、今年でリリースから14年が経過 『じゃらんnet』アプリ
4. ご紹介したいこと 「『じゃらんnet』アプリ Flutterリプレイスの道のり」 https://speakerdeck.com/recruitengineers/kurosupuratutohuo mukai-fa-2022-flutterreact-nativefalsedao-ru-toshi-jian 『じゃらんnet』アプリで実施したFlutterリプレイスの効果を受け その後我々はどのような改善活動を行ってきたか ※ Flutterリプレイス自体の登り方については下記資料で詳細を公開しています。 　 こちらも是非ご参照ください！ Flutterリプレイス その後の改善 本日話すのは こちら
5. • 長期間の開発を経て複数の課題が浮上 • 上記課題の改善を目的に『じゃらんnet』アプリのリプレイスを検討し 技術検証を経てFlutterへのリプレイスを意思決定 ソースコードの大規模化 『じゃらんnet』アプリのFlutterリプレイス • ビルド時間が増加し開発効率が低下 ソースコードの複雑化 • 調査/実装工数の増加 • バグや障害の増加
6. • 現在は頻度高く変更される画面のFlutter化が完了し、約1年間エンハンスを継続中 『じゃらんnet』アプリのFlutterリプレイス TOP 宿一覧 宿詳細 ・・・ Flutterへのリプレイスを行ったことで、どのような効果があったのか？
7. • コード品質は改善され、コンパクトでシンプルな状態へ • クロスプラットフォーム技術により、従来のiOS/Androidネイティブ開発に比べ工数半減 Flutterリプレイスの効果 50%減 80%減 • 開発の高速化 • 開発コスト削減 • バグ/障害発生確率の改善 を実現！！ Flutterリプレイスにより
8. • 開発の高速化を実現 → 案件をより早く、多くリリースすることにつながったのでは？ ◦ リードタイム: 案件がリリースされるまでの早さ ◦ スループット : リリースされる案件の量 Flutterリプレイスの効果 の指標についても追加で確認
9. • 開発の高速化を実現 → 案件をより早く、多くリリースすることにつながったのでは？ ◦ リードタイム: 案件がリリースされるまでの早さ ◦ スループット : リリースされる案件の量 リードタイムやスループットの指標については Flutterリプレイス前後で、あまり違いが生まれなかった Flutterリプレイスの効果 ※イメージ の指標についても追加で確認
10. • プロセス面をはじめとする開発以外の部分がボトルネックとなってしまっていた • その開発以外の部分のボトルネックにより 開発の高速化がリードタイムやスループットに効きにくい状態となっていた 何故開発の高速化がリードタイムやスループットにつながらなかったのか？ プロセス全体 開発 工程 工程 B 工程 A 工程 C … … ❌ ❌ ❌
11. 開発以外の部分がボトルネック...?
12. 『じゃらんnet』アプリの開発プロセス 『じゃらんnet』アプリの開発プロセスは4つの工程から構成される 企画 デザイン作成 開発 試験 ①ディレクターが 案件を考える ②デザイナーが デザインを作成する ③開発者が 実装する ④QAが 試験する リリース 案 件 案 件 案 件 案 件
13. 『じゃらんnet』アプリの開発プロセス 多くの案件が同時並行で流れる リリース 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 企画 デザイン作成 開発 試験
14. 『じゃらんnet』アプリの開発プロセス この複数の案件を秩序立てて管理するために、固定の期間が経過したら 各案件をまとめて次の工程に渡す運用を長年行っていた リリース 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 企画 デザイン作成 開発 試験
15. 『じゃらんnet』アプリの開発プロセス リリース 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 案 件 A 案 件 B 案 件 D 案 件 C 案 件 E 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 企画 デザイン作成 開発 試験 このプロセスを前提に 開発速度が速くなるとどういうことが起こるか？ この複数の案件を秩序立てて管理するために、固定の期間が経過したら 各案件をまとめて次の工程に渡す運用を長年行っていた
16. 開発速度改善前 実装に開発期間の大部分を費やす 『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？ 企画 デザイン作成 開発 試験 リリース 案 件 案 件 案 件 案 件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 実装
17. 『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？ 企画 デザイン作成 開発 試験 リリース 案 件 案 件 案 件 案 件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 実装 開発速度改善前 実装に開発期間の大部分を費やす ↓ 開発速度改善後 これまでの半分の時間で 実装完了できるように 案件を より早く多く リリースできる？
18. 『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？ 企画 デザイン作成 開発 試験 リリース 案 件 案 件 案 件 案 件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 実装 待ち時間 開発速度改善前 実装に開発期間の大部分を費やす ↓ 開発速度改善後 これまでの半分の時間で 実装完了できるように 固定の期間が経過するまで案件を次の工程に渡せないため 実装が早くなっても案件を寝かせておく時間が増えただけ
19. 『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？ 企画 デザイン作成 開発 試験 リリース 案 件 案 件 案 件 案 件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 実装 待ち時間 待ち時間を利用して追加の案件を開発しても、後続の試験工程で受け入れ可能な 案件の量は増えていないので、追加した案件を試験工程に渡すことができない QA そんなに 試験 できない… 追加 案件 追加 案件 追加 案件
20. 開発以外の部分がボトルネックになってしまい 開発の高速化がリードタイムやスループットに 効きにくい構造になっていた
21. 開発以外の部分がボトルネックになってしまい 開発の高速化がリードタイムやスループットに 効きにくい構造になっていた 追い求める指標によっては 開発のスコープだけで改善を行っても 効果が限定的になってしまう！ 更なる改善が必要だ！！
22. Flutterリプレイスの効果を リードタイムやスループットに繋げるために その後の『じゃらんnet』アプリチームの改善活動 開発だけではなく プロセス全体を最適な状態に近付ける 改善活動を継続して実施
23. プロセス全体を 最適な状態に近づける改善活動 方針
24. 改善活動は開発チームに閉じて 行うことが多かった • 開発における課題に着目しがち • 打ち手が開発によりがち これまで 改善活動の方針① - 職能を跨いだ改善チームを結成する 現在 開発 開発 QA デザイナー ディレクター 職能を跨いだ改善チームの結成 • プロセス全体における課題が見えてくる • 開発から見づらい点についても 解像度高く考慮した打ち手策定に繋がる
25. 改善活動の方針② - 制約に集中してアプローチする • 現在の改善活動は「制約理論」をベースにして実施 • 制約理論: 仕事の流れの中にはどこかに必ず制約(ボトルネック)があり 　　　　 その制約に集中して改善を行うことで全体の成果を最大化する • 現在の制約がどこにあるのか明確に特定する • 制約の特定に至ったら、その制約のみに集中してアプローチする プロセス 能力 100 25 120 A B C インプット 100 アウトプット 25 集中 引用: https://www.diamond.co.jp /book/9784478420409.html
26. 改善活動の方針③ - 全体を解像度高く理解できる状態を作る • 制約を特定するためには、現在のプロセス全体を高い解像度で理解することが不可欠 • プロセスの状態を可視化するシステムの運用 ◦ JIRAのAPIから日次でチケットの更新履歴を取得→加工→可視化 ◦ 可視化指標例: チケットの滞留状況推移、フェーズごとの平均LT推移 etc. • 現在のプロセスを継続的に可視化する仕組みを構築することで プロセスの全体像や現在の制約を継続的に把握し続けることが可能
27. プロセス全体を 最適な状態に近づける改善活動 施策例
28. 課題 プロセス全体を最適化するために実施した施策例① 案件の受け渡しを行う 固定期間が長く 案件を寝かせる時間が長い
29. 課題 プロセス全体を最適化するために実施した施策例① 打ち手 効果 案件の受け渡しを行う 固定期間が長く 案件を寝かせる時間が長い 固定の期間を半分に短縮し 対応した開発フローを再設計 リードタイムを 最大40%削減 待ち時間 だけを削減!
30. 課題 プロセス全体を最適化するために実施した施策例② 開発完了しても QAリソース不足で試験ができず リリースできない案件が多発 QA そんなに 試験 できない… 開発 案 件 案 件 案 件 案 件 … … 開発済み案件
31. 課題 プロセス全体を最適化するために実施した施策例② 打ち手 効果 開発完了しても QAリソース不足で試験ができず リリースできない案件が多発 ・開発とQAで協力して 試験する体制の構築 ・リグレッション テストケースの見直し etc. スループットを 最大30%増加 QA そんなに 試験 できない… 開発 案 件 案 件 案 件 案 件 … … 開発済み案件 開発とQAで協力して 試験する体制の構築 テストケースの見直し
32. プロセス全体を最適な状態に近づけることで リードタイムやスループットの改善も実現 改善活動は限られた範囲で行うのではなく 俯瞰的に捉え全体を最適化することが重要
33. • 『じゃらんnet』アプリのFlutterリプレイスが リードタイム/スループットの指標に対する改善にはつながらなかった背景を受けて その後我々が行ったプロセス全体を最適化する改善活動についてご紹介 • プロセス全体を最適化するために ◦ 職能を跨いで改善チームを結成する ◦ 制約に集中してアプローチする ◦ 全体を解像度高く理解できる状態を作る • 現在はFlutterリプレイスとプロセス全体を最適化する改善活動によって リードタイムやスループットの指標についても顕著な改善効果を得ることができている まとめ