右パネルの Design タブでは、各要素の見た目を設定します。利用できるプロパティは要素の種類によって異なりますが、ほとんどの要素には共通のスタイルオプションがあります。

Design タブをスキップする。

AI エディターに「ペイウォールをダーク・プレミアムな雰囲気にして」と伝えると、フィル、角の丸み、フォント、間隔など、すべての要素を一度にスタイル変更してくれます。

Explore the AI Editor›

表示設定

Visibility トグルは、画面上に要素を表示するかどうかを制御します。

• Show（デフォルト）: 画面が開いたときに要素が表示されます。
• Conditional: 特定の条件が満たされた場合にのみ要素が表示されます。詳細は条件付き表示を参照してください。
• Hide: Show element アクションによって表示されるまで、要素は非表示になります。要素を削除せずにフローから一時的に取り除きたい場合に使用します。

塗りつぶし

Fill セクションでは、要素の背景を設定します。画面全体を塗りつぶすには、代わりにスクリーン背景を設定してください。

塗りつぶしは1つ以上のレイヤーで構成されます。各レイヤーは以下のいずれかのタイプを持ちます：

• ソリッドカラー : カラーピッカーを使うか、hex値を入力します。不透明度を調整して背景を半透明にできます。
• グラデーション : 2つ以上のカラーストップを使います。ストップをドラッグしてグラデーションの変化を調整し、Directionスライダーで角度を設定します。ストップを変更するには、Stopsの下の行を編集します。ストップを追加するには、グラデーションバーをクリックするか、Stopsの横にある をクリックします。レイヤー行のスライダーは、すべてのストップの不透明度を一括で変更します。
• 画像 または 動画 : 背景として画像または動画を使用します。

レイヤーを管理するには：

• レイヤーを追加するには、Fill の横にある をクリックします。
• レイヤーの種類を変更するには、スウォッチをクリックして種類を選択します。
• レイヤーの順序を変更するには、行をドラッグします。
• レイヤーを削除するには、その行の をクリックします。

上のレイヤーが下のレイヤーを覆うため、画像の上に半透明のレイヤーを置くと画像に色合いが付きます。入力フィールドと日時ピッカーは、最下層のレイヤーのみを表示します。

レイヤーを他の要素で再利用したり、ダークバージョンを作成したりするには、カラースタイルとして保存してください。画像をティントと一緒に再利用するには、単一の複数レイヤースタイルを作成してください。

ボーダー

ボーダーはデフォルトでオフになっています。右パネルの Border の横にある をクリックして追加できます。ボーダーを削除するには、Border 見出しの横にある をクリックします。

ボーダーが設定されている場合、以下を構成できます：

• Color: カラーピッカーを使用するか、16進数の値を入力します。代わりにカラースタイルを適用するには、Styles タブから選択します。ボーダーはスタイルの画像・動画レイヤーを無視します。
• Width: ボーダーの太さをピクセルで指定します。

コーナー

Corners セクションはボーダー半径（角丸）を設定します。

• Radius スライダー: 4つすべてのコーナーに同じ半径を設定します
• コーナーごとの切り替え : 有効にすると、各コーナーに異なる半径を個別に設定できます

エフェクト

Effects の横にあるプラスボタン をクリックして、1つ以上のビジュアルエフェクトを追加します：

• Drop shadow：要素の背後に表示されるシャドウ
• Inner shadow：要素の境界内に表示されるシャドウ
• Layer blur：要素とその子要素をぼかす

同じ要素に複数のエフェクトを重ねて適用できます。表示アイコン を切り替えると、エフェクトを一時的に無効にできます。

アニメーション

Animation の横にある ボタンをクリックして、アニメーション効果を追加します。ビルダーは Pulse アニメーションを追加し、要素を周期的に拡大縮小して注目を集めます。別の効果を使用するには、Type で選択してください。

アニメーションタイプ

各タイプには固有の設定があります。タイミング設定はすべてのタイプで共通です。

