Slide 1

Slide 1 text

技術本部 Sansan Engineering Unit Mobile Applicationグループ 盛重 晴登 カスタムタブバーを持つ アプリをLiquid Glass対応する

Slide 2

Slide 2 text

盛重 晴登 Sansan株式会社 技術本部 Sansan Engineering Unit Mobile Applicationグループ - 2025年新卒入社 - iOSエンジニア - 趣味 > キャンプ > スノーボード

Slide 3

Slide 3 text

Sansanアプリについて - 「名刺管理から、収益を最大化する」サービス - 名刺や企業情報、営業履歴を一元管理して全社で活用するサービス - Webとモバイルアプリを提供している

Slide 4

Slide 4 text

Sansanアプリについて

Slide 5

Slide 5 text

Liquid Glass - WWDC2025で発表されたAppleの新デザイン素材 - 現在無効化フラグが用意されている - 次期OSメジャーアップデートで無効化フラグが削除される

Slide 6

Slide 6 text

実際にLiquid Glassを適用してみた

Slide 7

Slide 7 text

タブバーでクラッシュ タップ 💣 開けない

Slide 8

Slide 8 text

タブバーはカスタム実装をしていた カスタムUI

Slide 9

Slide 9 text

なぜカスタムだとクラッシュするのか?

Slide 10

Slide 10 text

UITabBarの階層構造の変化 iOS 17 以前 (フラットな構造) iOS 18 以降 (階層化された構造)

Slide 11

Slide 11 text

内部構造に依存していたことが原因 旧:フラットな構造 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) …

Slide 12

Slide 12 text

修正してアプリを開いて見ると …

Slide 13

Slide 13 text

今度は、Liquid Lensが迷子

Slide 14

Slide 14 text

今度は、Liquid Lensが迷子 閉じた時に ここに居て欲しい

Slide 15

Slide 15 text

案 概要 標準コンポ適 合 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つの案を比較することにした

Slide 16

Slide 16 text

最終有力候補となった 3つの案 案3 TabRoleの活用 案5 案5 現レイアウト + タブ化 案1 案1 現レイアウト + LG

Slide 17

Slide 17 text

判断に迷ったポイント - 案1 タブはアクションの起点にして良いのか? タブバーをフルスクリーンモーダルで隠してしまってもいいのか? - 案3 TabRole(.search)を検索以外に使って良いのか? - 案5 HIG的に問題ないのか?

Slide 18

Slide 18 text

Appleとのセッションを申し込んで聞いてみた

Slide 19

Slide 19 text

- 前提:タブは世界(トップレベルのコンテンツレイヤー)を切り替えるもの - タブボタン=アクションのトリガーになってはいけない - タブを押した瞬間にモーダルが起動する使い方は HIGに適していない 案1(現レイアウトを維持)について

Slide 20

Slide 20 text

案1(現レイアウトを維持)について スキャンタブタップ →モーダル表示 “ タブバーは、アクションの実行ではなく ナビゲーションのために使用する。 ” HIGには適していない アクション

Slide 21

Slide 21 text

- Appleの意図 > 「プラットフォーム全体のラーニングカーブを下げるため、あの位置は検索専用として使って ほしい」 - Appleのファーストパーティアプリではこの位置は必ず検索に割り当てられている - 活用したアプリの中には、実装した翌日からトラフィックが 2倍になった事例もある との こと 案3(TabRoleの.searchの利用)について

Slide 22

Slide 22 text

- 結論: HIGの思想とは矛盾しない - タブである場所にアクションボタンが入ると問題 > スキャンタブの中でスキャンに関わる機能が展開されるなら問題ない 案5(現レイアウト + タブ化)について

Slide 23

Slide 23 text

最終的なタブデザイン

Slide 24

Slide 24 text

まとめ - カスタムUIは、OSアップデートで壊れることがある > OSアップデート時の追従コストを抑えるには、 HIGや標準コンポーネントへの準拠が重要な要素になる > UI選定では、デザイン要件・実装工数なども含めて総合的に判断する

Slide 25

Slide 25 text

詳しくはブログへ https://buildersbox.corp-sansan.com/entry/202 6/04/03/100000

Slide 26

Slide 26 text

Sansan 技術本部 募集ポジション紹介 https://media.sansan-engineering.com/

Slide 27

Slide 27 text

No content