---
title: "購入を有効にする"
description: "Adapty にフローまたはペイウォールを追加してプロダクトを表示し、プレースメントに紐付けます。"
---

:::info
このガイドを進めるには、[ストアの連携](integrate-payments)が完了していて、前の[プロダクト追加ガイド](quickstart-products)に従って少なくとも1つのプロダクトを作成していることを確認してください。
:::

プロダクトが用意できたら、次はユーザーへの見せ方を決める必要があります。Adaptyには3つの選択肢があります。
- **フローBuilder（推奨）**: 購入フロー全体を構築できるノーコードのビジュアルエディタです。Adapty SDKがネイティブにレンダリングするため、UIコードを書く必要はありません。
- **手動ペイウォール**: ペイウォールを作成してプロダクトを紐付け、UIはアプリのコードで自分でレンダリングします。
- **Adapty ペイウォールビルダー（レガシー）**: ノーコードのペイウォールエディタです。

どちらの方法も最終的には同じで、作成したコンテンツを[プレースメント](placements)に紐付けます。プレースメントとは、アプリが実行時に呼び出し、適切なユーザーに適切なコンテンツを返すための仕組みです。
<Tabs groupId="purchase-setup" queryString>
<TabItem value="flow-builder" label="Use the Flow Builder" default>

:::important
Flow Builder は現在、iOS および Android SDK v4 以降をサポートしています。他のプラットフォームへの対応は近日公開予定です。
:::

フローとは、プロダクトが直接埋め込まれた1つ以上の画面のことです。[Flow Builder](adapty-flow-builder) でデザインでき、コードは不要です。

Adapty SDK は各プラットフォームでフローをネイティブにレンダリングします。アプリが `getFlow` を呼び出すと、SDK が画面を表示し、購入を処理し、イベントを報告します。別途 UI コードを書く必要も、ペイウォールを別管理する必要もありません。
## 1. フローを作成する \{#1-build-the-flow\}

