---
title: "レイアウト要素：コンテナ、カルーセル、ボトムシート"
description: "フローレイアウト内でコンテナ、カルーセル、ボトムシートに要素をグループ化します。"
---

レイアウト要素は、他の要素をまとめてグループ化し、画面上のレイアウトを制御します。

フロービルダーには、5種類のレイアウト要素があります：
- **コンテナ**: 子要素を縦または横の軸に沿って配置します
- **カルーセル**: 一度に1枚のスライドを表示するスワイプ可能なコンテナ
- **ボトムシート**: 画面下部からスライドアップして、既存のコンテンツの上に表示されるパネル
- **フッター**: スクロール領域の外側に、画面下部に固定されるパネル
- **区切り線**: 行や列を区切る細い線

:::link
**タブ**もこのカテゴリに含まれますが、別記事で説明しています。詳細は[タブ](builder-tabs)を参照してください。
:::
## コンテナ \{#containers\}

:::link
メイン記事：[要素の配置](manage-paywall-ui-elements)
:::

コンテナは要素を縦または横にグループ化します。**縦コンテナ**は要素を行として並べ、**横コンテナ**は列として並べます。

:::tip
コンテナを入れ子にすることで、より複雑なレイアウトを構成できます。
:::

### コンテナの方向を変更する \{#change-container-direction\}

コンテナの方向は固定ではありません。右パネルの **Layout** セクションで **Vertical**、**Horizontal**、**Free** をいつでも切り替えられます。コンテナを削除して作り直す必要はありません。

同じ **Layout** セクションで、スペーシング、アライメント、配置を設定できます。子要素は **Layers** パネルに表示される順に描画されます。ドラッグして並び替えましょう。

### ラップとアンラップ \{#wrap-and-unwrap\}

