最近のWEBサイトでは動画を掲載するケースが増えてきました。
専用のページを用意したり、トップページのwebデザインに組み込んだりと、掲載方法は様々です。
動画をWEBサイトに取り入れることで、商品やサービス、企業概要などを分かりやすく伝えることができます。
コンテンツの質を上げることで、同業他社との差別化にもつながります。
今回はwebデザインに動画と取り入れたサイトの紹介や、WEBサイトに動画を掲載する方法をご紹介しましょう。
««相場の半額でお見積りします»» 動画制作をご検討の方はこちら
webデザインに動画を取り入れたおすすめサイト5選
動画を取り入れているWEBサイトでは、どのように掲載しているのでしょうか？
おすすめWEBサイトを5つご紹介しましょう。
wiz CLOUD
企業が抱える課題をITで解決してくれるIT商社のセレクトショップです。
トップページに自社のサービス内容を紹介した動画を掲載しています。
IoTやICTの重要性を伝えるメッセージから始まり、自社でできることを伝える動画内容となっています。
動画内では企業が抱える課題例を挙げており、自社のサービスを通じてIoT・ICTを導入するメリットを理解することが可能です。
最後には自社の強みやミッションを伝え、存在を強くアピールしています。
dinnteco JAPAN
オフィスビルや空港、通信塔、軍事施設など様々な建物に設置される、避雷針の導入や教化を行っている会社です。
動画はトップページに埋め込まれており、製品の特徴を紹介しています。
dinntecoの避雷針は雷を発生させない技術を用いて、人や建物への落雷を防ぐことが可能です。
どうしてそんなことができるのか、映像とナレーション、テロップにより分かりやすく紹介しています。
製品の特徴だけではなく、世界37ヶ国に導入事例があることや、補償などの安心保証サービスがあることも取り入れており、導入を検討する人に安心感を与える動画となっています。
Lala Aasha
溶岩ホットヨガスタジオが手掛けるインストラクター養成コースのWEBサイトで動画が取り入れられています。
WEBサイトではカリキュラムの様子をまとめた動画を視聴することが可能です。
どんな雰囲気のスタジオなのか、またどのような指導が行われているのか、動画から把握することができます。
動画ではプロのインストラクターの指示を受けながら、実践を通じてヨガの知識や技術を習得する姿が映されています。
きれいになりながら、インストラクターの仕事に活かせる知識が学べるというメリットを感じられます。
株式会社キャンディルテクト
建物のリペアを主力に建築検査や内装施工、揚重センターの支援などを行う企業です。
キャンディルテクトもトップページに埋め込みタイプの動画を掲載しており、自社サービスの内容を紹介しています。
動画の冒頭ではどの分野でサービスをしているのか、またどんなビジョンを持つ会社なのか伝えています。
その後は9つのサービスについて、どんなことができるのか紹介しています。
今までの実績や強み・特徴までまとめられており、会社とサービスを十分に理解できる動画です。
GMOおみせアプリマネジメント
総合IT関連事業の会社で有名なGMOが手掛けるマネジメントサービスです。
お店アプリを活用して既存の顧客をロイヤル化し、売上増加につなげてくれます。
トップページに掲載された動画で、サービスの内容を紹介しています。
動画では実際のツール画面が表示されるので、サービスのイメージが掴みやすいでしょう。
GMOのアプリマネジメントを使うことで、何ができて、どんな効果が得られるのか理解できます。
企業の多くはサービスや事業内容を紹介した動画を取り入れている傾向があります。
少し難しい内容でも、動画にすることでシンプルに伝えられ、文字や画像以上に内容を理解しやすいものとなっています。
自社やサービスの良さが伝えられるWEBサイトにしたい方は、動画をwebデザインに取り入れてみてはいかがでしょうか？
WEBサイトへの動画埋め込み方法
WEBサイトはHTMLという言語で作成されており、動画を掲載するためには埋め込みするためのタグを挿入しなければなりません。
ここからは動画の埋め込み方法や使用する際の注意点をご紹介しましょう。
videoタグを使った方法
2014年10月にHTML5という言語が登場し、WEBサイトに動画や音声を簡単に埋め込めるようになりました。
WEBサイトに動画を埋め込みたい場合は、HTML5で使えるようになったvideoタグというものを使って掲載することが可能です。
動画を差し込みたい部分に「<video controls><source src=”動画ファイル名やURL”></video>」を挿入するとWEBサイト内に埋め込むことができます。
sourceタグで動画ファイル名を指定しなければならないので、事前にサーバーへアップロードしておきましょう。
Youtubeなどで動画を配信する場合は、動画ページに埋め込みタグをコピーし、それをWEBサイトに貼りつければ簡単に埋め込むことができます。
videoタグの属性一覧
videoタグに属性タグを付けることで、動画の幅や高さ、自動再生などの設定が可能です。
使用できる属性タグをご紹介しましょう。
【autoplay】
WEBサイトを表示した時点で動画を自動再生させて表示した時に挿入します。
【loop】
動画が終わった後、再度ループ再生して表示させたい時に挿入します。
【width・height】
動画の幅と高さを任意で設定することが可能です。
widthで幅、heightで高さを指定できるので、pxで設定しましょう。videoタグではパーセントなどでの可変指定ができないので、可変させたい場合はCSSでの設定がおすすめです。
【playsinline】
スマホで動画を再生する場合、全画面表示になってしまうことがあります。
playsinlineタグを挿入することで、全画面表示ではなくインライン再生で表示することが可能です。
インライン再生をする場合、autoplayとmutedの属性も挿入しないと上手く再生されないので注意してください。
【controls】
再生ボタンや再生位置、ボリュームが表示されたコントロールパネルを表示できます。
【muted】
動画の音声をミュートで再生表示させたい場合に使用する属性タグです。
【poster】
動画を再生できない場合に表示する画像ファイルを指定できる属性タグです。
「poster=”画像ファイル名”」という形式で挿入します。
【preload】
WEBサイトを開いた際にあらかじめ動画ファイルを読み込むかどうか指定する属性タグです。
「preload=”○○”」という形式で、「none（事前の読み込みを禁止）」、「metadata（動画の再生時間やファイルサイズだけを読み込む）」、「auto（動画ファイルを事前に読み込む）」のいずれかを指定します。
属性タグは「<video>」の中に入れるようにしましょう。
例えば、「<video autoplay loop width=”640px” height=”480px”>という形で加えていくことになります。
使用する際の注意点
容量が大きな動画はWEBサイトの表示が重たくなってしまいます。目安としては1MBから500KBが理想的で、最大でも3MBを超えない動画を用意しましょう。
画像などを多用している場合は、WEBページ全体の容量も見直すことをおすすめします。
ブラウザで表示する場合は「.mp4」、「.ogv」、「.webm」のファイル形式が無難です。
「source」を追加すれば、複数の動画を掲載することが可能なので、必要に応じて準備しましょう。
また、ベーシック認証により閲覧を制限しているとスマホから動画が再生できないことがあります。
その場合は、認証を解除することで表示できるようになります。
まとめ
WEBサイトは低コストで情報発信できるツールです。
スマホから手軽に情報収集できるようになり、WEBサイトの重要度は以前よりも増しています。
閲覧者に自社やサービスの魅力を伝える方法として、動画は非常に効果の高いコンテンツです。
しかし、ただ導入しただけでは意味がありません。
多くの人々に見てもらうためには、動画自体の質も問われます。
目的によって動画の内容も異なるので、クオリティの高いWEB動画は動画制作・映像制作にお任せすることをおすすめします。
