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

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

• Close : フローエディターを終了してフロー一覧ページに戻ります。
• App name : フローが属するアプリを表示します。
• All flows : このアプリのすべてのフロー一覧を開きます。
• Rename the flow: フロー名の横にある鉛筆アイコン をクリックして名前を変更します。
• View mode toggle: デザインビュー とリモートコンフィグビュー を切り替えます。
• Undo/Redo: 矢印アイコンをクリックして変更を元に戻す またはやり直す ことができます。⌘Z / Ctrl+Z でも元に戻せます。
• Save draft / Publish: Save draft をクリックすると公開せずに進捗を保存できます（⌘ / Ctrl+S）。ドロップダウン を開いて Publish ボタンにアクセスできます。フローをプレースメントに追加できるのは公開後のみです。

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

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

• 要素を選択してプロパティを編集するには、その要素をクリックします。コンテナ内の子要素を選択するには、まずコンテナをクリックしてから子要素をクリックしてください。
• 画面自体のプロパティを編集するには、いずれの要素もない場所をクリックするか、「スクリーンとレイヤー」パネルで画面を選択します。
• 要素の順序を変更するには、「スクリーンとレイヤー」パネルでそのエントリを上下にドラッグします。

アクティブ画面バー（デバイスプレビューの上）

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

ビューコントロール（ボトムツールバー）

ボトムツールバーのツールでプレビューを操作できます。

• Device: 利用可能な iPhone と Android スマートフォンのモデルから選択して、ビューポートのサイズとデバイスの外枠を変更します。
• Screen orientation: 縦向き と横向き を切り替えて、異なる向きでフローをプレビューします。
• Color scheme: ライト とダーク モードを切り替えて、異なるテーマでのデザインを確認します。
• Locale: ロケールを選択して、ローカライズされたコンテンツでフローをプレビューします。
• View options: デバイスのベゼルとセーフエリアガイドのオン/オフを切り替えます。

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

画面の設定とレイアウト

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

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

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

要素のプロパティ

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

デザインプロパティ

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

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

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

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

• トリガー は何かが起きるタイミングを定義します。例：On Tap（ユーザーが要素をタップしたとき）
• アクション は何が起きるかを定義します。例：別の画面に遷移する、変数の値を変更するなど。1 つのトリガーに複数のアクションを追加して順番に実行させることもできます。

同じ要素に複数のトリガーを追加して、複数のアクションを順番に実行させることができます。

左パネル

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

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

スクリーンとレイヤー

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

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

要素の選択

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

プロダクト

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

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

保存済みスタイル

スタイル ボタンを押すと「保存済みスタイル」が開きます。

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

現在、フロービルダーがサポートするグローバルスタイルは「フォントスタイル」と「カラースタイル」の 2 種類です。各カラースタイルにはダークモード用の値を別途設定することもできます。

変数

ブラケット ボタンを押すと「変数」が開きます。

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

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

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

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

変数は次の目的で使用できます：

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

ローカライズ

「ローカライズ」ビューでは、フロー全体の翻訳可能なコンテンツを一元管理できます。すべてのテキスト文字列と画像が画面ごとに整理され、各ロケールの列が表示されます。このビューから以下の操作ができます：

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