---
title: スクリーンとレイヤー
description: "フロービルダーで各スクリーンのスクリーン管理と要素の階層を管理します。"
---

フローは1つ以上のスクリーンで構成されています。各スクリーンはユーザーのジャーニーにおける1つのステップを表します。たとえば、ペイウォール、クイズ、プロダクト情報のスライドなどです。

各スクリーン上の要素はレイヤー階層として整理されています。

スクリーン、レイヤー、要素を管理するには、デフォルトの **Screens and Layers** ビューを開いてください。スクリーンの順序と各スクリーンのレイヤー構造が表示されます。

## スクリーンの管理 \{#manage-screens\}

左パネルの上部セクションには、フロー内のすべてのスクリーンが一覧表示されます。各エントリには番号付きのラベルとサムネイルプレビューが表示されます。

* **スクリーンを選択する**: スクリーンエントリをクリックしてアクティブにします。ビジュアルエディターに選択したスクリーンが表示され、下のレイヤーセクションがそのレイヤー階層に更新されます。
* **スクリーンを追加する**: スクリーンセクション上部の Plus ボタンをクリックして、フローに新しい空のスクリーンを追加します。
* **スクリーンを並べ替える**: スクリーンエントリをドラッグ＆ドロップして、フロー内の順序を変更します。

:::important
フローに未使用の空のスクリーンがある場合、公開できません。公開前に下書きのスクリーンをすべて削除してください。
:::

### スクリーンの操作 \{#screen-actions\}

スクリーンエントリの三点アイコン Context をクリックすると、コンテキストメニューが開きます。

| 操作 | ショートカット | 説明 |
|--------|----------|-------------|
| **Play Animation** | | このスクリーンに設定されたアニメーションをプレビューする |
| **Copy** | ⌘C / Ctrl+C | スクリーンをクリップボードにコピーする |
| **Paste here** | ⌘V / Ctrl+V | 以前にコピーしたスクリーンを貼り付ける |
| **Duplicate** | ⌘D / Ctrl+D | スクリーンのコピーを作成してフローに追加する |
| **Rename** | | スクリーンの表示名を変更する |
| **Delete** | ⌘⌫ / Ctrl+Del | フローからスクリーンを削除する |

