HTML5とは？

HTMLとはWebページを作成するために開発された言語で、HTML5はその最新バージョンのことです。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されており、ホームページを作るならばHTML5一択とも言われています。

【参考文献】HTML5 - Wikipedia

Flashが可能にしたインタラクティブコンテンツ

HTML5以前のWebコンテンツはFlashという規格が基本でした。音やグラフィックのアニメーションを組み合わせて印象的なWebサイトの作成を支えてきました。特に、FlashにはWebサイト上の特定の場所をクリックすると、イベントが発生するようなインタラクティブ機能があり、話題を集めました。

そもそもインタラクティブとは

「インタラクティブ(interactive)」とは“相互に作用する”や“双方向性”などの意味を持った英単語です。送り手からの一方的な情報発信ではなく、その内容に対し受け手が端末の操作をし、通信を介してやり取りをする行為のことを指します。Flashはこのインタラクティブコンテンツの先駆けとして地位を確立してきました。

FlashからHTML5へ

Flashにはページの読み込みに時間がかかることや、再生の際にプラグインが必要などの問題点が存在しました。さらに、セキュリティの脆弱性により、AppleがFlashをサポートしないことを決定し、FlashはiPhoneという新しい媒体には対応しなくなってしまいました。

現在では、Flashが抱えていた上記の多くの問題点を解決し、iPhone上での再生も可能にしたHTML5がWebサイトでの動画コンテンツの主流となりつつあります。そして遂に、Adobe社が2020年の年末をもってAdobe Flashのサポートを終了すると発表しました。

HTML5の新たな可能性

FlashのようなインタラクティブコンテンツをHTML5を利用し可能にしたのが、「インタラクティブ動画」です。

HTML5のビデオタグを使用することによって、簡単にWebサイトに埋め込むことが可能です。HTML5はブラウザや媒体を気にする必要がないため、インタラクティブ動画もHTML5が設置できるならどこでも埋め込み、視聴をすることが可能です。

【参考文献】videoタグで動画を埋め込む－HTML5リファレンス

インタラクティブ動画とは？

インタラクティブ動画とは動画内に視聴者がタップすることができるボタンを設置し、視聴者が動画視聴時にリアルタイムでアクションを起こすことが出来る動画です。

視聴者の選択でストーリーの結末が変化したり、動画内の気になる部分をタップするとその詳細が表示されるなど、視聴者が能動的に動画に参加できるようになります。この自発的なアクションを促すことによって、ユーザーは今までにない新しい動画視聴体験を得ることができるでしょう。

この視聴者が参加できる双方向性によって、インタラクティブ動画は視聴者の動画理解を促進させ、送り手のメッセージを最大限視聴者に伝えることができます。

インタラクティブ動画の機能

HTML5を活用したインタラクティブ動画にはユーザーのアクションを促進させることができる様々な機能があります。

インタラクティブ動画実際の事例

触れる動画と何度も述べてきましたが、実際にどのようなものか動画を触って体験してみてください。

外務省様の事例

外務省のODAの活動内容を説明したインタラクティブ動画事例になります。RPGゲームのように鷹の爪団のキャラクターと会話する形で、視聴者を動画に引き込むことができた事例です。

スクエアエニックス様の事例

ファイナルファンタジーのゲームでのTwitter連動キャンペーン活用事例です。キャラクター選択からアイテムゲットの流れをテンポよく盛り込んだため、高い視聴完了率をマークした事例です。

東急不動産様の事例

東急不動産「Plug and Play Shibuya」の施設紹介・Q&Aでの活用事例です。オンラインで深い理解をしてオフラインに呼び込むことでより送客が見込める事例になります。

第一カッター興業様の事例

第一カッター興業の採用動画での活用事例です。若者に馴染みのない業界を実際に面白く疑似体験をすることで、興味を沸かせ、高いエントリー数を実現した事例になります。

まとめ

インタラクティブ動画はHTML5の普及により、Flash以上のインタラクティブコンテンツとして現在のWebコンテンツの新潮流となるでしょう。他企業との差別化のために、このインタラクティブ動画をWebサイトに活用してみてはいかがでしょうか。