---
title: "基本的なペイウォール画面を作成する"
description: "フロービルダーで標準的なペイウォール画面を構築するためのステップバイステップガイド。"
---

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

- Adapty ダッシュボードで[プロダクトを作成する](create-product)。
- [Adapty を App Store と Google Play に接続する](integrate-payments)。

## 1. 再利用可能なスタイルを設定する \{#1-set-up-reusable-styles\}

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

詳しい手順については、[スタイルと外観 — 再利用可能なスタイル](builder-styling#reusable-styles)を参照してください。

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

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

## 2. 画面レイアウトを設定する \{#set-up-the-screen-layout\}

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

画面のプロパティの完全なリストについては、[画面とレイヤー — 画面の設定](paywall-layout-and-products#screen-settings)を参照してください。

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

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

## 3. 閉じるボタンを追加する \{#3-add-the-close-button\}

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

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

## 4. タイトルを追加してクローズボタンと組み合わせる \{#add-the-title-and-pair-it-with-the-close-button\}

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

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

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

タイトルをクローズボタンとグループ化するには：
1. **Layers** パネルで、閉じるボタンのレイヤーにある三点メニュー Context menu をクリックし、**Wrap** > **Wrap in Horizontal Container** を選択します。

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

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

## 5. 価値説明を追加する \{#5-add-the-value-description\}

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

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

## 6. 機能リストを追加する \{#add-the-feature-list\}

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

リストプリセットの全一覧については、[Elements — List](builder-elements#list) を参照してください。

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

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

## 7. プロダクトリストを追加する \{#add-the-product-list\}

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

プロダクトの管理について詳しくは、[購入の設定](paywall-product-block)を参照してください。

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

## 8. 購入ボタンを追加する \{#add-the-purchase-button\}

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

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

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

## 9. フッターリンクを追加する \{#add-footer-links\}

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

フッターリンクを追加するには：
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** ボタンはそのままにします。このボタンのアクションはあらかじめ設定済みです。

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

## 次のステップ \{#next-steps\}

- [フローを保存して公開する](builder-save-publish)。
- [プレースメントにフローを追加する](create-placement)ことで、ユーザーへの表示を開始できます。