---
title: "タブ付きペイウォールを作成する"
description: "2つのタブで異なるフィーチャーリスト、プロダクトグループ、購入アクションを切り替えるペイウォール画面を作成します。"
---

このテンプレートは、タブを使って1つの画面で同じオファーの2つのバリアントを切り替えます。各タブには独自のフィーチャーリスト、プロダクトリスト、購入ボタンが含まれています。タブをタップすると画面を離れることなく表示コンテンツが切り替わります。プラン階層、請求期間、またはオーディエンスセグメントでプランを分けるのに便利です。

## 始める前に \{#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 に設定し、要素が上から縦に並びタブコンテンツが残りのスペースを埋めるようにギャップと配置を設定します。

## 2. 閉じるボタンを追加する \{#2-add-the-close-button\}

閉じるボタンはペイウォールを閉じます。**Close** プリセットはあらかじめ設定済みのため、アクションの設定は不要です。

1. キャンバスで **+** をクリックします。
2. **Buttons** > **Close** を選択します。

## 3. タイトルを追加して閉じるボタンと組み合わせる \{#3-add-the-title-and-pair-it-with-the-close-button\}

見出しは画面上部で閉じるボタンの隣に配置されます。両方を横に並べるには、水平コンテナでまとめます。

タイトルを追加するには：

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

タイトルと閉じるボタンをグループ化するには：

1. **Layers** パネルで、閉じるボタンレイヤーの三点メニュー Context menu をクリックし、**Wrap** > **Wrap in Horizontal Stack** を選択します。

2. H1 レイヤーを新しい水平コンテナにドラッグします。

2つの要素を揃えるには：

1. 同じ行に無理なく収まるよう、閉じるボタンのサイズと H1 のフォントサイズを調整します。
2. 水平コンテナを選択した状態で、右パネルの配置と分布を設定して要素が正しく並ぶようにします。

## 4. タブを追加してラベルを設定する \{#4-add-the-tabs-and-configure-their-labels\}

タブ要素は画面のセクションを切り替え可能なコンテンツパネルに分割します。各タブには、そのタブが選択されたときに表示される独自のコンテンツコンテナがあります。

