レイアウト要素は、他の要素をグループ化してスクリーン上の配置を制御します。

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

• コンテナ：子要素を縦または横の軸に沿って並べる
• カルーセル：一度に1枚のスライドを表示するスワイプ可能なコンテナ
• ボトムシート：画面の下から上にスライドし、背後のコンテンツの上に重なって表示されるパネル
• ディバイダー：行または列を区切る細い線

コンテナ

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

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

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

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

ラップとアンラップ

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

カルーセル

カルーセルは、一度に1枚のスライドを表示するスワイプ可能なコンテナです。ユーザーが横にスワイプすると次のスライドが表示され、タイマーによる自動進行も設定できます。

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

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

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

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

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

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

プロパティ

自動スクロール

自動スクロールは、ユーザーがスワイプしなくてもスライドを自動的に切り替える機能です。

動作は2つのタイミング設定で制御します：

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

カルーセルのサイズ設定

カルーセル自体のサイズと隣接するスライド間のスペーシングを専用のコントロールで設定します。異なるコンテンツ量のスライドをスワイプしてもレイアウトがずれないよう、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 に設定し、ドロップダウンからボトムシートを選択します。

ディバイダー

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