レイアウトと配置
フロー & ペイウォールビルダーはレスポンシブなレイアウトを作成します。要素を正確な座標にドラッグするのではなく、コンテナの中に入れ子にすることで、子要素が自動的に配置されます。
コンテナは要素の方向（縦または横）、揃え方、間隔を決定します。各要素はさらにサイズやマージンを細かく調整できます。また必要に応じて、絶対配置や固定配置でフローから切り離すこともできます。
塗りつぶし、ボーダー、エフェクトなどの見た目に関するプロパティについては、スタイルと外観を参照してください。
AIエディタに「Most Popular」バッジ、スティッキーフッター、またはまったく新しいソーシャルプルーフセクションを依頼すれば、コンテナを自動で作成します。
レイアウト
レイアウトは、画面上の要素を配置するための主要なツールです。各コンテナは、方向・配置・間隔といったルールに従って子要素を自動的に配置します。ビルダーで利用できるレイアウト要素は次のとおりです。
- 縦方向コンテナ：子要素を上から下へ並べる
- 横方向コンテナ：子要素を左から右へ並べる
- 区切り線：要素間を視覚的に区切るセパレーター
- カルーセル：横方向にスクロールできるスライドのセット
- ボトムシート：ユーザーがボタンをタップしたときに追加コンテンツを表示するスライド式のオーバーレイパネル
コンテナは画面の主要な構成要素です。コンテナを入れ子にすることで、複雑なレイアウトを構築できます。各コンテナには右パネルに Layout セクションがあり、子要素の配置方法を制御します。
要素を新しいコンテナにグループ化するには、Wrap レイヤーアクションを使用してください。コンテナを削除して子要素を昇格させるには、Unwrap を使用してください。
スクリーンとレイヤーの階層について詳しくは、スクリーンとレイヤーをご覧ください。
Direction
- Free：自動レイアウトなし。子要素は整列せず、重なり合います。Free を選択すると、すべての子要素がAbsolute ポジションに変換され、スタッキング順序で重なりの優先度が決まります
- Vertical：子要素が上から下へ積み重なります（列の行のようなイメージ）
- Horizontal：子要素が左から右へ並びます（行のアイテムのようなイメージ）
要素の順序
子要素はLayersパネルに表示されている順序でレンダリングされます。垂直コンテナでは、リストの先頭にある要素が画面の上部に表示されます。水平コンテナでは、先頭の要素が左側に表示されます。要素を並び替えるには、Layersパネルでドラッグするか、Move up・Move downのレイヤーアクションを使用してください。
アライメント
アライメントグリッドは、子要素がコンテナのクロス軸に沿ってどこに配置されるかを制御します。縦方向のコンテナでは、アライメントは子要素の水平方向の配置（左、中央、右）を制御します。横方向のコンテナでは、垂直方向の配置（上、中央、下）を制御します。
配置
配置（Distribution）は、メイン軸に沿って子要素間のスペースをどのように分割するかを決定します：
- Gap （デフォルト）: 隣接する子要素間の固定ピクセル値
- Space Between: 子要素が両端に広がり、間に等間隔のギャップが表示される
- Space Around: 各子要素の周囲に等しいスペースが配置され、端のギャップは半分のサイズになる
- Space Evenly: すべての子要素の前後および間に等しいスペースが配置される
コンテンツのクリッピング
コンテナの境界を超えたコンテンツを視覚的にクリップします。これを無効にすると、オーバーフローが許可されます（例：カードの端を意図的にはみ出すバッジなど）。
位置
デフォルトでは、各要素の位置はコンテナのレイアウトによって自動的に決まります。Position トグルを使うと、通常のフローから切り離して手動で位置を指定できます。
相対位置（デフォルト）
要素は通常のレイアウトフロー内に配置されます。位置は親コンテナのレイアウトルールによって自動的に決まるため、自由にドラッグすることはできません。相対要素の周囲のスペースを調整するにはMarginを使用してください。
テキストブロック、画像、カード、ボタン、リストアイテムなど、ほとんどのコンテンツには相対位置を使用してください。
絶対位置
要素は通常のフローから切り離され、他のコンテンツに重なって表示されます。隣接する要素のレイアウトには影響しません。
Absolute を選択すると、追加のコントロールが表示されます。
- オフセットフィールド（T、L、R、B）：親コンテナの各辺から要素までの距離をピクセル単位で設定します
- アンカーグリッド：3×3のグリッド上の点をクリックして、要素が親のどのコーナー、辺、または中央に固定されるかを選択します
- 水平アンカー （Left / Center / Right）と 垂直アンカー （Top / Center / Bottom）：グリッドと同じアンカーポイントを操作するドロップダウン
- Z-index：他の配置済み要素の中でその要素の重なり順を設定する数値フィールド
画像の上に配置する装飾的なオーバーレイ、バッジ、閉じるボタン、アイコンなどには絶対位置指定を使用してください。
絶対配置要素を親要素の全幅に広げるには、水平アンカーを Left に設定し、Right オフセットを 0 にします。要素が両端に固定され、幅が Auto に切り替わります。
固定
このエレメントは親コンテナを完全に無視し、画面上に固定されます。ユーザーがスクロールしても常に表示され続け、ページのコンテンツがその下で動きます。
固定位置指定は絶対位置指定と同じコントロール（オフセット、アンカーグリッド、Z-index）を使用します。すべてのオフセットは、親要素ではなく画面のセーフエリアを基準に計算されます。たとえば、下からのオフセットを0にすると、ホームインジケーターの上に要素が配置されます。物理的な画面端からオフセットを計算したい場合は、セーフエリアを無視するを有効にしてください。
スクロールコンテンツの上に浮かせたい要素（フロートする閉じるボタンや復元ボタン、常時表示されるトップバナー、トップへ戻るコントロール、ナビゲーションバーなど）には、固定配置を使用してください。専用のボトムアクションエリアには、代わりに Footer を使用してください。ヒーロー画像の上にコンテンツを重ねるには、Sliding sheet を使用してください。
Freeコンテナ内での位置指定
Freeコンテナは子要素を順序付けしません。そのため、子要素の位置は手動で設定する必要があります。Relative（相対）位置はサポートされていません。子要素は以下のルールに従います：
- 子要素がFreeコンテナの場合、absolute（絶対）位置のみ設定できます。AdaptyはPositionトグルを非表示にします。トグルを再表示するには、その子要素のDirectionをVerticalまたはHorizontalに設定してください。
- その他の子要素はすべて、absolute（絶対）またはfixed（固定）位置を設定できます。
セーフエリアを無視する
セーフエリアとは、ノッチ・ステータスバー・ホームインジケーターにかからないよう確保された画面領域のことです。デフォルトでは、配置された要素はこの領域内に収まるように制御されます。
位置タイプセレクターの下にある Ignore safe area チェックボックスをオンにすると、要素のオフセットが物理的な画面端から計測されるようになります。これにより、要素がノッチやホームインジケーターの裏側まで広がることができます。
フルブリードのメディアを表示するには、画像または動画のポジションを Fixed に設定し、四辺すべてのオフセットを 0 にして、Ignore safe area を選択します。これでメディアが画面全体をエッジからエッジまでカバーします。
このチェックボックスは、absolute および fixed ポジションのみで使用できます。relative 要素では無効化されており、要素を Relative に戻すとこの設定はクリアされます。
サイズ設定
各要素にはWidthとHeightのコントロールがあります。どちらかのドロップダウンをクリックして、サイズ設定モードを選択します。
| モード | 要素のサイズ | 使用可能な場所 |
|---|---|---|
| Fill | 親の利用可能なスペースを埋めるように伸縮します。表示される値は自動計算されます | 相対要素のみ |
| Hug | コンテンツに合わせて縮小します。表示される値は自動計算されます | フリーコンテナ内のフリー子要素を除くすべての場所 |
| Fixed | 親やコンテンツのサイズに関係なく、入力したピクセル値に合わせます | すべての場所 |
| Auto | 2つのオフセット間でコンテンツを伸縮します | 絶対配置または固定配置要素のみ。Left と Right、または Top と Bottom の両方が設定された場合に Adapty が自動的に適用します（手動では選択できません） |
要素の親に Free 方向 を適用すると、その要素の Fill サイズが Fixed に変わります。その要素自体も Free 方向を使用している場合は、Hug サイズも Fixed になります。
画像には独自の縦横比があるため、高さの設定によってクロップされるかどうかが決まります。詳しくは 画像のサイズ調整 を参照してください。
スペーシング
要素の各辺のスペーシング値を個別に設定します。
| コントロール | 機能 | 利用可能な要素 |
|---|---|---|
| Margin | 要素と隣接要素の間にスペースを追加します。大きな値を設定しても、要素が親要素の外にはみ出すことはありません | 相対配置の要素すべて。スクリーン自体にはマージンはありません |
| Padding | 要素の境界線とコンテンツの間にスペースを追加します。Hug に設定された幅または高さは、パディングを含むように拡張されます | コンテナ、スクリーン、および子コンテンツを持つ要素。例外: Free コンテナの直接の子要素、および Free スクリーン自体 |
Free 方向を選択すると、コンテナに設定されていたパディングがクリアされます。
重ね順
Relative要素は互いに重なりません。各コンテナは子要素を順番に配置します。AbsoluteまたはFixed配置によって通常のフローから外れた場合にのみ、重なりが発生します。
AbsoluteまたはFixed要素は、レイヤーの順序に関係なく、Relative兄弟要素の上に描画されます。Relative要素は互いに重ならないため、Z-indexフィールドがありません。
Absolute または Fixed 要素が複数同じ空間を占める場合、その重なり順は次の2つの要素によって決まります（優先順位の高い順）：
- Z-index。デフォルト値：0。値が大きい要素が、レイヤーの順序に関係なく上に表示されます。
- レイヤーの順序。2つの要素が同じ z-index を持つ場合、レイヤーリストの下にある要素が上に表示されます。