iphone-duo-design-review

iPhone Duo 向けのデザイン

実装ではなく、デザインのためのスキルです。API については、関連するスキルを参照してください。

閉じた状態の iPhone Duo は、コンパクトで馴染みやすく、ポケットに収まります。開けば、iPhone 史上最大のキャンバスになります。本のように半分折りたたんだり、内側のディスプレイをユーザーに向けてノートパソコンのようにテーブルに置いたり、端で立てたりと、さまざまな持ち方や置き方ができます。

基本原則

ひとつのアプリが適応するのであり、複数のデザインを継ぎはぎするのではありません。

ユーザーはこのデバイスを頻繁に開閉し、作業の途中で開閉することもよくあります。内側と外側で階層や利用できる機能が変わると、そのたびに操作に慣れ直さなければなりません。そのため、次の点を守ってください。

• 機能を端末の姿勢に結びつけないでください。ある姿勢で使えるものは、どの姿勢でも使えるようにします。
• ディスプレイが変わっても階層は同じに保ちます。
• 姿勢ごとのレイアウトを作る場合も、ほかの姿勢と同じコントロールと全体的な階層を維持します。

姿勢ごとではなく、2 つのサイズクラスに合わせてデザインする

姿勢ごとに専用のレイアウトを作りたくなるかもしれませんが、避けてください。次の 2 つに合わせてデザインします。

• コンパクト幅 — 外側のディスプレイ
• レギュラー幅 — 内側のディスプレイ

固定幅やブレークポイント、特定の画面に結びついた寸法は避けてください。レイアウトマージンと水平方向のセーフエリアインセットを使えば、ほとんどの適応は自動的に行われます。要点を率直に言えば、アプリを自由にサイズ変更できるようにデザインすれば、iPhone Duo にはほぼ対応できます。

検討する価値のある唯一の任意レイアウトは、テーブルトップの姿勢です。上部にメディア、安定した下部にタップ可能なコントロールを配置します。ハンズフリーでの使用に適しています。これは任意のレイアウトですが、ほかのどの姿勢と同じコントロールもユーザーに提供する必要があります。

側面のコントロール

閉じた状態では、ディスプレイは従来の iPhone より横幅が広く、縦幅が短くなります。上部や下部に配置されていたコントロールは右側に移動し、縦方向のスペースを確保しながら、親指が届きやすい位置に収まります。その左側には、従来の iPhone の画面に匹敵する、途切れのないコンテンツ領域があります。

この側面の領域は共有されています。タブバー、アプリのツールバー、「戻る」などのナビゲーションコントロール、再設計されたステータスバー、そして Live Activities の到着に応じて縦方向に拡張するようになった Dynamic Island が配置されます。スペースが足りなくなると、アプリのコントロールは自動的にオーバーフローメニューに折りたたまれます。

既存の iPhone アプリを移行する作業の大半は、機械的に行えます。

• 上部にあるツールバーボタン → 縦方向の領域の上部
• 下部にあるツールバーボタン → 縦方向の領域の下部
• タブバー → 下部に揃えたまま

例外： テキストボタンやセグメントコントロールなど、側面の領域に収まりきらない項目は、ナビゲーションバーに残してください。無理に配置しないでください。

**横方向のバーが維持される唯一の姿勢は、内側のディスプレイを縦向きにした状態です。**この場合、縦方向に十分なスペースがあります。

Split View では、コントロールは外側の端に配置されます。左側のアプリならコントロールも左端に配置し、親指が届きやすく、中央から離れた位置に保ちます。

非対称性

側面にコントロールを配置すると、ほとんどのレイアウトは非対称になります。コンテンツの種類に応じて、次の 3 つの方法を選びます。

コンテンツをずらす。 これがデフォルトです。多くのコンテンツはコントロールの背後に隠れないよう、位置をずらす必要があります。デザインを水平方向のセーフエリアインセットに合わせれば、この調整は自動的に行われます。

ディスプレイ全体の中央に配置する。 位置をずらしません。没入感が高く、視覚要素が主体で、スクロールしないインターフェイスに適しています。ただし、コントロールの下にインタラクティブな要素が配置されないと確信できる場合に限ります。

組み合わせる。 全幅の背景画像やヘッダーの上に、インセットされたスクロール可能な前景コンテンツを重ねます。安全にするためのルールは、すべてのインタラクティブな要素をスクロール可能なインセット領域内に配置することです。これにより、タップ可能な要素が何も覆われなくなります。

折り目

部分的に折りたたむと、内側ディスプレイの中央にカーブが生じます。その領域からコンテンツが自動的に離れるため、テキストや画像は読みやすい位置に移動し、操作要素はタップしやすい両側へ移動します。このカーブは、レイアウトを自然に分割する境界になります。

縦向きで折りたたんだ場合、操作要素は下半分に移動します。デバイスを面に置いた状態でも、より手が届きやすくなります。

