レイアウト要素：コンテナ、カルーセル、ボトムシート

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

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

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

タブもこのカテゴリに含まれますが、別記事で説明しています。詳細はタブを参照してください。

コンテナ

メイン記事：要素の配置

Vertical Stack and Horizontal Stack tiles

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

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

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

A Stack on the canvas alongside its Layout settings

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

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

ラップとアンラップ

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

カルーセル

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

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

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

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

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

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

Carousel control bar with the Slide dropdown and Add Slide button

プロパティ

Carousel section of the right panel with Width, Height, Gap, Auto-scroll, Delay, and Duration

自動スクロール

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

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

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

カルーセルのサイズ

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

スライドのサイズ設定

Slide section of the right panel with Width and Height controls

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

ドット

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

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

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

ボトムシート

ウォークスルー：ボトムシートですべてのプランを表示する

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

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

構造

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

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

Bottom sheet with a heading added inside it

初期表示

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

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

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

Hiding the bottom sheet from the Layers panel

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

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

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

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

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

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

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

ディバイダー

A horizontal divider beneath a heading and vertical dividers between three feature cards

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

レイアウト要素：コンテナ、カルーセル、ボトムシート

コンテナ

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

ラップとアンラップ

カルーセル

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

プロパティ

自動スクロール

カルーセルのサイズ

スライドのサイズ設定

ドット

ボトムシート

構造

初期表示

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

フッター

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

ディバイダー

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