「iPhone Duo」は閉じても開いても迷わず使える Appleが提示するUIの設計思想

[金子麟太郎，ITmedia]

　Appleは開発者向けドキュメント「Designing for iPhone Duo」を公開している。これは、「iPhone Duoの画面操作（UI）がどのような思想とルールで設計されているのか」に焦点を絞ってまとめたものだ。

どんな持ち方でも操作感を損なわないよう配慮

　このドキュメントでは、折りたたみ画面を持つiPhone Duo上でアプリがどのように振る舞うべきかという、画面設計（UI）の基本原則が解説されている。

Appleが公開した開発者向けドキュメント「Designing for iPhone Duo」の概要（冒頭抜粋）

　iPhone Duoは、閉じた状態の「アウターディスプレイ」と開いた状態の「インナーディスプレイ」、そしてそれらをつなぐ中央のヒンジ（折り目）で構成されている。ユーザーは本のように半開きにして持ったり、卓上に立てかけたりと、さまざまな姿勢（デバイスポーズ）で端末を使用する。

閉じた状態で利用可能なアウターディスプレイ

開いた状態で利用可能なインナーディスプレイ

　AppleのUI設計指針では、姿勢ごとに個別の画面デザインを作るのではなく、画面幅の規格（サイズクラス）を活用してレイアウトを自動的に拡大・縮小させる手法を求めている。アウター画面には「コンパクト幅」、インナー画面には「レギュラー幅」の設計が割り当てられ、画面の形が変わっても既存の配置が伸び縮みしてフィットする。これにより、どのような持ち方をしてもアプリの機能や操作感が損なわれない。

画面サイズに応じた表示の深さ（メールアプリの例）

　画面サイズや持ち方が変わっても、アプリ内で提供される機能や情報の優先順位は統一される。画面が開いて広くなったからといって操作方法が変わるのではなく、画面の広さに応じて表示される情報の深さ（階層）が拡張される仕組みだ。

　例えば「メール」アプリの場合、閉じたアウターディスプレイでは「メール一覧」か「本文」のいずれか片方を画面いっぱいに表示する。一方、端末を開いてインナーディスプレイに表示すると、左側に一覧、右側に本文を並べた2列表示へと自然に広がる。ユーザーは開閉どちらの状態でも同じ感覚でメール処理を行える。

閉じた状態ではメール本文や操作要素を1画面に収めてシンプルに表示する

開いた状態のインナーディスプレイではより広い画面を生かした表示となる

カメラや折り目は“予約領域”として避けて表示

　iPhone Duoの画面内には、表示内容が被らないように保護される「予約領域」と呼ばれる特別なエリアが定義されている。

• 外側カメラの領域：アウター画面の角に常に存在し、通知やライブアクティビティーに応じてDynamic Islandと連動して領域を広げる
• 内側カメラの領域：インナー画面の下に配置されており、カメラが作動していないときは露出しない。カメラ機能が有効になったときのみ、周囲のUI要素が退避してカメラの存在を示す
• 中央の折りたたみ領域：画面を半開きにした際、折り目部分自体が一時的な予約領域となる。アラート（警告画面）やメニューは折り目を避けて表示され、画面分割（Split View）でも左右の表示幅や余白がヒンジに合わせて均等に自動補正される

2つの画面要素を自動で整理するレイアウト構造

　主要な画面と補助的な画面を整理し、折りたたみに対応させるため、Appleは2種類のレイアウト枠組（アレンジメントビュー）を用意している。

• スプリット配置：画面が横長の場合は左右に、縦長の場合は上下に画面を2分割する
• オーバーレイ配置：平らな状態では2つの要素を前後に重ねて表示し、画面を半開きに曲げると左右に振り分けて表示する

　画面を折り曲げた際もボタンや表示が急激に跳び移ったり消えたりせず、ユーザーが混乱しないよう最小限の位置補正にとどめる設計が徹底されている。

画面が横長の場合に主要画面と補助画面を左右に2分割して並べるスプリット配置

重ね合わせて表示し画面を折り曲げた際に左右へ振り分けて見せるオーバーレイ配置

操作ボタンを画面の端に配置　2分割表示時も分かりやすく

　iPhone DuoのUIにおける最も大きな変更点が、操作ボタンの配置場所だ。従来のiPhoneで画面の上下にあった「ツールバー」「タブバー」「Dynamic Island」「ステータスバー」などの要素が、全て画面の「側面（縦軸）」へ移動して配置される。

　ボタン類を横に逃がすことで、コンテンツを表示するための縦方向のスペースが最大限に開放される。2つのアプリを並べるSplit View時も、各アプリのボタンが外側の縁に配置されるため、画面中央（ヒンジ付近）がすっきりと保たれる。

（※）例外として、インナー画面を「縦向き」に保持した際のみ、縦方向に十分な長さの余裕があるため、従来通り画面上下に横向きのボタン帯が配置される。

ツールバーやタブバーなどの操作要素を画面の側面に縦向きに集約配置したUI設計

2分割表示時もそれぞれの操作ボタンが両外側の縁に配置され、中央のヒンジ部分をすっきり保つ

画面の開閉を感じさせないシームレスな操作体験

　Appleが「Designing for iPhone Duo」で提示しているUI設計のゴールは、ユーザーに「今どのような姿勢で端末を持っているか」を意識させないことだ。

• 画面サイズが変わればレイアウトが自然に伸び縮みする
• カメラや折り目がある場所をシステムが自動で避けて文字やボタンを配置する
• ボタンを側面に集約して画面の縦幅を広く使う

　これらの明確な設計ルールによって、開発者が作ったアプリがどの画面・どの姿勢でも直感的かつシームレスに動くよう考慮されている。