Appleは開発者向けドキュメント「Designing for iPhone Duo」を公開した。これは、iPhone Duoの画面操作(UI)がどのような考え方とルールで設計されているのかに焦点を当ててまとめたものだ。
2つのディスプレイとヒンジで構成されるiPhone Duo
iPhone Duoは、閉じた状態の「アウターディスプレイ」と開いた状態の「インナーディスプレイ」、そしてそれらをつなぐ中央のヒンジ(折り目)で構成されている。ユーザーは本のように半開きにして持ったり、卓上に立てかけたりと、さまざまな姿勢(デバイスポーズ)で端末を使用する。
AppleのUI設計指針では、姿勢ごとに個別の画面デザインを作るのではなく、画面枠の規格(サイズクラス)を活用してレイアウトを自動的に拡大・縮小させる手法を求めている。アウター画面には「コンパクト枠」、インナー画面には「レギュラー枠」の設計が割り当てられ、画面の形が変わっても既存の配置が伸び縮みしてフィットする。これにより、どのような持ち方をしてもアプリの機能や操作感が損なわれない。
画面サイズに応じた表示の深さと予約領域
画面サイズや持ち方が変わっても、アプリ内で提供される機能や情報の優先順位は統一される。画面が開いて広くなったからといって操作方法が変わるのではなく、画面の広さに応じて表示される情報の深さ(階層)が拡張される仕組みだ。
例えば「メール」アプリの場合、閉じたアウターディスプレイでは「メール一覧」か「本文」のいずれか一方を画面いっぱいに表示する。一方、端末を開いてインナーディスプレイに表示すると、左側に一覧、右側に本文を並べた2列表示へと自然に広がる。ユーザーは開閉どちらの状態でも同じ感覚でメール処理を行える。
iPhone Duoの画面内には、表示内容が隠れないように保護される「予約領域」と呼ばれる特別なエリアが定義されている。
- 外側カメラの領域:アウター画面の角に常に存在し、通知やライブアクティビティに応じてDynamic Islandと連動して領域を広げる
- 内側カメラの領域:インナー画面の下に配置されており、カメラが作動していないときは露出しない。カメラ機能が有効になったときのみ、周囲のUI要素が退避してカメラの存在を示す
- 中央の折りたたみ領域:画面を半開きにした際、折り目部分自体が一時的な予約領域となる。アラート(警告画面)やメニューは折り目を避けて表示され、画面分割(Split View)でも左右の表示枠や余白がヒンジに合わせて均等に自動補正される
2つの画面要素を自動で整理するレイアウト構造
主要な画面と補助的な画面を整理し、折りたたみに対応させるため、Appleは2種類のレイアウト構造(アレンジメントビュー)を用意している。
- スプリット配置:画面が横長の場合は左右に、縦長の場合は上下に画面を2分割する
- オーバーレイ配置:平らな状態では2つの要素を前後に重ねて表示し、画面を半開きに曲げると左右に振り分けて表示する
画面を折り曲げた際もボタンや表示が急激に跳び移ったり消えたりせず、ユーザーが混乱しないよう最小限の位置補正にとどめる設計が講じられている。
操作ボタンを画面の端に配置、2分割表示時も分かりやすく
iPhone DuoのUIにおける最も大きな変更点が、操作ボタンの配置場所だ。従来のiPhoneで画面の上下にあった「ツールバー」「タブバー」「Dynamic Island」「ステータスバー」などの要素が、すべて画面の「側面(縦枠)」へ移動して配置される。
ボタン類を縦に並べることで、コンテンツを表示するための縦方向のスペースが最大限に解放される。2つのアプリを並べるSplit View時も、各アプリのボタンが外側の位置に配置されるため、画面中央(ヒンジ付近)がすっきりと保たれる。
なお、例外としてインナー画面を「縦向き」に保持した際のみ、縦方向に十分な長さの余裕があるため、従来通り画面上下に横向きのボタン列が配置される。
Appleが「Designing for iPhone Duo」で提示しているUI設計のゴールは、ユーザーに「今どのような姿勢で端末を持っているか」を意識させないことだ。画面サイズが変わればレイアウトが自然に伸び縮みする。カメラや折り目がある場所をシステムが自動で避けて文字やボタンを配置する。ボタンを側面に集約して画面の縦幅を広く使う。これらの明確な設計ルールによって、開発者が作ったアプリがどの画面・どの姿勢でも直感的かつシームレスに動くよう考慮されている。