TOUCHSPOT(タッチスポット)のロゴ
  • HOME
  • インタラクティブ動画
  • インタラクティブ動画でHTML5の新しい活用方法を紹介!インタラクティブコンテンツの新潮流とは?
インタラクティブ動画

インタラクティブ動画でHTML5の新しい活用方法を紹介!インタラクティブコンテンツの新潮流とは?

インタラクティブ動画でHTML5の新しい活用方法を紹介!インタラクティブコンテンツの新潮流とは?のサムネイル画像
PUBLISH: 2020.05.15

HTML5を活用しWebサイトを作成しているが、印象に残るWebサイトを作成出来ていない、ユーザーにWebサイトを見てもらえない…などWebサイトの基本は抑えているのに上手く活用できていない状態で悩んでいませんか。人々の目に留めてもらうWebサイトにするには魅力的なコンテンツを作成することが重要です。 そこで今回は、HTML5を利用し魅力的なコンテンツを作成できる「インタラクティブ動画」とその活用方法を解説します。

HTML5とは?

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

【参考文献】HTML5 - Wikipedia

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

flash

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

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

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

FlashからHTML5へ

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

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

Flash HTML5

HTML5の新たな可能性

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

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

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

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

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

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

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

01_新しい動画視聴体験_gif

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

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

触れる動画・インタラクティブ動画とは?メリットや事例をわかりやすく解説動画広告を試してみたいけど何が良いのかわからない、活用しているけど実際に効果が出ているとは思えない… この様に、動画広告を上手く活用したいが、なかなかその活用方法が分からないという理由で悩んでいませんか? 実際、動画広告に溢れている現代で、人々の印象に残るものを作成するのは非常に困難です。そこで今回は人々の印象に確実に残る触れる動画「インタラクティブ動画」をご紹介します。

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

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

外務省様の事例

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

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

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

東急不動産様の事例

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

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

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

まとめ

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

PUBLISH: 2020.05.15

ピックアップPICKUP

インタラクティブ動画
見て、触って、もっと知る。顧客接点を生むインタラクティブ動画のメリットとはのサムネイル画像

見て、触って、もっと知る。顧客接点を生むインタラクティブ動画のメリットとは

2020.10.15
インタラクティブ動画
インタラクティブ動画なら動画内タップ数も計測可能!?動画一つでPDCAの回せる秘密を解説!のサムネイル画像

インタラクティブ動画なら動画内タップ数も計測可能!?動画一つでPDCAの回せる秘密を解説!

2020.05.29
インタラクティブ動画
インタラクティブ動画の事例紹介!実際の作成事例をふまえてその活用方法を徹底解説のサムネイル画像

インタラクティブ動画の事例紹介!実際の作成事例をふまえてその活用方法を徹底解説

2020.05.15
インタラクティブ動画
誰でも簡単にできる!インタラクティブ動画の作り方を紹介のサムネイル画像

誰でも簡単にできる!インタラクティブ動画の作り方を紹介

2020.05.15
インタラクティブ動画
触れる動画・インタラクティブ動画とは?メリットや事例をわかりやすく解説のサムネイル画像

触れる動画・インタラクティブ動画とは?メリットや事例をわかりやすく解説

2020.05.15