English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

再利用可能なスタイル

スタイルを作成してテキスト設定やフィル（カラー、グラデーション、背景画像など）を保存し、複数の画面上の要素で再利用できます。スタイルを編集すると、そのスタイルを使用しているすべての要素と画面に変更が反映されます。

スタイルのセットは各フローごとに独立しています。

Styles パネルを開くと、フローのスタイルを作成・閲覧・編集できます：

  • テキストスタイル: タイポグラフィ設定（フォント、ウェイト、サイズ）。
  • カラースタイル: カラー、グラデーション、画像などの塗りつぶし。1つのカラースタイルに、ライトモードとダークモードそれぞれ別バージョンを含めることができます。

テキストスタイル

メイン記事：テキストコンテンツ

The Text tab of the Styles panel with the default text styles H1, H2, H3, Button Label, and Body

テキストスタイルは、フォントファミリー、ウェイト、サイズ、行間、文字間隔などのタイポグラフィ設定をまとめて保存したものです。すべてのフローテンプレートにはデフォルトのプリセットが含まれており、カスタムスタイルを作成することもできます。

テキストスタイルを作成するには：

  1. Styles パネルを開きます。
  2. パネルヘッダーで Create style をクリックします。
  3. Type を Text に設定し、名前を入力してタイポグラフィ設定を行います。
  4. Create をクリックします。

テキスト要素の現在のタイポグラフィ設定を新しいテキストスタイルとして保存するには、フォントピッカーのタブの横にある をクリックします。その要素には新しいスタイルが適用されます。

テキストスタイルを適用するには、テキスト要素を選択し、Typography セクションのフォントドロップダウンからスタイルを選択します。

テキストスタイルを編集するには、Styles パネルで対象のスタイルをクリックし、設定を変更して Save をクリックします。

H2 テキストスタイルの編集フォーム。Name フィールド、タイポグラフィ設定、Delete style・Cancel・Save ボタンが表示されている

カラースタイル

The Colors tab of the Styles panel with four color styles, each with a light and a dark swatch

カラースタイルとは、保存されたフィルのことで、単色・グラデーション・画像・動画、またはそれらの組み合わせを指します。ダークテーマを使用している場合は、テーマごとに異なるバージョンを設定できます。スタイルエントリに表示される数字は、そのスタイルを使用している要素と画面の数を示しています。

カラースタイルを作成する

カラースタイルを作成するには：

  1. Styles パネルを開きます。
  2. パネルヘッダーで Create style をクリックします。
  3. Type を Color に設定し、名前を入力します。
  4. スタイルを設定します。レイヤーの色や塗りつぶしタイプを変更したり、その上にレイヤーを追加したりできます。
  5. Save をクリックします。
The Create style form with Type set to Color and a white solid color in the Light and Dark sections

フィルレイヤーまたはカラーの現在の値をスタイルに変換するには、スウォッチをクリックし、Custom と Styles タブの横にある アイコンをクリックして、Save をクリックします。これでフィルレイヤーまたはカラーがそのスタイルを使用するようになります。

カラースタイルを編集する

カラースタイルを編集するには：

  1. Styles パネルを開きます。
  2. Colors タブを選択します。
  3. スタイルのエントリをクリックします。
  4. 各バージョンには複数のレイヤーを設定できます。スウォッチをクリックして、塗りつぶしタイプに応じてレイヤーを設定します：
The Edit style form of a color style with an image layer in the Light and Dark sections

単色

  1. 色を設定します：16進数の値を入力するか、スウォッチをクリックして選択します。
  2. スライダーで不透明度を設定します。
  3. Save をクリックします。
The Edit style form with a different solid color in the Light and Dark sections, and the color picker of the Dark color

グラデーション

  1. Gradient フィルタイプを選択します。
  2. ストップ、ストップカラー、および Direction を設定します。
  3. Save をクリックします。
Tip

背景画像の上にあるテキスト要素を読みやすくするには、その後ろにある画像の端を暗くします。画像の上にレイヤーとしてグラデーションを追加し、その端の不透明なストップからもう一方の端の透明なストップへとグラデーションを流します。

The Edit style form with a gradient in the Light and Dark sections, and the gradient picker of the Dark gradient with the Direction slider and the Stops list

