モバイルの全画面の配置に合わせて調整される、自己完結型のMRAID HTMLファイルが1つ必要な場合は、AppLovin (Responsive HTML5) を選択します。
設定
- Figmaで
9:16の縦向きフレームと16:9の横向きフレームを1つずつ作成します。キャンペーンのブリーフで1:1のレイアウトも求められている場合は、正方形のフレームを1つ追加します。 - それらのフレームをBannerifyのタイムラインに含めます。
- Export to HTMLをクリックし、AppLovin (Responsive HTML5) を選択します。
- エクスポートし、Bannerifyでダウンロードしたファイルを解凍します。
- 自己完結型の
.htmlファイルを、クライアントまたはメディア担当チームが指定したAppLovinのワークフローにアップロードします。
BannerifyはAppLovinのMRAIDのreadyイベントを待ってから開始し、含まれるレイアウトのうちアスペクト比がデバイスのビューポートに最も近いものを表示して、配置全体を覆うように比率を保ったまま拡大縮小します。また、読み込みインジケーターを含め、動画をミュートのまま再生し、クリックをmraid.open()経由で処理し、画像とダウンロードした動画ファイルをHTMLに直接埋め込みます。完成したクリエイティブに、別途imagesやvideosフォルダは必要ありません。
必要なCTAはデザイン内で常に見えるようにし、閉じるボタンは追加しないでください。閉じるボタンはAppLovinが配置に表示します。
両方の向きが必要な理由
AppLovinの9:16の要件は、縦向きの動画と画像のエンドカード素材に適用されるものです。HTMLのプレイアブル広告には別の要件があり、1つのHTMLファイルが縦向きと横向きの両方で正しく動作する必要があります。
そのため、Bannerifyのこのエクスポートには、9:16の縦向きフレームと16:9の横向きフレームが1つずつ必要です。2つのフレームには同じコピー、画像、クリエイティブのコンセプトを使えます。横向きのフレームは、横長の向きに合わせてレイアウトを調整するだけで構いません。Bannerifyは両方のフレームを1つのレスポンシブなHTMLファイルにまとめます。1:1の正方形のフレームは任意です。
クライアントから9:16の素材だけを求められた場合は、必要なのが動画、画像のエンドカード、HTMLのプレイアブル広告のどれなのかを確認してください。縦向きのみのブリーフは前の2つの形式には有効ですが、BannerifyのAppLovin (Responsive HTML5) エクスポートには不十分です。
複数のクリエイティブのバージョンをエクスポートする
縦向きと横向きのセットを、それぞれ専用のFigmaセクションに入れます。セクションには正方形のフレームを1つ含めることもできます。Bannerifyはセクションごとに、自己完結型のAppLovin用.htmlファイルを1つ作成します。
この単一ファイル形式は、外部のランタイムファイルに依存するLottieレイヤーとYouTubeレイヤーに現在対応していません。それらのレイヤーは、先に連番画像か、ミュートした短い動画に変換してください。Bannerifyは、このエクスポートで使われる圧縮時2 MB、非圧縮時50 MBの上限もチェックします。
最新の単一ファイル、向き、音声、クリックスルーのルールについては、AppLovinのHTMLプレイアブルの仕様をご覧ください。