タイプ	動作内容	設定
Pulse	要素が拡大し、元のサイズに戻ります。	Scale amount (%): 要素の拡大量。
Radial fill waves	要素の形状を塗りつぶしたコピーが背後から広がり、フェードアウトします。	Scale amount (%): 各波が要素に対してどれだけ拡大するか。 Wave size (px): 各波が要素の端からどこまで広がるか。 Wave color（波の色）。 Button pulse: 各波に合わせて要素も Pulse amount (%) の分だけ拡大縮小します。
Radial outline waves	Radial fill waves と同様ですが、各波がアウトライン（輪郭線）になります。	Radial fill waves と同様。
Glow	要素の周囲に柔らかなハローが広がり、フェードアウトします。	Glow size (px): ハローが最も明るいときにどこまで広がるか。 Glow color（グローの色）。
Shake	要素が左右に動きます。	Distance (px): 要素が左右それぞれにどれだけ移動するか。
Wiggle	要素が左右に傾きます。	Angle (°): 要素が左右それぞれにどれだけ傾くか。
Bounce	要素が上に跳ね上がり、元の位置に戻ります。	Height (px): 要素がどれだけ高く跳ね上がるか。
Breathe	要素がフェードアウトし、元に戻ります。	Fade amount (%): 要素が最も薄くなるときのフェード量。
Color shift	要素の塗りつぶし色が別の色に変わり、元に戻ります。	Shift color（変化後の色）。
Border flash	要素の端にボーダーが点灯し、フェードアウトします。再生中は要素自身のボーダーの代わりに表示されます。	Flash width (px): 最も明るいときのボーダーの幅。端から内側に向かって広がります。 Flash color（フラッシュの色）。
Shimmer	要素の塗りつぶし上を光の帯が横切ります。	Shimmer width (%): 要素に対する帯の幅の割合。 Shimmer angle (°): スイープの方向。グラデーションの角度と同じ読み方で、90° は左から右に向かいます。 Shimmer color（シマーの色）。

一部のアニメーションタイプは、要素のレイアウトや塗りつぶしに依存します。要素がこれらの条件を満たしていない場合、ビルダーは Animation 設定に注意書きを表示し、アニメーションなしでフローが公開されます。

• Radial fill waves および Radial outline waves: 要素には固定の幅と高さが必要で、マージンがないことが条件です。
• Color shift: 要素には単色の塗りつぶし、または塗りつぶしなしが必要です。
• Shimmer: 要素には単色の塗りつぶしが必要です。

タイミング設定

パラメータ	説明
Duration (ms)	アニメーション1サイクルの長さ
Delay between loops (ms)	繰り返し間のポーズ
Show after delay (ms)	最初のサイクル前のポーズ
Easing	アニメーションの加減速の方法：Linear（線形）、Ease In（加速）、Ease Out（減速）、Ease In Out（加速→減速）、Elastic（オーバーシュートして収束）、Bounce（数回バウンドして着地）。新規作成したパルスはプリセットのカーブを使用し、Custom と表示されます。

アニメーションのプレビュー

ビルダーはデフォルトで静止したスクリーンを表示します。アニメーションを確認するには、以下のいずれかの方法でオンにします。

• デバイスプレビューの上にある Toggle animations ボタンをクリックします。スクリーンのアニメーションのオン・オフを切り替え、オンにすると再度クリックするまでアニメーションが連続再生されます。このボタンは、アクティブなスクリーンに少なくとも1つのアニメーションが含まれている場合にのみ表示されます。
• スクリーンレイヤーの横にある三点アイコンからスクリーンのコンテキストメニューを開き、Play Animation を選択します。

外観

• Opacity: 0%（透明）から100%（不透明）の範囲で設定します
• Rotation: 度数値を入力してエレメントを回転させます

タイポグラフィプロパティ（テキストエレメント）

テキストエレメントには以下のコントロールを含む Typography セクションが表示されます。

フォント

フォントのドロップダウン をクリックして、フォントピッカーを開きます。タブは2つあります：

