---
title: "iPhone Duo 向けフローの準備"
description: "iPhone Duo をサポートするフローに関するベストプラクティス"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

iPhone Duo は、外側に細いディスプレイ、内側に広いディスプレイを備えています。他の iPhone とは異なり、縦向きの状態でも前面カメラの横にステータスバーが表示される場合があります。

Duo でフローが正しく表示されるよう、以下の手順に従ってください。

- [**Safe area**](#keep-text-and-buttons-clear-of-the-status-bar-and-camera) をオンにして、テキストとボタンがステータスバーに隠れないようにしてください。
- 個々の要素がステータスバーの後ろに表示される場合は、その要素の [**Ignore safe area**](#intentionally-ignore-the-iphone-duos-safe-area) のチェックを外してください。
- 公開前に [両方のディスプレイをプレビュー](#design-one-layout-to-fit-both-displays) し、それぞれ縦横両方の向きを確認して、必要に応じてレイアウトを調整してください。
- Adapty が iPhone Duo サポートを追加する前にフローが公開されていた場合は、[再度公開](#add-iphone-duo-support-to-live-flows) して最新のレイアウト改善を適用してください。
- Duo フローに独自のデザインが必要な場合は、[Duo ユーザーに別のフローを表示](#show-iphone-duo-users-a-separate-flow) してください。

## テキストとボタンをステータスバーおよびカメラから離す \{#keep-text-and-buttons-clear-of-the-status-bar-and-camera\}

**Safe area** をオンにすると、画面の以下の部分がステータスバーと重ならないようになります：

- メインコンテンツ
- [フッター](builder-containers#footer)および[スライディングシート](builder-containers#sliding-sheet)のコンテンツ
- [プログレスインジケーター](builder-loaders-and-progress-bars)
- **Fixed** および **Absolute** 要素

画面、フッター、スライディングシートの背景は、ステータスバーの背後も含めてディスプレイ全体に引き続き広がります。

## iPhone Duoのセーフエリアを意図的に無視する \{#intentionally-ignore-the-iphone-duos-safe-area\}

個々の要素は、**Safe area**設定を上書きして、ステータスバーの背後に表示させることができます。これは、画像や動画に意図的な効果を持たせる場合にのみ推奨されます。

要素に**Fixed**または**Absolute**ポジションを設定してください。次に[**Ignore safe area**](manage-paywall-ui-elements#ignore-safe-area)チェックボックスを選択します。

画像や動画を画面の残りのコンテンツと一緒にスクロールさせたい場合は、代わりに[画面の上部に配置](manage-paywall-ui-elements#ignore-safe-area)してください。

## 1つのレイアウトで両ディスプレイに対応する \{#design-one-layout-to-fit-both-displays\}

各スクリーンにはレイアウトが1つだけあります。フロー＆ペイウォールビルダーでスクリーンをデザインする際は、このセクションのヒントを参考にして、iPhone Duoの両ディスプレイに確実に対応させてください。

[デバイスリスト](builder-ui#view-controls-bottom-toolbar)で **iPhone Duo** を選択し、各ディスプレイをプレビューしてください：

- Closed **閉じた状態**: ステータスバーが多くのスペースを占めます。以下を確認してください：
  - テキストが折り返されたり切れたりしていないか
  - フッターが画面の大部分を占めていないか
  - 閉じる、復元、または購入ボタンが画面外に出ていないか

  [**垂直スクロール**](paywall-layout-and-products#scroll)を有効にするか、コンテンツを複数の画面に分割してください。購入ボタンを常に表示するには、スティッキーな[フッター](builder-containers#footer)に配置してください。

- Open **Open**: アプリをポートレート向けにのみ設計している場合でも、iOS はインナーディスプレイ上でランドスケープ表示することがあります。

  両方の向きで読みにくいほど横に伸びてしまうコンテンツを探してください。そのコンテンツを **Fixed** 幅のコンテナに入れ、親要素の **Alignment** 設定を変更して[コンテナを中央揃え](manage-paywall-ui-elements#alignment)にします。コンテナはどのデバイスでも幅を維持します。

  コンテナの幅が最も画面の狭いスマートフォンには広すぎる場合、**Width** の横に警告アイコンが表示されます。アイコンが消えるまで幅を縮小してください。

Duo に合ったレイアウトを設計したものの、他のスマートフォンでは表示が崩れる場合は、[Duo ユーザーに別のフローを表示](#show-iphone-duo-users-a-separate-flow)してください。

## 既存フローへの iPhone Duo サポートの追加 \{#add-iphone-duo-support-to-live-flows\}

Adapty が iPhone Duo サポートを追加する前に公開されたフローに最新のレイアウト改善を適用するには、そのフローを再公開してください。

Flow & Paywall Builder でフローを開きます。[**Publish to Live**](builder-save-publish#publish-a-flow) ボタンを有効にするために軽微な変更を加え、ボタンをクリックします。

アプリが次回そのフローを配信する[プレースメント](placements)をリクエストしたとき、最新の公開バージョンを受信します。結果を確認するには、iPhone Duo またはXcode のシミュレーターでアプリ内のフローを開いてください。

## iPhone Duoユーザーに別のフローを表示する \{#show-iphone-duo-users-a-separate-flow\}

You may prefer to design a separate flow, tailored for the Duo's displays, instead of one layout that fits all phones:

1. [既存のフローをコピー](copy-flows)して、Duo フローを作成します。
2. [両方のディスプレイに合わせて](#design-one-layout-to-fit-both-displays)コピーを調整します。次に[公開します](builder-save-publish#publish-a-flow)。
3. **Device** 属性を **iPhone Duo** に設定した[セグメントを作成](segments#creation)します。
4. メインフローを提供するプレースメントで、Duo セグメントと Duo フローを使って[オーディエンスを追加](add-audience-paywall-ab-test)します。
5. プレースメント内の別のオーディエンスが Duo ユーザーにもマッチする可能性がある場合は、Duo オーディエンスの[優先度を上げて](change-audience-priority)ください。

To see the result, open your app on a real iPhone Duo.