フローBuilder でテキストとリストを追加・スタイル設定する

タイトル、段落、リストをワンクリックで追加し、ブランドに合わせてスタイルを設定できます。また、動的変数を使ってユーザーごとにコンテンツをパーソナライズすることも可能です。

テキストスタイルを設定する

Styles パネルには、H1・H2・H3・Button Label・Body・Caption・Small Label といった定義済みのテキストスタイルが用意されています。スタイルをクリックすると、フォントファミリー・ウェイト・サイズ・配置・装飾などのプロパティを編集できます。

テキスト要素を追加する際に、ここで設定したスタイルのいずれかを選択できます。

新しいスタイルを作成するには:

1. をクリックして Styles パネルを開きます。
2. Text タブで Create style をクリックします。

3. 名前を入力し、タイポグラフィを設定します — フォントファミリー、ウェイト、揃え位置、その他のプロパティ。

   カスタムフォントは組み込みフォントとは動作が異なります。ガイドをご確認ください — 一部のコントロールは適用されず、フォントのバリアントごとに個別のファイルが必要です。

   

4. Create をクリックします。

テキストの追加

テキスト要素を追加するには：

1. 左上の + をクリックし、Text を選択します。あらかじめ設定されているテキストスタイルの中から選んでください。

2. 新しい要素をクリックし、右側のDesignパネルにあるContentセクションでコンテンツを編集します。
3. 必要に応じて、Designパネルでタイポグラフィのプロパティを調整します。または、プレビュー内のテキストを選択してツールチップを開き、スタイルをすばやくカスタマイズすることもできます。
4. 任意で、DesignパネルとInteractionパネルから、フロー内のコンポーネントに適用できるその他の設定も行えます。詳細については、スタイルと外観を参照してください。

テキストの一部のスタイルを変更する

テキスト要素の一部のスタイルのみを変更するには：

1. Content セクションでテキスト要素の一部を選択します。
2. 表示されるツールチップで、テキストの色を変更したり、太字・下線・斜体・取り消し線のフォーマットを適用したり、URLを追加したりします。

プレビューはすぐに更新されます。

旧価格を追加する

旧価格（Old Price）要素は、プロダクトの実際の価格の横に「以前の価格」として割高な金額を表示し、割引をひと目でわかるようにします。設定した倍率をプロダクト価格に掛けた金額が自動的に打ち消し線付きで表示されます。

この要素のコンテンツは手動で編集しません。値はランタイム時にストアのプロダクト価格から計算されるため、通貨は常に実際の価格と一致します。

旧価格を追加するには：

1. 左上の + をクリックし、Text を選択してから Old Price を選択します。

2. Layers パネルで、プロダクトカード内にこの要素をドラッグします。再利用可能コンポーネントとして保存されたプロダクトカードの内部でも機能します。

   Old Price 要素はプロダクトカードの内側に配置する必要があります。価格はそのカードのプロダクトから取得されます。プロダクトカードの外側に配置した場合、ビルダーには実際の価格ではなく「Old price」というプレースホルダーが表示されます。

3. Design パネルの Price セクションで、Multiplier を設定します。Adapty はプロダクトの価格にこの値を乗算します。たとえば、デフォルトの乗数 2 の場合、$12.99 のプロダクトは取り消し線付きの $25.98 として表示されます。

   

4. 必要に応じて、タイポグラフィのプロパティを調整します。この要素は通常のテキストと同じスタイリングをサポートしています。

タイポグラフィのプロパティ

すべてのテキスト要素とテキストスタイルは、同じタイポグラフィコントロールを共有しています。

• Font family: フォントを選択します。組み込みフォントか、カスタムフォントを指定できます。

  デバイスによって搭載されているフォントは異なり、同じフォントでも表示が変わる場合があります。デバイスにフォントが存在しない場合、システムはデフォルトフォント（SF Pro / Roboto）を使用します。すべてのデバイスで同じフォントを安定して表示するには、カスタムフォントをアップロードしてください。

• Weight: フォントの太さを設定します。

• Size: フォントサイズをピクセル単位で設定します。
• Color: テキストの色を設定します。
• Line height: 行間のスペースを設定するか、Auto のままにします。
• Alignment: 水平方向（左、中央、右）と垂直方向（上、中央、下）の配置を設定します。
• Decoration: 下線または取り消し線を適用します。
• Truncate: 表示する行数を制限します。その行数を超えたテキストは切り捨てられます。動的変数やローカライズによってコンテンツの長さが変わる場合に便利です。

リンクを追加する

フローでは、テキストをクリック可能なリンクにする方法が2つあります。テキストの役割に応じて選んでください。

• インラインリンク — 段落内に埋め込まれた「詳細はこちら」のような参照など、本文中のURLに使用します。常にアプリ内ブラウザで開きます。
• Open URLアクション — 利用規約ボタンのような単独のタップターゲットに使用します。アプリ内ブラウザまたは外部ブラウザのどちらでも開けます。

インラインリンク

テキスト要素の一部をリンクにするには:

1. Content セクションでテキストを選択します。
2. 書式設定ツールチップのリンクアイコンをクリックします。
3. ポップアップに目的のURLを貼り付けます。

URL を開くアクション

ボタン全体をリンクにするには：

1. ボタンを追加するか、Links プリセット（Restore / Terms of Service / Privacy Policy ボタンが揃った既製の行）を使用します。

   

2. Layers パネルでボタンを選択し、右パネルの Interactions タブを開きます。

3. Open URL アクションの遷移先を設定します。

   Open URL アクションが空のままだと、プレビューと公開がブロックされます。

   

条件付きテキストを追加する

条件付きテキストは、条件に応じてテキスト要素の表示内容を切り替えます。たとえば、ユーザーが年間プランを選択したときと月間プランを選択したときで、見出しのメッセージを変えることができます。条件付きテキストは条件付き表示と仕組みは同じですが、要素を表示・非表示にするのではなく、コンテンツ自体を入れ替えます。

条件付きテキストを設定するには：

1. キャンバス上のテキスト要素を選択します。
2. Design パネルの Content セクションで、Conditional を選択します。

3. if 条件を構築します。Custom、Products、または Elements タブからプロパティを選択し、演算子を設定して、マッチさせる値を入力します。プロパティの種類の詳細については、条件付き表示を参照してください。
4. then の下に、条件が真のときに表示するテキストを入力します。リッチテキストの書式設定は通常のテキストと同じように機能します。変数を挿入するには、{ } Add variable をクリックします。
5. else の下に、条件がどれにもマッチしない場合に表示するフォールバックテキストを入力します。
6. （オプション）+ Add else/if をクリックして、それぞれ独自のテキストを持つ条件を追加します。

リストを追加する

1. 左上の + をクリックし、List を選択してリストのテンプレートを選びます。

2. 右側の Design パネルでリストアイテムを編集したり、アイテムのマーカーとして画像をアップロードしたりできます。