iphone-duo-vertical-bars

縦軸に並ぶバー

iPhone Duoのディスプレイは、従来のiPhoneより横長で縦が短くなっています。縦方向のスペースは貴重なため、通常は上部や下部に配置されるコントロールが側面に移動し、親指が届きやすくなります。その左側のコンテンツ領域は遮られず、従来のiPhone画面と同程度の広さを保ちます。

コンポーネントは同じで、軸が異なります。ユーザーがデバイスを開いて内側のディスプレイを横向きにした場合も、配置は一貫しています。横方向のバーが維持されるのは、内側のディスプレイを縦向きにした場合だけです。この場合、コンテンツ用の縦方向のスペースに余裕があります。

オプトイン

両方の要件を満たす必要があります。

1. 最新のSDKを使ってビルドします。 これを行わないと、バーは横方向のままです。

2. ナビゲーションコンテナから提供されるバーを使います。 SwiftUIでは、toolbarモディファイアをNavigationStackまたはNavigationSplitViewと組み合わせます。UIKitでは、独自のバーを管理するUINavigationControllerとUITabBarControllerを推奨します。ビューコントローラーにツールバー項目を設定し、ナビゲーションコントローラーに追加してください。

UIToolbar、UINavigationBar、UITabBarを使ってバーを手作業で作成した場合、そのコンテンツは縦方向のレイアウトでは考慮されません。アプリのバーが横方向のままになる最も一般的な原因はこれです。

項目の配置

ナビゲーション、ツールバー、タブバーのコントロールは、すべて共通の縦方向の領域に配置されます。横方向のバーを90度回転させて縦に積み重ねた状態を想像してください。画面によっては、ツールバー項目、タブ項目、またはその両方が含まれます。

構造上の例外が2つあります。

• スプリットビュー — 詳細列だけが対象になります。他の列の項目は横方向のままです。
• インスペクタ — 展開時に独自の縦方向のバーは表示されません。詳細列にすでにバーがあり、2つあると混乱を招くためです。

シートの配置はディスプレイによって異なります。外側のディスプレイでは、すでにツールバーがあるシートは縦方向に配置されます。内側のディスプレイでは、シートは中央に配置され、項目は横方向のままです。優先配置APIを使ってシートを移動する場合、右側に配置したシートには縦方向のバーが付きますが、左側に配置したシートには付きません。

バーはハードウェアに合わせて配置されるため、右から左へ読む言語でも、物理的に同じ側に表示されます。コンテンツはバーに合わせて調整されますが、バー自体は移動しません。

項目の順序

ツールバーの設定を、次の階層に沿って上から確認してください。

1. 主要なナビゲーション — 戻る、閉じる。ナビゲーションコントローラーを使うと、戻るボタンが自動的に追加されます。独自の戻るボタンや閉じるボタンを使う場合、SwiftUIではcancellationAction配置を指定したToolbarItemを作成します。UIKitではleadingItemGroupsに項目を追加します。
2. 目立たせるアクション — 完了など。SwiftUIではtopBarPinnedTrailing配置を、UIKitではpinnedTrailingGroupを使います。関連する項目は手作業で配置するのではなく、ToolbarItemPlacementのセマンティクスを使ってグループ化します。
3. その他すべて — 元のグループ分けを維持します。上部と下部の配置が1つのバーに統合された場合も、縦方向のスペーサーで区切られます。

すべての向きでバーが縦方向に配置されるわけではないため、配置の一貫性を保ってください。デバイスを開くたびに、アクションの場所をユーザーに覚え直させてはいけません。

シンボルまたはテキスト

ここで仕上がりの良し悪しが大きく左右されます。

横方向のバーでは、項目の高さは固定され、幅は柔軟に変わります。縦方向のバーではその逆で、幅は固定され、高さは柔軟に変わります。幅が狭く高さがある場合は、シンボルのみの表示が強く適しています。

システムは、指定したアイコンとタイトルから、すでに表示形式を選択しています。バーに表示されるときはアイコン、アイコンがないときはテキスト、項目がオーバーフローメニューに移ると両方が表示されます。この動作は変わりません。新たに加わったのは、縦方向の配置に適しているかどうかもシステムが判断することです。アイコンのある項目は縦方向に、テキストのみの項目は横方向に配置されます。

