背景

Fill パネルを使って、任意の画面に背景を設定できます。パネルは Screen settings の下にあります。パネル内の各レイヤーはソリッドカラー、グラデーション、画像、または動画で、複数のレイヤーを重ねることもできます。これが画像や動画にティントを適用する方法です。

背景をヒーロー画像として使用することもできます。この効果を実現するには、コンテンツをスライディングシートに配置してください。

画像

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

Note

背景画像と動画は、Safe area が有効な場合でも、ノッチやシステムバーの背後を含むビューポート全体を埋めます。端のコンテンツが切れないよう、重要なコンテンツは端から離して配置してください。

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

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

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

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

6桁の16進数値（例：#FFFFFF）を入力し、透明度を0〜100%で設定します。短縮形の値を入力すると公開がブロックされます。スウォッチから保存済みのカラースタイルを選択してブランドカラーを適用すると、背景はライトテーマとダークテーマに自動的に追従します。

複数のストップを持つ線形グラデーションを作成できます：

Direction — グラデーションの角度を 0〜360° の範囲で回転させます。
Stops — バー上をドラッグして位置を変更します。ストップをクリックすると、6桁の16進数カラー値と不透明度を編集できます。
Opacity — レイヤー行のスライダーを使うと、すべてのストップの不透明度を一括でスケーリングできます。ストップ間のフェードはそのまま維持されます。

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

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

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

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

レイヤーをドラッグしてスタック内の順序を変更し、をクリックして削除します。