タブ付きペイウォールを作成する

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

始める前に

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

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

画面は、閉じるボタン・見出し・タブ・タブコンテンツを収めるコンテナとして機能します。この例では背景に画像を使っていますが、単色やグラデーションでも同じように設定できます。

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

画面を設定するには:

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

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

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

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

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

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

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

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

H1 added to the screen with the Content field on the right

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

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

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

Close button and H1 grouped in a horizontal container

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

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

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

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

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

タブを追加するには:

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

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

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

リストのプリセット一覧については、Elements — List を参照してください。

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

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

Feature list inside the first tab's content container

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

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

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

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

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

+ > Products をクリックしてレイアウトのプリセットを選択します。縦並びのプランには Vertical List がおすすめです。要素はレイヤーツリーの末尾に追加されます。
キャンバス上の各プロダクトカードを選択し、Design タブのドロップダウンからプロダクトを選択します。

Configuring the Products element and dragging it into the first tab's Content container

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

7. 購入ボタンを最初のタブに追加する

購入ボタンは、最初のタブでユーザーが選択したプロダクトのアプリ内課金を開始します。ボタンのラベルには選択中のプロダクトの価格が表示されるため、ユーザーの選択と常に同期した状態になります。

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

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

+ > Buttons をクリックし、ボタンのプリセットを選択します。要素はレイヤーツリーの末尾に追加されます。
ボタンを選択した状態で Design タブを開き、Content フィールドにカーソルを置きます。変数アイコンをクリックし、products.selectedProduct を選択してから prod_price 属性を選択します。変数は products.selectedProduct.prod_price として解決されます。残りのラベルテキストで囲んでください。例: Subscribe for {prod_price}。

Purchase button inside the first tab with the selected product price in the label

Interactions タブに切り替え、Add trigger > On tap > Add action をクリックします。
Action を Purchase、Product を products.selectedProduct に設定します。

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

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

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

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

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

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

現在、2つ目のタブは1つ目のタブと同じ内容になっています。各要素を2つ目のプランの内容に更新しましょう。

2つ目のタブを更新するには：

2番目のタブ内のフィーチャーリストを編集し、行が2番目のプランの機能と一致するようにします。
2番目のタブの Products 要素で各プロダクトカードを選択し、ドロップダウンから2番目のプランのプロダクトを割り当てます。この Products 要素は自動的に別の選択可能なグループ（products2）になります。
2番目のタブの購入ボタンを選択します。Design タブの Content フィールドで、価格変数を products.selectedProduct.prod_price から products2.selectedProduct.prod_price に変更します。
Interactions タブに切り替え、Purchase アクションの Product を products.selectedProduct から products2.selectedProduct に更新します。

利用規約、プライバシーポリシー、購入履歴の復元は、どのタブがアクティブな場合でも表示されます。これらはタブコンテンツのコンテナの外側、つまり画面レベルに配置することで、タブ間で共有されます。

フッターリンクを追加する手順：

+ > Buttons > Links をクリックします。これにより、レイヤーツリーの末尾に「Restore Purchases」「Terms of Use」「Privacy Policy」の行が追加されます。タブの内側にネストされるのではなく、スクリーンのルートに配置されるため、ここが適切な位置です。
Layers パネルで Terms of Use ボタンを選択します。Interactions タブを開き、Open URL フィールドに利用規約の URL を貼り付けます。
Privacy Policy ボタンについても、プライバシーポリシーの URL を使って同じ手順を繰り返します。
Restore Purchases リンクはそのままにしておきます。アクションはあらかじめ設定されています。

次のステップ

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