---
title: "フローBuilder でテキストとリストを追加・スタイル設定する"
description: "Adapty のフロービルダーでタイトル、サブタイトル、段落、リストを追加・スタイル設定し、ブランドに合ったユーザー体験のためにテキストをカスタマイズします。"
---

タイトル、段落、リストをワンクリックで追加し、ブランドに合わせてスタイルを設定できます。また、[動的変数](onboarding-variables)を使ってユーザーごとにコンテンツをパーソナライズすることも可能です。
## テキストスタイルを設定する \{#set-up-text-styles\}

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

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

:::important
スタイルへの変更は、それを使用しているすべての画面のすべてのテキスト要素に反映されます。
:::

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

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

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

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

   

4. **Create** をクリックします。
## テキストの追加 \{#add-text\}

テキスト要素を追加するには：
1. 左上の **+** をクリックし、**Text** を選択します。あらかじめ設定されている[テキストスタイル](#set-up-text-styles)の中から選んでください。

2. 新しい要素をクリックし、右側の**Design**パネルにある**Content**セクションでコンテンツを編集します。
3. 必要に応じて、**Design**パネルで[タイポグラフィのプロパティ](#typography-properties)を調整します。または、プレビュー内のテキストを選択してツールチップを開き、スタイルをすばやくカスタマイズすることもできます。
4. 任意で、**Design**パネルと**Interaction**パネルから、フロー内のコンポーネントに適用できるその他の設定も行えます。詳細については、[スタイルと外観](builder-styling)を参照してください。
:::tip
同じテキスト要素を複数のスクリーンで使用したい場合は、コピー＆ペーストが便利です。要素を選択して Ctrl+C（Mac では ⌘+C）でコピーし、別のスクリーンに移動して Ctrl+V（Mac では ⌘+V）で貼り付けてください。
:::

### テキストの一部のスタイルを変更する \{#change-styling-for-parts-of-text\}

:::warning
**太字**と**斜体**のフォーマットは、[カスタムフォント](using-custom-fonts-in-flow-builder)を使用しているテキストには効果がありません。カスタムフォントのバリアントを適用するには、各バリアントを別々のフォントファイルとしてアップロードし、**Font family** ドロップダウンから選択してください。
:::

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

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

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

## 旧価格を追加する \{#add-an-old-price\}

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

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

旧価格を追加するには：

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

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

   :::important
   Old Price 要素はプロダクトカードの内側に配置する必要があります。価格はそのカードのプロダクトから取得されます。プロダクトカードの外側に配置した場合、ビルダーには実際の価格ではなく「Old price」というプレースホルダーが表示されます。
   :::
3. **Design** パネルの **Price** セクションで、**Multiplier** を設定します。Adapty はプロダクトの価格にこの値を乗算します。たとえば、デフォルトの乗数 2 の場合、$12.99 のプロダクトは取り消し線付きの $25.98 として表示されます。

   

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

:::tip
別のプロダクト（例：年間プランのカードに月額プランの価格）の実際の価格を取り消し線で表示したい場合は、テキスト要素と変数を使って価格行を構築してください。詳しくは[割引バッジ付きの取り消し線価格を表示する](strikethrough-price)をご覧ください。
:::
## タイポグラフィのプロパティ \{#typography-properties\}

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

- **Font family**: フォントを選択します。組み込みフォントか、[カスタムフォント](using-custom-fonts-in-flow-builder)を指定できます。

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

- **Weight**: フォントの太さを設定します。
:::warning
**Weight**、**Bold**、**Italic** のコントロールは、[カスタムフォント](using-custom-fonts-in-flow-builder)には適用されません。**Styles** パネル、**Design** パネルのタイポグラフィセクション、インラインツールバー、テキストパーツのフォーマットツールチップのいずれで設定した場合も同様です。カスタムフォントのバリアントを適用するには、各バリアントを別々のフォントファイルとしてアップロードし、**Font** ドロップダウンから適切なものを選択してください。
:::
- **Size**: フォントサイズをピクセル単位で設定します。
- **Color**: テキストの色を設定します。
- **Line height**: 行間のスペースを設定するか、**Auto** のままにします。
- **Alignment**: 水平方向（左、中央、右）と垂直方向（上、中央、下）の配置を設定します。
- **Decoration**: 下線または取り消し線を適用します。
- **Truncate**: 表示する行数を制限します。その行数を超えたテキストは切り捨てられます。動的変数やローカライズによってコンテンツの長さが変わる場合に便利です。
## リンクを追加する \{#add-links\}

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

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

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

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

### URL を開くアクション \{#open-url-action\}

:::link
メイン記事：[アクション](onboarding-actions#open-url)
:::

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

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

    

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

3. [**Open URL**](onboarding-actions#open-url) アクションの遷移先を設定します。

    :::important
    Open URL アクションが空のままだと、[プレビューと公開がブロックされます](builder-save-publish#troubleshooting)。
    :::

    
## 条件付きテキストを追加する \{#add-conditional-text\}

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

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

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

3. **if** 条件を構築します。**Custom**、**Products**、または **Elements** タブからプロパティを選択し、演算子を設定して、マッチさせる値を入力します。プロパティの種類の詳細については、[条件付き表示](onboarding-element-visibility)を参照してください。
4. **then** の下に、条件が真のときに表示するテキストを入力します。リッチテキストの書式設定は[通常のテキスト](#change-styling-for-parts-of-text)と同じように機能します。[変数](onboarding-variables)を挿入するには、**{ } Add variable** をクリックします。
5. **else** の下に、条件がどれにもマッチしない場合に表示するフォールバックテキストを入力します。
6. （オプション）**+ Add else/if** をクリックして、それぞれ独自のテキストを持つ条件を追加します。
:::tip
別の言語の条件付きテキストを編集するには、エディターの下部でアクティブなロケールを切り替えてください。まず **Localizations** パネルで言語を追加してから作業してください — 詳細は[フロービルダーでロケールを追加する](add-paywall-locale-in-adapty-paywall-builder)をご覧ください。
:::

## リストを追加する \{#add-lists\}

:::note
リスト要素は、個別のアイテムコンポーネントで構成されるコンテナです。文章内でシンプルな箇条書きや番号付きリストを使いたい場合は、テキスト要素を使用し、**Design** パネルで任意の書式を適用してください。
:::

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

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