5月の半ば、iPad mini を机の右側に置いて、Rork で立ち上げた壁紙アプリを「iPad で開いたときに恥ずかしくない状態」へ詰め直す作業を始めました。アーティスト・クリエイターの廣川政樹です。2014年から iPhone 中心に壁紙アプリを運用してきて、累計5,000万 DL という規模になっても iPad は「あとで考える」枠に置きっぱなしでした。今回はその後回しにしてきた iPad 対応を、Rork 経由のアプリで2週間かけて詰め直した記録を残します。
後回しにしてきた iPad を、なぜ今になって触り直したか
これまで iPad 対応は「対応していないわけではないけれど、本気で詰めていない」という曖昧な状態でした。SupportedInterfaceOrientations だけ揃えて、UI は iPhone のレイアウトを縦に引き伸ばしただけ、というアプリも正直なところ複数あります。
きっかけは、Rork で新規に立ち上げた壁紙アプリの App Store Connect 上の指標を眺めていたときに、iPad の起動セッションが思ったより多いことに気づいたことでした。iPhone 中心の運用感覚で「iPad は5%以下」と決めつけていましたが、新作の起動セッション比率は12.8%まで上がっており、新規ダウンロード比率も8.4%ありました。
5,000万 DL の中で iPad の比率はずっと数字で見てこなかった、という単純な反省です。Rork 経由で立ち上げたアプリは Expo Router 構成で iPad ビルドも当然のように通るのですが、「通っている」と「使える」の間には2週間分の作業がありました。
Rork が初期に吐く iPad レイアウトの状態
まず Rork 側がどこまで iPad を意識して吐いてくれるか、を素直に確認するところから始めました。
立ち上げ直後の状態でも、iPad 上で起動エラーは起きません。Expo の SDK が iPad を対象に含む形でビルドを通してくれるので、ストアに出すだけなら困らない状態にはなっています。ただ、画面を実機で開くと「縦長 iPhone を引き伸ばしたレイアウト」がそのまま出てきました。
具体的な所感としては次のような状態です。
- ヒーロー画像は画面幅いっぱいに広がるが、上下に余白が増えるだけで構図が間延びする
- 壁紙のサムネイルグリッドは2列のまま、1枚あたりが iPhone 12 Pro の縦サイズに迫る大きさになる
- カテゴリのタブバーが画面下に張り付いたまま、横幅が広がる分だけ「タブの間隔が広いだけのバー」になる
- AdMob のバナーが想定外の挙動になる（後述）
Rork のテンプレートを責めたい話ではなく、新規立ち上げの段階で全デバイスを完璧に詰めるのは現実的ではない、という当たり前の前提があります。Rork は iPhone と Android のクロスプラットフォームを最短で立ち上げる役割を果たしてくれていて、iPad のチューニングは別工程として置く方が、私の運用の中では無理がありませんでした。
Safe Area と Dynamic Type で最初に詰まったこと
iPad 対応の最初の壁が、Safe Area の取り扱いと Dynamic Type の刻みの違いでした。
iPad の Safe Area は iPhone のそれと感覚がまったく違います。特に M2 以降の iPad mini や iPad Air を横向きで使う読者が一定数いて、横向きにすると Home Indicator の余白が左右に来ます。Rork が吐いた状態だと、横向きで開くと壁紙のメインビジュアルが Home Indicator にわずかに重なる現象がありました。
私が最初に当てた対処は、SafeAreaProvider を最上位に置き直したうえで、ヒーロー画像のコンテナだけ useSafeAreaInsets から left/right の inset を読み取って padding に流す、というやり方です。top/bottom だけ気にして横向きの inset を読まない実装が初期コードに残っていたので、ここを直すだけで横向き iPad の見栄えがかなり整いました。
Dynamic Type の側では、iOS の「設定 → アクセシビリティ → 文字サイズ」を最大に振った状態で開くと、カテゴリタブのラベルが2行に折り返してレイアウトが崩れる現象が起きました。numberOfLines={1} と adjustsFontSizeToFit を明示しないと、iPad の横長スペースに対して文字だけが太く高くなって不格好になります。iPhone でも起きる現象ですが、iPad のほうが画面が広い分、崩れたときに目立ちます。
AdMob のアダプティブバナーが iPad で暴れた話
ここがこの2週間でいちばん時間を吸われた箇所でした。
私は AdMob のアダプティブバナーを「画面幅に応じて適切な高さで返ってくる便利な広告」として頼り切っていました。iPhone では現在の運用でも安定して効いていて、月の AdMob 収益のうち相当部分がバナーから来ています。ところが iPad で同じアダプティブバナーを呼び出すと、想定の倍近い高さ（90pt 前後ではなく 150pt 近く）になり、画面下の操作領域に食い込む状態が出ました。
公式仕様としては正しい挙動です。アダプティブバナーはコンテナ幅から適切な高さを返してくる仕様なので、iPad の画面幅に合わせて高さも大きくなります。ただ、壁紙アプリの場合は「画面の主役は壁紙そのもの」であって、広告が目立ちすぎると体験を壊します。
このときの対処は2段階に分けました。
- iPad で広告を全画面幅で表示するのをやめて、コンテナ幅を 728pt（タブレット向けの典型値）に固定し、左右にスペーサーを入れる
- それでも下端に張り付きすぎないよう、
bottomの Safe Area inset に加えて 8pt の余白を別途確保する
これで iPad のバナーが「タブレット用の大判バナーとして自然に置かれている」状態に落ち着きました。eCPM は iPhone のアダプティブバナーと比べて落ちますが、その代わりに離脱率が iPad で安定しました。離脱率の数字としては、iPad の Day 1 リテンションが対応前の 21.3% から、対応後3週間で 28.1% まで回復しています。広告体験の調整が「広告で稼ぐためではなく、続けて使ってもらうため」に効いた、という肌感覚に近い数字です。
グリッド表示の解像感で気づいたこと
iPad 対応で次にきつかったのが、壁紙サムネイルのグリッド表示でした。
iPhone の時点では2列グリッドで違和感なく動いていたのですが、iPad で2列のまま開くと、1枚あたりが大きくなりすぎてリストとしての一覧性を失います。私が試したのは画面幅で列数を切り替える素直な実装で、640pt 以上なら3列、900pt 以上なら4列、というブレークポイントを置きました。
ここで困ったのが、サーバ側に置いてある壁紙の画像解像度です。iPhone の2列を前提に最適化してきた素材は、横幅が 1290px 程度のものが多く、これを iPad の4列レイアウトで拡大表示すると、ぱっと見でも解像が足りないと分かります。
expo-image の contentFit と transition を整えただけでは解決しなくて、結局のところ既存の壁紙アセットのうち主要 240 枚分を 2x の高解像度版で再書き出しすることにしました。手作業ではなく、Mac の Automator + sips を組み合わせたバッチで一晩流し、翌朝に Cloudflare R2 に置き直す段取りです。
ここで宮大工だった両祖父のことを少し思い出します。父方の祖父は法隆寺の修復に関わっていて、母方の祖父は地元の寺社建築を生涯やっていました。子どもの頃に祖父の作業場で見ていたのは「同じ部材でも、見える側と見えない側を作り分ける」という当たり前のことを誰も省略しない態度でした。iPad の表示まで含めて素材を作り直すかどうかは、その作り分けの感覚と地続きだと感じます。iPhone でしか見えなかった部分の粗さを、iPad に持ち込まずに通すのは、自分の中で気持ちが良くない仕事になります。
横向き対応で改めて見直したこと
iPad の場合、ユーザーが横向きで開く割合が iPhone と比べて格段に上がります。新作アプリで計測した範囲だと、iPad の起動セッションのうち横向きが32.8%。iPhone の横向きが3.4%だったのと比べると、対応すべき優先度がまったく違います。
私は壁紙アプリの場合「縦向きで使うのが前提」と長年思い込んでいて、横向き対応をほぼ後回しにしてきました。今回 Rork のアプリで初めて、横向きを「対応するか、明示的に切るか」を本気で考えました。
結論としては、壁紙アプリのプレビュー画面は縦固定のままにして、それ以外の画面（一覧・カテゴリ・お気に入り・設定）だけ横向きを許容する形に揃えました。Expo の orientation 設定だけでは画面ごとに切り替えられないため、expo-screen-orientation を入れて、画面遷移時にロックしたい向きをコールする、という地味な実装に落ち着きました。
2週間運用してみての所感
iPad 対応を本気で詰めた2週間で、いちばん気づいたのは「iPad 用に作っているという気持ちで作業すると、結果として iPhone のレイアウトも改善する」という単純な事実です。
iPhone 側でずっと放置していた Dynamic Type の崩れも、横向き Safe Area の手当ても、AdMob バナーの上にある操作領域の窮屈さも、すべて iPad で見たときに違和感として浮かび上がってきました。iPhone のサイズで見ていると「気にならない範囲」に流れていた粗さが、画面が広くなった瞬間に見えるようになります。
定量的な変化としては、対応した3週間で iPad の Day 7 リテンションが 11.6% から 18.4% まで戻りました。AdMob 収益は iPad 全体で見ると微増（+6%）に留まりましたが、レビューの平均スコアが iPad ユーザー由来のものに限ると 3.9 から 4.4 まで上がっています。レビューの本数自体は2週間で14件と多くはないので統計的な意味は強くないですが、運用の手応えとしては悪くありません。
これから取り組むこと
残っている宿題はまだ複数あります。
- Stage Manager 環境での挙動を、所有している iPad Pro M1 で詰める
- iPad の Sidebar Navigation を採用して、横向きの広い領域を「縦のカードリスト＋横のプレビュー」構成にする
- iPad 向けのキーボードショートカット対応（壁紙のカテゴリ切替を矢印キーでできるようにする）
特に Stage Manager は、私自身がほとんど使っていなかったのですが、新作の iPad ユーザーの一部から「Stage Manager で他のアプリと並べたときに広告が変な位置に出る」という連絡があり、優先度を上げる予定です。
2014年から12年続けてきて、iPad は長らく iPhone のおまけのような扱いをしてきました。Rork で立ち上げたアプリでようやく iPad に手を入れる踏み切りができたのは、Rork が iPhone と Android のクロスプラットフォームを最短で立ち上げてくれたおかげで、私の側に「iPad だけを詰める時間」が初めて生まれたから、という側面が大きい気がします。
実装の参考になれば幸いです。同じように iPad 対応を後回しにしてきた個人開発の方の参考になれば嬉しいです。