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

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

• Close : フローエディターを終了してフロー一覧ページに戻ります。
• App name : そのフローが属するアプリを識別します。
• All flows : このアプリのすべてのフロー一覧を開きます。
• Flow status: フロー名の左側にあるアイコンは、現在のフローのステータスを示します:
  • Draft
  • Publishing（スピナー）
  • Failed
  • または Live 。
• フローの名前変更: フロー名をクリックして名前を変更します。複数のフローが同じ名前を持つことができますが、各フローには固有の名前をつけてください。
• 表示モードの切り替え: デザインビュー とリモートコンフィグビュー を切り替えます。
• 元に戻す / やり直す: 矢印アイコンをクリックしてフローの変更を元に戻す か、やり直す ことができます。⌘Z / Ctrl+Z で元に戻すこともできます。
• 下書き保存 / 公開: 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つのトリガーに複数のアクションを追加すると、それらを順番に連鎖実行できます。

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

左パネル

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

• スクリーンとレイヤー
• 要素の追加
• プロダクト
• スタイル
• 変数
• ローカライズ

スクリーンとレイヤー

レイヤー ボタンを押すと「スクリーンとレイヤー」が開きます（フロービルダーを開いたときにデフォルトで表示されます）。

各画面がレイヤーのツリーとして表示されます。画面上の各要素がレイヤーとなり、コンテナにはその子要素がネストされています。レイヤーをドラッグ＆ドロップして並べ替えることができます。

要素の選択

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

プロダクト

プロダクト ボタンを押すとプロダクト一覧が開きます。フロー内の各画面に割り当てられたプロダクトが表示されます。

この一覧は読み取り専用です。画面にプロダクトを割り当てるには、Product 要素を追加して右パネルで設定してください。プロダクトの作成・編集は、Adapty ダッシュボードの Products ページで行います。

保存済みスタイル

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

ここでは、グローバルスタイルの編集・管理ができます。フロー内の複数の要素で同じタイポグラフィやカラーを使用している場合は、そのデータをグローバルスタイルとして保存しておきましょう。保存しておけば、ワンクリックで再利用できます。 現在、フローのビルダーは、フォントスタイルとカラースタイルという2種類のグローバルスタイルをサポートしています。各カラースタイルには、ダークモード用の個別の値をオプションで設定できます。

変数

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

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

変数は2つのタブに分類されます：

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

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

変数の主な用途:

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

ローカライゼーション

ローカライゼーションビューでは、フロー内のすべての翻訳可能なコンテンツを一元管理できます。テキスト文字列と画像を画面ごとに整理したテーブルが表示され、各ロケールの列が並んでいます。このビューからできることは次のとおりです：

• 新しいロケールの追加と、ローカライズされた文字列のインライン編集。
• 翻訳ステータスの確認 — 各行は Done または Missing としてマークされます。
• 画面でのフィルタリングや、未翻訳のコンテンツのみ表示。
• AI Translate による自動翻訳、または Import/Export を使った一括インポート/エクスポート。