---
title: "フロー（ベータ版）"
description: "インタラクティブなフローを構築できるビジュアルノーコードエディタ。アプリのリリースなしにコピー、デザイン、価格を更新できます。"
---

:::important
フローは現在 iOS SDK v4 以降でサポートされています。他のプラットフォームやフレームワークへの対応も近日公開予定です。
:::

<CustomDocCardList ids={['builder-ui', 'flow-builder-recipes', 'builder-navigation-actions']} />

Adapty では、ビジュアルノーコードエディタでフローを作成できます。

- **ペイウォール、オンボーディングなどを作成**: 動的な1画面または複数画面のフローを作成できます。
- **柔軟なデザイン**: 複雑な画面をビジュアルで再現できます。コードは不要です。
- **ネイティブレンダリング**: Adapty SDK はフローをWebビューを使わずネイティブでレンダリングし、シームレスなユーザー体験を実現します。
- **再デプロイ不要で更新**: コピー、デザイン、ロジックをいつでも変更できます。アプリのリリースなしにユーザーへ変更が反映されます。

## 構築できるもの \{#what-you-can-build\}

フローはアプリのどこにでも配置できます。初回起動時、プレミアム機能の前、または重要なアクションの後など、あらゆる場面に対応します。すべての画面は完全にカスタマイズ可能で、各フローをその場面に合わせることができます。代表的な活用例をご紹介します。

- **アプリオンボーディング**: アプリの機能を紹介し、質問してユーザーに合わせ、クイズの回答に基づいてハイライトする機能やCTAをパーソナライズします。[パーソナライズされたオンボーディングフローを構築する](onboarding-flow-tutorial)をご覧ください。
- **ペイウォール画面**: プレミアムコンテンツの前に機能ゲートを置き、機能リスト、価格、購入ボタンとともにプロダクトを提示します。[基本的なペイウォール画面を作成する](basic-paywall-screen)をご覧ください。
- **タブでのプラン階層表示**: サブスクリプションの各ティアをタブで並べて表示し、ユーザーがタブを切り替えると機能リストとCTAが切り替わります。[タブ付きペイウォールを作成する](paywall-with-tabs)と[プロダクトごとに異なる機能を表示する](paywall-features-per-product)をご覧ください。
- **展開可能なプランリスト**: 注目のオファーを最初に表示し、ユーザーが比較したいときにボトムシートで全プロダクトリストを表示します。[ボトムシートで全プランを表示する](show-plans-bottom-sheet)をご覧ください。
- **アンケートとクイズ**: 目標、好み、経験レベルを収集し、回答に基づいてフローを分岐させたり、後続の画面をカスタマイズしたりできます。[フロービルダーでのインプットとフォーム](builder-inputs-and-forms)をご覧ください。
- **ソーシャルプルーフ**: 購入の意思決定の直前に、レビューカード、評価、ユーザーの声で信頼を高めます。[レビューとユーザーの声](builder-reviews-and-testimonials)をご覧ください。
- **プロモーションとウィンバック画面**: 期間限定割引、無料トライアルオファー、または離脱したユーザーを再エンゲージするウィンバック画面を実施します。

これらはよく使われるパターンの一例に過ぎません。フローは柔軟で再利用可能な要素から構築されているため、プロダクトが必要とするほぼあらゆる画面を組み合わせて作成できます。また、プロダクトが進化するたびに作り直すことも可能です。

## フローを作成する \{#create-a-flow\}

**Flows** ページを開き、**Create flow** をクリックします。以下のツールを使ってフローをカスタマイズします。

- **[要素ライブラリ](builder-elements)** — テキスト、メディア、ボタン、フォーム、その他のコンテンツ用のプリビルドブロック。
- **[アクション](onboarding-actions)** — 画面間のナビゲーション、URLを開く、購入を実行するなど。
- **[変数](onboarding-variables)** — テキストや、トリガーベースのフローロジックを有効にするために変数の値を使用。
- **[条件付きナビゲーション](onboarding-navigation-branching)** — ユーザーの入力に基づいてフローを分岐。
- **[クイズとインプット](builder-inputs-and-forms)** — ユーザー入力の収集と処理。
- **[ダークモード](paywall-dark-mode)** — デバイスのテーマに合わせて要素をスタイリング。
- **[ローカライズ](add-paywall-locale-in-adapty-paywall-builder)** — 手動またはAIを活用。

下書きを[保存して公開](builder-save-publish)したら、[プレースメント](create-placement)に紐付けます。プレースメントには、[オーディエンス](add-audience-paywall-ab-test)ごとに異なるフローを設定できます。

このクイックスタート動画に従って、基本的なパーソナライズドフローを作成してみましょう。

<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/aa-m459VIuY?si=zN_Co6B6qB88UPZP"
        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>

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

<CustomDocCardList />