カルーセルレイアウトでバナーを作成する方法

ビジネスポータルでカルーセルバナーを作成する

ステップ1

スーパーカルーセルレイアウトに使用するワイドな画像を選び、縦長9:16のアスペクト比に合う均等なパーツに分割します。
分割する数は、スーパーカルーセルに含めたい動画の本数と同じにします。例えば、下の画像は5つの均等なパーツに分割されています。

ステップ2

まだアップロードしていない場合は、カルーセルに含めたい動画をFireworkビジネスポータルにアップロードします。

ステップ3

スーパーカルーセル用にアップロードした各動画で「編集」をクリックします。

ステップ4

「ポスター」ヘッダーをクリックしてセクションを展開し、画像の切り出したセグメントの1つ（順不同）をポスターとしてアップロードします。

ステップ5

動画にポスター画像を追加したら、プレイリストを作成して動画を追加します。ビジネスポータルでプレイリストを作成するを参照してください。

ステップ6

ビジネスポータルでプレイリストに移動します。

ステップ7

ポスターが画像全体を表示するように、プレイリスト内の動画を順番にドラッグ＆ドロップします。

ステップ8

右上の青い「埋め込み」アイコンを選択し、レイアウトの選択で「カルーセル」を選びます。

ステップ9

「コードをコピー」をクリックします。

デスクトップ体験のカスタマイズ

ウェブページエディターに貼り付ける前にコードを編集してカルーセルの視聴体験をカスタマイズできます。

注意：これはあくまで例です。必ず自分のプレイリスト用のコードをコピーしてください。

<script async type="text/javascript" src="//asset.fwcdn3.com/js/embed-feed.js"></script>
<fw-embed-feed
   channel="FW_testchannel"
   playlist="oBZ4Oo"
   mode="row"
   open_in="default"
   max_videos="0"
   placement="middle"
   player_placement="bottom-right"
   captions="false"
   autoplay="false"
></fw-embed-feed>

キャプションと自動再生をオフにする

各タイルにマウスホバーするだけで動画が再生されます。
コピーしたコードにautoplay="false"とcaptions="false"を追加します。

キャプションオフ、自動再生オン

最初のタイルが自動再生され、残りのタイルにも動画があることが分かるようになります。
コピーしたコードにcaptions="false"を追加します。

キャプションオン、自動再生オフ

各タイルのキャプションは、視聴者にクリックして再生リストを見てもらうよう促すのに役立ちます。
コピーしたコードにautoplay="false"を追加します。

カルーセルはデスクトップで最も効果的に体験できます。
モバイルやアプリでは、下記の例のようにポスターがスクロール表示されます。
デスクトップとモバイルの体験を最適化し、最大限のエンゲージメントとコンバージョンを実現する実装方法については、Fireworkチームにご相談ください。