HTML5で動画を埋め込む演出/台東区上野のWEB制作/訪日外国人集客会社

株式会社ケイツー・インタラクティブ [K2-interactive]

WEB担当者の相談室

HTML5で動画を埋め込む演出

 

最近、ホームぺージの背景に動画を差し込むコンテンツを見かけますがどうやって作っているのですか?

動画を背景に差し込むには、HTML5のvideoタグを使ったり、jqueryを使います。

HTML5で動画を埋め込む演出:目次

背景動画のメリット・デメリット

ホームページTOPの背景に大きな動画を埋め込むことで、ユーザーの目を引きサービスのアピールや雰囲気を伝えて不ランディングをするケースがあります。動画はより多くの情報を伝えるのに適していますが、全てがいいことばかりでもありません。

背景動画のメリット

ホームページに背景動画を設置するメリットは、なんと言ってもより多くの情報をダイナミックにユーザーに伝えることが出来ることです。静止画とテキストだけでは伝わらない雰囲気や、説明に時系列が必要な製品を紹介するのにとても適しています。

背景動画のデメリット

コンテンツ量の多いホームページの場合、ごちゃごちゃになってしまい情報が散らかった印象になってしまいます。また、動画を作成するスキルも必要になります。

ホームページ用動画の用意

動画の構成を企画

背景動画は20秒ほどがベストです。20秒にどんな要素を入れて、どのような構成にするかコンテを作成します。手書きで漫画風にしてもいいですし、PPT(パワーポイント)やワードなどを使って、写真を紙芝居的に並べて考えてもいいかと思います。特に最初の3秒が非常に重要です。その3秒でユーザーの心を掴まなければ動画を見てもらうことは出来ません。

動画素材の作成

動画を掲載するにはまず動画を用意する必要があります。動画も写真同様用意するには「自社で撮影する」「プロに依頼する」「素材を使う」の3パターンが考えられます。背景動画で注意したい点は、おおよそ20秒、出来れば500KB〜3MBの動画を用意することです。

自社で撮影する

現在ではiPhoneでも簡単に動画を撮影することが出来、そこそこのクオリティのものを撮影することが出来ます。しかしながら、20秒に編集する作業は訓練を積んでいかなければなかなか難しいこととなります。

ご自身で撮影される場合はユーチューバーMEGWINさんの書籍『YouTubeで小さく稼ぐ ~再生回数2億回の達人が教える、撮った動画をお金に変える方法』が参考になります。初心者にもわかりやすく、動画撮影の大事なポイントが書かれています。

プロに依頼する

コストはそれなりにかかってしまいますが、ある程度間違えない内容が出来上がってくると考えていいでしょう。カメラマンとの相性やスキル若干の当たり外れが出ることもあります。

素材集を使う

あらかじめ完成されているイメージ動画を利用します。動画を選ぶのが手間ですが、完成を見て購入することが出来るので無難に動画を活用することができます。

Adobe Stockというサービスはかなりクオリティの高い素材が揃っています。『Adobe Stock ホームページ

ホームページへの実装方法

ホームページへの動画実装方法の詳細は省きますが、HTML5になり新たに追加された「video」タグを使用するケースと、Jqueryを仕様するケースがあります。また、動画には代替用の画像も用意しておくことをお勧めいたします。動画が表示されないブラウザや、スマートフォンで閲覧の場合などで画像を表示して対応することもあります。

HTML5
<video src="images/xxxxx.mov" autoplay loop>  <img src="images/xxxxx.jpg" alt="xxxxxx"> </video>

実際のホームページ例

実際にホームページの背景に動画を差し込むとどのようにユーザーに情報が伝わるのか?参考にするのにオススメのホームページを2つピックアップしましたので紹介します。

無印良品

シンプルだけど気持ちいい空間が伝わり、心地よさから質感まで、画像では伝わらない情報をユーザーに届けることが出来ています。途中にアプリの説明動画もうまく差し込み、伝えたい情報をきちんと伝えることが出来ているページに仕上がっています。

ホームページURL:http://www.muji.com/jp/beadssofa/

whiteboard

アメリカのデジタルクリエイティブカンパニーのようですが、一目でセンスのあるオフィスと、オープンで先進的なスタッフのイメージが印象に残ります。言葉がわからない相手にも、きちんとイメージを伝えることが出来る動画ならではのブランディングだと思います。

ホームページURL:http://whiteboard.is/

HTML5で動画を埋め込む演出のまとめ

ホームページにHTML5で動画を埋め込むインパクトある演出、いかがでしたでしょうか?動画を撮影するとついついあれも見せたい、これも見せたいとなり冗長になりがちですが、20秒という短い時間により効果的なストーリーを作り伝えたい情報をきちんとユーザーに伝えなければなりません。撮影自体はスマートフォンの進化でだれでも簡単に出来るようになりましたが、まだまだこの構成、そして編集に関しては、まだまだプロの手に頼った方が良さそうです。

ホームページのリニューアルに関するご相談は、お気軽にお問い合わせください。

本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

WEBマーケティング
CMSツール導入支援

HTML5で動画を埋め込む演出に関連する記事

jqueryを使ってjavascript開発の効率化
UIを実装するフロントエンジニア

K2 WAY

ソリューション

施策事例 Client Voice

WEB担当者の必見ノウハウ 7 選

K2の得意なこと

WEBマーケティング

WEBマーケティング

顧客とのコミュニケーション課題を解決して、御社のビジネスを成功につなげるWEBマーケティングのプロ集団です。

WEBマーケティング

インバウンド集客PR

インバウンドの集客PR

IT/SNSを使ったプロモーションからイベント開催まで一貫したO2Oブランド構築で集客・PRをご支援をいたします。

インバウンド集客PRを見る

CMSツール導入支援

CMSツール導入支援

HTMLが判らなくてもかんたんにWEBサイトを更新出来るCMSツールを活用して、見込み客をを増やしませんか?

CMSツール導入支援を見る