カスタムタブバーを持つアプリをLiquid Glass対応する

■ イベント
食べログ × ANDPAD × Sansan モバイル勉強会 #4
https://andpad.connpass.com/event/390093/

■登壇概要
タイトル：カスタムタブバーを持つアプリをLiquid Glass対応する
登壇者：技術本部 Sansan Engineering Unit 盛重 晴登

■ 技術本部 採用情報
https://media.sansan-engineering.com

Transcript

1. 技術本部 Sansan Engineering Unit Mobile Applicationグループ 盛重 晴登 カスタムタブバーを持つ アプリをLiquid Glass対応する
2. 盛重 晴登 Sansan株式会社 技術本部 Sansan Engineering Unit Mobile Applicationグループ - 2025年新卒入社 - iOSエンジニア - 趣味 > キャンプ > スノーボード
3. Sansanアプリについて - 「名刺管理から、収益を最大化する」サービス - 名刺や企業情報、営業履歴を一元管理して全社で活用するサービス - Webとモバイルアプリを提供している
4. Sansanアプリについて
5. Liquid Glass - WWDC2025で発表されたAppleの新デザイン素材 - 現在無効化フラグが用意されている - 次期OSメジャーアップデートで無効化フラグが削除される
6. 実際にLiquid Glassを適用してみた
7. タブバーでクラッシュ タップ 💣 開けない
8. タブバーはカスタム実装をしていた カスタムUI
9. なぜカスタムだとクラッシュするのか？
10. UITabBarの階層構造の変化 iOS 17 以前 (フラットな構造) iOS 18 以降 (階層化された構造)
11. 内部構造に依存していたことが原因 旧：フラットな構造 UITabBar ├── _UIBarBackground ├── UITabBarButton (Index 0) ├── UITabBarButton (Index 1) ├── UITabBarButton (Index 2) ├── ... └── UIButton (カスタム) 新：階層化された構造 UITabBar └── _UITabBarPlatterView ├── subviews[0] (コンテナ) ├── subviews[1] (Liquid Lens) └── subviews[2] (コンテナ) └── UIButton (カスタム) ⚠ subviews をインデックス決め打ちで参照していたため、 階層が一段深くなった瞬間に破綻（クラッシュ）した UITabBarButton (Index 0) UITabBarButton (Index 1) UITabBarButton (Index 2) …
12. 修正してアプリを開いて見ると …
13. 今度は、Liquid Lensが迷子
14. 今度は、Liquid Lensが迷子 閉じた時に ここに居て欲しい
15. 案 概要 標準コンポ適 合 HIG準拠 実装工数 学習コスト 案1: 現レイアウト + Liquid Glass 既存カスタムタブバーのままLiquid Glassを適用   M なし 案2: フルカスタムタブ バー UITabBarを使わず完全に自前実装 で既存のUIを再現   L S 案3: TabRoleの活用 TabRole(.search)でカメラボタンを 末尾に配置   M M 案4: カメラボタンの配 置変更 カメラボタンをタブバー外に移動す る構成(例: FAB)   M L 案5: 現レイアウト + タ ブ表示維持 既存レイアウトを維持しつつ正規タ ブとして実装   M S 撮影画面への動線を再設計することに 5つの案を比較することにした
16. 最終有力候補となった 3つの案 案３ TabRoleの活用 案5 案５ 現レイアウト + タブ化 案1 案１ 現レイアウト + LG
17. 判断に迷ったポイント - 案1 タブはアクションの起点にして良いのか？ タブバーをフルスクリーンモーダルで隠してしまってもいいのか？ - 案3 TabRole(.search)を検索以外に使って良いのか？ - 案5 HIG的に問題ないのか？
18. Appleとのセッションを申し込んで聞いてみた
19. - 前提：タブは世界（トップレベルのコンテンツレイヤー）を切り替えるもの - タブボタン＝アクションのトリガーになってはいけない - タブを押した瞬間にモーダルが起動する使い方は HIGに適していない 案1（現レイアウトを維持）について
20. 案1（現レイアウトを維持）について スキャンタブタップ →モーダル表示 “ タブバーは、アクションの実行ではなく ナビゲーションのために使用する。 ” HIGには適していない アクション
21. - Appleの意図 > 「プラットフォーム全体のラーニングカーブを下げるため、あの位置は検索専用として使って ほしい」 - Appleのファーストパーティアプリではこの位置は必ず検索に割り当てられている - 活用したアプリの中には、実装した翌日からトラフィックが 2倍になった事例もある との こと 案3（TabRoleの.searchの利用）について
22. - 結論: HIGの思想とは矛盾しない - タブである場所にアクションボタンが入ると問題 > スキャンタブの中でスキャンに関わる機能が展開されるなら問題ない 案5（現レイアウト + タブ化）について
23. 最終的なタブデザイン
24. まとめ - カスタムUIは、OSアップデートで壊れることがある > OSアップデート時の追従コストを抑えるには、 HIGや標準コンポーネントへの準拠が重要な要素になる > UI選定では、デザイン要件・実装工数なども含めて総合的に判断する
25. 詳しくはブログへ https://buildersbox.corp-sansan.com/entry/202 6/04/03/100000
26. Sansan 技術本部 募集ポジション紹介 https://media.sansan-engineering.com/