WEBサイトにHTML5で動画を埋め込むインパクトある演出/台東区上野のWEB制作/訪日外国人集客会社
![株式会社ケイツー・インタラクティブ [K2-interactive]](https://www.k2-interactive.co.jp/common/images/unit_img/logo.png){kind=logo}
WEBサイト制作のことなら、私たち台東区上野のWEB制作会社
株式会社ケイツー・インタラクティブにお気軽にご相談ください。
最近、ホームぺージの背景に動画を差し込むコンテンツを見かけますがどうやって作っているのですか？
動画を背景に差し込むには、HTML5のvideoタグを使ったり、jqueryを使います。
ホームページ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/
アメリカのデジタルクリエイティブカンパニーのようですが、一目でセンスのあるオフィスと、オープンで先進的なスタッフのイメージが印象に残ります。言葉がわからない相手にも、きちんとイメージを伝えることが出来る動画ならではのブランディングだと思います。
ホームページURL:http://whiteboard.is/
ホームページにHTML5で動画を埋め込むインパクトある演出、いかがでしたでしょうか？動画を撮影するとついついあれも見せたい、これも見せたいとなり冗長になりがちですが、20秒という短い時間により効果的なストーリーを作り伝えたい情報をきちんとユーザーに伝えなければなりません。撮影自体はスマートフォンの進化でだれでも簡単に出来るようになりましたが、まだまだこの構成、そして編集に関しては、まだまだプロの手に頼った方が良さそうです。
ホームページのリニューアルに関するご相談は、お気軽にお問い合わせください。
※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。
