フロー & ペイウォールビルダーのメイン UI には、ビジュアル要素の追加、プロパティの編集、ユーザーフローのロジック変更に必要なすべてのツールが揃っています。この記事では、インターフェースの各エリアについて、機能と場所をそれぞれ説明します。

プロジェクトコントロールと便利なショートカット（上部ツールバー）

• Close : ビルダーを終了してフローページに戻ります。
• App name : フローが属するアプリを識別します。
• All flows : このアプリのすべてのフロー一覧を開きます。
• Flow status: フロー名の左側のアイコンは現在のフローのステータスを示します。
  • Draft
  • Publishing（スピナー）
  • Failed
  • または Live 。
• Rename the flow: フロー名をクリックして名前を変更します。複数のフローが同じ名前を持てますが、新しいフローにはそれぞれ固有の名前を付けてください。
• View mode toggle: デザインビュー とリモートコンフィグビュー を切り替えます。
• Undo/Redo: 矢印アイコンをクリックして、フローの変更を元に戻す またはやり直す ことができます。⌘Z / Ctrl+Z でも元に戻せます。
• Save draft / Publish: Save draft をクリックすると、公開せずに進捗を保存できます（⌘ / Ctrl+S）。ドロップダウン を開くと Publish ボタンにアクセスできます。フローをプレースメントに追加できるのは、公開後のみです。

プレビューエリア（中央）

ワークスペースの中央エリアでは、フローがモバイルデバイス上でどのように表示されるかをシミュレートできます。

• 要素を選択してプロパティを編集するには、その要素をクリックします。コンテナ内の子要素を選択するには、まずコンテナをクリックし、次に子要素をクリックします。
• 画面自体のプロパティを編集するには、要素の外側をクリックするか、Screens and Layers パネルで画面を選択します。
• 要素の順序を変更するには、Screens and Layers パネルでその要素のエントリを上下にドラッグします。

アクティブスクリーンバー（デバイスプレビューの上部）

• Screen name — 現在のスクリーン名が表示されたピル。
• Toggle animations — 要素のアニメーションプレビューのオン/オフを切り替えます。オフにするまで継続的に再生されます。アクティブなスクリーンにアニメーションが含まれている場合のみ表示されます。実機上のアニメーション表示には影響しません。
• Add element — 現在のスクリーンの要素ライブラリを開きます。スクリーンとレイヤーパネル上部の + と同じ機能で、パネルが折りたたまれているときに便利です。

表示コントロール（下部ツールバー）

下部ツールバーのツールを使って、プレビューを操作できます。

• Device: 利用可能な iPhone および Android の端末モデルを選択して、ビューポートのサイズやデバイスの外枠を変更できます。
• Screen orientation: 縦向き と横向き を切り替えて、フローをさまざまな向きでプレビューできます。
• Color scheme: ライト とダーク を切り替えて、デザインがテーマに応じてどのように変わるか確認できます。
• Locale: ロケールを選択して、ローカライズされたコンテンツでフローをプレビューできます。
• View options: デバイスのベゼルおよびセーフエリアガイドの表示・非表示を切り替えられます。

画面と要素のプロパティ（右パネル）

スクリーンの設定とレイアウト

要素が選択されていない場合、右パネルではアクティブなフロースクリーンのプロパティを調整できます。設定できる項目は以下のとおりです：

• システムUIとのインタラクション（ステータスバーの表示/非表示など）
• 自動レイアウトのルール
• 背景（カラー、画像、または動画）
• パディングサイズ
• 縦方向のスクロール動作

画面にインタラクティブクイズなどの要素が含まれている場合、このリストには関連するプロパティが追加されます。

要素のプロパティ

要素を選択すると、右パネルでスタイルとインタラクティブプロパティを変更できます。

デザインプロパティ

Design タブでは、選択した要素の見た目とレイアウトを設定できます：

• Visibility（表示設定）: 要素の表示・非表示を切り替えます。Conditional visibility を有効にすると、表示条件のルールを設定できます。
• Position（位置）: Relative、Absolute、Fixed のいずれかの配置方法を選択します。
• Content（テキスト要素のみ）: 要素のテキスト内容を編集し、変数を挿入してローカライズを管理します。
• Typography（テキスト要素のみ）: フォント、太さ、サイズ、色、揃え、装飾、省略表示を設定します。
• Spacing（余白）: 要素のマージンとパディングを設定します。
• Effects（エフェクト）: ドロップシャドウ、インナーシャドウ、レイヤーブラーを追加します。
• Animation（アニメーション）: アニメーション効果（例：Pulse）を追加し、タイミングや強度を設定します。
• Appearance（外観）: 不透明度と回転を調整します。
• Layout（レイアウト）: レイアウトの方向（縦または横）を選択し、子要素の配置方法を決定します。