1. Adapty のメインメニューにある [**Flows**](https://app.adapty.io/flows) に移動します。
2. **Create flow** をクリックし、フローをデザインします。

[Adapty フロービルダー](adapty-flow-builder)について詳しく確認できます。

以下のテンプレートガイドでは、よく使われるパターンをステップごとに解説しています：

<CustomDocCardList ids={['basic-paywall-screen', 'show-plans-bottom-sheet', 'paywall-with-tabs', 'paywall-features-per-product', 'onboarding-flow-tutorial']} />

フローを保存して公開したら、次はプレースメントへの組み込みに進みましょう。
:::warning
フローを公開することを忘れずに！公開しないと、プレースメントに追加できません。
:::
### 2. フローをプレースメントに追加する \{#2-add-the-flow-to-a-placement\}

<InlineTooltip tooltip="プレースメント">プレースメントとは、フロー、ペイウォール、オンボーディング、またはA/Bテストをアプリ内で表示する特定の場所です。プレースメントを使うと、特定の[オーディエンス](audience)にコンテンツをターゲティングできます。[プレースメント](placements)について詳しく見る。</InlineTooltip>を作成することで、アプリが実行時にフローをリクエストできるようになります。

まずは最も基本的なオンボーディングのプレースメントから始めましょう。その後、ユーザージャーニー全体に[意味のあるプレースメント](choose-meaningful-placements)を追加していくことができます。
1. Adaptyのメインメニューから [**Placements**](https://app.adapty.io/placements) に移動し、**Flows** タブに切り替えます。
2. **Create placement** をクリックします。
3. **Placement name**（例：`main` や `onboarding`）を入力します。これはAdaptyダッシュボード内の内部識別子です。
4. **Placement ID** を入力します。このIDはAdapty SDKでプレースメントのフローを読み込む際に使用します。
5. **Run flow** をクリックし、作成したフローを選択します。
6. **Save & publish** をクリックします。
アプリのコードには、プレースメント ID のみをハードコードします。どのフローを実行するか、どのプロダクトを販売するか、見た目のデザインなど、それ以外のすべてはAdapty ダッシュボードで設定でき、アプリのアップデートなしにいつでも変更できます。

:::tip
Adapty では、さまざまなユーザーグループに異なるフローを表示し、パフォーマンスを分析できます。詳しくは[オーディエンス](audience)と[A/B テスト](ab-tests)をご覧ください。
:::

</TabItem>
<TabItem value="manual-paywall" label="Implement paywall manually">
<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/e4o7Z2tUGL8?si=ipwbW3VVN0fIg0R0"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>
ペイウォールは、1つ以上のプロダクトをリモートで管理するコンテナです。Adaptyはプロダクトリストと任意の[リモートコンフィグ](customize-paywall-with-remote-config) JSONペイロードを提供し、アプリのコードがそれを読み取ってUIを描画します。

:::tip
Adaptyをプログラムで設定しますか？この手順は[Developer CLI](developer-cli-quickstart)を使って行うこともできます。
:::
### 1. ペイウォールを作成する \{#1-create-a-paywall\}

1. Adapty メインメニューの [**Paywalls**](https://app.adapty.io/paywalls) を開きます。
2. **Create paywall** をクリックします。
3. **Paywall name** を入力します。これは Adapty ダッシュボード内の内部識別子です。
4. **Add product** をクリックして、ペイウォールに表示するプロダクトを選択します。
5. （任意）**Remote config** タブを開き、アプリが必要とする JSON ペイロード（タイトル、コピー、フィーチャーフラグなど）を追加します。詳細は[リモートコンフィグを使ったペイウォールのデザイン](customize-paywall-with-remote-config)を参照してください。
6. **Create as a draft** をクリックし、準備ができたら公開します。

  <img src="/assets/shared/img/quickstart-paywall.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

このペイウォールはアプリコードで描画します。<InlineTooltip tooltip="ペイウォールを手動で実装する">お使いのプラットフォームのガイドをご覧ください: [iOS](ios-implement-paywalls-manually)、[Android](android-implement-paywalls-manually)、[React Native](react-native-implement-paywalls-manually)、[Flutter](flutter-implement-paywalls-manually)、[Unity](unity-implement-paywalls-manually)。</InlineTooltip>
### 2. ペイウォールをプレースメントに追加する \{#2-add-the-paywall-to-a-placement\}

<InlineTooltip tooltip="プレースメント">プレースメントとは、フロー、ペイウォール、オンボーディング、または A/B テストを表示するアプリ内の特定のポイントです。プレースメントを使用すると、特定の[オーディエンス](audience)にコンテンツをターゲティングできます。[プレースメント](placements)の詳細はこちら。</InlineTooltip>を作成することで、アプリが実行時にペイウォールをリクエストできるようになります。

まずは最も基本的なオンボーディングプレースメントから始めましょう。その後、ユーザージャーニー全体にわたってさらに多くの[意味のあるプレースメント](choose-meaningful-placements)を追加できます。
1. Adaptyのメインメニューから [**Placements**](https://app.adapty.io/placements) に移動し、**Paywalls** タブに切り替えます。
2. **Create placement** をクリックします。
3. **Placement name**（例：`main` や `onboarding`）を入力します。これはAdapty ダッシュボード内の内部識別子です。
4. **Placement ID** を入力します。このIDをAdapty SDKで使用して、プレースメントのペイウォールを読み込みます。
5. **Run paywall** をクリックし、作成したペイウォールを選択します。
6. **Save & publish** をクリックします。

  <img src="/assets/shared/img/add-placement.gif"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

アプリのコードにはプレースメント ID のみをハードコードします。どのペイウォールを表示するか、どのプロダクトを販売するか、リモートコンフィグの内容はすべて Adapty ダッシュボードで設定でき、アプリを更新することなくいつでも変更できます。
:::tip
Adaptyでは、さまざまなユーザーグループに異なるペイウォールを表示し、パフォーマンスを分析できます。[オーディエンス](audience)と[A/B テスト](ab-tests)について詳しくはこちらをご覧ください。
:::

</TabItem>
<TabItem value="paywall-builder" label="Adapty Paywall Builder (Legacy)">

[ペイウォールビルダー](adapty-paywall-builder)で作成したペイウォールは、プロダクトが直接組み込まれたノーコード画面です。Adapty SDKがネイティブでレンダリングするため、UIのコードを書く必要はありません。
:::warning
ペイウォールビルダーは引き続き使用できますが、Adapty は今後このビルダーへの機能追加やアップデートの提供を行いません。新規プロジェクトでは、代わりに[フロービルダー](adapty-flow-builder)をご利用ください。
:::
### 1. ペイウォールを作成する \{#1-build-the-paywall\}

1. Adapty のメインメニューから [**Paywalls**](https://app.adapty.io/paywalls) に移動します。
2. **Create paywall** をクリックします。
3. **Paywall name** を入力します。これは Adapty ダッシュボード内部の識別子です。
4. **Add product** をクリックし、ペイウォールに表示するプロダクトを選択します。
5. **Builder & Generator** タブを開きます。テンプレートからペイウォールを作成するか、AI を使って生成します。
6. **Show on device** トグルをオンにすると、SDK がレンダリングできるようになります。

### 2. ペイウォールをプレースメントに追加する \{#2-add-the-paywall-to-a-placement\}

<InlineTooltip tooltip="プレースメント">プレースメントとは、フロー、ペイウォール、オンボーディング、または A/B テストを表示するアプリ内の特定のポイントです。プレースメントを使うと、特定の[オーディエンス](audience)にコンテンツをターゲティングできます。詳しくは[プレースメント](placements)をご覧ください。</InlineTooltip>を作成して、アプリが実行時にペイウォールをリクエストできるようにします。
1. Adapty のメインメニューで [**Placements**](https://app.adapty.io/placements) を開き、**Paywalls** タブに切り替えます。
2. **Create placement** をクリックします。
3. **Placement name**（例：`main` や `onboarding`）を入力します。これは Adapty ダッシュボード内の内部識別子です。
4. **Placement ID** を入力します。このIDは、Adapty SDK でプレースメントのペイウォールを読み込む際に使用します。
5. **Run paywall** をクリックして、作成したペイウォールを選択します。
6. **Save & publish** をクリックします。

アプリのコード内にハードコードするのはプレースメント ID のみです。どのペイウォールを表示するか、どのプロダクトを販売するか、どのような見た目にするか — これらはすべて Adapty ダッシュボードで設定でき、アプリのアップデートなしにいつでも変更できます。

</TabItem>
</Tabs>
## 次のステップ \{#next-steps\}

SDK が配信するコンテンツの準備が整いました。次は、アプリに [Adapty SDK を組み込み](quickstart-sdk)、プレースメントの取得を始めましょう。