---
url: "/ja/bannerify/export/platforms/applovin-responsive.md"
description: "縦向き・横向き、必要に応じて正方形のレイアウトを含む、自己完結型のMRAID HTMLクリエイティブをAppLovin向けにエクスポートします。"
---

# AppLovin向けにレスポンシブなHTML5クリエイティブをエクスポートする

> 縦向き・横向き、必要に応じて正方形のレイアウトを含む、自己完結型のMRAID HTMLクリエイティブをAppLovin向けにエクスポートします。

モバイルの全画面の配置に合わせて調整される、自己完結型のMRAID HTMLファイルが1つ必要な場合は、**AppLovin (Responsive HTML5)** を選択します。

## 設定 {#setup}

1. Figmaで`9:16`の縦向きフレームと`16:9`の横向きフレームを1つずつ作成します。キャンペーンのブリーフで`1:1`のレイアウトも求められている場合は、正方形のフレームを1つ追加します。
2. それらのフレームをBannerifyのタイムラインに含めます。
3. **Export to HTML**をクリックし、**AppLovin (Responsive HTML5)** を選択します。
4. エクスポートし、Bannerifyでダウンロードしたファイルを解凍します。
5. 自己完結型の`.html`ファイルを、クライアントまたはメディア担当チームが指定したAppLovinのワークフローにアップロードします。

BannerifyはAppLovinのMRAIDのreadyイベントを待ってから開始し、含まれるレイアウトのうちアスペクト比がデバイスのビューポートに最も近いものを表示して、配置全体を覆うように比率を保ったまま拡大縮小します。また、読み込みインジケーターを含め、動画をミュートのまま再生し、クリックを`mraid.open()`経由で処理し、画像とダウンロードした動画ファイルをHTMLに直接埋め込みます。完成したクリエイティブに、別途`images`や`videos`フォルダは必要ありません。

必要なCTAはデザイン内で常に見えるようにし、閉じるボタンは追加しないでください。閉じるボタンはAppLovinが配置に表示します。

## 両方の向きが必要な理由 {#why-both-orientations-are-required}

AppLovinの`9:16`の要件は、縦向きの動画と画像のエンドカード素材に適用されるものです。HTMLのプレイアブル広告には別の要件があり、1つのHTMLファイルが縦向きと横向きの両方で正しく動作する必要があります。

そのため、Bannerifyのこのエクスポートには、`9:16`の縦向きフレームと`16:9`の横向きフレームが1つずつ必要です。2つのフレームには同じコピー、画像、クリエイティブのコンセプトを使えます。横向きのフレームは、横長の向きに合わせてレイアウトを調整するだけで構いません。Bannerifyは両方のフレームを1つのレスポンシブなHTMLファイルにまとめます。`1:1`の正方形のフレームは任意です。

> **Info:** クライアントから`9:16`の素材だけを求められた場合は、必要なのが動画、画像のエンドカード、HTMLのプレイアブル広告のどれなのかを確認してください。縦向きのみのブリーフは前の2つの形式には有効ですが、Bannerifyの**AppLovin (Responsive HTML5)** エクスポートには不十分です。

## 複数のクリエイティブのバージョンをエクスポートする {#exporting-multiple-creative-versions}

縦向きと横向きのセットを、それぞれ専用のFigmaセクションに入れます。セクションには正方形のフレームを1つ含めることもできます。Bannerifyはセクションごとに、自己完結型のAppLovin用`.html`ファイルを1つ作成します。

> **Warning:** この単一ファイル形式は、外部のランタイムファイルに依存するLottieレイヤーとYouTubeレイヤーに現在対応していません。それらのレイヤーは、先に連番画像か、ミュートした短い動画に変換してください。Bannerifyは、このエクスポートで使われる圧縮時`2 MB`、非圧縮時`50 MB`の上限もチェックします。

最新の単一ファイル、向き、音声、クリックスルーのルールについては、AppLovinの[HTMLプレイアブルの仕様](https://support.applovin.com/en/growth/promoting-your-apps/welcome-to-applovin/creative-specs-and-guidelines)をご覧ください。