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

Slide 1

Slide 1 text

『じゃらんnet』アプリ改善活動の軌跡 RECRUIT TECH CONFERENCE 2025 Flutter/KMPを用いたアジリティ追求の軌跡 Flutterリプレイスを起点に、さらなる改善を目指して桐山　圭祐株式会社リクルートプロダクトディベロップメント室

Slide 2

Slide 2 text

フットサル、キャンププロダクトディベロップメント室販促領域エンジニアリング１ユニットマリッジ＆ファミリー・自動車・旅行領域エンジニアリング部旅行プロダクト開発グループ桐山圭祐経歴 / Career 2019年にリクルートに新卒入社。 2019年7月から旅行領域にモバイルアプリエンジニアとして参画し、『じゃらんnet』アプリのFlutterリプレイス等を推進。現在は『じゃらんnet』アプリの開発チームリーダーを担当。 iOSDC 2020 をはじめ、複数のイベントで登壇。趣味 / Hobbies

Slide 3

Slide 3 text

● 国内の宿・ホテル予約サービス ● iOS/Androidで運用中、今年でリリースから14年が経過『じゃらんnet』アプリ

Slide 4

Slide 4 text

ご紹介したいこと「『じゃらんnet』アプリ Flutterリプレイスの道のり」 https://speakerdeck.com/recruitengineers/kurosupuratutohuo mukai-fa-2022-ﬂutterreact-nativefalsedao-ru-toshi-jian 『じゃらんnet』アプリで実施したFlutterリプレイスの効果を受けその後我々はどのような改善活動を行ってきたか ※ Flutterリプレイス自体の登り方については下記資料で詳細を公開しています。　こちらも是非ご参照ください！ Flutterリプレイスその後の改善本日話すのはこちら

Slide 5

Slide 5 text

● 長期間の開発を経て複数の課題が浮上 ● 上記課題の改善を目的に『じゃらんnet』アプリのリプレイスを検討し技術検証を経てFlutterへのリプレイスを意思決定ソースコードの大規模化『じゃらんnet』アプリのFlutterリプレイス ● ビルド時間が増加し開発効率が低下ソースコードの複雑化 ● 調査/実装工数の増加 ● バグや障害の増加

Slide 6

Slide 6 text

● 現在は頻度高く変更される画面のFlutter化が完了し、約1年間エンハンスを継続中『じゃらんnet』アプリのFlutterリプレイス TOP 宿一覧宿詳細・・・ Flutterへのリプレイスを行ったことで、どのような効果があったのか？

Slide 7

Slide 7 text

● コード品質は改善され、コンパクトでシンプルな状態へ ● クロスプラットフォーム技術により、従来のiOS/Androidネイティブ開発に比べ工数半減 Flutterリプレイスの効果 50%減 80%減 ● 開発の高速化 ● 開発コスト削減 ● バグ/障害発生確率の改善を実現！！ Flutterリプレイスにより

Slide 8

Slide 8 text

● 開発の高速化を実現 → 案件をより早く、多くリリースすることにつながったのでは？ ○ リードタイム: 案件がリリースされるまでの早さ ○ スループット : リリースされる案件の量 Flutterリプレイスの効果の指標についても追加で確認

Slide 9

Slide 9 text

● 開発の高速化を実現 → 案件をより早く、多くリリースすることにつながったのでは？ ○ リードタイム: 案件がリリースされるまでの早さ ○ スループット : リリースされる案件の量リードタイムやスループットの指標については Flutterリプレイス前後で、あまり違いが生まれなかった Flutterリプレイスの効果 ※イメージの指標についても追加で確認

Slide 10

Slide 10 text

● プロセス面をはじめとする開発以外の部分がボトルネックとなってしまっていた ● その開発以外の部分のボトルネックにより開発の高速化がリードタイムやスループットに効きにくい状態となっていた何故開発の高速化がリードタイムやスループットにつながらなかったのか？プロセス全体開発工程工程 B 工程 A 工程 C … … ❌ ❌ ❌

Slide 11

Slide 11 text

開発以外の部分がボトルネック...?

Slide 12

Slide 12 text

『じゃらんnet』アプリの開発プロセス『じゃらんnet』アプリの開発プロセスは4つの工程から構成される企画デザイン作成開発試験 ①ディレクターが案件を考える ②デザイナーがデザインを作成する ③開発者が実装する ④QAが試験するリリース案件案件案件案件

Slide 13

Slide 13 text

『じゃらんnet』アプリの開発プロセス多くの案件が同時並行で流れるリリース案件 A 案件 B 案件 D 案件 C 案件 E 案件 A 案件 B 案件 D 案件 C 案件 E 案件 A 案件 B 案件 D 案件 C 案件 E 案件 A 案件 B 案件 D 案件 C 案件 E 企画デザイン作成開発試験

Slide 14

Slide 14 text

『じゃらん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ヶ月目企画デザイン作成開発試験

Slide 15

Slide 15 text

『じゃらん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ヶ月目企画デザイン作成開発試験このプロセスを前提に開発速度が速くなるとどういうことが起こるか？この複数の案件を秩序立てて管理するために、固定の期間が経過したら各案件をまとめて次の工程に渡す運用を長年行っていた

Slide 16

Slide 16 text

開発速度改善前実装に開発期間の大部分を費やす『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？企画デザイン作成開発試験リリース案件案件案件案件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目実装

Slide 17

Slide 17 text