既存の要素をコンテナに変換するには、要素を選択して **Wrap** [レイヤーアクション](paywall-layout-and-products#layer-actions)を使います。**Layers** パネルから新しいコンテナに追加の要素をドラッグして入れられます。スタックを削除して子要素を1つ上のレベルに昇格させるには、**Unwrap** を使います。

## カルーセル \{#carousel\}

**カルーセル**は、一度に1枚のスライドを表示するスワイプ可能なコンテナです。ユーザーが横にスワイプすると次のスライドが表示され、タイマーによる自動送りにも対応しています。

カルーセルには複数の**スライド**レイヤーが含まれます。スライドがアクティブになると、そのレイヤー上の要素が画面に表示されます。
タブとは異なり、カルーセルのアクティブなスライドは[選択可能なグループ](flow-selectable-elements)として公開されません。スライドは条件や動的テキストで参照できません。カルーセルはビジュアルのローテーションに使用し、ユーザー主導の分岐には使用しないでください。
### アクティブなスライドを変更する \{#change-active-slide\}

カルーセルを選択すると、ビルダーに **Slide** ドロップダウンと **+ Add Slide** ボタンを含むポップアップコントロールバーが表示されます。

- **+ Add Slide** をクリックして新しい空のスライドを追加できます。
- **Slide** ドロップダウンでキャンバス上のアクティブスライドを切り替えるか、**Layers** パネルで対応するスライドレイヤーをクリックします。

スライドの順序を変更するには、Layers パネル内のカルーセル内でドラッグします。

{/* TODO: on-device GIF */}

### プロパティ \{#properties\}

#### 自動スクロール \{#auto-scroll\}

自動スクロールは、スライドを自動的に切り替えます。ユーザーがスワイプしなくても、すべてのコンテンツを確認できます。

タイミングを制御する項目が2つあります：

- **Delay** — 各スライドが表示される時間（ms）。
- **Duration** — スライド間のトランジションにかかる時間（ms）。

#### カルーセルのサイズ \{#carousel-sizing\}
カルーセルのサイズやスライド間のスペースは専用のコントロールで設定できます。ユーザーがコンテンツの長さが異なるスライド間をスワイプしてもレイアウトがずれないよう、**Height** を **Fixed** に設定してください。

#### スライドのサイズ設定 \{#slide-sizing\}

スライドごとの **Width** と **Height** を設定します。デフォルトは Fill で、各スライドがカルーセルのサイズに合わせて追従します。固定の幅を設定すると、隣接するスライドが一部見える「ピーク効果」を作れます。

#### ドット \{#dots\}

カルーセル下部に表示されるページインジケーターです。スライドの総数と現在アクティブなスライドをユーザーに伝えます。

**Show dots** トグルをオフにするとスライドインジケーターが非表示になります。ドットが表示されている場合、以下のプロパティで外観を調整できます：
- **Color** — 非アクティブなドットの塗りつぶし色。
- **Active Color** — 現在表示中のスライドのドットの塗りつぶし色。
- **Size** — 各ドットの直径（ピクセル単位）。
- **Gap** — 隣接するドット間のスペース。
- **Padding** — ドット行とその上のカルーセルコンテンツとの間のスペース。
## ボトムシート \{#bottom-sheet\}

:::link
ウォークスルー：[ボトムシートですべてのプランを表示する](show-plans-bottom-sheet)
:::

**ボトムシート**は、画面の下から上にスライドして背後のコンテンツの上に重なって表示されるレイアウトパネルです。

シートは常に背後のコンテンツをぼかします。このぼかしはオフにできません。画面読み込み時ではなく、**Show all plans** リンクなどのタップ操作をトリガーにして表示してください。

### 構造 \{#structure\}

ボトムシートには2つのトップレベルレイヤーが含まれます：

- **Heading** — シート上部のコンテナ。**Title** テキストレイヤーと **Close button** Close が事前に配置されています。必要に応じて編集または削除できます。
- **Content** — メインコンテナ。プロダクト、ボタン、リンク、その他の要素を配置できます。

{/* TODO: on-device GIF */}

### 初期表示 \{#initial-visibility\}

デフォルトでは、ボトムシートは画面が描画されると同時に表示されます。必要なときだけ開くようにするには：

1. **シートのコンテンツを先に構築する** — 非表示レイヤーは編集できないため、コンテンツを入れ終わるまでシートを表示したままにする必要があります。
2. **Layers** パネルでボトムシートを選択します。
3. **Visibility** を **Hide** Hide に設定します。

シートはレイヤーツリーに残りますが、画面への描画は停止します。

### ボトムシートのトリガー設定 \{#triggering-the-bottom-sheet\}

非表示のボトムシートを開くには、別の要素に **Show** アクションを設定します：

1. トリガーとなる要素（ボタンやテキストリンクなど）を選択します。
2. 右パネルの **Interactions** タブを開きます。
3. **Add trigger** > **On tap** をクリックし、**Add action** をクリックします。
4. **Action** を **Show** に設定し、ドロップダウンからボトムシートを選択します。

## フッター \{#footer\}

**フッター**は、画面の下部を占めるスティッキーコンテナです。高さは自由に設定でき、シングルボタンから複数行のテキストまで、さまざまなコンテンツを配置できます。CTAボタンや法的テキスト、リンクなど、画面の残りの部分がスクロールしても常に表示しておきたいコンテンツに使いましょう。

通常の要素とは異なり、フッターはデバイスの下部セーフエリアまで伸びます。背景は画面の端まで広がります。
1つの画面に設定できるフッターは1つだけです。既存のフッターを複製したり、新しいフッターを追加したりすることはできません。
### フッターと通常の固定要素の違い \{#footer-vs-a-regular-fixed-element\}

Both stay on screen while content scrolls. Pick the option that matches what you need:
- **フッターを使用する**：画面のメインボトムバー（CTAボタン、法的テキスト、リンク）に使用します。フッターは自分自身の高さを確保するため、コンテンツは常にスクロールしてフッターの後ろに隠れることなく表示され、ボトムセーフエリアも自動的にカバーします。
- **[固定要素](manage-paywall-ui-elements)を使用する**：スクロールするコンテンツの上に浮かせたい場合や、ボトム以外のエッジに固定したい場合（フローティングの閉じる/復元ボタン、常時表示のトップバナー、スクロールトップコントロールなど）に使用します。セーフエリアのスペーシングは自分で管理する必要があります。
## ディバイダー \{#dividers\}

**水平ディバイダー**と**垂直ディバイダー**は、コンテンツを区切る細い線です。行を分割するには水平ディバイダーを、横コンテナ内の列を分割するには垂直ディバイダーを使います。右パネルで太さ、色、長さを調整できます。