Interactive Short Video画面構成ガイド

1. Interactive Short Video(ショート動画)

Interactive Short Videoは、動画表示枠からスタートし、クリックすると動画拡大表示画面へ遷移します。そこからさらに共有画面メールに埋め込む画面QRコード画面動画最小化遷移先ページへと展開していきます。

※ 点線で囲まれた領域はすべてクリック可能な領域です。

1-1. 動画表示枠

サイト上に最初に表示される動画の一覧枠です。

  • レイアウトはカルーセル
  • 動画に対して商品カードを設定している場合のみ表示される
  • クリックで横に並んだ動画をスライド表示
  • クリックで動画拡大表示画面へ遷移
  • 動画に設定したタイトルを表示

動画の設定方法は「ウェブサイトにプレイリスト埋め込み」を参照してください。

1-2. 動画拡大表示画面

動画をクリックすると開く拡大表示画面です。以下の機能があります。

  • クリックで動画を最小化
  • 拡大表示時は自動で音声オン。ボタンを押すと音声オフに切り替え可能
  • クリックで共有画面を表示
  • 動画に設定したタイトルを表示
  • クリックで次の動画を表示
  • 動画に設定したインタラクションを表示
  • 画面下部にFireworkのウォーターマークを表記

インタラクションには以下の種類があります。

  • 商品カード:BizPortalでストアに登録されている商品情報を表示。クリックでストア上で設定したURLへ遷移する。
  • ボタン(CTAリンク):BizPortalでCTAリンク上に設定した任意のテキストを表示。クリックで指定URLへ遷移する。
  • 投票:BizPortalで入力した質問と選択肢(最大5つ)を掲示する。
  • 質問カード:BizPortalで入力した質問を掲出し、回答を収集する。「回答者のメールアドレスを収集する」をオンにすると、回答後にメールアドレスの入力を促し収集できる。結果は「インタラクションデータ」内の「結果を見る」から確認できる。

インタラクションの設定方法は「ショート動画にインタラクションを追加する方法」を参照してください。

1-3. 共有画面

動画拡大表示画面から共有アイコンをクリックすると表示される画面です。

  • クリックで共有画面を閉じ、動画拡大表示画面に戻る
  • クリックで各種ソーシャルメディア・メッセージアプリを立ち上げて共有
  • クリックで動画共有用のリンクを発行
  • クリックでメールに埋め込む画面を表示
  • クリックで共有したいアプリの一覧を表示
  • クリックで動画の上にQRコード画面を表示
  • 共有したい動画のスタート時点を秒単位で選択可能(チェックを入れると有効化)

1-4. メールに埋め込む画面

  • クリックで画面を閉じ、動画拡大表示画面に戻る
  • 埋め込むタイプをアニメーション静止画のいずれかから選択可能
  • 埋め込む際のサイズをもしくは最適から選択可能
  • ボタンをクリックでメール埋め込み用のコードをコピー
  • 画面下部にFireworkのウォーターマークを表記

メールへの埋め込み設定方法は「Firework動画のGIFを追加」を参照してください。

1-5. QRコード画面表示

  • 画面上部にQRコードを表示する
  • それ以外の機能は動画拡大表示画面と同じ

QRコードの取得方法はFireworkビデオにQRコードを追加を参照してください。

1-6. 動画最小化

  • クリックで最小化したプレイヤーを閉じる
  • 動画拡大表示前のページ上で、最小化した動画を任意の位置に追従表示(デフォルトでは右下に配置)
  • クリックで再び動画拡大表示画面へ遷移

1-7. 遷移先ページ(同一ドメイン時)

動画枠を設置しているページと、動画の遷移先URLのドメインが一致している場合の挙動です。

  • クリックで最小化したプレイヤーを閉じる
  • 動画拡大表示画面で再生していた動画を、遷移先ページ上でもPIP(ピクチャインピクチャ)として任意の位置に追従表示(デフォルトでは右下に配置)
  • クリックで元の動画拡大表示画面に戻る