これは最も一般的なペイウォールのテンプレートです。単独の画面として使うか、マルチ画面フローの最後に配置してください。

標準的なペイウォール画面には、見出し、価値説明、機能リスト、プロダクトリスト、購入ボタン、および購入の復元・利用規約・プライバシーポリシーへのフッターリンクが含まれます。

はじめる前に

• 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 をクリックし、リストプリセットを選択する。ペイウォールには Icon 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 ボタンはそのままにする。アクションはあらかじめ設定済みです。

次のステップ

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