ブライトコーブの提案するインタラクティブ動画
こんにちは、ブライトコーブ株式会社 Digital Marketing Territory Manager の大野です。
今回はインタラクティブ動画について寄稿します。
インタラクティブ動画とは？
まず、”インタラクティブ” 動画とは何か？ 直訳すると ”相互に作用する” 動画となります。
最近まで Web 上にある動画は、動画を再生させて終わり...というものでした。
単なる文章に比べ動画の情報量は圧倒的で、「理解しやすい」「記憶に残りやすい」といった側面が評価され、さまざまな Web サイト・SNS 等にて利用されています。
それが昨今、HTML5 Video の普及によりインタラクティブ性をもった動画サービスが徐々に普及してきました。身近なものでは YouTube における "カード" や "アノテーション" 機能が代表的ですが、こちらも百聞は一見にしかずということで以下の例を見てください。
しばらくすると動画の左側に買い物カゴが表示され、クリックすると買物カゴに入れることができます。
それがどうしたの...？と思われるかもしれませんが、EC サイトを運用されている方は、日々サイトからの離脱率の改善に邁進されており、動画閲覧後、最速で購入まで導けるインタラクティブ性は離脱率を防ぐだけではな く、コンバージョン率に寄与します。
もちろん購入者にとっても、”買い物かごに入れる” ボタンを探す必要がなく、非常に便利ですよね？
実際に、インタラクティブ動画を導入することで、完視聴率・CTR・エンゲージメントの向上などのリサーチ結果が欧米で報告されています。
動画の配信技術が Flash から HTML5 に移行していく中、HTML5 や CSS、JavaScript といった技術を駆使することで、インタラクティブ動画の作成が比較的容易になり、ここ日本でも今後ますます普及することが予想されます。
注目のオーサリング アプリケーション HapYak
ただ... 比較的容易になったとはいえ、上記のような開発言語によるプログラミング等が必要であり、動画ごとに開発を実施する必要があることから、その制作・運用にはコストが必要となります。そこで、それらを容易にするオーサリング アプリケーションも近年注目されてきました。
HapYak 社は弊社と同じボストンに本社を置くスタートアップ企業です。
同社の開発するクラウドアプリケーション ”HapYak” は、インタラクティブ動画をプログラミングの知識なく開発可能です。もちろん、弊社の Video Cloud とも連携が可能となり、アメリカでは弊社を通じた販売も開始しました。早速、HapYak の詳細を見て行きましょう！
HapYak の機能
上図は HapYak の管理画面です。さきほど記載したとおり、HapYak は事前に設定をすることで Video Cloud と API 連携する ことが可能です。
これにより、Video Cloud にアップロードいただいた動画を、HapYak の管理画面にてインタラクティブ動画化し、Web サイト上で配信することができるようになります。
動画を選択いただくと、早速インタラクティブ動画を作成する画面に遷移します。
動画サムネイルの下部にさまざまなアイコン（機能）があり、これらを利用し編集をしていきます。大まかな機能概要は以下のとおりです。
実際に作成したサンプル動画を見ていただきながらご確認ください。
- テキスト追加
動画上にテキストを追加することができる機能です。テキストにリンクを埋め込むことも可能。商品詳細ページや、次の動画への誘導に利用すると効果的です。
サンプルの動画では 0 分 6 秒頃、1 分 49 秒頃、3 分 6 秒頃に利用しています。 - 画像追加
動画上に jpg、png といった画像を追加することができる機能です。こちらも同様に、画像にリンクを埋め込むことが可能で、資料のダウンロードや、購入ボタンの代わりに利用すると効果的です。
サンプルの動画では 1 分 49 秒頃に利用しています。 - iFrame 追加
動画上に iFrame 形式で他の Web ページを埋め込むことが可能です。
サンプル動画では 3 分 5 秒頃に利用しており、動画の中で別の動画を再生することを実現してみました。 - チャプター機能
動画にチャプター（章、区切り）を追加する機能です。
長い動画などでは章立てをすることで、顧客が興味のある部分へ容易に遷移させることが可能です。これにより離脱率を低くする等の効 果が期待できます。
サンプルでは冒頭から利用しています。左上部の ”Chapter” と記載されている部分をクリックしてみてください。 - クイズ機能
動画に簡単なクイズを差し込むことが可能です。
e ラーニングでの利用が想定されますが、回答を誤った場合は動画を最初から再生させる... 等のコントロールも可能です。
サンプルでは 1 分 33 秒頃、2 分 38 秒頃に利用していますが、わざと回答を間違えてみてください。自動的に巻き戻しされることが確認いただけると思います。
非常に簡単な操作
上記で機能は概ねご理解いただけたかと思いますので、実際の操作を見ていきましょう。
今回は 1. のテキスト追加についてご説明いたします。
テキストを表示させたい時間で、HapYak の「write pop comment here」部分をクリックすると以下のような編集画面が動画上に表示されます。
こちらにテキストを入力します。今回は「資料請求はこちら」と入力してみます。
今のところ HapYak は全て英語表示になりますが、日本語の入力は可能です。
「Start Time」をクリックすると詳細なテキスト表記時間が調整できます。
また、その下にある時計ボタンを押下すると表記している時間を設定できます。
上記のように、秒単位で表記時間を編集できるのと、「Until the end of the video」を選 択すると動画の最後まで表示されます。
また前述の通り、テキストには色々なアクションを設定可能です。
クリックすることでリンクに飛ばすことや、特定の時間まで早送り/巻戻しすること、クリックされない場合は動画をループさせることも可能です。
今回は弊社の資料請求ページのリンクを貼り付けてみます。すると「Pause video on click 」が自動的にチェックされます。これはリンクに飛んだ際に動画を停止する処置となります。
ドラッグ＆ドロップでテキストの場所を設置し、「Done」をクリックすると設定は完了です！
後は Video タグを Web サイトに貼り付けていただくと以下のように指定時間に表示されます。
また、クリックすると指定のリンクに遷移します。
HapYak セミナー
いかがでしたでしょうか？ HapYak を利用することで、インタラクティブ動画を簡単に設定いただけることをご理解いただけたと思います。
2016 年 9 月末現在、弊社を通じた国内での販売を予定していますが時期は未定です。
そのような中、2016 年 10 月 24 日＠紀尾井フォーラムにて、HapYak 社の Kyle Morton 氏を招聘しインタラクティブ動画に関するセミナーを実施することになりました！
EC サイトや e ラーニング等で動画をご利用のお客様には、非常に面白い内容だと思いますので、是非ご参加ください ！
