ヒーロー画面は、画面上部にエッジ・トゥ・エッジの画像または動画を表示し、その下のパネルにコンテンツを配置するレイアウトです。作成するには、すべてのコンテンツを Sliding sheet に配置し、ヒーローをその背後に置きます。シートは画面下部を覆い、ユーザーがスクロールするとヒーローの上にスライドして重なります。

コンテンツをヒーロー画像や動画の上に重ねる

1. ヒーローを画面の背景として追加します。スクリーン設定で、Fill を画像または動画に設定してください。シートが背景の下部を覆うため、被写体が上部に映るような画像や動画を選んでください。

   

2. Add element パネルを開き、Sliding sheet を選択します。

3. スライディングシートにスクリーンのコンテンツを配置します — Layers パネルでドラッグしてください。

4. 購入ボタンを常に表示させるには、フッターに追加します。コンテンツがスクロールしても、ボタンは画面下部に固定されます。

5. シートの Start position を調整して、画面が最初に開いたときにヒーローとコンテンツのどちらをより多く表示するかを設定します。

6. ヒーローの上をシートがどのように動くかを確認するには、プレビューエリアでスクリーンをスクロールします。

7. デバイスリストから他のモデルを選択し、シートより上の領域を確認します。Start position は画面の高さに対するパーセンテージなので、画面の短い端末ではその領域も短くなります。

シートがヒーローの上をスクロールする仕組み

開始位置は、画面が開いたときのシートの位置です。デフォルトの55%では、シートが画面下部の55%を覆い、ユーザーは上部45%にヒーローを見ることができます。

画面が開いたときにすべてのコンテンツが表示されている場合、シートは開始位置のまま固定されます。それ以外の場合、ユーザーはシート全体をヒーローの上にスクロールして動かします。コンテンツが画面よりも縦に長い場合は、シートの上部が画面外にスクロールアウトします。

コンテンツが縦に長い場合にスクロールできるようにするには、画面設定で Vertical scroll トグルをオンのままにしてください。オフにすると、シートは初期位置に固定され、収まりきらないコンテンツは切れてしまいます。

シートが動いている間、ユーザーには次のように表示されます：

• シートは、画面上部のロゴや見出しなどシートの外側にある要素の上にスライドアップします。これらの要素も上に移動しますが、シートよりゆっくり動くため、画面に奥行き感（パララックス）が生まれます。Android では、Adapty SDK v4.3.0 以降を使用したネイティブ Android アプリおよび React Native アプリでパララックスが利用できます。それ以外の Android アプリや古いバージョンの SDK では、このエフェクトは表示されません。
• iOS では、ユーザーがシートをその開始位置より下に引き下げると、シートの外側にある要素が伸びます。
• 画面の背景は動きません。

ヒーローへのパララックス効果の追加

ヒーローにパララックス効果を付けるには、スクリーンの背景としてではなく、シートの外側に画像または動画要素として配置してください。

デフォルトでは、この要素はスクリーンの端まで広がりません。スクリーンのパディングが四方に適用され、Safe area が有効な場合はステータスバーの下から始まります。

1. 要素を追加パネルを開き、画像または動画要素をシートの上のエリアにドラッグします。
2. 要素をシートまで伸ばすには、幅と高さをFillに設定します。コンテンツモード（動画の場合はAspect）はFillのままにしてください。
3. 要素を画面の左右の端まで伸ばすには、スクリーン設定を開きます。Spacingの下で、左右のパディングを0に設定します。シートの上部の角が直角の場合は、下部のパディングも0に設定して、要素がシートに達するようにします。
4. 要素をステータスバーの下の画面上端まで伸ばすには、シートの外側で最初の要素として配置します。次に要素をクリックし、PositionセクションでIgnore safe areaチェックボックスを選択します。

ヒーローの上に要素を配置する

ロゴや見出しを背景ヒーローの上に配置するには、シートの上のエリアに要素をドラッグします。シートの外にある要素は画面の上から積み重なり、エリアに収まらない部分は切り取られます。画像または動画要素の上に配置するには、Position を Absolute に設定してください。

ユーザーがスクロールしても閉じるボタンが常に表示されるようにするには、ボタンを直接画面に追加して Position を Fixed に設定します。シート内の要素に Fixed を選択することはできません。

購入ボタンを常に表示する

購入ボタンや法的リンクをユーザーがスクロールしても常に表示させるには、フッターに配置してください。フッターはシートの中に入れます。

フッターは画面の下部に固定され、シートの上に重なります。ユーザーがスクロールすると、シートのコンテンツがフッターの上に表示されます。

画面のルートに配置したフッターも、シート内のフッターと同じ見た目になります。

シートをスタイリングする

シートは他のコンテナと同様にスタイリングできます。パディングとコーナーの動作は少し異なります：

• スクリーンパディング: スクリーンパディングはシートの外側にある要素にのみ適用されるため、シートは画面の端から端まで広がります。
• エレメントパディング: シートの Padding によって、コンテンツが画面の端に触れないように保たれます。
• コーナー: 上部の角を丸くすると、コーナーの半径の分だけシートが開始位置より持ち上がり、ヒーローがその部分に表示されます。動画フィルのシートは持ち上がらないため、コーナーにはスクリーンの背景が表示されます。透過シートは、単色のスクリーン背景の上でのみ持ち上がります。

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

どちらのパネルも画面の下部を占めます。必要に応じて使い分けてください：

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