そのため、画像が使われると予想する場合でも、タイトルと画像の両方を必ず指定してください。SwiftUI の Label、または対応する UIBarButtonItem のプロパティを使用します。オーバーフローメニューや展開表示に切り替わったとき、システムが代わりに使うのがタイトルです。

軸の動作をオーバーライドする

通常、推測は適切です。そうでない場合は、SwiftUI では ToolbarItemAxisBehavior を受け取る .axisBehavior(_:) モディファイア、UIKit では UIBarButtonItem.AxisBehavior 型の UIBarButtonItem.axisBehavior を使ってオーバーライドします。

項目がシンボル表示とテキスト表示の間で切り替わる場合は、横方向に固定してください。たとえば、「完了」に変わる編集ボタンです。シンボルは縦方向のバーに配置できても、テキスト表示は配置できません。また、軸が切り替わる項目は唐突に感じられます。システムの「編集」ボタンはすでにこの動作に対応していますが、同等のカスタムボタンには横方向のみの動作を指定する必要があります。関連する項目は、同じ軸にそろえることを原則にしてください。

通常は横方向に固定されるカスタムビューでも、適切な縦方向の表示形式がある場合は、縦方向を許可してください。

テキストを減らして、縦方向に配置できる項目を増やす

タイトルのみの項目や、テキストと画像を組み合わせたカスタムビューは最小限にしてください。多くの場合、シンボルのほうが適しています。たとえば、アイコンの横にインラインで表示される数は、シンボルのバッジにできます。iOS 26 のバッジ API を使えば、すべてのデバイスで標準的な表示になり、テキストとシンボルが混在する項目をシンボルのみの項目にできます。

判断基準は、テキストがシンボルを補強しているのか、それともシンボルでは伝えられない情報を担っているのかです。補足的なテキストは省けます。一方、現在の合計金額を表示するカートボタンのテキストは省けません。その項目は横方向のままにしてください。

キーボードアクセサリバーはキーボードに固定されます。縦方向に移動することはありません。

カスタムビュー

表示を許可されたカスタムビューは、バーの固定幅に収めるか、単独で縦向きにレイアウトする必要があります。サイズを見直してください。コントロールパネルなら、縦向きのときにラベルを非表示にして少し縮小し、スペースを確保できるかもしれません。

表示を切り替えるには、toolbarVerticalEdge を読み取ります（SwiftUI では環境値、UIKit ではトレイトです）。コンテンツビューからも、項目自身のビュー内からも読み取れます。

意味をよく確認してください。逆に捉えやすいためです。これは HorizontalEdge? で、**現在のコンテキストでシステムが縦向きのバーをどちらの端に配置するかを示します。縦向きのバーが実際に表示されているかどうかは関係ありません。**つまり、「今、自分の項目が縦向きに並んでいるか」を示すフラグではありません。「ここに縦向きのバーがある場合、こちら側に配置される」という意味であり、カスタムバーや端に固定する UI をシステムの配置に合わせるために必要な情報です。

知っておくべき動作が2つあります。縦向きのバーには、デフォルトではスクロール端のエフェクトがありません。一方、「透明度を下げる」が有効な場合は背景が表示されるため、どちらの場合でもカスタムコンテンツが読みやすい状態を保ってください。また、柔軟なスペーサーは縦軸ではゼロに縮みますが、固定スペーサーは最小サイズを保ちます。ただし、アプリではどちらの軸でもバーの間隔を手動で追加しないでください。

**間隔を空けるのではなく、グループ化する。**スペーサーを手動で挿入するのではなく、項目同士の関係を表現してください。SwiftUI では ToolbarItemGroup、UIKit では UIBarButtonItemGroup を使います。グループは隣接するグループとの間隔を自動調整し、利用可能なスペースの変化に応じて再配置されます。このデバイスでは、スペースが絶えず変化します。必要なときに流動的であるべき間隔を、手動で固定してはいけません。