タブ要素の詳細は [要素 — タブ](builder-elements#tabs) を参照してください。選択可能なグループについては、[選択可能な要素とグループ](flow-selectable-elements)を参照してください。

タブを追加するには：

1. **+** > **Tabs** をクリックして、プリセット（Segment control、Button Tabs、Underline）を選択します。
2. キャンバスまたは **Layers** パネルで各タブの名前を選択した状態で、**Design** タブの **Content** フィールドを編集してラベルを変更します（例：`Premium` と `Pro`）。

## 5. 最初のタブにフィーチャーリストを追加する \{#5-add-a-feature-list-to-the-first-tab\}

最初のタブ内のコンパクトなフィーチャーリストで、そのプランに含まれる内容をユーザーに伝えます。

リストプリセットの完全なセットは、[要素 — リスト](builder-elements#list)を参照してください。

フィーチャーリストを追加するには：

1. **+** > **List** をクリックして、リストプリセットを選択します。Icon List がペイウォールに最もコンパクトです。要素はレイヤーツリーの末尾に表示されます。
2. 各行を選択した状態で、**Content** フィールドのタイトルを編集します。

3. **Layers** パネルで、リストを最初のタブの **Content** コンテナにドラッグします。

## 6. 最初のタブにプロダクトリストを追加する \{#6-add-the-product-list-to-the-first-tab\}

プロダクトリストは最初のタブのサブスクリプションオプションを表示します。Products 要素は画面に割り当てられたプロダクトごとに1つのカードをレンダリングし、独自の選択可能グループを作成します。

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

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

1. **+** > **Products** をクリックして、レイアウトプリセットを選択します。Vertical List は積み重なったプランに適しています。要素はレイヤーツリーの末尾に表示されます。
2. キャンバスで各プロダクトカードを選択し、**Design** タブのドロップダウンからプロダクトを選択します。

3. **Layers** パネルで、Products レイヤーを最初のタブの **Content** コンテナにドラッグします。

## 7. 最初のタブに購入ボタンを追加する \{#7-add-the-purchase-button-to-the-first-tab\}

購入ボタンは、最初のタブ内でユーザーが選択したプロダクトのアプリ内課金を開始します。ラベルには選択したプロダクトの価格が使用されるため、ユーザーの選択と常に同期します。

Purchase アクションの詳細は、[アクション — Purchase](onboarding-actions#purchase)を参照してください。

購入ボタンを追加して設定するには：

1. **+** > **Buttons** をクリックして、ボタンプリセットを選択します。要素はレイヤーツリーの末尾に表示されます。
2. ボタンを選択した状態で、**Design** タブを開いて **Content** フィールドにカーソルを置きます。変数アイコン Variable icon をクリックし、`products.selectedProduct` を選択してから `prod_price` 属性を選択します。変数全体は `products.selectedProduct.prod_price` になります。残りのラベルで囲みます（例：`Subscribe for {prod_price}`）。

3. **Interactions** タブに切り替えて、**Add trigger** > **On tap** > **Add action** をクリックします。
4. **Action** を **Purchase** に、**Product** を `products.selectedProduct` に設定します。

5. **Layers** パネルで、ボタンを最初のタブの **Content** コンテナにドラッグします。

## 8. 最初のタブのコンテンツを2番目のタブにコピーする \{#8-copy-the-first-tabs-content-into-the-second-tab\}

同じ構造を最初から作り直す代わりに、最初のタブのフィーチャーリスト、プロダクトリスト、購入ボタンを2番目のタブにコピーします。その後、値を更新するだけで済みます。

コンテンツをコピーするには：

1. **Layers** パネルで、最初のタブの **Content** コンテナを展開します。
2. 内部の各要素（フィーチャーリスト、プロダクト、購入ボタン）を選択し、⌘C / Ctrl+C でコピーして ⌘V / Ctrl+V で貼り付けます。コピーがレイヤーツリーの末尾に表示されます。
3. コピーされた各要素を2番目のタブの **Content** コンテナにドラッグします。

## 9. 2番目のタブのコンテンツを更新する \{#9-update-the-second-tabs-content\}

2番目のタブは最初のタブと同じ内容になっています。各要素を更新して2番目のプランを反映させます。

2番目のタブを更新するには：

1. 2番目のタブ内のフィーチャーリストを編集して、行が2番目のプランのフィーチャーと一致するようにします。
2. 2番目のタブの Products 要素で各プロダクトカードを選択し、ドロップダウンから2番目のプランのプロダクトを割り当てます。この Products 要素は自動的に別の選択可能グループ（`products2`）になります。
3. 2番目のタブの購入ボタンを選択します。**Design** タブの **Content** フィールドで、価格変数を `products.selectedProduct.prod_price` から `products2.selectedProduct.prod_price` に変更します。
4. **Interactions** タブに切り替えて、**Purchase** アクションの **Product** を `products.selectedProduct` から `products2.selectedProduct` に更新します。

## 10. 共有フッターリンクを追加する \{#10-add-the-shared-footer-links\}

利用規約、プライバシーポリシー、購入の復元は、どのタブがアクティブであっても常に表示されます。両方のタブコンテンツコンテナの外側の画面レベルに追加して、タブ間で共有されるようにします。

フッターリンクを追加するには：

1. **+** > **Buttons** > **Links** をクリックします。これにより、Restore Purchases、Terms of Use、Privacy Policy の行がレイヤーツリーの末尾に追加されます。これはタブ内にネストされず、画面のルートに配置されるため、正しい位置です。
2. **Layers** パネルで **Terms of Use** ボタンを選択します。**Interactions** タブを開き、**Open URL** フィールドに利用規約の URL を貼り付けます。
3. **Privacy Policy** ボタンにもプライバシー URL を入力して同じ手順を繰り返します。
4. **Restore Purchases** リンクはそのままにしておきます。アクションはあらかじめ設定済みです。

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

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