パーソナライズされたオンボーディングフローを構築する

フローは、ナビゲーションアクションによって連結された複数のスクリーンのシーケンスです。フローは直線的な構成にすることも、前のスクリーンで収集したユーザー入力に基づいて分岐させることもできます。このチュートリアルでは、4スクリーン構成のオンボーディングフローを実例として、スクリーンの作成・コンテンツの構築・ナビゲーションの設定・条件分岐の追加という一連のプロセスを説明します。

この例では次のものを使用します：

ユーザーの名前をパーソナライゼーション用の変数として取得する名前入力。
回答によって次に表示される画面を分岐させる一択クイズ。
各オーディエンスセグメント向けに最適化されたコピーを持つ2つの分岐パス。
最終画面としてのペイウォール。

同じパターンは、ユーザーの入力に基づいてコンテンツをパーソナライズするあらゆるフローに応用できます。

動画形式をご希望の方には、同じプロセスをエンドツーエンドで説明するクイックスタートチュートリアルもあります：

始める前に

Adapty ダッシュボードでプロダクトを作成してください。この例のフローでは、年間と月間の2つのサブスクリプションを使用します。
Adapty を App Store と Google Play に接続してください。

1. 再利用可能なスタイルを設定する

再利用可能なスタイルを使うと、一貫したタイポグラフィとカラーをすべての画面に一クリックで適用できます。カラースタイルにはライトとダークの2バリアントが含まれているため、フローは両方のテーマに自動対応します。

詳細な手順については、スタイルと外観 — 再利用可能なスタイルを参照してください。

スタイルを設定するには:

左パネルで Styles パネルを開きます。
Colors タブで Create style をクリックして、再利用する色を追加します。各色について、Light の値を選択してから Dark タブに切り替え、Dark の値を選択します。

Colors tab in the Styles panel with Light and Dark variants

Text タブで、既存のスタイルをクリックしてフォント・ウェイト・サイズを編集するか、 Create style をクリックしてカスタムプリセットを追加します。

2. スクリーンを作成する

フローはスクリーンの連続で構成されます。まず最初のスクリーンに共通のベース（レイアウト、背景、セーフエリア）を設定し、それを複製して残りのスクリーンを作成しましょう。こうすることで、すべてのスクリーンが同じ基盤を共有し、設定は一度で済みます。

スクリーンの管理についての詳細は、スクリーンとレイヤー — スクリーンを管理するを参照してください。

スクリーンを設定するには：

キャンバスの空白部分をクリックして、最初の画面のスクリーン設定を開きます。
System UI の下にある Safe area を無効にして、背景やエッジに配置された要素が画面の端まで広がるようにします。
Fill の下で背景の種類を選択して設定します — たとえば、フローのすべての画面の背景に表示される Image などです。
Layout の下で方向を Vertical に設定し、デザインに合ったレイアウト方式を選択します。

Screen settings with background image, safe area off, and vertical layout

左パネルの Screens セクションで、最初のスクリーンの三点メニューをクリックし、Duplicate を選択します。合計4つのスクリーンができるまで繰り返してください。2つ目の分岐パスは、後で最初のスクリーンを複製して追加します。
各スクリーンの役割に合わせて名前を変更します。今回の例では、Welcome、Quiz、Rock path、Paywall とします。

3. イントロダクション画面を作成する

最初の画面はトーンを決める重要な画面です。ヘッドライン、機能一覧、そしてフローの残りを開くコールトゥアクションを配置します。今回の例ではこれが「Welcome」画面です。

Screens パネルで Welcome 画面をクリックし、次の要素を追加します。

メイン画像を追加します。+ > Media > Image をクリックし、画像をアップロードして、必要に応じてマージンを調整します。

見出しを追加する：+ > Text をクリックし、保存済みのテキストスタイルから見出しスタイルを選択して、Content フィールドを編集します。

機能リストを追加する：+ > List > Icon Cards をクリックし、各カードのアイコンとラベルを編集します。

