---
title: "パーソナライズされたオンボーディングフローを構築する"
description: "複数画面で構成されるオンボーディングフローの全構築プロセス（画面、コンテンツ、ナビゲーション、条件分岐）を実例を使って説明します。"
---
フロービルダーのマルチスクリーンフローは、ナビゲーションアクションで接続された画面のシーケンスです。フローは直線的に進めることも、以前の画面で収集したユーザー入力に基づいて分岐させることもできます。このチュートリアルでは、4画面のオンボーディングフローを例に、画面の作成、コンテンツの構築、ナビゲーションの接続、条件分岐の追加まで、端から端まで説明します。
この例では以下を使用します：
- ユーザーの名前をパーソナライズ用の変数として公開する**名前入力**
- 次に表示する画面を決定する回答を持つ**シングルチョイスクイズ**
- 各オーディエンスセグメント向けにカスタマイズされたコピーを持つ**2つの分岐パス**
- 最終画面としての**ペイウォール**
同じパターンは、ユーザー入力に基づいてコンテンツをパーソナライズする任意のフローに適用できます。
動画形式を好む場合は、同じプロセスを端から端まで説明するこのクイックスタートチュートリアルをご覧ください：
## 始める前に \{#before-you-start\}
- Adapty ダッシュボードで[プロダクトを作成](create-product)してください。この例のフローでは、年間と月間の2つのサブスクリプションを使用します。
- [Adapty を App Store と Google Play に接続](integrate-payments)してください。
## 1. 再利用可能なスタイルを設定する \{#1-set-up-reusable-styles\}
再利用可能なスタイルを使うと、一度のクリックですべての画面に統一されたタイポグラフィと色を適用できます。カラースタイルにはライトとダークのバリアントが含まれており、フローは両方のテーマを自動的にサポートします。
詳細な手順については、[要素スタイリング — 再利用可能なスタイル](builder-styling#reusable-styles)を参照してください。
スタイルを設定するには：
1. 左パネルで **Styles** Styles パネルを開きます。
2. **Colors** タブで **Plus Create style** をクリックし、再利用する色を追加します。各色について、ライトの値を選択し、Dark タブに切り替えてダークの値を選択します。
3. **Text** タブで、既存のスタイルをクリックしてフォント、ウェイト、サイズを編集するか、**Plus Create style** をクリックしてカスタムプリセットを追加します。
## 2. 画面を作成する \{#2-create-the-screens\}
フローは画面のシーケンスです。最初の画面を共通のベース（レイアウト、背景、セーフエリア）で設定し、残りの画面のために複製します。こうすることで、すべての画面が同じ基盤を共有し、一度だけ設定すれば済みます。
画面の管理については、[画面とレイヤー — 画面の管理](paywall-layout-and-products#manage-screens)を参照してください。
画面を設定するには：
1. 最初の画面のキャンバスの空いている場所をクリックして画面設定を開きます。
2. **System UI** の下で **Safe area** を無効にして、背景やエッジに揃えた要素が画面の端まで広がれるようにします。
3. **Fill** の下で背景の種類を選択して設定します。たとえば、フローのすべての画面の背景に表示される **Image** Image などです。
4. **Layout** の下で方向を **Vertical** Vertical に設定し、デザインに合った配置を選択します。
5. 左パネルの **Screens** セクションで、最初の画面の三点メニュー Context menu をクリックして **Duplicate** を選択します。合計4画面になるまで繰り返します（最初の分岐パスを複製して後で2番目の分岐パスを追加します）。
6. 各画面の役割に合った名前に変更します。この例では：`Welcome`、`Quiz`、`Rock path`、`Paywall` です。
## 3. イントロダクション画面を構築する \{#3-build-the-introduction-screen\}
最初の画面は通常、雰囲気を設定します — ヘッドライン、機能リスト、残りのフローを開くコールトゥアクションです。この例では Welcome 画面がこれにあたります。
**Screens** パネルで **Welcome** 画面をクリックし、要素を追加します：
1. メイン画像を追加します。**+** > **Media** > **Image** をクリックし、画像をアップロードして必要に応じてマージンを調整します。
2. ヘッドラインを追加します：**+** > **Text** をクリックし、保存したテキストスタイルから見出しスタイルを選択して、**Content** フィールドを編集します。
3. 機能リストを追加します。**+** > **List** > **Icon Cards** をクリックし、各カードのアイコンとラベルを編集します。
4. 下部にプライマリナビゲーションボタンを追加します。ナビゲーションのステップでアクションが設定されます。
## 4. 入力とクイズ画面を構築する \{#4-build-the-input-and-quiz-screen\}
2番目の画面はユーザーからの入力を収集します。この例では、名前と、次に表示するパスを決定するシングルチョイスの回答を尋ねます。
入力とクイズについては、[入力とフォーム](builder-inputs-and-forms)と[アンケートとクイズ](onboarding-quizzes)を参照してください。
**Screens** パネルで **Quiz** 画面をクリックし、要素を追加します。画面上の各グループ（イントロ、質問＋入力、質問＋クイズ）は、関連する要素が視覚的にまとまるように、それぞれ独自の縦コンテナに配置します。
1. イントロのヘッドラインとボディを追加します。ヘッドラインには **+** > **Text** > **H1**、サポートコピーには **+** > **Text** > **Body** をクリックします。
2. イントロをグループ化します。**+** > **Layout** > **Vertical Container** をクリックし、新しいコンテナをレイヤーツリーの一番上にドラッグして、H1 とボディをその中にドラッグします。
3. 最初の質問と入力を追加します。質問のキャプションには **+** > **Text**、フィールドには **+** > **Inputs** > **Text** をクリックします。
4. **Design** タブで入力の **Element ID** を設定します。この例では `name` です。これにより、他の画面が参照できる変数として値が公開されます。
5. イントロと同じ方法で、キャプションと入力を縦コンテナにグループ化します。
6. 2番目の質問とクイズを追加します。キャプションには **+** > **Text**、**+** > **Quiz** をクリックして Icon Options などのレイアウトプリセットを選択します。オプションを設定します。この例では `Rock` と `Hip hop` です。
7. イントロと同じ方法で、キャプションとクイズを縦コンテナにグループ化します。
8. オプションの ID を設定します。各クイズオプションを選択し、**Interactions** タブを開いて **Element ID** を設定します。これらの ID は後の条件ナビゲーションで参照されます。
9. クイズをシングルチョイスに切り替えます：キャンバスの空いている場所をクリックして **Screen settings** を開き、**Selectable Groups** までスクロールして、クイズグループの名前をクリックし、タイプを **Single choice** に設定します。
10. 下部にプライマリボタンを追加します。これが分岐をトリガーする Next ボタンです。
## 5. 最初の分岐パスを構築する \{#5-build-the-first-branching-path\}
各パス画面は、1つのオーディエンスセグメント向けにコンテンツをカスタマイズします。この例では、Rock パスにロック中心のコンテンツ（プレイリスト、アーティスト、おすすめ）が含まれます。
変数については、[変数](onboarding-variables)を参照してください。
画面を構築するには：
1. **Screens** パネルで **Rock path** 画面をクリックします。
2. ヘッドラインを追加します。パーソナライズを表示する **Content** フィールドにカーソルを置き、変数アイコン Variable icon をクリックして **Elements** タブを開きます。入力がある画面（この例では **Quiz**）を選択し、入力の値変数を選択します。ピッカーは `.value` として解決します。この例では `name.value` です。実行時に、ヘッドラインはユーザーが入力したテキストで更新されます。
3. このパスのオーディエンスセグメントに合わせたボディコピーを追加のテキスト要素として追加します。
4. 下部にプライマリボタンを追加します。
## 6. 2番目の分岐パスを構築する \{#6-build-the-second-branching-path\}
パス画面は通常レイアウトを共有します — 変わるのはコピーだけです。最初のパス画面を複製してコンテンツを更新します。
複製して更新するには：
1. **Screens** パネルで最初のパス画面を選択し、⌘D / Ctrl+D を押して複製します。コピーは画面リストの末尾に表示されます。
2. コピーの名前を変更します。この例では `Hip hop path` とし、複製元の画面の隣に来るように画面リスト内で適切な位置にドラッグします。
3. 別のオーディエンスセグメント向けにボディコピーを更新します。パーソナライズされたヘッドラインは引き続き機能します — 変数はそのまま引き継がれます。
## 7. ペイウォールを構築する \{#7-build-the-paywall\}
最終画面はペイウォールです — ユーザーがサブスクリプションに登録できる場所です。ペイウォールの仕組みの詳細なウォークスルーについては、[基本的なペイウォール画面を作成する](basic-paywall-screen)を参照してください。以下はそのウォークスルーの簡略版です。
**Screens** パネルで **Paywall** 画面をクリックし、要素を追加します：
1. 上部に **Horizontal Container** を追加し、その中に **Close** ボタンを追加します。Close プリセットはあらかじめ設定されています。
2. メイン画像、ヘッドライン（パス画面と同じパーソナライズ変数を使用）、サブヘッドラインをサポートコピーとして追加します。
3. プロダクトを追加します：**+** > **Products** をクリックして **Vertical List** を選択します。**Design** タブのドロップダウンから各カードにプロダクトを割り当てます。
4. デフォルトプロダクトのカードをクリックして **Set as default product** を有効にし、画面が読み込まれたときにあらかじめ選択されるようにします。
5. 購入ボタンを追加します。**+** > **Buttons** をクリックしてプリセットを選択します。**Interactions** タブで **Add trigger** > **On tap** > **Add action** をクリックし、**Action** を **Purchase**、**Product** を `products.selectedProduct` に設定します。
6. **Button** > **Links** テンプレートを画面に追加します。Restore Purchases、Terms of Use、Privacy Policy の3つのフッターリンクが含まれています。
Restore リンクはあらかじめ設定されています。その他のリンクを設定するには、ボタン要素を選択し、**Interactions** タブを開いて、**Open URL** アクションのターゲットを設定します。
## 8. 画面間のナビゲーションを接続する \{#8-wire-navigation-between-the-screens\}
画面は自動的には接続されません。**On tap** トリガーと **Navigate to** アクションを使って、各画面のプライマリボタンを次の画面に接続します。ユーザー入力に基づいて分岐する画面は、代わりに **Conditional action** を使用します。
ナビゲーションと条件アクションについては、[ナビゲーションとインタラクション](onboarding-navigation-branching)と[アクション — 条件アクション](onboarding-actions#conditional-actions)を参照してください。
この例のフローのナビゲーションを接続するには：
1. **イントロダクション画面からのスタティックナビゲーション。** Welcome 画面を開き、プライマリボタンを選択して **Interactions** タブに切り替えます。**Add trigger** > **On tap** > **Add action** をクリックし、**Action** を **Navigate to** に設定して次の画面（この例では Quiz 画面）を選択します。
2. **クイズからの条件ナビゲーション。** Quiz 画面を開き、Next ボタンを選択して **Conditional action** を持つ **On tap** トリガーを追加します。IF/ELSE ルールを設定します：
- 変数ピッカーで **Elements** タブを開き、**Quiz** 画面を選択して `quiz.selectedOptionId` を選択します。
- **Equals** 演算子を使用して、いずれかのオプションの ID（この例では Rock オプション）と比較します。
- 比較が一致する場合、**IF** で **Navigate to** を実行して最初のパス画面を選択します。
- **ELSE** で **Navigate to** を実行して2番目のパス画面を選択します。
3. **各分岐パスからペイウォールへのスタティックナビゲーション。** 各パス画面でステップ1のパターンを繰り返し、ペイウォールを目的地として設定します。
## 次のステップ \{#next-steps\}
- [フローを保存して公開する](builder-save-publish)。
- [フローをプレースメントに追加](create-placement)して、ユーザーへの表示を開始します。
- オーディエンス別のフロー（フロー内での分岐ではなく）の場合は、オーディエンスセグメントを作成して、プレースメントページで異なるフローを割り当てます。