症状 → 最速の解決策
画面幅や端末名を固定したiOS画面が崩れるなら、折りたたみiPhoneの発表を待たずに、固定値を外してセーフエリア、サイズ特性、自動レイアウト、状態復元を先に検証してください。噂されている解像度やヒンジ位置に合わせた専用画面は、現時点では作らない方が安全です。
この記事は、固定幅・絶対座標のUIを持つiOS開発者、入力フォーム・動画・編集画面を担当するプロダクトチーム、そして折りたたみ形態の互換性テストを準備するQA担当者向けです。
※最終更新:2026年9月5日。AppleのHuman Interface Guidelines、SwiftUI、UIKitの公開ドキュメントを基準に内容を確認しています。Appleは同日時点で、折りたたみiPhoneの製品名、画面形状、専用APIを確認していません。
まず固定サイズの前提を見つけて切り離す
折りたたみiPhone対応で最初に確認するのは、折りたたみ機構ではなく、既存コードが「画面はこの幅で表示される」と思い込んでいないかです。端末名による分岐、固定幅のコンテナ、スクリーンショットのピクセル数を基準にした余白、絶対座標で配置したボタンは、利用可能な領域が変わった時点で故障候補になります。
Appleのレイアウト指針は、端末の外形そのものではなく、利用可能なスペース、方向、サイズ特性などの変化に対応する考え方を示しています。レイアウトとサイズ変化に関する公式指針を基準に、次のようにコードレビューを進めてください。
| 判定 | 問題になりやすい実装 | 改修方針 |
|---|---|---|
| 要修正 | 端末名や画面幅の完全一致でレイアウトを分岐する | 利用可能な幅、サイズ特性、親コンテナの制約で判断する |
| 要確認 | 固定幅のカード、入力欄、ツールバーを横方向に並べる | 最小幅と優先順位を決め、狭い場合は縦積みや折りたたみに切り替える |
| 比較的安全 | Auto Layoutの制約、SwiftUIの自動レイアウト、内容に応じたコンテナ | 実際のウインドウサイズを変えた回帰テストを追加する |
iOSの可変画面サイズでは、どのようにレイアウトすればよいですか。
SwiftUIでは、親から渡された利用可能領域に応じて構造を変える自適応レイアウトを優先します。候補のビューから表示可能なものを選ぶ必要がある場合は、Appleが提供する ViewThatFitsのような仕組みを検討できます。UIKitでは、制約の優先度、traitCollection、コンテナビューの責務を整理し、画面幅の数値を直接条件にしない構成にします。
次にセーフエリアと裁切を画面単位で確認する
ナビゲーションバー、ツールバー、全画面動画、フローティングボタン、下部の確定操作は、表示領域の端に近いほど確認が必要です。噂のヒンジやカメラ開口部の位置を予測して空白を追加するのではなく、OSが提供するセーフエリアを利用してください。
UIKitでは、セーフエリアが変化した際に呼ばれる safeAreaInsetsDidChange()を、固定パディングの代替として確認できます。動画プレーヤーやカメラ画面では、表示領域の変化後に再計算される制約と、再生・撮影状態を別々に扱うことが重要です。
確認手順は次の通りです。
- 画面の主要操作を、狭い横幅、広い横幅、縦向き、横向きで表示します。
- 上部のタイトル、戻る操作、下部の確定ボタンがセーフエリア内に収まるか確認します。
- フローティング要素が本文、キーボード、動画コントロールを覆わないか調べます。
- 画面回転やウインドウ変更後に、古い制約や余白が残っていないか確認します。
- アクセシビリティの文字サイズを変更し、単なる見た目の余白ではなく操作可能領域が保たれるか検証します。
文字サイズ、コントラスト、操作対象の扱いは、Appleのアクセシビリティ設計ガイドラインとも合わせて確認してください。横幅が増えたからといって、情報量だけを増やすと、文字拡大時に別の裁切が発生します。
画面を拡大せず、狭い表示と広い表示で情報を組み替える
可変サイズへの対応は、狭い画面をそのまま拡大する作業ではありません。リストと詳細を同時に出せる場合でも、編集画面では入力欄と保存操作を優先し、動画画面では再生領域と重要な操作を優先するなど、タスクごとの情報順位を決める必要があります。
| 画面の種類 | 狭い利用可能領域 | 広い利用可能領域 | 先に検証する状態 |
|---|---|---|---|
| リスト・詳細 | 一覧から詳細へ遷移 | 一覧と詳細を同時表示 | 選択中の項目、戻る階層 |
| 編集フォーム | 項目を縦に並べる | 関連項目を列として整理 | 未保存入力、バリデーション |
| 動画・メディア | 再生を中心に操作を集約 | 再生と補助情報を併置 | 再生位置、音声、全画面状態 |
| 管理画面 | 重要操作だけを表示 | サイドバーや補助情報を追加 | フィルター、スクロール位置 |
固定画面幅のiOS UIは、どこから直せばよいですか。
まず、レイアウト定数をすべて書き換えるのではなく、画面を「コンテンツ」「操作」「状態」に分解します。コンテンツは自動レイアウト、操作は優先順位、状態はビューの外側で保持する設計に分けると、サイズ変更による再構築の影響を限定できます。
SwiftUIでは、ビューの表示条件と編集データを同じローカル状態に詰め込まないでください。UIKitでも、ビューコントローラーが再生成されても復元できるよう、ナビゲーション階層や編集中の値を適切な所有者に移します。
サイズ変更で消える状態を先に記録する
折りたたみや展開に近い表示変化で最も困るのは、レイアウトの崩れよりも入力内容や作業位置の消失です。編集内容、スクロール位置、動画の再生位置、選択中のフィルター、ナビゲーション階層を、画面の大きさと同じ変数で管理していないか確認してください。
折りたたみや展開の途中でページ状態を失わないためには、何を保存しますか。
画面の再描画で作り直してよい表示状態と、ユーザーの作業として残すべき状態を分けます。SwiftUIの SceneStorage はシーンに紐づく状態を扱うための仕組みとして、UIKitにはアプリ状態の保存と復元を扱う公式手順があります。SwiftUIのSceneStorageとUIKitの状態復元を参照し、保存対象と復元タイミングを定義してください。
優先して記録する項目は次の通りです。
- 入力途中の値と、未保存であることを示すフラグ
- 現在選択している項目、フィルター、並び順
- スクロール位置やページ番号
- 動画・音声の再生位置と再生状態
- ナビゲーションの階層、モーダル表示の有無
- 一時的な通信要求が完了済みかどうか
ここでの注意点は、状態を保存するたびに通信や重い処理を実行しないことです。サイズ変化、バックグラウンド移行、画面再構築が近いタイミングで発生しても、同じ要求を重複実行しない設計にしてください。
キーボード、メディア、バックグラウンドを組み合わせて再現する
単独の画面回転テストでは、実際の故障を見落とします。入力中にキーボードが表示され、その直後に表示領域が変わり、さらにアプリがバックグラウンドへ移行する流れを一つのシナリオとして再現してください。
UIKitでは、キーボードのフレーム変化を通知する keyboardWillChangeFrameNotificationを使う処理が、セーフエリアやスクロール調整と二重になっていないか確認します。SwiftUIでは、シーンの状態変化を scenePhaseと組み合わせ、バックグラウンド移行時に未保存データを確実に扱えるか見ます。
次の順番で実行すると、再現条件を記録しやすくなります。
- フォームに複数項目を入力し、キーボードを表示します。
- 表示領域を変更し、入力欄、確定ボタン、エラー表示の位置を確認します。
- その状態で縦横を切り替え、入力値とフォーカスが残るか見ます。
- 動画再生、カメラ呼び出し、モーダル表示を同じ画面で試します。
- バックグラウンドへ移行してから復帰し、重複要求、画面の再構築、未保存内容の消失を記録します。
- 同じ操作を自動化し、失敗時の画面画像と状態値を保存します。
折りたたみiPhoneの実機がない段階で受け入れ条件を作る
折りたたみiPhoneの実機がなくても、どこまで先行対応できますか。
現在の開発環境で変更可能なウインドウサイズ、複数の既存画面サイズ、縦横切り替え、自動化された画面画像比較を組み合わせれば、固定幅や裁切、状態消失の多くは先に見つけられます。実機が登場した後に追加で確認すべきなのは、ヒンジ形状、触覚領域、専用ジェスチャー、性能、OS固有の表示挙動です。
受け入れ条件は、次のように「端末名」ではなく「状態と結果」で書きます。
| テスト条件 | 合格条件 | 失敗時の見直し先 |
|---|---|---|
| 狭い幅から広い幅へ変更 | 入力値、選択項目、階層が維持される | 状態所有者とビュー再生成 |
| 広い幅から狭い幅へ変更 | 主要操作が隠れず、情報が優先順位どおり整理される | 固定幅、制約、表示条件 |
| キーボード表示中に変更 | 入力欄と確定操作が操作可能なまま | セーフエリアとキーボード処理 |
| 動画再生中に変更 | 再生位置と音声状態が意図せず初期化されない | メディア状態と画面ライフサイクル |
| バックグラウンド復帰 | 未保存内容を失わず、要求を重複させない | SceneStorage、状態復元、要求管理 |
実機が届く前に、チームの注文設定と利用条件の確認ページで必要な環境条件を整理しておくと、後から端末を追加する際にも、単なる画面確認ではなく同じ受け入れ条件で比較できます。自動化した画面検証や複数サイズの運用で詰まった場合は、Macstripeのヘルプセンターで利用方法を確認してください。
いまの構成とMac環境を比較して検証計画を決める
手元の単一端末だけで確認する方法は、狭い幅、広い幅、バックグラウンド復帰を同じ条件で繰り返しにくく、画面画像の保存やSDK違いの切り分けにも手間がかかります。仮想的な折りたたみ端末用分岐を先に作る方法も、未確認の画面寸法や専用APIに依存するため、仕様変更時にコードを捨てる可能性があります。
一方、MacstripeのMac環境を一時的な検証環境として使えば、既存のXcodeプロジェクト、シミュレーター、画面画像の自動化をまとめて扱う運用を組みやすくなります。ただし、長期的に同じ負荷で開発するチームや、物理的なセンサー・専用タッチ領域・実機カメラの確認が中心のチームでは、自社のMacと実機を継続保有する方が適しています。
折りたたみiPhoneの仕様が確定していない今は、噂の寸法に合わせて専用画面を作るより、可変サイズ回帰、セーフエリア確認、状態復元、自動化された画面比較を先に実行してください。実機を含む並行検証が必要になった段階でMacstripeのMac環境を一時的に組み合わせれば、購入前の検証や短期のリリース前確認にも対応しやすくなります。