---
title: "プロダクトごとに異なる機能を表示する"
description: "条件付き表示を使って、ユーザーが選択したプロダクトに応じて異なる機能リストを表示します。"
---

このテンプレートは条件付き表示を使って、プランごとに異なる機能リストを強調表示します。画面には2つのプロダクト（例：ProとPro+）が表示され、ユーザーが選択したプロダクトに応じて異なる機能リストが表示されます。1つのプロダクトはデフォルトとして設定されるため、画面が最初に読み込まれたときにそのプロダクトの機能リストが表示されます。

## 始める前に \{#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** パネルで、閉じるボタンレイヤーの3点メニュー Context menu をクリックし、**Wrap** > **Wrap in Horizontal Container** を選択します。

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

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

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

## 4. プロダクトリストを追加する \{#4-add-the-product-list\}

ユーザーが選択できるプロダクトを追加します。画面が最初に読み込まれたときに意味のある状態になるよう、1つをデフォルトとして設定します。

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

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

1. **+** > **Products** をクリックしてレイアウトプリセットを選択します。このテンプレートには縦方向リストが適しています。
2. キャンバス上の各プロダクトカードを選択し、**Design** タブのドロップダウンからプロダクトを選びます。
3. デフォルトで選択したいカード（例：Pro+）を選択し、**Design** タブで **Set as default product** を有効にします。

## 5. 最初のプロダクトの機能リストを追加する \{#5-add-the-feature-list-for-the-first-product\}

最初の機能リストはデフォルトのプロダクトを説明します。ユーザーが最初のプロダクトを選択しているときのみ表示されます。

条件付き表示の詳細は、[条件付き表示](onboarding-element-visibility)を参照してください。

:::tip
2つの別々のリストの代わりに、単一のリストを追加してその中のテキスト要素を条件付きにすることで、1つのリストが選択されたプロダクトに応じて変化するようにできます。[条件付きテキストを追加する](onboarding-text#add-conditional-text)を参照してください。
:::

機能リストを追加して設定するには：

1. **+** > **List** をクリックしてコンパクトなリストプリセットを選択します。ペイウォールにはアイコンリストが適しています。
2. 各行を選択した状態で、**Content** フィールドのタイトルを編集して最初のプロダクトの機能を説明します。
3. リストを選択した状態で **Design** タブを開きます。**Visibility** の下で **Conditional** Conditional を選択します。
4. 最初のプロダクトが現在選択されているときのみリストが表示されるよう条件を設定します。`products.selectedProduct.prod_title` 変数と照合します。**Value** については、変数アイコン `{}` をクリックし、最初のプロダクトカードを選んでから `prod_title` 属性を選択します。比較結果はそのプロダクトのタイトルに解決されます。

## 6. 2番目のプロダクトの機能リストを追加する \{#6-add-the-feature-list-for-the-second-product\}

2番目のプロダクトについても同じ手順を繰り返します。2つのリストは相互排他的であり、選択されているプロダクトに応じてどちらか一方のみが表示されます。

2番目の機能リストを追加するには：

1. **+** > **List** をクリックして、視覚的な一貫性のために同じコンパクトプリセットを選択します。
2. 各行を編集して2番目のプロダクトの機能を説明します。
3. **Visibility** の下で **Conditional** Conditional を選択し、手順5と同じ条件を設定しますが、**Value** の変数ピッカーで2番目のプロダクトカードの `prod_title` を指定します。

## 7. 購入ボタンを追加する \{#7-add-the-purchase-button\}

購入ボタンは、ユーザーが選択したプロダクトのアプリ内課金を開始します。ラベルには選択されたプロダクトの価格が使用されるため、ユーザーがプランを切り替えると更新されます。

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` に設定します。

## 8. フッターリンクを追加する \{#8-add-the-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)ユーザーへの表示を開始する。