**操作対象の近くにコントロールを置く。**末尾以外のコンテンツ領域に属するコントロールは、サイドバーに移さず、その領域に配置してください。コントロールがそのペインに適用されることを伝えるのは、近くにあることです。メールのようなレイアウトでは、メッセージリストを操作するコントロールは、共有の縦向きバーではなく、リストの上に配置してください。共有の縦向きバーに置くと、開いているメッセージに適用されるように見えてしまいます。

オーバーフロー

外側ディスプレイは横向きのときに縦方向のスペースが少なく、キーボードや固定表示のピクチャ・イン・ピクチャなど、競合する UI によってさらに狭くなるため、ここでは項目がオーバーフローしやすくなります。

まず、どちらを優先して残すか決めます。ツールバー項目か、タブバーか。

• ナビゲーション主体の画面では、ツールバーを先に圧縮して、主要な移動先に引き続きアクセスできるようにします。これがデフォルトです。
• タスク主体の画面では、タブバーを先に圧縮して、頻繁に使うアクションを残します。

ツールバーの圧縮動作 API を使って、ビューごとに設定します。

**システムのオーバーフローにまとめる。**アプリに独自のオーバーフローメニューがある場合は、そのアクションをシステム管理のメニューに統合してください。SwiftUI では ToolbarOverflowMenu、UIKit では UINavigationItem.additionalOverflowItems を使います。省略記号の記号はオーバーフロー専用とし、ほかのメニューには、他のプラットフォームの慣習を取り入れず、それぞれ別の記号を使ってください。

**次に、優先度を設定する。**デフォルトでは、項目は下から上に向かってオーバーフローします。表示優先度を割り当てて、折りたたみの順序を制御します。SwiftUI では ToolbarItemVisibilityPriority、UIKit では UIBarButtonItemVisibilityPriority を使います。まずグループ単位で優先順位を設定し、さらに細かく制御したい場合はグループ内でも設定してください。

優先度を高くすべき項目が2種類あります。作成や新しいメモなど、常に使われるアクションと、バッジ付きの項目のように、非表示になると役に立たなくなるステータスを伝えるコントロールです。

無効にする場合

基本的には、無効にしないでください。 側面に配置されたコントロールは、このデバイスを特徴づけるパターンです。Apple のガイダンスでも、通常は配置を変更しないよう明確に示されています。コントロールの位置がなじみ深ければ、ユーザーはアプリを起動してすぐに操作方法がわかります。配置を変更するアプリが増えるたびに、その利点が少しずつ損なわれます。

正当な例外は限られています。

• バーをまったく必要としないインターフェイス — ディスプレイ全体の幅を使う、電卓のようなレイアウトです。視覚的で没入感のあるスクロールしないインターフェイスであれば適しています。ただし、Dynamic Island やステータスバーと重ならないようにしてください。スクロール可能なコンテンツにはインセットを設け、背景やヘッダーだけを全幅にする組み合わせも可能です。
• コントロールの少ないシート。閉じるボタンが 1 つだけなら、幅を譲るほどではありません。

無効にするには、toolbarVerticalBehavior（SwiftUI）または preferredVerticalBarBehavior（UIKit）を使用します。シートで外側のディスプレイ上のバーを無効にすると、前面カメラの手前で表示が止まり、ステータスバーの位置が変わります。

チェックリスト

1. 最新の SDK を使って再ビルドします。
2. 独自実装のバーを、コンテナが提供するバーに置き換えます。
3. 各項目にタイトルと画像の両方を設定します。
4. 項目を、ナビゲーション、目立たせるアクション、その他の順に並べます。
5. テキストが補足情報の場合は、テキストとシンボルの組み合わせを、バッジ付きのシンボルに置き換えます。
6. シンボルとテキストが切り替わる項目には、.axisBehavior(_:) / UIBarButtonItem.axisBehavior を適用します。
7. ビューごとに、ツールバー優先またはタブバー優先の圧縮方法を選択します。
8. カスタムのオーバーフローメニューをシステムメニューにまとめ、visibilityPriority を設定します。
9. Split View の両側も含め、Device Hub ですべての表示状態を確認します。