スタイルと外観
右パネルの Design タブでは、各要素の見た目を設定します。利用できるプロパティは要素の種類によって異なりますが、ほとんどの要素には共通のスタイルオプションがあります。
サイズ、間隔、配置については、レイアウトと配置を参照してください。
AI エディターに「ペイウォールをダーク・プレミアムな雰囲気にして」と伝えると、フィル、角の丸み、フォント、間隔など、すべての要素を一度にスタイル変更してくれます。
表示設定
Visibility トグルは、画面上に要素を表示するかどうかを制御します。
- Show（デフォルト）: 要素は常に表示されます。
- Conditional: 特定の条件が満たされた場合にのみ要素が表示されます。詳しくは条件付き表示をご覧ください。
- Hide: 要素は常に非表示になります。要素を削除せずにフローから一時的に取り除く場合に使用します。
塗りつぶし
Fill セクションでは、要素の背景を設定します。画面全体を塗りつぶすには、代わりにスクリーン背景を設定してください。
塗りつぶしは1つ以上のレイヤーで構成されます。各レイヤーは以下のいずれかのタイプを持ちます：
- ソリッドカラー : カラーピッカーを使うか、hex値を入力します。不透明度を調整して背景を半透明にできます。
- グラデーション : 2つ以上のカラーストップを使います。ストップをドラッグしてグラデーションの変化を調整し、Directionスライダーで角度を設定します。ストップを変更するには、Stopsの下の行を編集します。ストップを追加するには、グラデーションバーをクリックするか、Stopsの横にある をクリックします。レイヤー行のスライダーは、すべてのストップの不透明度を一括で変更します。
- 画像 または 動画 : 背景として画像または動画を使用します。
レイヤーを管理するには：
- レイヤーを追加するには、Fill の横にある をクリックします。
- レイヤーの種類を変更するには、スウォッチをクリックして種類を選択します。
- レイヤーの順序を変更するには、行をドラッグします。
- レイヤーを削除するには、その行の をクリックします。
上のレイヤーが下のレイヤーを覆うため、画像の上に半透明のレイヤーを置くと画像に色合いが付きます。入力フィールドと日時ピッカーは、最下層のレイヤーのみを表示します。
レイヤーを他の要素で再利用したり、ダークバージョンを作成したりするには、カラースタイルとして保存してください。画像をティントと一緒に再利用するには、単一の複数レイヤースタイルを作成してください。
ボーダー
ボーダーはデフォルトでオフになっています。右パネルの Border の横にある をクリックして追加できます。ボーダーを削除するには、Border 見出しの横にある をクリックします。
ボーダーが設定されている場合、以下を構成できます：
- Color: カラーピッカーを使用するか、16進数の値を入力します。代わりにカラースタイルを適用するには、Styles タブから選択します。ボーダーはスタイルの画像・動画レイヤーを無視します。
- Width: ボーダーの太さをピクセルで指定します。
ボーダーにグラデーションを適用するには、グラデーションレイヤーを持つカラースタイルを Color に適用してください。
コーナー
Corners セクションはボーダー半径（角丸）を設定します。
- Radius スライダー: 4つすべてのコーナーに同じ半径を設定します
- コーナーごとの切り替え : 有効にすると、各コーナーに異なる半径を個別に設定できます
エフェクト
Effects の横にあるプラスボタン をクリックして、1つ以上のビジュアルエフェクトを追加します：
- Drop shadow：要素の背後に表示されるシャドウ
- Inner shadow：要素の境界内に表示されるシャドウ
- Layer blur：要素とその子要素をぼかす
同じ要素に複数のエフェクトを重ねて適用できます。表示アイコン を切り替えると、エフェクトを一時的に無効にできます。
アニメーション
Animation の横にある ボタンをクリックすると、アニメーション効果を追加できます。現在利用できるアニメーションは Pulse のみで、要素がリズミカルに拡大・縮小して注目を集めます。
Pulse アニメーションは以下のパラメーターで設定できます。
| パラメーター | 説明 |
|---|---|
| Scale amount (%) | 元のサイズに対して要素がどれだけ拡大するか |
| Duration (ms) | 1回のアニメーションサイクルの長さ |
| Delay between loops (ms) | 繰り返しの間の一時停止 |
| Shadow color | パルスする影エフェクトの色 |
| Shadow size (px) | パルスする影のサイズ |
アニメーションのプレビュー
ビルダーはデフォルトで静止したスクリーンを表示します。アニメーションを確認するには、以下のいずれかの方法でオンにします。
- デバイスプレビューの上にある Toggle animations ボタンをクリックします。スクリーンのアニメーションのオン・オフを切り替え、オンにすると再度クリックするまでアニメーションが連続再生されます。このボタンは、アクティブなスクリーンに少なくとも1つのアニメーションが含まれている場合にのみ表示されます。
- スクリーンレイヤーの横にある三点アイコンからスクリーンのコンテキストメニューを開き、Play Animation を選択します。
外観
- Opacity: 0%（透明）から100%（不透明）の範囲で設定します
- Rotation: 度数値を入力してエレメントを回転させます
タイポグラフィプロパティ（テキストエレメント）
テキストエレメントには以下のコントロールを含む Typography セクションが表示されます。
フォント
関連情報：カスタムフォント
フォントのドロップダウン をクリックして、フォントピッカーを開きます。タブは2つあります：
- Styles：プロジェクトに保存されたテキストスタイルの一覧です。スタイルを選択すると、そのタイポグラフィ設定が一度に適用されます。
- Fonts：利用可能なすべてのフォントファミリーの一覧です。検索またはスクロールして目的のフォントを探してください。組み込みフォントはデバイスによって表示が異なる場合があります。統一されたレンダリングを実現するには、カスタムフォントをアップロードしてください。
現在のタイポグラフィ設定を新しいテキストスタイルとして保存するには、タブの横にある をクリックします。すると、エレメントは新しいスタイルを使用するようになります。
サイズとウェイト
太字と斜体は、ファミリーに太字または斜体のフォントフェイスが含まれていない限り、カスタムフォントには効果がありません。正しいフェイスはご自身でアップロードしてください。
- Weight: ドロップダウンからフォントウェイトを選択します
- Size: ドロップダウンからサイズを選択するか、カスタム値を直接入力します
テキストサイズはプラットフォームによって異なる表示になります。Androidではシステムのフォントサイズ設定に応じてフローのテキストがスケーリングされますが、iOSでは設定した通りのサイズで表示されます。Androidではシステムのフォントサイズを大きくした状態でレイアウトをテストしてください。iOSでは収まるテキストでも、Androidでは折り返しやはみ出しが発生する可能性があります。
カラー
カラースウォッチをクリックして、16進数の値を入力するか、パレットを使用してください。代わりにカラースタイルを適用するには、Styles タブから選択してください。テキストはスタイルの単色レイヤーのみ表示されます。
揃え
2グループの揃えコントロールがあります。
- 水平: 左揃え 、中央揃え 、右揃え
- 垂直: 上揃え 、中央揃え 、下揃え
装飾
- None : 装飾なし（デフォルト）
- Underline : テキストに下線を追加します
- Strikethrough : テキストに取り消し線を追加します
トランケーション
トランケーションを有効にすると、Max Lines の設定を超えたテキストを切り捨てます。 複数の言語をサポートする場合に便利です。翻訳後の文字列が元の文字列より長くなっても、 トランケーションによってレイアウトが崩れるのを防ぎます。
テキストエレメントを選択すると、キャンバス上でその上部にインラインツールバーも表示されます。このツールバーから、右パネルをスクロールせずにフォント、ウェイト、サイズ、揃えにすばやくアクセスできます。
状態別設定（インタラクティブエレメント）
インタラクティブエレメントは複数のビジュアル状態をサポートします。該当するエレメントを選択すると、右パネルに 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。
再利用可能なスタイル
メイン記事: 再利用可能なスタイル
フロー全体でテキストや色のプロパティを統一するには、再利用可能なスタイルとして保存してください。スタイルを編集すると、それを使用しているすべての要素と画面に変更が反映されます。