• Styles：プロジェクトに保存されたテキストスタイルの一覧です。スタイルを選択すると、そのタイポグラフィ設定が一度に適用されます。
• Fonts：利用可能なすべてのフォントファミリーの一覧です。検索またはスクロールして目的のフォントを探してください。組み込みフォントはデバイスによって表示が異なる場合があります。統一されたレンダリングを実現するには、カスタムフォントをアップロードしてください。

現在のタイポグラフィ設定を新しいテキストスタイルとして保存するには、タブの横にある をクリックします。すると、エレメントは新しいスタイルを使用するようになります。

サイズとウェイト

• Weight: ドロップダウンからフォントウェイトを選択します
• Size: ドロップダウンからサイズを選択するか、カスタム値を直接入力します

カラー

カラースウォッチをクリックして、16進数の値を入力するか、パレットを使用してください。代わりにカラースタイルを適用するには、Styles タブから選択してください。テキストはスタイルの単色レイヤーのみ表示されます。

揃え

2グループの揃えコントロールがあります。

• 水平: 左揃え 、中央揃え 、右揃え
• 垂直: 上揃え 、中央揃え 、下揃え

装飾

• None : 装飾なし（デフォルト）
• Underline : テキストに下線を追加します
• Strikethrough : テキストに取り消し線を追加します

テキストの行数制限と自動縮小

レイアウトが崩れないようにするには、Limit lines をオンにして Max Lines を設定します。指定した行数を超えたテキストは、省略記号（…）で切り捨てられます。

テキストを切り捨てるのではなく収まるように調整するには、Auto shrink をオンにします。テキストは行数制限または固定の高さに収まるまで自動的に小さくなります。翻訳がオリジナルより長くなりやすい箇所（プロダクトカードのタイトルやボタンラベルなど）で活用してください。

• Auto shrink は Limit lines がオンの場合、またはテキストの高さが Fixed でレイアウトが Fixed size の場合に使用できます。
• テキストはフォントサイズの10%以上には縮小されません。それでも収まらないテキストは切り捨てられます。
• 設定したフォントサイズは変わりません。プレビューにはデバイス上で表示される実際のサイズが反映されます。

状態別設定（インタラクティブエレメント）

インタラクティブエレメントは複数のビジュアル状態をサポートします。該当するエレメントを選択すると、右パネルに States セクションが表示されます。状態を切り替えて、それぞれに異なるビジュアルプロパティを設定します。

各状態では、塗りつぶし、ボーダー、タイポグラフィの色、不透明度など、あらゆるビジュアルプロパティを上書きできます。

選択可能な状態

選択可能グループに属する要素（クイズの選択肢、プロダクト、タブ、トグル、チェックボックス）は、デフォルトで2つの状態を持ちます：

• Default: 要素の通常の外観
• Selected: ユーザーがこの選択肢を選んだときの外観。塗りつぶし、ボーダーカラー、テキストカラーなどのプロパティを上書きして、選択中の項目を強調表示できます

選択可能な要素が操作不可の状態をスタイリングするには、3番目のステートを手動で追加します。States settings を開き、Disabled state を追加してください。

Disabled ステートは条件によって制御されます。これを選択し、Set conditions をクリックして、実行時に要素が無効になる条件（例：必須フィールドが空の場合など）を定義します。

インプット状態

入力フィールドには追加の状態があります。

• Default: 通常の未フォーカス状態の外観
• Active: フィールドがフォーカスされ、入力可能な状態
• Invalid: 入力値がバリデーションに失敗した状態
• Disabled: フィールドがインタラクティブでない状態

その他の状態を持つエレメント

一部のエレメントは、標準の Default / Selected / Disabled パターン以外で状態別スタイリングを公開しています。

• プログレスインジケーターのステップ — ステップごとに3つの状態: Completed、Current、Upcoming。
• カルーセルのドット — 2つのカラーバリアント: 非アクティブなドットの Color と現在のスライドのドットの Active Color。

再利用可能なスタイル

フロー全体でテキストや色のプロパティを統一するには、再利用可能なスタイルとして保存してください。スタイルを編集すると、それを使用しているすべての要素と画面に変更が反映されます。