---
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を追加したりできます。

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

## タイポグラフィのプロパティ \{#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
    URLが空の 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**パネルで言語を追加します — [Flow Builderでロケールを追加する](add-paywall-locale-in-adapty-paywall-builder)を参照してください。
:::

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

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

1. 左上の **+** をクリックします。**List** を選択し、リストテンプレートを選んでください。

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