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

始める前に

• Adapty ダッシュボードでプロダクトを作成する。
• AdaptyをApp StoreおよびGoogle Playに接続する。

1. 画面レイアウトを設定する

画面は、追加するすべての要素のコンテナとして機能します。この例では背景に画像を使用していますが、単色やグラデーションでも同様に機能します。

画面プロパティの全リストは、画面とレイヤー — 画面の設定を参照してください。

画面を設定するには：

1. キャンバスの空白部分をクリックして画面を選択します。
2. System UI の下にある Safe area を無効にして、背景が画面の端まで広がるようにします。
3. Fill の下で背景の種類を選んで設定します。この例では Image を使用していますが、単色やグラデーションでも同様に機能します。
4. Layout の下で方向を Vertical に設定し、要素が上から縦に並びコンテンツが残りのスペースを埋めるように、ギャップと配置を設定します。

2. 閉じるボタンを追加する

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

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

3. タイトルを追加して閉じるボタンと組み合わせる

見出しは画面上部の閉じるボタンの横に配置されます。横方向に揃えるには、両方を横方向コンテナでラップします。

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

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

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

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

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

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

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

4. プロダクトリストを追加する

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

プロダクトの管理の詳細は、購入を設定するを参照してください。

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

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

5. 最初のプロダクトの機能リストを追加する

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

条件付き表示の詳細は、条件付き表示を参照してください。

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

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

6. 2番目のプロダクトの機能リストを追加する

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

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

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

7. 購入ボタンを追加する

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

Purchase アクションの詳細は、アクション — Purchaseを参照してください。

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

1. + > Buttons をクリックしてボタンプリセットを選択します。
2. ボタンを選択した状態で Design タブを開き、Content フィールドにカーソルを置きます。変数アイコン をクリックし、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. フッターリンクを追加する

利用規約、プライバシーポリシー、購入の復元はメインコンテンツの下に配置されます。

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

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 リンクはそのままにします。アクションはあらかじめ設定済みです。

次のステップ

• フローを保存して公開する。
• プレースメントにフローを追加してユーザーへの表示を開始する。