背景

Screen settings の Fill セクションで、任意の画面に背景を設定できます。

ダークテーマを追加して再利用可能なスタイルを適用すると、ライトテーマとダークテーマで異なる背景を設定できます。

Tip

背景をヒーロー画像にするには、コンテンツをスライディングシートに配置してください。

画像

.JPG、.PNG、または .WEBP ファイルを最大 20 MB までアップロードできます。画像は背景全体を覆うようにスケーリングされます。

Note

背景画像や動画は、Safe area が有効な場合でも、ノッチやシステムバーの背後を含むビューポート全体を埋めます。クリッピングを避けるため、重要なコンテンツはエッジから離して配置してください。

ランタイムにアプリのコードから背景画像を切り替えるには、カスタムメディアIDを有効にしてください。

.MP4 または .WEBM ファイルを最大 50 MB までアップロードできます。プレビューには静止フレームが表示されますが、実機では実行時にビデオが再生されます。

Loop をオンにすると、ビデオをループ再生します。

実行時に背景ビデオを切り替えるには、カスタムメディア ID を有効にしてください。

6桁の16進数値（例：#FFFFFF）を入力し、不透明度を0〜100%で設定します。短縮値を入力すると公開がブロックされます。

複数のストップを持つリニアグラデーションを作成します：

Direction — グラデーションを0〜360°で回転させます。
Stops — ストップの位置を変えるにはバー上でドラッグします。ストップを追加するには、バーをクリックするか、Stops の横にあるをクリックします。ストップの位置、6桁の16進数カラーコード、不透明度を変更するには、該当する行を編集します。
Opacity — レイヤーの行にあるスライダーを動かすと、すべてのストップが一括でスケールされるため、ストップ間のフェードがそのまま維持されます。

フローでは、スクリーンの背景とスライディングシートを組み合わせてヒーロー画像を作成します。シートはスクリーンの下部を覆い、ユーザーがスクロールすると背景の上に上昇します。

スクリーンの Fill を Image または Video に設定し、ヒーロー画像をアップロードします。

　
Add element パネルを開き、Layout > Sliding sheet を選択します。
シートの Start position を設定します。これはシートが画面下部から覆う割合です。デフォルトの 55% では、上部 45% に背景が透けて見えます。
シートの中にコンテンツを追加します。
ヒーロー画像の上に見出しやロゴを重ねるには、シートの外側にそれらの要素を追加します。画面の背景の上にレンダリングされます。
必要に応じて、Start position を変更してシートのサイズを調整します。この要素には絶対的な高さを設定できません。

画像や動画の上に重ねたテキストは、背景のメディアが十分に暗い部分でしか読みやすくなりません。この問題を解消するには、メディアの上に半透明のレイヤーを重ねます：

Screen settings で、Fill レイヤーに画像または動画を設定します。
2つ目のレイヤーを追加するには、Fill の横にあるをクリックします。新しいレイヤーが Fill セクションの上部に表示され、メディアを覆います。
レイヤーのスウォッチをクリックし、Gradient を選択します。テキストを配置するエッジだけを暗くしたい場合は、そのエッジを不透明なカラーストップに、反対側を透明なカラーストップにしてグラデーションを設定します。
色合いの強さを調整するには、レイヤー行のスライダーをドラッグします。

レイヤーの順序を変更するには、行をドラッグします。レイヤーを削除するには、その行のをクリックします。