画像と動画

画像・動画要素は、ダークテーマ用に別のファイルを設定することができません。代わりに、コンテナを作成して背景をカラースタイルに設定してください。各スタイルバージョンで、画像または動画レイヤーを設定します。

  1. Image または Video のフィルタイプを選択します。
  2. 下部ツールバーで選択したロケールのソースファイルをアップロードします。すでにファイルがアップロードされている場合は、Replace をクリックして置き換えることができます。
  3. Save をクリックします。
Tip

画像や動画に色味を加えたい場合は、その上に半透明のカラーレイヤーを重ねてください。

The Edit style form with a different image in the Light and Dark sections, and the image picker of the Dark image

マルチレイヤースタイル

ライトセクションに画像レイヤー、ダークセクションに半透明カラーレイヤーと画像レイヤーを重ねたEdit styleフォーム

カラースタイルの各バージョンには、複数のレイヤーを重ねることができます。マルチレイヤースタイルを使えば、色調補正された画像など、より複雑なビジュアルを作成できます。

レイヤーを追加するには、スタイルのエントリをクリックします。次に、Properties、Light、または Dark セクションで ボタンをクリックします。既存のレイヤーの上に新しいレイヤーが追加されます。レイヤーの順序を変更するには、各行をドラッグしてください。新しいレイヤーを設定したら、Save をクリックします。

スタイルを適用するすべての場所にすべてのレイヤーが表示されるわけではありません。特定のプロパティや要素にスタイルを適用した場合にのみ表示されるレイヤーもあります：

  • 塗りつぶし（入力フィールドとピッカー）: 最下層のみ。他のレイヤーは無視されます。
  • 塗りつぶし（その他すべての要素）: すべてのレイヤー。
  • ボーダー（入力フィールドとピッカー）: 単色またはグラデーションのみ。画像・動画レイヤーは無視されます。
  • ボーダー（その他すべての要素）: 単色およびグラデーション。画像・動画レイヤーは無視されます。
  • テキストカラー: 単色レイヤーのみ。グラデーション・画像・動画レイヤーは無視されます。バージョンに単色レイヤーがない場合、そのモードではテキストに色が設定されず、非表示になります。
  • アイコン、シャドウ、およびその他のカラー: 複数レイヤーのスタイルには対応していません。単色の単一レイヤースタイルのみ適用できます。

カラースタイルを適用する

カラースタイルを要素に適用するには、フィルレイヤー、テキストカラー、ボーダーカラー、またはアイコンカラーのスウォッチをクリックします。Styles タブをクリックしてスタイルのエントリを選択し、静的な値をスタイルに置き換えます。必要な値のスタイルがない場合は、現在の値をスタイルとして保存してください。

画面上の多くの要素にスタイルを一括適用するには、AI Editor に依頼してください。たとえば、Apply the Card background style to all cards のように指示します。フロー全体にわたってスタイルを設定・適用するには、flow-generator スキルを使用してください。

画像や動画要素にはフィルがないため、カラースタイルを適用できません。代わりにコンテナを作成し、その背景を設定してください。

スタイルの管理

Styles パネルで:

  • スタイルの名前を変更するには、エントリをクリックして Name フィールドを変更し、Save をクリックします。
  • スタイルを複製するには、エントリを右クリックして Duplicate を選択します。
  • スタイルを削除するには、エントリをクリックして Delete style をクリックします。要素に使用されているスタイルを削除する場合は、代替スタイルを選択します。
  • スタイルの順序を変更するには、エントリをリスト上でドラッグして並べ替えます。
  • スタイルを別のフローにコピーするには、エントリを選択し（複数選択する場合は Shift+クリック）、⌘C / Ctrl+C を押します。コピー先のフローで同じタブ（Text または Colors）を開き、⌘V / Ctrl+V を押します。

ダークモード

メインの記事: ダークモード

A screen previewed in light and dark mode

カラースタイルにはダークモード用の値を別途設定できます。ユーザーのデバイスがダークモードに設定されている場合、フローはその値を使用します。

ダーク値を使用するには、フローにダークテーマを追加してください。次に、ダークモードで異なる表示にしたい各スタイルのダーク値を変更します。