フロー(ベータ版)
フローは現在、iOS、Android、React Native、Flutter、および Capacitor SDK v4 以降でサポートされています。他のプラットフォームやフレームワークへの対応は近日公開予定です。
インターフェース概要
フロービルダーのインターフェースとワークスペースの概要。
フローの一般的なレシピ
フロービルダーでよく使われる画面テンプレートを作成するためのステップバイステップガイド。
ナビゲーションとインタラクション
ユーザーを画面間で移動させ、ユーザーとやり取りする
Adaptyでは、ビジュアルなノーコードエディターでフローを作成できます。
- ペイウォール、オンボーディングなどの作成: 動的なシングルまたはマルチスクリーンのフローを作成できます。
- 充実したフローテンプレート: プロがデザインしたテンプレートからフローを始められます。
- 柔軟なデザイン: 複雑な画面もコード不要でビジュアルに再現できます。
- AI エディター: 変更内容を自然な言葉で説明するだけで画面に反映されます。プロパティを触らずにスタイル変更、文章の書き換え、要素の並び替えが可能です。
- ネイティブレンダリング: Adapty SDK はフローをウェブビューを使わずネイティブにレンダリングするため、シームレスなユーザー体験を実現します。
- 再デプロイ不要で更新: コピー、デザイン、ロジックはいつでも変更可能。アプリのリリースなしにユーザーへ届きます。
作れるもの
フローはアプリのどこにでも配置できます。初回起動時、プレミアム機能の前、重要なアクション後など、あらゆる場面に対応します。すべての画面は自由にカスタマイズできるので、それぞれのフローをその場面に合わせた内容にできます。主な活用例を紹介します。
- アプリのオンボーディング: アプリの機能を紹介し、質問を通じてクイズの回答に基づいて強調する機能やCTAをパーソナライズします。パーソナライズされたオンボーディングフローの構築を参照してください。
- ペイウォール画面: プレミアムコンテンツの前に機能制限を設け、機能一覧・価格・購入ボタンとともにプロダクトを提示します。基本的なペイウォール画面の作成を参照してください。
- タブで表示する階層プラン: サブスクリプションの段階をタブに並べて表示し、ユーザーが切り替えると機能一覧とCTAも入れ替わります。タブ付きペイウォールの作成とプロダクトごとに異なる機能を表示するを参照してください。
- 展開可能なプラン一覧: 1つのハイライトされたオファーを最初に表示し、ユーザーが比較したいときにボトムシートでプランの全リストを展開します。ボトムシートにすべてのプランを表示するを参照してください。
- アンケートとクイズ: 目標・好み・経験レベルを収集し、その回答をもとにフローを分岐させたり、以降の画面をカスタマイズしたりします。フロービルダーにおける入力とフォームを参照してください。
- ソーシャルプルーフ: 購入判断の直前に、レビューカード・評価・ユーザーの声で信頼感を高めます。レビューと推薦コメントを参照してください。
- プロモーション・ウィンバック画面: 期間限定割引・無料トライアルオファー・ウィンバック画面を活用して、離脱したユーザーを再エンゲージします。 これらは最もよく使われるパターンに過ぎません。フローは柔軟で再利用可能な要素から構成されているため、プロダクトに必要なほぼあらゆるスクリーンを組み合わせて作ることができ、プロダクトが進化するたびに自由に作り変えることができます。
フローの作成についてさらに詳しく知りたいですか?YouTubeプレイリストでステップバイステップの動画チュートリアルをご覧ください。
フローを作成する
新しいフローを作成するには、カスタムデザインのギャラリーテンプレートまたは白紙のキャンバスを使用します。作成後は、以下の機能でカスタマイズできます。
- エレメントライブラリ — テキスト、メディア、ボタン、フォームなどのコンテンツに使える定義済みブロック。
- アクション — 画面間のナビゲーション、URLを開く、購入の実行など。
- 変数 — テキスト内で変数の値を使用したり、トリガーベースのフローロジックを有効化したりする。
- 条件付きナビゲーション — ユーザーの入力に基づいてフローを分岐させる。
- クイズと入力 — ユーザー入力を収集・処理する。
- AI エディター — 変更内容を自然言語で説明すると、AIが現在の画面に適用する。
- ダークモード — デバイスのテーマに合わせてエレメントのスタイルを設定する。
- ローカライゼーション — 手動またはAIによる自動化に対応。
下書きを保存して公開し、プレースメントに紐付けてください。プレースメントでは、オーディエンスごとに異なるフローを設定できます。
次のステップ
フローを作成する
カスタムデザインのギャラリーテンプレートまたはシンプルなスターターから新しいフローを始めましょう。
インターフェース概要
フロービルダーのインターフェースとワークスペースの概要。
AI エディター
変更内容を平易な言葉で伝えるだけで、AI エディターがフロースクリーンに適用します。プロパティを一切触らずに、スタイルの変更・テキストの書き直し・要素の並び替えが可能です。
フローの一般的なレシピ
フロービルダーでよく使われる画面テンプレートを作成するためのステップバイステップガイド。
フローへの移行
個別のオンボーディングとペイウォールをひとつの Adapty フローにまとめる方法を解説します。何が変わるのか、そして古いバージョンのアプリを使っているユーザーに影響を与えずにどう展開するかを説明します。
画面とレイヤー
フローのビルダーで、各スクリーンのスクリーンと要素のヒエラルキーを管理します。
レイアウトと配置
レイアウト、位置モード、サイズ、スペーシングを使って要素を画面上に配置します。
スタイルと外観
要素の視覚的な外観(塗りつぶし、ボーダー、エフェクト、タイポグラフィ、状態、プロジェクト全体のスタイル)を設定します。
プロダクトと購入
フロービルダーでスクリーンにプロダクトを割り当て、プロダクト要素を追加し、購入ボタンを接続します。
要素
フロービルダーで利用できるすべてのビジュアルエレメント:レイアウトコンテナ、テキスト、メディア、リスト、ボタン、入力フィールド、プロダクトなど。
ナビゲーションとインタラクション
ユーザーを画面間で移動させ、ユーザーとやり取りする
ダークモード
Adaptyのフローにダークモードを設定して、ユーザー体験を向上させる方法を説明します。
ローカライゼーション
ペイウォールとオンボーディングを複数言語にローカライズします。
リモートコンフィグによるフローのカスタマイズ
リモートコンフィグの JSON ペイロードを使って、フロービルダーのフローをカスタマイズします。
フローのプレビュー
デバイス間のフロー互換性をプレビューして、最適なエクスペリエンスを確認できます。
フローの保存と公開
フローを下書きとして保存し、ユーザーに公開する
フローの検索とフィルタリング
フローの検索、フィルタリング、並べ替えを行い、各フローで利用可能なアクションを開きます。
フローと画面のコピー
フロー全体を複製してオーディエンスやA/Bテストのバリアント向けに調整したり、単一の画面をコピーして再利用したりできます。
フローのアーカイブと復元
不要になったフローをアーカイブしてその指標を保持します。アーカイブされたフローを復元して再び使用できます。
フローの指標
フローのパフォーマンス指標を追跡・分析して、サブスクリプション収益を改善しましょう。
フォールバックフロー
デバイスがオフラインのときもフローを表示し続けるために、Adapty でローカルフォールバックフローを設定しましょう。
よくある問題
フローのプレビュー、公開、またはフロービルダーでの動作に問題が発生した場合の解決方法。
ペイウォールビルダーとオンボーディングビルダーの廃止
2026年10月1日をもって、Adaptyはレガシーのペイウォールビルダーとオンボーディングビルダーを廃止します。公開済みのペイウォールとオンボーディングは引き続き機能し、編集も可能です。新しいものはフロービルダーで作成してください。