---
title: "フローBuilder のボタン"
description: "フローBuilderでアクションボタンを追加・設定する方法。"
---

:::info
このセクションでは、Adapty SDK バージョン 4.0 以降で動作する新しいフロービルダーについて説明します。
:::
ボタンはフローのビルダーで、ユーザーのタップに反応するインタラクティブな要素です。次の用途に使用できます：
- プロダクトと連携して自動的に決済を処理する購入 CTA
- 画面間を移動するナビゲーション（次へ、戻る、閉じる、スキップ）
- 購入を復元する、利用規約、プライバシーポリシーなどのユーティリティリンク

:::tip
購入 CTA、購入復元リンク、法的リンクは [フッター](builder-containers#footer) 内に配置してください。フッターは画面の下部に固定され、スクロールする要素の上に重なって表示されます。
:::
## ボタンを追加する \{#add-buttons\}

ボタンを追加するには:

1. **+** をクリックして **Button** を選択します。
2. ボタンの種類を選択します。

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

3. 購入ボタン、リンク、閉じるボタンにはあらかじめアクションが設定されています。リンクについては、[ユーザーの遷移先URLを設定してください](#links)。その他のボタンタイプについては、**Interactions** パネルに移動してください。そこの **Button triggers** セクションで、ボタンが実行する[アクション](onboarding-actions)を設定します。

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

4. **Design** パネルで[ボタンのデザイン](builder-styling)を設定します。
## ボタンの種類 \{#button-types\}

### 購入ボタン \{#purchase-buttons\}

:::link
購入ボタンを機能させるには、プロダクトをスクリーンに紐付けて **Products** 要素を追加してください。詳しくは[ガイド](paywall-product-block)をご覧ください。
:::

購入ボタンは、ユーザーがスクリーンで選択したプロダクトのアプリ内課金を開始します。SDK がトランザクションを自動で処理するため、アプリのコードで購入処理を実装する必要はありません。

購入ボタンを追加するには：
1. **+** をクリックして **Button** を選択し、ボタンのプリセットを選びます。
2. ボタンを選択した状態で、右パネルの **Interactions** タブを開きます。
3. **Add trigger** > **On tap** をクリックし、**Add action** をクリックします。
4. **Action** を **Purchase**、**Product** を `products.selectedProduct` に設定します。`products.selectedProduct` 変数は、画面上で現在選択されているプロダクトに常に解決されます。

:::tip
購入ボタンにアニメーションを追加すると、より注目を集められます。ペイウォールビルダーは現在、**Pulse** アニメーションタイプをサポートしています。
**デザイン**パネルでアニメーションスタイルを設定します。
:::

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

### リンク \{#links\}

:::important
**Terms of Use** および **Privacy Policy** ボタンには、**Open URL** アクションが組み込まれています。リンク先の URL はそこで設定してください。Open URL が空のままの場合や[インラインリンク](onboarding-text#inline-link)が未設定の場合、プレビューと公開がブロックされます。
:::

一部のストア要件に対応するため、以下へのリンクを追加できます：
- 利用規約
- プライバシーポリシー
- 購入の復元
リンクを追加するには：
1. **+** をクリックし、**Button > Links** を選択します。これにより、購入の復元またはURLを開くといったアクションがあらかじめ設定されたインラインボタンの行が追加されます。含まれているボタンがすべて必要でない場合は、レイヤーパネルで不要なものを削除してください。

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

2. 次に、ボタンのアクションを設定します：

   - **Restore purchases** ボタンは、すでに購入の復元を処理します。
   - 残りの各リンクについて：
        1. ボタンをクリックして選択し、右側の **Interactions** タブに切り替えます。
        2. フィールドにURLを貼り付けます。
        3. デフォルトでは、URLはシームレスなユーザー体験のためにアプリ内ブラウザで開かれます。外部ブラウザに遷移させたい場合は、**Open in external browser** チェックボックスを選択してください。

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

### フローを閉じる \{#close-flow\}

**Close** ボタンをクリックすると、フローが自動的に閉じます。

閉じるボタンを追加するには、**+** をクリックして **Button > Close flow** を選択してください。

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

:::tip
**Absolute** ポジションを使用すると、閉じるボタンを画面の隅に配置できます。
:::
フローを閉じる[アクション](onboarding-actions)を使って、他のボタンでもフローを閉じるよう設定できます。
### カスタムボタン \{#custom-buttons\}

追加できるすべてのボタンは、タップ時に任意のアクションを実行するように設定できます：
- 次の画面へ移動する
- アラートを表示する
- [変数](onboarding-variables)を設定する
- [画面要素の表示・非表示を切り替える](onboarding-element-visibility)
- URLを開く
- 購入を復元する
- 条件付きアクションを実行する