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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

案件案件案件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目実装待ち時間開発速度改善前実装に開発期間の大部分を費やす ↓ 開発速度改善後これまでの半分の時間で実装完了できるように固定の期間が経過するまで案件を次の工程に渡せないため実装が早くなっても案件を寝かせておく時間が増えただけ

案件案件案件 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目実装待ち時間待ち時間を利用して追加の案件を開発しても、後続の試験工程で受け入れ可能な案件の量は増えていないので、追加した案件を試験工程に渡すことができない QA そんなに試験できない… 追加案件追加案件追加案件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Recruit PRO

More Decks by Recruit

Other Decks in Technology

Featured

Transcript