画面下部にメインのナビゲーションボタンを追加します。アクションの設定はナビゲーションのステップで行います。

4. 入力画面とクイズ画面を作成する

2番目の画面では、ユーザーから入力を収集します。この例では、名前と単一選択の回答を求め、その回答に基づいてユーザーが次に見るパスが決まります。

入力やクイズの詳細については、入力とフォームおよびアンケートとクイズを参照してください。

ScreensパネルでQuiz画面をクリックし、要素を追加します。画面上の各グループ（イントロ、質問＋入力、質問＋クイズ）は、関連する要素をまとめて視覚的に整理するために、それぞれ独自の縦方向コンテナに配置されています。

イントロのヘッドラインと本文を追加します。ヘッドラインは + > Text > H1、サポートコピーは + > Text > Body を選択してください。
イントロをグループ化します。+ > Layout > Vertical Container をクリックし、新しいコンテナをレイヤーツリーの最上部にドラッグしてから、H1 と本文をその中にドラッグします。

Intro headline and body grouped in a Vertical Container at the top of the layer tree

最初の質問と入力フィールドを追加します。質問のキャプションは + > Text、入力フィールドは + > Inputs > Text をクリックしてください。
Design タブで入力フィールドの Element ID を設定します。この例では name とします。これにより、この値が変数として他のスクリーンから参照できるようになります。

Name input with Element ID name, grouped with its caption in a Vertical Container

キャプションと入力欄を、イントロと同じようにVertical Containerでグループ化します。
2つ目の質問とクイズを追加します。+ > Text でキャプションを追加し、+ > Quiz をクリックしてIcon Optionsのようなレイアウトプリセットを選択します。オプションを設定します。この例では Rock と Hip hop です。
キャプションとクイズを同じようにVertical Containerでグループ化します。
オプションのIDを設定します。各クイズオプションを選択し、Interactions タブを開いて Element ID を設定します。これらのIDは、後述の条件付きナビゲーションで参照されます。

Quiz group set to Single choice in Selectable Groups

クイズを単一選択に切り替えます。キャンバスの空白部分をクリックして Screen settings を開き、下にスクロールして Selectable Groups を表示し、クイズグループ名をクリックして、タイプを Single choice に設定します。

画面下部にプライマリボタンを追加します。これが分岐をトリガーする「次へ」ボタンになります。

5. 最初の分岐パスを作成する

各パスのスクリーンは、特定のオーディエンスセグメント向けにコンテンツをカスタマイズします。この例では、Rockパスにロック系のコンテンツ（プレイリスト、アーティスト、おすすめ）が表示されます。

変数の詳細については、変数を参照してください。

スクリーンを作成するには：

スクリーンパネルで、Rock pathスクリーンをクリックします。
ヘッドラインを追加します。パーソナライズを表示したい位置にコンテンツフィールドでカーソルを置き、変数アイコンをクリックして、Elementsタブを開きます。入力が配置されているスクリーンを選択します（この例ではQuiz）。次に、その入力の値変数を選択します。ピッカーは<elementId>.valueの形式で解決します（この例ではname.value）。実行時に、ユーザーが入力した内容でヘッドラインが更新されます。

Variable picker on the Elements tab showing the Quiz screen and name.value variable

ボディコピーを追加のテキスト要素として追加し、このパスのオーディエンスセグメントに合わせて調整します。
下部にプライマリボタンを追加します。

Final first path screen with personalized headline

6. 2つ目の分岐パスを作成する

パス画面は通常レイアウトを共有しており、コピーのみが異なります。最初のパス画面を複製して内容を更新しましょう。

複製して更新するには：

Screens パネルで最初のパス画面を選択し、⌘D / Ctrl+D を押して複製します。コピーはスクリーンリストの末尾に表示されます。
コピーの名前を変更します（この例では Hip hop path）。スクリーンリストの適切な位置にドラッグして、複製元の画面の隣に配置します。

Duplicated path screen renamed and updated for the other audience

