基本的なペイウォール画面を作成する

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

はじめる前に

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

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

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

詳しい手順については、スタイルと外観 — 再利用可能なスタイルを参照してください。

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

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

Colors タブで Create style をクリックし、画面全体で繰り返し使う予定のカラーを追加します。

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

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

画面のプロパティの完全なリストについては、画面とレイヤー — 画面の設定を参照してください。

画面を設定するには：

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

Safe areaをオフにし、Vertical / Space evenlyレイアウトを設定した画面設定

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

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

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

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

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

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

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

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

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

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

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

Three-dot context menu on the close button layer showing Wrap in Horizontal Container

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

Dragging the H1 layer into the new horizontal container

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

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

5. 価値説明を追加する

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

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

6. 機能リストを追加する

機能リストは、サブスクリプションを解除することで利用できる機能を一覧表示します。各行にはアイコン、機能タイトル、簡単な説明が含まれます。

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

機能リストを追加するには:

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

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

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

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

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

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

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

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

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

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

フッターには、利用規約とプライバシーポリシーへのリンク（アプリストアの要件）、および以前の購入を復元するボタンが含まれています。

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

+ > Buttons > Links をクリックします。これにより、Restore Purchases、Terms of Use、Privacy Policy の行が追加されます。
Layers パネルで Terms of Use ボタンを選択します。Interactions タブを開くと、Open URL アクションがすでに設定されています。アクションをクリックして、対象の URL を入力します。
Privacy Policy ボタンでも同様に、プライバシーポリシーの URL を入力します。
Restore Purchases ボタンはそのままにします。このボタンのアクションはあらかじめ設定済みです。

要素の位置が高すぎる・低すぎると感じる場合や、余白を追加したい場合は、その要素のマージンとパディングを調整してください。

次のステップ

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

基本的なペイウォール画面を作成する

はじめる前に

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

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

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

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

5. 価値説明を追加する

6. 機能リストを追加する

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

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

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

次のステップ