アップル初の折りたたみスマホ「iPhone Duo」向けアプリはどう変わる？　開発者向けに動画公開

　新たに発表された折りたたみモデル「iPhone Duo」について、アップルはApple Design TeamのデザイナーであるMarcos氏とVince氏が登壇する、「Design for iPhone Duo」と題したセッションを公開した。

　本動画では、「iPhone Duo」に向けたアプリ設計の基本原則から、具体的なレイアウト手法までを詳細に解説。セッションは、デバイスの設計原則の説明から始まり、各構成においてアプリを適応させるための戦略へと進んだ。

iPhone Duoのハードウェア概観

　iPhone Duoは、閉じた状態ではコンパクトで馴染み深く、手に快適に収まるサイズ感が意識されている。開くと、iPhone史上最大かつ最も没入感のあるディスプレイが現れ、アプリのための最大限のキャンバスを提供しつつ、ポケットにも収まるサイズを保つ。

　iPhone Duoは複数の方法で保持および設置できるようになっている。本のように角度をつけた状態で使用する、ラップトップのようにテーブルに置いて内側ディスプレイを向ける、あるいはテントのように端を接地して自立させる、といった柔軟性を備える。ユーザーは状況に応じて好きな方法でデバイスを体験できる。

フォルダブルディスプレイのUI原則

　閉じた状態のディスプレイは、従来のiPhoneよりも幅が広く、高さが低い。この縦方向のスペースを最大化するため、通常は上下に配置されるボタンやコントロールはディスプレイの右側に移動する。これにより、右親指で操作しやすくなり、左側に従来のiPhoneディスプレイと同等の広さを持つ、途切れのないコンテンツ領域が確保される。

　この新しいサイドスペースには、アプリのコントロール（トップバー、アプリツールバー、戻るボタン等のナビゲーションコントロール）、再設計されたステータスバー、そしてライブアクティビティが到着すると縦方向に展開するDynamic Islandが配置される。この効率的なスペース活用は内側ディスプレイにも及び、コントロールは同様に側面に移動し、コンテンツの縦方向スペースを最大化しつつ手の届く範囲に配置される。

　iPhone Duoを本のように軽く折り曲げた状態で使用すると、コンテンツは自動的に中央から移動する。テキストや画像はカーブから離れて読みやすくなり、ボタンやインタラクティブな要素はタップしやすい側面に移動する。カーブはアプリのレイアウトにおける自然な区切りとして機能する。

マルチタスクと拡張ピクチャーインピクチャー

　iPhone Duoには、2つのアプリを同時に実行する仕組みを導入する。iPhoneのホームジェスチャーに基づき、アプリを横にドラッグするだけでスプリットビューを作成できる。この分割はディスプレイを2つの独立した半分に分け、片側でタスクを維持しながらもう片方を使用できる。

　スプリットビューでは、コントロールは外側のエッジに沿って配置される。アプリが左側にある場合はコントロールも左エッジに移動し、親指の届く範囲に保たれつつ中央領域から離れる。

　ピクチャーインピクチャーでの動画再生中は、動画を画面上部にピン留めでき、他のアプリは残りのスペースに合わせて縦方向にリサイズされる。さらにディスプレイに角度をつけると、動画が画面半分まで拡大し、アプリは異なる動画サイズにリアルタイムで調整される。

アプリ適応のコア原則

　Vince氏は、アプリ開発者に対し、すべてのポーズに対してカスタムレイアウトを作成するのではなく、基本原則に注力することを推奨した。設計すべきは2つの主要なサイズクラス、すなわち外側ディスプレイと内側ディスプレイであるという。固定幅、ブレークポイント、特定画面に紐づくメトリクスは避け、常にこれらのサイズクラスをターゲットにすべきと語る。

　レイアウトはレイアウトマージンと水平セーフエリアインセットで構築すべきであり、これらのツールを既に使用しているなら、アプリはすでにiPhone Duoに対応していると言えるとのこと。言い換えれば、アプリを自由にリサイズ可能なように設計すれば、良好な状態にあるという。

　また、テーブルに置いたハンズフリー体験に向けたオプションのレイアウトも存在する。メディアを上部に配置し、タップ可能なコントロールを安定した下半分に置くことができる。この特別なレイアウトを採用する場合は、他のポーズと同じコントロールと階層を維持し、機能を特定のポーズに紐づけないことが前提とされる。