もう一方のオーディエンスセグメント向けに本文を更新します。パーソナライズされた見出しはそのまま機能します。変数は引き継がれます。

7. ペイウォールを作成する

最後の画面はペイウォールです。ここでユーザーはサブスクリプションを購入できます。ペイウォールの仕組みについて詳しくは、基本的なペイウォール画面の作成をご覧ください。以下はその手順を簡潔にまとめたものです。

Screens パネルで Paywall 画面をクリックし、以下の要素を追加します：

上部に Horizontal Container を追加し、その中に Close ボタンを追加します。Close プリセットはあらかじめ設定済みです。
メイン画像、見出し（パス画面と同じパーソナライズ変数を使用）、補足テキストとしてサブ見出しを追加します。

Top of the paywall with close button, main image, and headline

プロダクトを追加します：+ > Products をクリックし、Vertical List を選択します。Design タブのドロップダウンから各カードにプロダクトを割り当てます。
デフォルトプロダクトのカードをクリックし、Set as default product を有効にすると、画面読み込み時に事前選択された状態になります。

Product list with one card marked as default

購入ボタンを追加します。+ > Buttons をクリックしてプリセットを選択します。Interactions タブで Add trigger > On tap > Add action をクリックし、Action を Purchase、Product を products.selectedProduct に設定します。

Button > Links テンプレートをスクリーンに追加します。このテンプレートには、Restore Purchases、Terms of Use、Privacy Policy の 3 つのフッターリンクが含まれています。 Restoreリンクはあらかじめ設定されています。その他のリンクを設定するには、ボタン要素を選択し、Interactionsタブを開いて、Open URLアクションのターゲットを設定してください。

画面は自動的には接続されません。On tap トリガーと Navigate to アクションを使って、各画面のメインボタンを次の画面に接続します。ユーザーの入力によって分岐する画面には、代わりに Conditional action を使います。

ナビゲーションと条件付きアクションの詳細については、ナビゲーションとインタラクションおよびアクション — 条件付きアクションを参照してください。

サンプルフローのナビゲーションを設定するには、次の手順に従います。

イントロ画面からの静的ナビゲーション。 ウェルカム画面を開き、プライマリボタンを選択して、Interactions タブに切り替えます。Add trigger > On tap > Add action をクリックし、Action を Navigate to に設定して、次の画面（この例ではクイズ画面）を選択します。

Static Navigate to action on the Welcome screen's primary button

クイズからの条件付きナビゲーション。 Quizスクリーンを開き、Nextボタンを選択して、On tapトリガーにConditional actionを追加します。IF/ELSEルールを次のように設定します：
- 変数ピッカーでElementsタブを開き、Quizスクリーンを選択してquiz.selectedOptionIdを選びます。
- Equals演算子を使用し、いずれかのオプションのID（この例ではRockオプション）と比較します。
- 条件が一致する場合（IF）、Navigate toを実行して最初のパススクリーンを選択します。
- 一致しない場合（ELSE）、Navigate toを実行して2番目のパススクリーンを選択します。

Conditional action on the Quiz Next button with IF/ELSE branches

各分岐パスからペイウォールへの静的ナビゲーション。 ペイウォールを遷移先として、手順1と同じパターンを各パス画面で繰り返します。

次のステップ

フローを保存して公開する
フローをプレースメントに追加することで、ユーザーへの表示を開始できます。
オーディエンス別のフロー（フロー内の分岐ではなく）を使用する場合は、オーディエンスセグメントを作成し、プレースメントページで異なるフローを割り当ててください。

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

パーソナライズされたオンボーディングフローを構築する

始める前に

1. 再利用可能なスタイルを設定する

2. スクリーンを作成する

3. イントロダクション画面を作成する

4. 入力画面とクイズ画面を作成する

5. 最初の分岐パスを作成する

6. 2つ目の分岐パスを作成する

7. ペイウォールを作成する

8. 画面間のナビゲーションを設定する

次のステップ