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

タイトル、段落、リストをワンクリックで追加し、ブランドに合わせてスタイルを設定して、ダイナミック変数を使って各ユーザー向けにコンテンツをパーソナライズできます。

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

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

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

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

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

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

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

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

テキストを追加する

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

左上の + をクリックします。Text を選択します。事前に設定済みのテキストスタイルから選択するか、ご自身で設定します。

新しい要素をクリックし、右側の Design パネルの Content セクションでコンテンツを編集します。
必要に応じて、Design パネルでタイポグラフィのプロパティを調整します。または、プレビュー内のテキストを選択すると、クイックスタイルカスタマイズ用のツールチップが表示されます。
必要に応じて、Design パネルおよび Interaction パネルで、フロー内のコンポーネントに利用できるその他の設定も適用できます。詳細については、要素のスタイリングを参照してください。

同じテキスト要素を複数の画面で使用したい場合は、コピー＆ペーストが便利です。要素を選択してCtrl+C（Macの場合は⌘+C）を押し、別の画面に移動してCtrl+V（Macの場合は⌘+V）を押すと貼り付けられます。

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

太字と斜体の書式設定は、カスタムフォントを使用しているテキストには効果がありません。カスタムフォントのバリアントを適用するには、各バリアントを別々のフォントファイルとしてアップロードし、Font family ドロップダウンから選択してください。

テキスト要素の一部だけスタイルを変更するには:

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

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

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

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

Font family: フォントを選択します — 組み込みフォントまたはカスタムフォントです。

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

Weight、Bold、Italic のコントロールは、カスタムフォントには適用されません。これは Styles パネル、Design パネルのタイポグラフィセクション、インラインツールバー、テキストパーツのフォーマットツールチップのいずれで設定した場合も同様です。カスタムフォントのバリアントを適用するには、各バリアントを個別のフォントファイルとしてアップロードし、Font ドロップダウンから適切なものを選択してください。

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

リンクを追加する

フローでは、テキストをクリッカブルなリンクに変換する方法が2つあります。テキストの役割に応じて使い分けてください：

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

インラインリンク

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

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

URLを開くアクション

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

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

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

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

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

別の言語の条件付きテキストを編集するには、エディターの下部でアクティブなロケールを切り替えてください。まずLocalizationsパネルで言語を追加します — Flow Builderでロケールを追加するを参照してください。

リストを追加する

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

左上の + をクリックします。List を選択し、リストテンプレートを選んでください。
右側の Design パネルでリストアイテムを編集するか、アイテムマーカーとして画像をアップロードします。