いよいよコンテンツ制作！視聴を超えた、体験型インタラクティブ動画制作の可能性
みなさまこんにちは、ユタカ産業のWeb担当です。
先日、公開しましたこちらの記事はもう読んでいただけましたでしょうか？
各事業部それぞれの独楽も出そろいましたので、仕上げを担当するweb担当と動画担当も動き出します。
今回はそちらの舞台裏をご覧ください。
1.下準備
年賀状で独楽を戦わせる事になった我々。
まずは、戦いを見せる場を作らねばなりません。
年賀状にQRコードを入れる関係で、URLは先に発行しておかなければならないので、会社で借りているサーバーで年賀状用の場所を作り、URLを決定。
担当者にQRコードの発行と年賀状のデザインへの反映をお願いしました。
最終的に印刷屋さんに入稿されるため、もう後には引けません。
何が何でもこの場所で実装です。
2.ランダムリンク
まず、独楽バトル、と銘打つのでバトル結果は当然ランダムでなければなりません。
結果はそれぞれ勝敗の数だけページを作ればいいとして、そのURLにランダムで飛ばす事は出来るのか…？
疑問を持ちつつもネットの海に潜るweb担当。
少し探してみると簡単なjavascriptで実現できることが分かりました。
動画でそれを実行するのが難しそうだった為、動画にあたる部分をgifアニメーションで作成してもらい、いざ、ささっと実装。
問題なく動いたため、先のページに勝敗の動画をそれぞれ埋め込み、ランダムで飛ぶことも確認できました。
よし、これで今年は12月に入る前に年賀状の準備が終わりそうだぞ、と安心していたweb担当。
早速社長に確認をして貰う事に。
3.問題発生
意気揚々と社長に確認をお願いしたweb担当。
最初はランダムリンクが出来たことにドヤ顔を決めていましたが
「これ、飛んだ先の動画は自動再生出来ないですか？」
と、遷移した先で動画を見ていた社長からの質問に視線が泳ぎます。
実は現在、YouTubeやVimeo等の動画サービスをサイトに埋め込んだ場合、音ありで自動再生する術が無いのです。
ミュートをオンにして自動再生をオンにするか、ミュートをオフにして、自動再生もオフにするかしか選択肢がありません。
回避する方法はこのサイトは安全ですよー、とGooglechromeなどのブラウザに例外としてURLを登録してあげる事のみ。(だと思っていますが、もし回避できる方法ご存じであればこっそり教えてください。)
ランダムリンクは実現できているものの、遷移した先でワンタップを挟んでしまうため、このままでは確かにちょっとゲームのUIとして良くない…でも、仕様の壁には逆らえないと悩んでいると、横で話を聞いていた動画担当から
「それインタラクティブ動画でできないですかね？」
とのお言葉が。
インタラクティブ動画…？
4.インタラクティブ動画とは
ここからは、動画担当からご説明させていただきます。
まず、インタラクティブ動画とは簡単にいうとタッチができる体験型の動画のことを指します。vimeoにもこの機能があり、vimeo上にアップロードした動画に編集を加えて、動画内でタッチできるコンテンツを簡単に作ることができます。
基本的な機能として、「ホットスポット」と「タイムトリガー」という機能があります。ホットスポットは動画の中にボタンを配置して、タッチすることで好きなURLに飛ばしたり、動画内で設定した場面へとスキップさせることができます。タイムトリガーはトリガー時間を設定する事でタッチなしで自動的に動画内を行き来できます。
これらの仕掛けをうまく使うことで、作る側も見る側も楽しめる動画に生まれ変わります。
5.インタラクティブ動画の可能性
話しは戻って、独楽を戦わせて運試しをするお正月っぽいゲームにしよう！と決まったあの日。
社長とweb担当がゲームの仕組みを考えていた時でした。
A４用紙に手書きで仕組みやそれにともなう構造を二人で書き込みながら相談していました。社長が何かを書くたびに、うーんと唸るweb担当。
web担当の唸り声を聞いたからか、
「それか、インタラクティブ動画でも出来そうじゃない？」と急に流れ弾がこちらに飛んできました。
インタラクティブ動画？
インタラクティブ動画については少し勉強を始めたところでしたが、ランダムに遷移させるボタンはおそらくありません。
ニコニコしながら社長と見つめ合っていたその時です。
web担当に天啓が下りてきました。
「あ、これをこうしてああすれば（長いので割愛）…できるかも？」
よくわかりませんでしたが、web担当がひらめいたので、システムを組む方向で進むことになりました。
ですが、社長からの言葉がなんとなく引っかかっていて、インタラクティブ動画でもどうにかすればできるものなのかと考えていました。
6.動画担当への天啓
インタラクティブ動画の可能性について考えるにあたり、まずは機能をおさらいしてみようと思いました。
インタラクティブ動画の編集画面に入り、本当にランダムボタンがないのか、どこかの設定でランダムにできるのではないかなど探しましたが、方法が見つかりませんでした。
頭の片隅に置いては出し、置いては出しを繰り返していると、不意にある方法を思いつきました。
かなりの力技ですが、この方法ならランダム風にできると思いました。ただ、web担当の方で、なんとかなりそうだったこともあり、このアイディアの出番はなさそうだと思っていました。
7.問題解決
社長「これ、飛んだ先の動画は自動再生出来ないですか？」
web担当「仕様の壁には…逆らえないですね…。」
ニコニコしながら疑問をぶつける社長とランダムリンクは実現させたものの、遷移した先でワンタップを挟まなければ動画が再生できないという仕様の壁にぶつかったweb担当が隣で話しをしているのを聞いて、とっさに話に割り込みました。
「それインタラクティブ動画でできないですかね？」
先日ひらめいた方法を社長とweb担当に話します。
この方法ならインタラクティブ動画でできるのでは？と伝えたところ、社長から「なるほど！それでいきましょう！」と後押しをいただき、web担当からバトンを引き継ぐことになりました。
8.編集内容
動画を全部作り終え、動画をvimeoにアップして編集に移ります。
TOP画面の動画は、タッチするまでループになるように設定をし、勝ちボタンと負けボタンも、作った本人でさえ狙って結果が出せないように設定しました。
ホットスポットの設定にもひと手間加えます。
この設定を勝ちと負けの両方のボタンに作成した上で、この設定を3つの独楽で行いました。
独楽のバトル動画が終わったところにタイムトリガーを設定し、自動的にエンディングの時間まで飛ばします。
エンディングが終わった後、何度も挑戦できるようにタイムトリガーでTOP画面に飛ぶように設定して終了です。
完成したゲームがこちらになります。(序盤に載せている記事でも紹介しています。)
お楽しみいただけたでしょうか？
今までの動画は視聴するだけでしたが、インタラクティブ動画は、体験しながら動画を楽しむことができます。今回使用した機能を生かせば、独楽のバトルだけではなく、いろいろなものに転用できると考えています。
例えば、お店にサイネージを置かせていただき、クーポンの割引価格や、何種類かの貰えるサンプルを、ランダムで決まるようにし、ゲーム性を持たせるなど、普段の生活の中で、少しでも楽しんでもらえるような仕掛けが色々できると思います。
インタラクティブ動画を使用して、実際のお仕事に繋がるように、今後も色んな機能やアイデアを探っていきたいと思います。
ゲームの中身の動画に関しては別の記事でご紹介させていただきますので、楽しみにお待ちください。
続きはこちらからどうぞ ↓