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

始める前に

• 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 Stack を選択します。

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

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

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

4. タブを追加してラベルを設定する

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

タブ要素の詳細は 要素 — タブ を参照してください。選択可能なグループについては、選択可能な要素とグループを参照してください。

タブを追加するには：

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

5. 最初のタブにフィーチャーリストを追加する

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

リストプリセットの完全なセットは、要素 — リストを参照してください。

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

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

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

6. 最初のタブにプロダクトリストを追加する

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

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

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

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

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

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

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

8. 最初のタブのコンテンツを2番目のタブにコピーする

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

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

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

9. 2番目のタブのコンテンツを更新する

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. 共有フッターリンクを追加する

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

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

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

次のステップ

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