私たちは、台東区浅草雷門でホームページ制作・運営代行とインバウンド対応/集客支援をしている会社です。
最近、ホームぺージの背景に動画を差し込むコンテンツを見かけますがどうやって作っているのですか?
動画を背景に差し込むには、HTML5のvideoタグを使ったり、jqueryを使います。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
ホームページ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/
アメリカのデジタルクリエイティブカンパニーのようですが、一目でセンスのあるオフィスと、オープンで先進的なスタッフのイメージが印象に残ります。言葉がわからない相手にも、きちんとイメージを伝えることが出来る動画ならではのブランディングだと思います。
ホームページURL:http://whiteboard.is/
ホームページにHTML5で動画を埋め込むインパクトある演出、いかがでしたでしょうか?動画を撮影するとついついあれも見せたい、これも見せたいとなり冗長になりがちですが、20秒という短い時間により効果的なストーリーを作り伝えたい情報をきちんとユーザーに伝えなければなりません。撮影自体はスマートフォンの進化でだれでも簡単に出来るようになりましたが、まだまだこの構成、そして編集に関しては、まだまだプロの手に頼った方が良さそうです。
ホームページのリニューアルに関するご相談は、お気軽にお問い合わせください。
※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。
ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない、一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。
SQLは関係データベース管理システム(relational database management system、略称:RDBMS)を操作するためのデータベース言語として、 ISO 及び JIS にて規格化され、現在ではリレーショナル型データベースの標準として位置づけられています。
ライブラリとは、汎用性の高い再利用が可能なプログラムです。ライブラリはプログラムの本体に、必要なプログラムの部品(ライブラリ)を組み込みます。本体に組み込むのに若干記述が必要ですが、部品を作る手間無く作業効率を格段に向上することが出来ます。
ワイヤーフレームは目的を達成する為にページにどのような要素を配置すればいいかを示すホームページの設計図です。ワイヤーフレームの作成と確認は、出来上がってから「使いにくい」「成果が出にくい」ことがないように、制作に入る前に最初に確認するとても重要なフローです。
コンテンツを魅力的に見せるレイアウトの一番のポイントはファーストビューです。ファーストビューで見せるデザインは、ホームページで最も重要な要素です。ユーザーは一瞬でページの善し悪しを判断し、もし興味が無ければすぐにページを閉じてしまいます。ページを読んでもらうポイントは「魅力的な体験」「簡潔で具体的な内容」を提示出来ているかどうかです。
WEBデザイナーはビジュアルだけでは無く、プログラムを書いたりすることもあります。これは人や企業によってさまざまで、一長一短のメリット・デメリットがあります。デザインからプログラムまでを一貫して担当できるクリエイターがいれば、プロジェクトがぶれること無くスピーディーに進めていくことが出来ます。
WEB担当者が知っておきたい!制作技術の豆知識 [質問箱 (FAQ)]では、WEB担当者のみなさまの悩みに、一問一答形式でお答えしています!!