『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？企画デザイン作成開発試験リリース案件案件案件案件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目実装開発速度改善前実装に開発期間の大部分を費やす ↓ 開発速度改善後これまでの半分の時間で実装完了できるように案件をより早く多くリリースできる？

Slide 18

Slide 18 text

『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？企画デザイン作成開発試験リリース案件案件案件案件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目実装待ち時間開発速度改善前実装に開発期間の大部分を費やす ↓ 開発速度改善後これまでの半分の時間で実装完了できるように固定の期間が経過するまで案件を次の工程に渡せないため実装が早くなっても案件を寝かせておく時間が増えただけ

Slide 19

Slide 19 text

『じゃらんnet』アプリの開発プロセス - 開発高速化でどうなる？企画デザイン作成開発試験リリース案件案件案件案件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目実装待ち時間待ち時間を利用して追加の案件を開発しても、後続の試験工程で受け入れ可能な案件の量は増えていないので、追加した案件を試験工程に渡すことができない QA そんなに試験できない… 追加案件追加案件追加案件

Slide 20

Slide 20 text

開発以外の部分がボトルネックになってしまい開発の高速化がリードタイムやスループットに効きにくい構造になっていた

Slide 21

Slide 21 text

開発以外の部分がボトルネックになってしまい開発の高速化がリードタイムやスループットに効きにくい構造になっていた追い求める指標によっては開発のスコープだけで改善を行っても効果が限定的になってしまう！更なる改善が必要だ！！

Slide 22

Slide 22 text

Flutterリプレイスの効果をリードタイムやスループットに繋げるためにその後の『じゃらんnet』アプリチームの改善活動開発だけではなくプロセス全体を最適な状態に近付ける改善活動を継続して実施

Slide 23

Slide 23 text

プロセス全体を最適な状態に近づける改善活動方針

Slide 24

Slide 24 text

改善活動は開発チームに閉じて行うことが多かった ● 開発における課題に着目しがち ● 打ち手が開発によりがちこれまで改善活動の方針① - 職能を跨いだ改善チームを結成する現在開発開発 QA デザイナーディレクター職能を跨いだ改善チームの結成 ● プロセス全体における課題が見えてくる ● 開発から見づらい点についても解像度高く考慮した打ち手策定に繋がる

Slide 25

Slide 25 text

改善活動の方針② - 制約に集中してアプローチする ● 現在の改善活動は「制約理論」をベースにして実施 ● 制約理論: 仕事の流れの中にはどこかに必ず制約(ボトルネック)があり　　　　その制約に集中して改善を行うことで全体の成果を最大化する ● 現在の制約がどこにあるのか明確に特定する ● 制約の特定に至ったら、その制約のみに集中してアプローチするプロセス能力 100 25 120 A B C インプット 100 アウトプット 25 集中引用: https://www.diamond.co.jp /book/9784478420409.html

Slide 26

Slide 26 text

改善活動の方針③ - 全体を解像度高く理解できる状態を作る ● 制約を特定するためには、現在のプロセス全体を高い解像度で理解することが不可欠 ● プロセスの状態を可視化するシステムの運用 ○ JIRAのAPIから日次でチケットの更新履歴を取得→加工→可視化 ○ 可視化指標例: チケットの滞留状況推移、フェーズごとの平均LT推移 etc. ● 現在のプロセスを継続的に可視化する仕組みを構築することでプロセスの全体像や現在の制約を継続的に把握し続けることが可能

Slide 27

Slide 27 text

プロセス全体を最適な状態に近づける改善活動施策例

Slide 28

Slide 28 text

課題プロセス全体を最適化するために実施した施策例① 案件の受け渡しを行う固定期間が長く案件を寝かせる時間が長い

Slide 29

Slide 29 text

課題プロセス全体を最適化するために実施した施策例① 打ち手効果案件の受け渡しを行う固定期間が長く案件を寝かせる時間が長い固定の期間を半分に短縮し対応した開発フローを再設計リードタイムを最大40%削減待ち時間だけを削減!

Slide 30

Slide 30 text

課題プロセス全体を最適化するために実施した施策例② 開発完了しても QAリソース不足で試験ができずリリースできない案件が多発 QA そんなに試験できない… 開発案件案件案件案件 … … 開発済み案件

Slide 31

Slide 31 text

課題プロセス全体を最適化するために実施した施策例② 打ち手効果開発完了しても QAリソース不足で試験ができずリリースできない案件が多発・開発とQAで協力して試験する体制の構築・リグレッションテストケースの見直し etc. スループットを最大30%増加 QA そんなに試験できない… 開発案件案件案件案件 … … 開発済み案件開発とQAで協力して試験する体制の構築テストケースの見直し

Slide 32

Slide 32 text

プロセス全体を最適な状態に近づけることでリードタイムやスループットの改善も実現改善活動は限られた範囲で行うのではなく俯瞰的に捉え全体を最適化することが重要

Slide 33

Slide 33 text

● 『じゃらんnet』アプリのFlutterリプレイスがリードタイム/スループットの指標に対する改善にはつながらなかった背景を受けてその後我々が行ったプロセス全体を最適化する改善活動についてご紹介 ● プロセス全体を最適化するために ○ 職能を跨いで改善チームを結成する ○ 制約に集中してアプローチする ○ 全体を解像度高く理解できる状態を作る ● 現在はFlutterリプレイスとプロセス全体を最適化する改善活動によってリードタイムやスループットの指標についても顕著な改善効果を得ることができているまとめ