**折り目の部分では、ボタンは本当にタップしにくくなります。**デバイスが部分的に折りたたまれると、システムは操作要素をその都度脇へ移動します。この動作は、シート、アラート、メニュー、ツールバーボタンなどに組み込まれています。システムコンポーネントを使えば、この動作をそのまま利用できます。

**スクロール可能なコンテンツは対象外です。**折り目の領域を避ける必要はありません。

設計の目標はシンプルです。操作要素がカーブに重ならないよう、できる限り配置することです。

折り目に合わせてレイアウトを調整する際は、次の2点を見直してください。

**自ら調整するコンテナを優先します。**ペインの幅を再調整する分割ビューなら、手動で配置するよりも折り目に適切に対応できます。グリッドでは、コンテンツを中央の左右にきれいに分割できるよう、列数を偶数にすることを優先します。

**移動は必要最小限にします。**デバイスを曲げるとコントロールが消えたり、画面の反対側へ飛んだりするレイアウトは、見つけにくく、追いにくくなります。レイアウトを組み替えるより、表示とタップのしやすさを保てる小さな調整を優先します。

内側ディスプレイを活用する

iPhone アプリをただ引き伸ばした状態は、うまくいかない例です。効果的な方法は3つあります。

**分割ビュー。**階層の複数のレベルを一度に表示します。うまく設計するうえで大切なのは、ディスプレイが変わっても情報階層は同じままにしつつ、大きなディスプレイではその階層をもう1段階だけ多く表示できることです。閉じた状態ではメッセージ一覧か1件のメッセージのどちらかを表示し、開いた状態では両方を並べて表示するメールアプリは、同じ階層のより多くの部分を表示しているのであり、別のアプリになったわけではありません。これが、適応と再設計の違いです。

標準の分割ビューは、予約領域にも自動で対応します。デバイスが折りたたまれると、列幅とマージンを調整して、両方のペインが表示された状態を保ちます。

**列への再配置。**縦に積み重ねたレイアウトを、横方向のスペースに余裕があれば2列のレイアウトに変更します。

**タブバーをサイドバーにする。**タブバーのあるアプリでは、内側ディスプレイでタブバーをサイドバーとして表示します。ただし、すべてのアプリに適しているわけではありません。特に情報量の多いアプリに向いています。

シート

シートの動作はディスプレイによって異なります。次の4つのケースを把握しておきましょう。

• 外側ディスプレイ、デフォルト — 他の要素と同様、シートのコントロールが横に移動します。
• 外側ディスプレイ、縦型バーを無効化 — コントロールはその場にとどまります。縦型バーの幅に見合うメリットがない、ツールバーボタンが1つだけのシートに適しています。この場合、シートは前面カメラの手前で止まり、ステータスバーの位置が自動で変わります。
• 内側ディスプレイ — どちらの向きでも、標準の横型バーが表示されます。
• 部分的に折りたたまれた状態 — シートがスライドし、折り目の上に重ならないようにします。

マルチタスクと PiP

Split View はホームジェスチャで作成する50/50 の分割表示です。アプリを片側へドラッグします。2つの領域はそれぞれ独立して動作します。ピクチャ・イン・ピクチャは画面上部に固定できます。下にあるアプリは縦方向にサイズを変更して領域に収まり、デバイスが部分的に折りたたまれると、動画が画面の半分を埋めるように拡大します。アプリは動画のサイズに合わせてリアルタイムに縦方向へ調整されるため、縦方向の柔軟性は必須です。

レビューチェックリスト

iPhone Duo のデザインを確認するときは、次の点を確認してください。

1. インタラクティブな要素が折り目の上、またはサイドコントロールの下に配置されていませんか？
2. あるポーズでは使えて、別のポーズでは使えない機能や階層はありませんか？
3. サイズクラスを基準に考える代わりに、固定幅やブレークポイントを使っていませんか？
4. ツールバー項目がサイド領域に適切に対応していますか？また、幅の広い項目はナビゲーションバーに残されていますか？
5. 内側のディスプレイでは、単に引き伸ばすよりも適切な表示ができていますか？
6. コンテンツはセーフエリアからオフセットされていますか、意図的に中央揃えされていますか、それとも両方を組み合わせつつ、すべてのコントロールがスクロール可能な領域内に収まっていますか？
7. 両側の Split View でも、PiP を固定した状態でも、レイアウトは適切に機能しますか？
8. システムコンポーネントを使えば実現できる折り目回避を、カスタムコンポーネントで再実装していませんか？
9. コントロールは、サイドバーに押しやられて属するペインから離れてしまうのではなく、操作対象のコンテンツの近くに配置されていますか？
10. ディスプレイ間で、レイアウトだけでなく 状態 まで変化するものはありませんか？デバイスを開閉しても状態が保持される必要があります。

プロジェクトがゲームの場合、これらの多くは当てはまりません。画面をポーズに合わせて埋める方法、アスペクト比とレターボックス表示の使い分け、タッチコントロールを折り目から離す方法については、代わりに ../iphone-duo-games/SKILL.md を参照してください。