フロー & ペイウォールビルダーのメイン 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つのタブに分類されています：

• カスタム: 作成する変数で、2種類あります：
  • 通常の変数: フロー内の Set variable アクションによって値が変わります。
  • カスタムタグ: Adapty SDK を通じて、アプリから値が渡されます。
• Elements: ユーザー操作によって決まる値（クイズの回答、トグルの状態、タブの選択など）。

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

変数の用途：

• テキストのバインド: 静的な文字列の代わりに動的なコンテンツを表示します。
• アプリのデータを表示する: カスタムタグを使って、プレイヤーのコイン残高などアプリ内の値を表示します。
• 表示・非表示の制御: 条件に基づいて要素を表示または非表示にします（例：無料トライアルの対象ユーザーにのみ、無料トライアルのタイムラインを表示する）。
• ユーザーとのインタラクション: フォームやクイズなど、ユーザー入力フィールドからデータにアクセスします。

ローカライゼーション

Localizations パネルには、フローのローカライズ可能なコンテンツが1つのテーブルにまとめて表示されます。内容は画面ごとに整理され、各ロケールに対応したカラムが並んでいます:

• テキスト（条件付きテキストの各分岐や入力フィールドのプレースホルダーを含む）
• 各 Show alert アクションのタイトルとメッセージ
• 各 Open URL アクションのターゲット
• 画像と動画（ロケールごとのファイル）

このパネルでできること：

• 新しいロケールを追加し、ローカライズされた文字列をインラインで編集する。
• AIで翻訳する。
• フローのデフォルトロケールを選択する。
• 翻訳ステータスを追跡する — 各行は Done、Missing、またはアクションURLの場合は Default としてマークされる。
• 画面やステータスでフィルタリングするか、キーワードで検索する。
• フロー全体または1つのロケールを対象に、コンテンツを Import または Export して、Adapty外でまとめて翻訳する。

AI エディター

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

変更内容を自然な言葉で説明すると、Adapty が現在表示中の画面を書き直したり、スタイルを変更したり、レイアウトを整え直したりします。変更内容は Adapty が説明してくれるので、ワンクリックで元に戻せます。

既存のデザインに合わせたい場合は、言葉で説明する代わりにそのスクリーンショットを添付してください。