これは最もよく使われるペイウォールのテンプレートです。単独の画面として使うか、マルチ画面フローの末尾に配置してください。 標準的なペイウォール画面には、見出し、価値の説明、機能リスト、プロダクトリスト、購入ボタン、および購入の復元・利用規約・プライバシーポリシーへのフッターリンクが含まれています。

はじめる前に

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

1. 再利用可能なスタイルを設定する

再利用可能なスタイルを使うと、同じタイポグラフィやカラーをすべての画面にワンクリックで適用できます。新しいフローには、デフォルトのテキストスタイル（H1、Body、Button Label など）があらかじめ用意されています。要素を追加し始める前に、自分のデザインに合わせて調整しておきましょう。また、画面全体で使うブランドカラーのカラースタイルも追加してください。

詳細な手順については、要素のスタイリング — 再利用可能なスタイルを参照してください。

スタイルを設定するには：

1. 左パネルで Styles パネルを開きます。
2. Text タブで既存のスタイルをクリックし、フォント・ウェイト・サイズ・カラーを編集します。デフォルトで足りない場合のみ新しいスタイルを追加してください。

3. Colors タブで Create style をクリックし、画面全体で再利用する予定の色を追加します。

2. スクリーンレイアウトを設定する

スクリーン自体が、追加するすべての要素のコンテナとして機能します。後で追加する要素が正しく配置されるよう、レイアウト、背景、パディングをまず設定しましょう。

スクリーンのプロパティ一覧については、スクリーンとレイヤー — スクリーン設定を参照してください。

スクリーンを設定するには：

1. キャンバスの空白部分をクリックして画面を選択します。右パネルが画面設定に切り替わります。
2. System UI の下にある Safe area を無効にして、コンテンツが画面端まで広がるようにします。
3. Layout の下で、方向を Vertical に、配置を Space evenly に設定します。

4. Fill の下で、背景の種類を選択します — 単色、グラデーション、または画像。この例では、2つのカラーストップを持つ Gradient を使用します。

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

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

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

4. タイトルを追加してクローズボタンと組み合わせる

H1はスクリーン上部のクローズボタンの隣に配置します。横並びにするため、両方を横並びコンテナで囲みます。

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

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

タイトルをクローズボタンとグループ化するには：

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

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

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

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

5. 価値説明を追加する

タイトルの下にある短いボディテキストで、ユーザーがサブスクリプションから得られるものを説明します。

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

6. 特典リストを追加する

特典リストは、サブスクリプションを解除すると得られる内容を強調表示します。各行にはアイコン、特典タイトル、短い説明が含まれます。

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

特典リストを追加するには：

1. + > List をクリックし、リストプリセットを選択します。アイコンリストはペイウォールで最もよく使われます。
2. 各行を選択した状態で、Content フィールドでタイトルと説明を編集します。
3. 行を追加・削除するには、リストを選択して Layers パネルの行コントロールを使います。

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

プロダクトリストには、ユーザーが選択できるサブスクリプションの選択肢が表示されます。Products 要素は、画面に割り当てられたプロダクトごとに1枚のカードをレンダリングし、1枚のカードが自動的にデフォルトとしてマークされます。

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

プロダクトを追加・設定するには、以下の手順を行います：

1. + > Products をクリックし、レイアウトのプリセットを選択します。縦並びリスト（Vertical List）が最も一般的です。
2. キャンバス上の各プロダクトカードを選択し、Design タブのドロップダウンからプロダクトを選びます。ドロップダウンには Adapty ダッシュボードで設定済みのすべてのプロダクトが表示されます。
3. デフォルトの選択を変更するには、対象のカードを選択し、Design タブで Set as default product を有効にします。
4. 割引バッジをカスタマイズするには、Layers パネルでプロダクトカードを展開し、バッジレイヤーを選択して Content フィールドでテキストを編集します。その他のカードのバッジを非表示にするには、各バッジレイヤーの隣にある目のアイコン をクリックして切り替えます。

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

購入ボタンは、ユーザーが選択したプロダクトのアプリ内課金を開始します。products.selectedProduct 変数は常に画面上で現在選択されているプロダクトを参照します。

購入ボタンを追加するには：

1. + > Buttons をクリックして、ボタンのプリセットを選択します。
2. ボタンを選択した状態で、右パネルの Interactions タブを開きます。
3. Add trigger > On tap をクリックし、続けて Add action をクリックします。
4. Action を Purchase、Product を products.selectedProduct に設定します。

9. フッターリンクを追加する

フッターには、利用規約とプライバシーポリシーへのリンク（アプリストアが要求する必須項目）と、過去の購入を復元するボタンが含まれます。

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

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 ボタンはそのままにします。このボタンのアクションはあらかじめ設定されています。

次のステップ

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