---
title: "すべてのプランをボトムシートに表示する"
description: "シングルCTA、「すべてのプランを表示」リンク、プロダクト一覧を展開するボトムシートを備えたヒーローペイウォールを作成します。"
---

このテンプレートは、まず1つのハイライトされたオファーを前面に出し、プラン一覧への控えめなリンクを添えます。**Show all plans** をタップすると、他のプロダクト、購入ボタン、フッターリンクを含むボトムシートがスライドアップします。

特定のプランが突出したコンバージョン率を持つ場合に活用してください。ボトムシートにより、メイン画面をすっきり保ちながら、代替プランにワンタップでアクセスできます。

## 始める前に \{#before-you-start\}

- Adapty ダッシュボードで[プロダクトを作成](create-product)します。
- [Adapty を App Store および Google Play に接続](integrate-payments)します。

## 1. 画面レイアウトを設定する \{#1-set-up-the-screen-layout\}

ヒーロー画像を画面の背景として使用し、残りのコンテンツを下部にグループ化することで、画像が画面の上部を占めるようにします。

画面プロパティの完全なリストについては、[画面とレイヤー — 画面設定](paywall-layout-and-products#screen-settings)を参照してください。

画面を設定するには：

1. キャンバスの空白領域をクリックして画面を選択します。
2. **System UI** の下にある **Safe area** を無効にして、ヒーロー画像が画面の端まで広がるようにします。
3. **Fill** の下で **Image** Image を選択し、ヒーロー画像をアップロードします。
4. **Layout** の下で、方向、ギャップ、配置を設定して、コンテンツを好みの位置に固定します。このテンプレートでは、**Vertical** Vertical 方向に小さいギャップと **bottom-middle** 配置を使用して、見出しとボタンを画面下部にグループ化します。

## 2. CTAの見出しを追加する \{#2-add-the-cta-heading\}

見出しは画面の下部、サブスクライブボタンのすぐ上に配置されます。ヒーロー画像はその上の領域を埋めます。

1. **+** > **Text** > **H1** をクリックします。
2. H1 を選択した状態で、**Design** タブを開き、**Content** フィールドのテキストを編集します。

## 3. ボトムシートとそのタイトルを追加する \{#3-add-the-bottom-sheet-and-its-title\}

ボトムシートは、画面の下部からスライドアップするレイアウトコンテナです。今は表示状態で追加してください — 次のいくつかのステップでコンテンツを追加してから、完成したら非表示にします。非表示の要素は編集できないため、コンテンツを追加し終えるまでシートを表示状態に保つ必要があります。

ボトムシートやその他のレイアウトコンテナの詳細については、[エレメント — レイアウト](builder-elements#layout)を参照してください。

ボトムシートとそのタイトルを追加するには：

1. **+** > **Layout** > **Bottom Sheet** をクリックします。
2. **Layers** パネルでボトムシートを展開し、**Title** レイヤーを選択して、**Design** タブの **Content** フィールドを編集します（例：`Choose your plan`）。

## 4. ボトムシート内にプロダクト一覧を追加する \{#4-add-the-product-list-inside-the-bottom-sheet\}

すべてのプロダクトをボトムシート内に配置します。そのうちの1つはメインのCTAボタンに表示される価格にも使用されます。

プロダクトの管理について詳しくは、[購入の設定](paywall-product-block)を参照してください。

プロダクトを追加・設定するには：

1. **+** > **Products** をクリックし、レイアウトプリセットを選択します。ほとんどの場合、Vertical List が適しています。要素が画面上に表示されますが、ボトムシートの外側になります。
2. **Layers** パネルで、Products レイヤーをボトムシート内の **Content** コンテナにドラッグします。

3. キャンバス上の各プロダクトカードを選択し、**Design** タブのドロップダウンからプロダクトを選択します。

## 5. ボトムシート内に購入ボタンを追加する \{#5-add-the-purchase-button-inside-the-bottom-sheet\}

ボトムシートには、ユーザーがリストから選択したプランを購入するための専用の購入ボタンが必要です。

1. **+** > **Buttons** をクリックし、ボタンプリセットを選択します。
2. **Layers** パネルで、新しいボタンをボトムシート内の **Content** コンテナにドラッグします。

3. ボタンを選択した状態で、右パネルの **Interactions** タブを開きます。
4. **Add trigger** > **On tap** をクリックし、**Add action** をクリックします。
5. **Action** を **Purchase**、**Product** を `products.selectedProduct` に設定します。

## 6. ボトムシート内にフッターリンクを追加する \{#6-add-the-footer-links-inside-the-bottom-sheet\}

:::important
ボタン内にネストされたテキストには[インラインリンク](onboarding-text#inline-link)を使用しないでください。代わりに、ボタン自体に **Open URL** アクションを設定してください。
:::

利用規約、プライバシーポリシー、購入の復元はシートの下部に配置されます — メイン画面はすっきりと保たれます。

1. **+** > **Buttons** > **Links** をクリックします。これにより、Restore Purchases、Terms of Use、Privacy Policy の行が追加されます。
2. **Layers** パネルで、Links の行をボトムシート内の **Content** コンテナにドラッグします。
3. **Layers** パネルで、**Terms of Use** ボタンを選択します。**Interactions** タブを開き、**Open URL** フィールドに利用規約の URL を貼り付けます。
4. **Privacy Policy** ボタンでも同様に、プライバシー URL を設定します。
5. **Restore Purchases** リンクはそのままにしておきます。アクションは事前に設定されています。

## 7. ボトムシートを非表示にする \{#7-hide-the-bottom-sheet\}

シートのコンテンツが揃ったら、デフォルトで画面に表示されないように非表示にします。ユーザーは最後のステップで **Show all plans** をタップすることで表示できます。

**Layers** パネルでボトムシートを選択し、状態を **Hide** Hide に設定します。シートはレイヤーツリーに残りますが、キャンバスにはレンダリングされなくなります。

## 8. メインのサブスクライブボタンを追加する \{#8-add-the-main-subscribe-button\}

画面上のメインボタンは、ワンタップでユーザーを月額プランに登録します。ラベルには月額プロダクトの価格変数を使用するため、ボタンは常にプロダクトと同期されます。

1. **Layers** パネルでスクリーンをクリックして、新しい要素がボトムシート内ではなくルートに追加されるようにします。
2. **+** > **Buttons** をクリックし、ボタンプリセットを選択します。
3. ボタンを選択した状態で、**Design** タブを開き、**Content** フィールドにカーソルを置きます。Variable icon をクリックして、メインプロダクトの価格変数を選択します。残りのラベルで囲んでください — 例：`Subscribe for {price}/month`。

4. **Interactions** タブに切り替え、**Add trigger** > **On tap** > **Add action** をクリックします。
5. **Action** を **Purchase**、**Product** を必要なプロダクトに設定します。ボトムシートのボタンとは異なり、こちらは `products.selectedProduct` ではなく特定のプロダクトを対象とします。

## 9. 「すべてのプランを表示」リンクを追加する \{#9-add-the-show-all-plans-link\}

サブスクライブボタンの下にあるテキストリンクをタップすると、ボトムシートが表示されます。**Button Label** スタイルのテキスト要素として追加することで、見た目をミニマルに保ちながらアクションを設定できます。

Show/Hide アクションの詳細については、[アクション — 要素の表示/非表示](onboarding-actions#showhide-elements)を参照してください。

リンクを追加するには：

1. **Layers** パネルでスクリーンを選択した状態で、**+** > **Text** > **Button Label** をクリックします。
2. テキスト要素を選択した状態で、**Content** フィールドを `Show all plans` に編集します。
3. **Interactions** タブを開き、**Add trigger** > **On tap** > **Add action** をクリックします。
4. **Action** を **Show** に設定し、ドロップダウンからボトムシート要素を選択します。

## 次のステップ \{#next-steps\}

- [フローを保存して公開する](builder-save-publish)。
- [プレースメントにフローを追加して](create-placement)、ユーザーへの表示を開始する。