HTML5で動画を埋め込む演出

- WEB担当者の相談室 -

私たちは、台東区浅草雷門でホームページ制作・運営代行とインバウンド対応/集客支援をしている会社です。

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

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

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

背景動画のメリット・デメリット
ホームページ用動画の用意
ホームページへの実装方法
実際のホームページ例

ホームぺージ・スタートアップで初期費用を抑え運営注力

ホームページ・スタートアップは初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。

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

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

背景動画のメリット

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

背景動画のデメリット

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

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

動画の構成を企画

背景動画は20秒ほどがベストです。20秒にどんな要素を入れて、どのような構成にするかコンテを作成します。手書きで漫画風にしてもいいですし、PPT（パワーポイント）やワードなどを使って、写真を紙芝居的に並べて考えてもいいかと思います。特に最初の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>

実際のホームページ例

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

無印良品

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

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

whiteboard

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

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

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

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

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

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