インタラクションのプロパティ

Interactions タブでは、選択した要素に対してユーザーが操作したときの動作を定義できます。各インタラクションは、トリガーと1つ以上のアクションで構成されます：

• トリガーは「いつ」何かが起きるかを定義します。例えば On Tap（ユーザーがその要素をタップしたとき）などです。
• アクションは「何が」起きるかを定義します。例えば別の画面に遷移したり、変数の値を変更したりします。1つのトリガーに複数のアクションを追加すると、それらを順番に連鎖実行できます。

同じ要素に複数のトリガーを追加して、複数のアクションを順に実行することも可能です。

左パネル

左パネルは、アクティブなボタンに応じて機能が切り替わります。以下から選択できます。

• スクリーンとレイヤー
• 要素の追加
• プロダクト
• スタイル
• 変数
• ローカライゼーション
• AIエディター

スクリーンとレイヤー

レイヤー ボタンをクリックすると、スクリーンとレイヤーが表示されます（Flow & Paywall Builder を開いたときにデフォルトで表示されます）。

各スクリーンはレイヤーのツリー形式で表示されます。スクリーン上の各要素はレイヤーであり、コンテナはその子要素をネストして保持します。レイヤーはドラッグ＆ドロップで並び替えることができます。

要素の選択

プラス ボタンをクリックすると、左パネルに利用可能なUI要素とそのバリエーションの一覧が表示されます。エントリをクリックすると、現在のスクリーンに新しいレイヤーとして追加されます。

プロダクト

プロダクト ボタンをクリックすると、プロダクト一覧が表示されます。フロー内の各画面にどのプロダクトが割り当てられているかを確認できます。このビューからフローのプロダクトやオファーを管理できます。

保存済みスタイル

スタイル ボタンをクリックすると、保存済みスタイルが開きます。

ここでは、グローバルスタイルの編集と管理ができます。フロー内の複数の要素で同じタイポグラフィやカラーを使用している場合は、そのデータをグローバルスタイルとして保存しておきましょう。保存しておけば、ワンクリックで再利用できます。

現在、フロー＆ペイウォールビルダーは、フォントスタイルとカラースタイルの2種類のグローバルスタイルをサポートしています。各カラースタイルには、ダークモード用の別の値をオプションで設定できます。

変数

ブラケット ボタンをクリックすると変数が開きます。

ここでは、フロー用の変数を作成・管理できます。実行時に、SDK は変数のプレースホルダーをユーザー属性、プロダクト価格、ローカライズされた文字列などの実際の値に置き換えます。

変数は2つのタブにグループ分けされています：

• カスタム: アクションを通じて自分で作成・管理する変数です。
• 要素: クイズの回答、トグルの状態、タブの選択など、ユーザー操作によって決まる値です。

価格、名称、その他のプロダクトデータなどのプロダクト変数は、このパネルには表示されません。テキスト要素を編集する際に直接参照してください。

変数の主な用途:

• テキストのバインド: 静的な文字列の代わりに動的なコンテンツを表示する。
• 表示の制御: 条件に基づいて要素の表示・非表示を切り替える（例：プレミアムユーザーにはアップグレードボタンを非表示にする）。
• ユーザーとのインタラクション: フォームやクイズなどのユーザー入力フィールドからデータを取得する。

ローカライズ

ローカライズビューでは、フロー内の翻訳可能なコンテンツを管理できます。テキスト文字列とメディア要素の一覧をスクリーンごとに整理した表が表示され、列ごとに各ロケールが対応しています。このビューでできることは次のとおりです。

• 新しいロケールの追加や、ローカライズされた文字列のインライン編集が可能です。
• フローのデフォルトロケールを選択できます。
• 翻訳ステータスを追跡できます。各行は Done または Missing としてマークされます。
• 画面でフィルタリングしたり、未翻訳のみを表示したりできます。
• Import や Export を使って、Adapty 外で一括翻訳することもできます。

AIエディター

スパークル ボタンをクリックすると、AIエディターのチャットが開きます。

変更したい内容を自然な言葉で入力するだけで、Adaptyが現在表示中の画面を書き直したり、スタイルを変更したり、レイアウトを組み替えたりします。変更内容はAdaptyが説明してくれるので、元に戻したい場合はワンクリックで対応できます。