サイドコントロールの詳細

　iPhone Duoではコントロールが側面に配置される。唯一の例外は、内側ディスプレイで、長辺を縦に持ったシーン。ここでは縦方向のスペースが十分にあるため、従来の水平バーが維持される。

　アプリコントロールはシステムの動的要素（ライブアクティビティ、ステータスバー）と側面の縦方向スペースを共有する。スペースが不足すると、アプリコントロールは自動的にオーバーフローメニューに折りたたまれる。

　既存のiPhoneアプリがある場合、ツールバーボタンの上部はこの縦方向スペースの上部に、下部のボタンは下部にマッピングされ、タブバーは下部揃えを維持する。ただし、テキストボタンやセグメンテッドコントロールなど、側面に収まらない幅の広いツールバーアイテムはナビゲーションバーに留まる。

　コントロールが側面に移動したことで、多くのレイアウトが非対称となる。これに対して3つのアプローチが有効とされる。

　まず、ほとんどのコンテンツは、コントロールに隠れないようオフセットされる。アプリが水平セーフエリアインセットに整列していれば、このオフセットは自動的に適用される。

　スクロールしない、視覚的に重視されたインターフェースでは、オフセットなしでフルディスプレイの中央に配置できる。ただし、インタラクティブ要素が右側のコントロールに遮られないことが条件となる。

　また、フル幅の背景画像やヘッダーと、インセットされたスクロール可能な前景コンテンツを組み合わせる。すべてのインタラクティブ要素はスクロール領域内に配置し、何も覆い隠されないようにする。

内側ディスプレイの設計

　内側ディスプレイにおいては、単に引き伸ばされたiPhoneアプリを作るのでは不十分であるとのこと。ここでは、3つの主要なアプローチが提示された。

　1つはスプリットビューについて。アプリの階層の複数レベルを同時に表示する。階層は外側と内側のディスプレイ間で一貫し、機能を特定のポーズに限定しない。ユーザーはアプリ使用中に頻繁に開閉するため、内外で予測可能かつ一貫した動作が必要と説明された。

　コンテンツレイアウトは、広い内側画面に合わせてコンテンツを再配置するべきとのこと。Musicアプリの例では、縦方向のスタックレイアウトが、水平スペースが増えると、2カラムレイアウトに再配置されると解説している。

　タブバーを持つアプリの場合は、内側ディスプレイでタブバーをサイドバーとして表示できる。これはすべてのアプリに適するわけではなく、Healthのような情報密度の高いアプリで最も効果を発揮するとのことだ。

シートの新しい振る舞い

　「シート」と呼ばれる、ポップアップのような表示形式にも、デバイス固有の新しい振る舞いがある。内側ディスプレイでは、シートコントロールはコンテンツと共に移動する。ただし、コンテンツに合うなら縦バーを無効化して、コントロールを固定することも可能。単一ツールバーのみのシートで効果的であると説明されている。

　このオプションを使用すると、シートは前面カメラの手前で停止し、ステータスバーが再配置される。内側ディスプレイのランドスケープおよびポートレートの両方で、シートは標準の水平バーを使用する。

　iPhone Duoのディスプレイに角度がつけられた状態では、シートは折り目上に静止しないよう横にスライドする。これは他の多くのコンポーネントにも適用される。ボタンが折り目の真上に配置されるとタップしにくいための設計だ。

　これはシート、アラート、メニュー、ツールバーボタンなど多数のシステムコンポーネントに組み込まれており、可能な限りこれらの標準コンポーネントを使用することで、アプリでも同じ折り目を回避する振る舞いが得られる。スクロール可能なコンテンツについては、この領域を避ける必要はないと解説された。

　Marcos氏は、iOSアプリが折りたたみデバイスに登場するのは、これが初めてであると強調。アプリは異なるディスプレイサイズやポーズに適応する1つの体験として感じられるべきであり、コントロールを側面に移動し、リサイズ可能性をサポートすることで、アプリはiPhone Duoに「真に馴染む」ものとなる。Vince氏は、iPhone Duo向けの設計を大いに楽しんだと述べ、視聴者にも同じ体験を期待して締めくくられた。