:::warning
スクリーンを削除すると、そのスクリーンを指定していた [Navigate to Screen](onboarding-navigation-branching) アクションは**ターゲットを失います**が、アクション自体は**削除されません**。新しい遷移先を設定するか、アクションを削除してください。そうしないと、[フローのプレビューや公開](builder-save-publish#publish-a-flow)ができなくなります。
:::

## スクリーン間の移動 \{#navigate-between-screens\}

:::link
メイン記事：[ナビゲーションとインタラクション](onboarding-navigation-branching)
:::

リスト内のスクリーンの順序だけでは、ナビゲーションは決まりません。スクリーンを接続するには、要素のインタラクションを使用してください。ボタンを設定して、ユーザーを別のスクリーンに移動させます。

## スクリーン設定 \{#screen-settings\}

アクティブなスクリーンのプロパティと設定を表示するには、スクリーンプレビューの空白部分をクリックしてください。右パネルがスクリーン設定ビューに切り替わります。

### システムUI \{#system-ui\}

スクリーンがデバイスのハードウェアとどのように連携するかを制御します。

* **Safe area** は、ノッチやシステムバーからコンテンツを保護するパディングを追加します。
* **Status bar** は、システムのステータスバー（時刻、バッテリー、信号アイコン）の表示と非表示を切り替えます。

### プログレスインジケーターへのスクリーンの含め方 \{#include-screen-in-progress-indicator\}

フローに[プログレスインジケーター](builder-loaders-and-progress-bars#progress-indicators)要素を追加すると、Adaptyはすべてのスクリーンに表示します。

**Include screen in progress indicator** のチェックを外すと、特定のスクリーンからプログレスインジケーターが非表示になります。ウェルカムスクリーン、最終的なペイウォール、または進行状況として登録したくないステップに使用してください。

### スクリーンレイアウト \{#screen-layout\}

:::link
詳細記事：[要素の配置](manage-paywall-ui-elements)
:::

**Layout** セクションでは、スクリーンが子要素をどのように配置するかを決定します。これらのプロパティは、コンテナ要素であれば何にでも使用できます。

* **Free**: 子要素が独立して配置されます。
* **Vertical**: 要素がフレックスボックスの列のように上から下へ並べられます。
* **Horizontal**: 要素がフレックスボックスの行のように左から右へ並べられます。

縦と横のレイアウトでは、間隔と配置も設定できます。

* **Alignment**: クロス軸に沿った要素の位置。
* **Gap**: 隣接する要素間のスペース。
* **Distribution**: 子要素の間および周囲へのスペースの配分。

#### RTLレイアウト \{#rtl-layout\}

**Mirror for RTL** チェックボックスをオンにすると、右から左に読む書き方のシステムに合わせてレイアウトが反転します。水平コンテナ内の要素の順序が逆になります。

### スクリーンの背景 \{#screen-background\}

:::link
メイン記事：[背景](paywall-head-picture)
:::

**Fill** は、[スクリーンの背景](paywall-head-picture)を単色、グラデーション、画像、または動画に設定します。背景は、**Safe area** が有効になっている場合でも、ノッチやシステムバーの裏側を含むデバイスのビューポート全体を塗りつぶします。

#### 背景動画のループ再生 \{#loop-background-video\}

**Loop** トグルを有効にすると、背景動画を連続ループで再生します。

#### カスタムメディアIDの割り当て \{#assign-a-custom-media-id\}

[画像や動画と同様に](custom-media)、スクリーンの背景にカスタムメディアIDを割り当てて、SDKから参照することができます。

### スクリーンの余白 \{#screen-spacing\}

各辺（上、右、下、左）のスクリーンパディングを調整します。

### スクロール \{#scroll\}

オーバーフローの動作を制御します。**Vertical scroll** を有効にすると、スクリーンコンテンツがビューポートの高さを超えたときにスクロールできるようになります。

### 選択可能なグループ \{#selectable-groups\}

:::link
メイン記事：[選択可能な要素とグループ](flow-selectable-elements)
:::

**Selectable groups** セクションには、現在のスクリーン上のすべての選択可能なグループが一覧表示されます。[クイズ](onboarding-quizzes)、[プロダクト](paywall-product-block)、[タブ](builder-tabs)、[トライアルトグル](builder-toggles)、または[カスタムの選択可能な要素](flow-selectable-elements#make-an-element-selectable)から作成されます。

グループエントリをクリックすると、名前の変更、タイプの変更、公開している変数の確認、または削除ができます。

## レイヤーの管理 \{#manage-layers\}

スクリーン上の各要素はレイヤーとして表されます。レイヤーセクションには、アクティブなスクリーン上の要素の順序が表示されます。

:::important
フローのレイヤーは、グラフィックデザインソフトウェアのレイヤーのように重なりません。代わりに、スクリーンの個々のコンポーネントを表します。要素が重なるのは、[絶対配置または固定配置](manage-paywall-ui-elements)を使用している場合だけです。重ね順はレイヤーツリー内の位置ではなく、`z-index` プロパティによって決まります。
:::

ツリー構造は親子関係を反映しています。任意の親レイヤーの矢印をクリックすると、子要素を展開または折りたたむことができます。

レイヤーを直接作成することはできません。[要素を追加](builder-elements)ビューから追加したすべての要素は、ツリーに新しいレイヤーとして表示されます。

* **レイヤーを選択する**: レイヤーをクリックして選択します。ビジュアルエディターでキャンバス上の対応する要素がハイライトされ、右パネルにその[デザイン](builder-styling)と[インタラクション](onboarding-navigation-branching)プロパティが表示されます。
* **レイヤーを並べ替える**: ツリー内でレイヤーをドラッグ＆ドロップして、親コンテナ内の順序を変更します。ツリー内の順序はスクリーン上の視覚的な順序と一致します。
* **レイヤーの表示・非表示を切り替える**: レイヤーにカーソルを合わせると、右側に目 Eye アイコンが表示されます。クリックするとレイヤーの表示・非表示が切り替わります。非表示のレイヤーはツリーに残りますが、ビジュアルエディターやデバイスには表示されません。実行時にロジックで表示を制御するには、[条件付き表示](onboarding-element-visibility)を使用してください。
* **すべてのレイヤーを折りたたむ**: レイヤーセクションの右上にある折りたたみ Collapse ボタンをクリックすると、ツリー全体が折りたたまれます。

### レイヤーの操作 \{#layer-actions\}

三点アイコン Context をクリックすると、コンテキストメニューが開きます。

| 操作 | ショートカット | 説明 |
|--------|----------|-------------|
| **Copy** | ⌘C / Ctrl+C | レイヤーをクリップボードにコピーする |
| **Paste here** | ⌘V / Ctrl+V | 以前にコピーしたレイヤーを子として貼り付ける |
| **Duplicate** | ⌘D / Ctrl+D | 同じコンテナ内にレイヤーのコピーを作成する |
| **Rename** | | レイヤーの表示名を変更する。デフォルトでは、レイヤーのコンテンツまたはコンポーネントタイプが名前として使用される |
| **Delete** | ⌘⌫ / Ctrl+Del | レイヤーとそのすべての子を削除する |
| **Wrap** | | レイヤーを新しいコンテナでラップする：**Wrap in Horizontal Container** または **Wrap in Vertical Container** |
| **Unwrap / Ungroup** | | ラップしているコンテナを削除して、その子を1つ上のレベルに移動する |
| **Move up** | ↑ | 親コンテナ内でレイヤーを1つ上の位置に移動する |
| **Move down** | ↓ | 親コンテナ内でレイヤーを1つ下の位置に移動する |