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

これは最も一般的なペイウォールのテンプレートです。単独の画面として使うか、マルチ画面[フロー](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. 画面レイアウトを設定する \{#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. タイトルを追加して閉じるボタンと並べる \{#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. 機能リストを追加する \{#6-add-the-feature-list\}

機能リストは、サブスクリプションに含まれる内容をハイライトします。各行にはアイコン、機能タイトル、短い説明が含まれます。

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

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

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

## 7. プロダクトリストを追加する \{#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. 購入ボタンを追加する \{#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. フッターリンクを追加する \{#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)ことで、ユーザーへの表示を開始できます。