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

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

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

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

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

見出しは画面上部の閉じるボタンの横に配置します。横並びにするには、両方を水平方向のコンテナで囲みます。

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

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

タイトルと閉じるボタンをグループ化するには：
1. **レイヤー**パネルで、閉じるボタンのレイヤーにある3点メニュー Context menu をクリックし、**Wrap** > **Wrap in Horizontal Container** を選択します。

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

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

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

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

Tabs 要素の詳細については、[Elements — Tabs](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\}

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

リストのプリセット一覧については、[Elements — List](builder-elements#list) を参照してください。

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

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

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

## 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. 購入ボタンを最初のタブに追加する \{#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つ目のタブのコンテンツを更新する \{#update-the-second-tabs-content\}

現在、2つ目のタブは1つ目のタブと同じ内容になっています。各要素を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. フッターリンクを追加する \{#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)ことで、ユーザーへの表示を開始します。