---
title: "スライディングシートを使ったヒーロー画面の作成"
description: "エッジツーエッジの画像や動画の上にコンテンツを重ねて表示します。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

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

## コンテンツをヒーロー画像や動画の上に重ねる \{#lay-your-content-over-a-hero-image-or-video\}

1. ヒーローを画面の背景として追加します。[スクリーン設定](builder-ui#screen-settings-and-layout)で、**Fill** を[画像または動画](paywall-head-picture)に設定してください。シートが背景の下部を覆うため、被写体が上部に映るような画像や動画を選んでください。

2. **Add element** パネルを開き、**Sliding sheet** を選択します。
3. スライディングシートにスクリーンのコンテンツを配置します — **Layers** パネルでドラッグしてください。
4. 購入ボタンを常に表示させるには、[フッター](#keep-the-purchase-button-in-view)に追加します。コンテンツがスクロールしても、ボタンは画面下部に固定されます。
5. シートの **Start position** を調整して、画面が最初に開いたときにヒーローとコンテンツのどちらをより多く表示するかを設定します。
6. ヒーローの上をシートがどのように動くかを確認するには、[プレビューエリア](builder-ui#preview-area-center)でスクリーンをスクロールします。
7. [デバイスリスト](builder-ui#view-controls-bottom-toolbar)から他のモデルを選択し、シートより上の領域を確認します。**Start position** は画面の高さに対するパーセンテージなので、画面の短い端末ではその領域も短くなります。

## シートがヒーローの上をスクロールする仕組み \{#how-the-sheet-scrolls-over-the-hero\}

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

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

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

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

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

### ヒーローへのパララックス効果の追加 \{#add-parallax-to-the-hero\}

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

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

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

## ヒーローの上に要素を配置する \{#place-elements-over-the-hero\}

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

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

:::important
Androidでは、**相対**または**絶対**配置でシート外に配置された要素へのタップは、以下のアプリでのみ有効です：

- Adapty SDK v4.2.1以降を使用するネイティブAndroidアプリ
- Adapty SDK v4.2.2以降を使用するReact Nativeアプリ

それ以外のAndroidアプリでは、ボタンやその他のタップ可能な要素はシート内に配置してください。
:::

## 購入ボタンを常に表示する \{#keep-the-purchase-button-in-view\}

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

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

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

## シートをスタイリングする \{#style-the-sheet\}

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

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

## スライディングシートとボトムシート \{#sliding-sheet-vs-bottom-sheet\}

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

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