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

始める前に

• 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 パネルで、閉じるボタンのレイヤーにある三点メニュー をクリックし、Wrap > Wrap in Horizontal Container を選択します。

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

2つの要素を整列させるには:

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

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

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

プロダクトの管理について詳しくは、購入のセットアップを参照してください。

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

1. + > Products をクリックし、レイアウトプリセットを選択します。このテンプレートには「Vertical List」が適しています。
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つのリストは相互排他的で、どちらのプロダクトが選択されているかに応じて、一度に表示されるのは1つだけです。

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

次のステップ

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