フロー（ベータ版）

フローは現在、iOS、Android、React Native、Flutter、および Capacitor SDK v4 以降でサポートされています。他のプラットフォームやフレームワークへの対応は近日公開予定です。

インターフェース概要

フロービルダーのインターフェースとワークスペースの概要。

フローの一般的なレシピ

フロービルダーでよく使われる画面テンプレートを作成するためのステップバイステップガイド。

ナビゲーションとインタラクション

ユーザーを画面間で移動させ、ユーザーとやり取りする

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

Create paywalls, onboardings, and more: Create dynamic single- or multi-screen flows.
Full-featured flow templates: Start the flow with a professionally designed template.
Flexible design: Recreate complex screens visually: no code required.
Native rendering: The Adapty SDK renders flows natively without web views to ensure a seamless user experience.
Update without redeploying: Change copy, design, or logic any time. Updates reach your users without an app release.

作れるもの

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

アプリのオンボーディング: アプリの機能を紹介し、質問を通じてクイズの回答に基づいて強調する機能やCTAをパーソナライズします。パーソナライズされたオンボーディングフローの構築を参照してください。
ペイウォール画面: プレミアムコンテンツの前に機能制限を設け、機能一覧・価格・購入ボタンとともにプロダクトを提示します。基本的なペイウォール画面の作成を参照してください。
タブで表示する階層プラン: サブスクリプションの段階をタブに並べて表示し、ユーザーが切り替えると機能一覧とCTAも入れ替わります。タブ付きペイウォールの作成とプロダクトごとに異なる機能を表示するを参照してください。
展開可能なプラン一覧: 1つのハイライトされたオファーを最初に表示し、ユーザーが比較したいときにボトムシートでプランの全リストを展開します。ボトムシートにすべてのプランを表示するを参照してください。
アンケートとクイズ: 目標・好み・経験レベルを収集し、その回答をもとにフローを分岐させたり、以降の画面をカスタマイズしたりします。フロービルダーにおける入力とフォームを参照してください。
ソーシャルプルーフ: 購入判断の直前に、レビューカード・評価・ユーザーの声で信頼感を高めます。レビューと推薦コメントを参照してください。
プロモーション・ウィンバック画面: 期間限定割引・無料トライアルオファー・ウィンバック画面を活用して、離脱したユーザーを再エンゲージします。これらは最もよく使われるパターンに過ぎません。フローは柔軟で再利用可能な要素から構成されているため、プロダクトに必要なほぼあらゆるスクリーンを組み合わせて作ることができ、プロダクトが進化するたびに自由に作り変えることができます。

フローの作成についてさらに詳しく知りたいですか？YouTubeプレイリストでステップバイステップの動画チュートリアルをご覧ください。

フローを作成する

新しいフローを作成するには、カスタムデザインのギャラリーテンプレートまたは白紙のキャンバスを使用します。作成後は、以下の機能でカスタマイズできます。

エレメントライブラリ — テキスト、メディア、ボタン、フォームなどのコンテンツに使える既製ブロック。
アクション — 画面間の遷移、URL を開く、購入の実行など。
変数 — テキスト内での変数値の使用や、トリガーベースのフローロジックの有効化。
条件分岐ナビゲーション — ユーザーの入力に基づいてフローを分岐。
クイズと入力 — ユーザー入力の収集と処理。
ダークモード — デバイスのテーマに合わせてエレメントをスタイリング。
ローカライゼーション — 手動または AI を活用した方法で対応。下書きを保存して公開し、プレースメントに紐付けてください。プレースメントでは、オーディエンスごとに異なるフローを設定できます。

次のステップ

フローを作成する

カスタムデザインのギャラリーテンプレートまたはシンプルなスターターから新しいフローを始めましょう。

インターフェース概要

フロービルダーのインターフェースとワークスペースの概要。

フローの一般的なレシピ

フロービルダーでよく使われる画面テンプレートを作成するためのステップバイステップガイド。

フローへの移行

個別のオンボーディングとペイウォールをひとつの Adapty フローにまとめる方法を解説します。何が変わるのか、そして古いバージョンのアプリを使っているユーザーに影響を与えずにどう展開するかを説明します。

画面とレイヤー

フローを構成する各スクリーンと、スクリーン内の要素階層を管理します。

レイアウトと配置

レイアウト、位置モード、サイズ、スペーシングを使って要素を画面上に配置します。

スタイルと外観

要素の視覚的な外観（塗りつぶし、ボーダー、エフェクト、タイポグラフィ、状態、プロジェクト全体のスタイル）を設定します。

プロダクトと購入

フロービルダーでスクリーンにプロダクトを割り当て、プロダクト要素を追加し、購入ボタンを接続します。

要素

フロービ��ルダーで利用できるすべてのビジュアルエレメント：レイアウトコンテナ、テキスト、メディア、リスト、ボタン、入力フィールド、プロダクトなど。

ナビゲーションとインタラクション

ユーザーを画面間で移動させ、ユーザーとやり取りする

ダークモード

Adaptyのフローにダークモードを設定して、ユーザー体験を向上させる方法を説明します。

ローカライゼーション

ペイウォールとオンボーディングを複数言語にローカライズします。

リモートコンフィグによるフローのカスタマイズ

リモートコンフィグの JSON ペイロードを使って、フロービルダーのフローをカスタマイズします。

フローのプレビュー

最適なエクスペリエンスを実現するため、デバイス間でのフローの互換性をプレビューします。

フローの保存と公開

フローをドラフトとして保存し、ユーザーに公開する

フローの指標

フローのパフォーマンス指標を追跡・分析して、サブスクリプション収益を改善しましょう。

フォールバックフロー

デバイスがオフラインのときもフローを表示し続けるために、Adapty でローカルフォールバックフローを設定しましょう。