フローを作成する

フローは以下の方法で作成できます：

• テンプレートから: 複数画面の完成したフローから始めて、任意の要素を編集します。
• Figmaデザインから: Figmaでフレームを選択してAdaptyに送信し、その結果をフローとして編集します。
• AIコーディングツールで: flow-generatorスキルを読み込み、平易な言葉でフローを説明すると、ツールがAdapty CLIを通じてビルドします。
• ゼロから: 空白の画面1枚から始めます。
• 既存のペイウォールから: ペイウォールビルダーのペイウォールを、レイアウト・テキスト・プロダクト・ローカライゼーションごとフローとして再作成します。

フローの作成

1. Flows ページを開きます。
2. Create flow をクリックします。
3. オプションを選択します：
   • Browse templates（テンプレートライブラリを開く）
   • Start from scratch（空のフローを作成する）
4. エディタでフロー名を変更します。ヘッダーのフロー名をクリックして新しい名前を入力します。

テンプレートを使う

テンプレートライブラリには、フローの出発点として使えるテンプレートが複数用意されています。それぞれのテンプレートは複数のスクリーン、インタラクティブな要素、ナビゲーション機能を備えた完成済みのフローです。任意の要素を編集してカスタマイズできます。

テンプレートを適用するには:

1. テンプレートライブラリでテンプレートカードを確認します。各カードにはフローのプレビュースクリーンショットが表示されます。
2. 使いたいカードの Use as template をクリックします。

テンプレートがビルダーに読み込まれます。ここから、任意の要素、画面、またはプロパティを変更できます。

ゼロから始める

「ゼロから始める」を選ぶと、空白の画面が1つだけあるフローが作成されます。エレメントライブラリのエレメントを使って画面をデザインしてください。

Figma からデザインをインポートする

ペイウォールのモックアップが Figma にある場合、画面を一から作り直す代わりに Adapty に送信できます:

1. Figma 用の Adapty プラグインをインストールします。
2. フレームを選択してプラグインを有効にします。
3. レイアウト・テキスト・画像を含むフローが Adapty に届きます。インタラクティブな要素は手動で設定する必要があります。

レガシーペイウォールビルダーからペイウォールを移行する

テンプレートからフローを作成する代わりに、既存のレガシーペイウォールを変換することもできます。

ペイウォールのダッシュボードページを開き、Move to new builder をクリックします。Adapty はレイアウト、テキスト、プロダクト、ローカライズを保持したまま、ペイウォールを新しいドラフトフローとして再作成します。スムーズな移行を可能にするため、古いペイウォールはそのまま機能し続けます。

テンプレートを変更する

ビルダー内からテンプレートを切り替えられます。Screens パネルを開き、Templates ボタンをクリックしてテンプレートライブラリを再度開き、新しいテンプレートを選んでください。

テンプレートのカスタムフォント

Custom font チップが付いたテンプレートはカスタムフォントを使用しています。これらのフォントは SDK には含まれていません。チップにカーソルを合わせると、そのテンプレートで使用しているフォントを確認できます。

デバイス上で意図したタイポグラフィを表示するには、アプリバンドルにフォントファイルを追加してください。フォントが含まれていない古いバージョンのアプリは、システムフォントにフォールバックします。

フォントを変更しても古いバージョンに影響を与えないようにするには、フローをコピーし、コピーでフォントを変更して、そのフォントを含むアプリバージョンにコピーの対象を限定してください。