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

フロー＆ペイウォールビルダーには6種類のレイアウト要素があります：

• コンテナ: 子要素を縦または横の軸に沿って配置します
• カルーセル: 1枚ずつスライドを表示するスワイプ可能なコンテナ
• ボトムシート: 画面の下から上にスライドして表示され、下のコンテンツの上に重なるパネル
• フッター: スクロール領域の外側で画面下部に固定されるパネル
• スライディングシート: メインコンテンツをヒーロー画像の上に表示するパネル
• ディバイダー: 行や列を区切る細い線

コンテナ

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

コンテナの方向を変更する

コンテナの方向はいつでも変更できます。右パネルの Layout セクションで Vertical、Horizontal、Free を切り替えられます。Free に切り替えると、すべての子要素が自動的にAbsolute 位置に変換されます。

子要素は Layers パネルに表示される順序でレンダリングされます — ドラッグして並べ替えられます。

ラップとアンラップ

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

カルーセル

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

カルーセルには複数のスライドレイヤーが含まれます。スライドがアクティブになると、そのレイヤー上の要素が画面に表示されます。

タブとは異なり、カルーセルのアクティブなスライドは選択可能なグループとして公開されません。スライドは条件や動的テキストで参照できません。カルーセルはビジュアルのローテーションに使用し、ユーザー主導の分岐には使用しないでください。

アクティブなスライドを変更する

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

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

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

プロパティ

自動スクロール

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

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

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

カルーセルのサイズ

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

スライドのサイズ設定

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

ドット

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

Show dots トグルをオフにするとスライドインジケーターが非表示になります。ドットが表示されている場合、以下のプロパティで外観を調整できます：

• Color — 非アクティブなドットの塗りつぶし色。
• Active Color — 現在表示中のスライドのドットの塗りつぶし色。
• Size — 各ドットの直径（ピクセル単位）。
• Gap — 隣接するドット間のスペース。
• Padding — ドット行とその上のカルーセルコンテンツとの間のスペース。

ボトムシート

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

画面の読み込み時ではなく、タップ時にシートをトリガーします。たとえば、Show all plans リンクの後ろに配置するなどの方法があります。

構造

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

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

初期表示

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

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

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

ボトムシートのトリガー設定

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

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

フッター

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

通常の要素とは異なり、フッターはデバイスの下部セーフエリアまで伸びます。背景は画面の端まで広がります。

フッターは1画面につき1つのみ使用できます。既存のフッターの複製や、新しいフッターの追加はできません。

フッターと通常の固定要素の違い

Both stay on screen while content scrolls. Pick the option that matches what you need:

• フッターを使用する：画面のメインボトムバー（CTAボタン、法的テキスト、リンク）に使用します。フッターは自分自身の高さを確保するため、コンテンツは常にスクロールしてフッターの後ろに隠れることなく表示され、ボトムセーフエリアも自動的にカバーします。
• 固定要素を使用する：スクロールするコンテンツの上に浮かせたい場合や、ボトム以外のエッジに固定したい場合（フローティングの閉じる/復元ボタン、常時表示のトップバナー、スクロールトップコントロールなど）に使用します。セーフエリアのスペーシングは自分で管理する必要があります。

スライディングシート

スライディングシートは、メインコンテンツをヒーロー画像の上に重ねて表示します。パネルは画面の下部を覆い、ユーザーがスクロールすると画面の背景の上に上昇します。背景は iOS では動き、他のプラットフォームでは固定されます。この動作は変更できません。

シートの外側に追加した要素は、画面の背景の上に表示されます。ヒーロー画像に見出しやロゴを配置する際に活用してください。

• Start position は、シートが画面の下からどれくらいの範囲を覆うかを設定します。デフォルトでは、シートが画面下部の 55% を覆い、上部の 45% には背景が透けて表示されます。シートの高さを絶対値で指定することはできません。シートを高くするには、Start position の値を上げてください。
• Fill は、コンテンツの背後にある背景を設定します。ヒーロー画像を透過させたい場合は、不透明度を下げてください。

1つの画面に配置できるスライディングシートは1つだけです。既存のスライディングシートを複製したり、新たに追加したりすることはできません。

スライディングシートとボトムシートの比較

どちらのパネルも画面下部に配置されます。用途に合わせて選択してください：

• スライディングシートを使用する場合：ヒーロー画像の上に画面のメインコンテンツをオーバーレイ表示します。画面を開いた時点でシートが表示され、ユーザーがスクロールしたときのみ移動します。
• ボトムシートを使用する場合：Show all plans リンクの背後にあるプランリストなど、必要に応じて表示するコンテンツに使用します。Show アクションで表示します。

ディバイダー

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