---
title: "画像、動画、アイコン"
description: "フロービルダーの画面に画像・動画・アイコン要素を追加し、カスタムメディアIDでランタイムにメディアを切り替える方法を説明します。"
---

フロービルダーの **Media** カテゴリには、Image・Video・Icon の3種類のメディア要素があります。

## 画像 \{#image\}

`.JPG`、`.PNG`、`.GIF` ファイルを最大 20 MB までアップロードできます。

- **Aspect** — 画像をコンテナに合わせる方法を設定します：
  - **Fit** — 画像をトリミングせずにコンテナ内に収まるようにスケーリングします。
  - **Fill** — 画像をコンテナに合わせて引き伸ばします。
  - **Cover** — 必要に応じてトリミングしながら、コンテナ全体を覆うようにスケーリングします。デフォルト値です。
- **Use custom media ID** — 後述の[カスタムメディアID](#custom-media-id)を参照してください。

## 動画 \{#video\}

`.MP4` または `.WEBM` ファイルを最大 50 MB までアップロードできます。

- **Aspect** — Fit、Fill、Cover のいずれかを選択します。デフォルトは Fill です。
- **Loop** — 動画を連続で再生します。デフォルトでオンです。
- **Use custom media ID** — 後述の[カスタムメディアID](#custom-media-id)を参照してください。

動画はエディターのプレビューでは再生されません。キャンバスには静止フレームが表示されます。デバイス上でのランタイム実行時は、デフォルトでミュート状態で再生されます。Loop がオンの場合、無限にループ再生されます。

### 動画終了時にアクションをトリガーする \{#trigger-an-action-when-the-video-ends\}

:::link
メイン記事：[アクション](onboarding-actions)
:::

Video 要素は、動画が末尾に達したときに発火する **On playback finished** トリガーをサポートしています。**Interactions** パネルで設定して、別の画面へ遷移したり、CTAを表示したり、その他のアクションを実行できます。

## アイコン \{#icon\}

バンドルされている [Tabler Icons](https://tabler.io/icons) ライブラリから、2種類のビジュアルスタイルで数千のアイコンを選択できます：

- **Stroke** — アウトラインのみ。
- **Filled** — 塗りつぶし。

ピッカーでキーワード検索してアイコンを探せます。アイコンの色は **Color** ピッカーで設定します。保存済みの[カラースタイル](builder-styling)を選択するか、カスタムカラーを設定してください。

## カスタムメディアID \{#custom-media-id\}

:::important
画像や動画の[背景](paywall-head-picture)にもカスタムメディアIDを設定できます。
:::

画像や動画の要素にカスタムメディアIDを付けておくと、アプリのコードから実行時に差し替えることができます。たとえばユーザーが選んだアバターを表示するなど、[パーソナライズされたビジュアル](get-pb-paywalls#customize-assets)に活用してください。

フローBuilder でアップロードしたメディアはフォールバックとして機能します。実行時にコードからそのIDのメディアが提供されなかった場合、フォールバックが表示されます。

ImageまたはVideo要素でカスタムメディアIDを有効にするには：
1. アップロードエリアの下にある **Use custom media ID** チェックボックスを選択します。
2. メディア ID を入力します。
3. フォールバック画像または動画をアップロードします。

アプリのコードでは、メディア ID を使ってメディアを取得します。SDK API の詳細については、[アセットのカスタマイズ](get-pb-paywalls#customize-assets) を参照してください。