フロービルダーのマルチスクリーンフローは、ナビゲーションアクションで接続された画面のシーケンスです。フローは直線的に進めることも、以前の画面で収集したユーザー入力に基づいて分岐させることもできます。このチュートリアルでは、4画面のオンボーディングフローを例に、画面の作成、コンテンツの構築、ナビゲーションの接続、条件分岐の追加まで、端から端まで説明します。

この例では以下を使用します：

• ユーザーの名前をパーソナライズ用の変数として公開する名前入力
• 次に表示する画面を決定する回答を持つシングルチョイスクイズ
• 各オーディエンスセグメント向けにカスタマイズされたコピーを持つ2つの分岐パス
• 最終画面としてのペイウォール

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

動画形式を好む場合は、同じプロセスを端から端まで説明するこのクイックスタートチュートリアルをご覧ください：

始める前に

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

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

再利用可能なスタイルを使うと、一度のクリックですべての画面に統一されたタイポグラフィと色を適用できます。カラースタイルにはライトとダークのバリアントが含まれており、フローは両方のテーマを自動的にサポートします。

詳細な手順については、要素スタイリング — 再利用可能なスタイルを参照してください。

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

1. 左パネルで Styles パネルを開きます。
2. Colors タブで Create style をクリックし、再利用する色を追加します。各色について、ライトの値を選択し、Dark タブに切り替えてダークの値を選択します。

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

2. 画面を作成する

フローは画面のシーケンスです。最初の画面を共通のベース（レイアウト、背景、セーフエリア）で設定し、残りの画面のために複製します。こうすることで、すべての画面が同じ基盤を共有し、一度だけ設定すれば済みます。

画面の管理については、画面とレイヤー — 画面の管理を参照してください。

画面を設定するには：

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

5. 左パネルの Screens セクションで、最初の画面の三点メニュー をクリックして Duplicate を選択します。合計4画面になるまで繰り返します（最初の分岐パスを複製して後で2番目の分岐パスを追加します）。
6. 各画面の役割に合った名前に変更します。この例では：Welcome、Quiz、Rock path、Paywall です。

3. イントロダクション画面を構築する

最初の画面は通常、雰囲気を設定します — ヘッドライン、機能リスト、残りのフローを開くコールトゥアクションです。この例では Welcome 画面がこれにあたります。

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

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

2. ヘッドラインを追加します：+ > Text をクリックし、保存したテキストスタイルから見出しスタイルを選択して、Content フィールドを編集します。

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

4. 下部にプライマリナビゲーションボタンを追加します。ナビゲーションのステップでアクションが設定されます。

4. 入力とクイズ画面を構築する

2番目の画面はユーザーからの入力を収集します。この例では、名前と、次に表示するパスを決定するシングルチョイスの回答を尋ねます。

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

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. 最初の分岐パスを構築する

各パス画面は、1つのオーディエンスセグメント向けにコンテンツをカスタマイズします。この例では、Rock パスにロック中心のコンテンツ（プレイリスト、アーティスト、おすすめ）が含まれます。

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

画面を構築するには：

1. Screens パネルで Rock path 画面をクリックします。
2. ヘッドラインを追加します。パーソナライズを表示する Content フィールドにカーソルを置き、変数アイコン をクリックして Elements タブを開きます。入力がある画面（この例では Quiz）を選択し、入力の値変数を選択します。ピッカーは <elementId>.value として解決します。この例では name.value です。実行時に、ヘッドラインはユーザーが入力したテキストで更新されます。

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

6. 2番目の分岐パスを構築する

パス画面は通常レイアウトを共有します — 変わるのはコピーだけです。最初のパス画面を複製してコンテンツを更新します。

複製して更新するには：

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

3. 別のオーディエンスセグメント向けにボディコピーを更新します。パーソナライズされたヘッドラインは引き続き機能します — 変数はそのまま引き継がれます。

7. ペイウォールを構築する

最終画面はペイウォールです — ユーザーがサブスクリプションに登録できる場所です。ペイウォールの仕組みの詳細なウォークスルーについては、基本的なペイウォール画面を作成するを参照してください。以下はそのウォークスルーの簡略版です。

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. 画面間のナビゲーションを接続する

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

ナビゲーションと条件アクションについては、ナビゲーションとインタラクションとアクション — 条件アクションを参照してください。

この例のフローのナビゲーションを接続するには：

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のパターンを繰り返し、ペイウォールを目的地として設定します。

次のステップ

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