動画制作・動画マーケティングで費用対効果をあげるノウハウや
事例をお届けするニュースメディア

動画を用いたWebデザインのコツとは? 埋め込むパターンを事例でご紹介



このエントリーをはてなブックマークに追加

デザインはWebサイトの充実度を決定づける、重要なポイントです。近年、動画を取り入れたデザインが注目されています。同じ内容を伝えるためのサイトであっても、動画を導入するだけで見た目の印象も大きく変わりますし、滞在時間やコンバージョンにも影響します。

そこで今回は、Webデザインにおける動画埋め込みのパターンや、YouTube・Vimeoについてご紹介します。

 

Webサイトへの動画埋め込みのパターン

Webサイトへの動画埋め込みのパターン

単に動画の埋め込みといってもさまざまなパターンがあります。同じ動画であっても、埋め込みのパターンによってユーザーに与える印象や効果は大きく異なります。
ここでは、いくつかの動画埋め込みのパターンとその特徴をご紹介します。

フルスクリーンパターン

Webサイトのファーストビューにフルスクリーンで動画を表示するパターンがフルスクリーン動画です。ブラウザの画面一杯に動画が広がるため、ビジュアル面での訴求力がもっとも高いパターンといえます。

見た目のインパクトの強い商品やサービスをアピールするにはぴったりの手法で、ファッション系ブランドや独創的なアイデアのキャンペーン告知などのサイトで数多く導入されています。

動画を背景にするパターン

Webサイトの背景として動画を取り入れるケースもあります。スクロールしても常に同じ動画が背景として流れ続けるため、インパクトは抜群です。

ただし、人の目は自然と動くものに注目するため、使い方を間違えるとサイトを閲覧する上で障害となってしまうケースもありますので注意が必要です。

うまく背景動画としてコンテンツが際立つようにデザインしましょう。サイト全体が個性的に仕上がりますので、クリエイティブ系企業などで導入されるケースが多いパターンです。

動画をマスクするパターン

動画にレイヤーを重ねてマスクするパターンも人気です。限定的な部分しか動画が見えないことでより関心を集めることも可能ですし、動画をデザインの要素のひとつとして活用するのも効果的です。

単にマスクするだけでなくレイヤーを半透明にしたり、マスクのパターンを工夫したりすることで動画の印象を大きく変えることもできます。

工夫次第でデザインの一部としても活用できますので、あらゆる業種、目的のWebサイトに導入できるパターンです。

動画をスプリット表示するパターン

近年、画像をカードのように分割してトップページに表示するタイプのWebデザインが人気を集めています。同様のデザイン構成で、画像ではなく動画を使うことによってユニークな対比をつくることが可能です。

画面を2分割して連動した動画を流すことによって、1本の動画以上の効果を期待することができます。このパターンも工夫次第でデザインの可能性は非常に高まりますので、さまざまな業種や目的で活用できます。

動画をパーツとして使用する

動画をページ内のコンテンツのひとつ、または装飾などのパーツとして埋め込むパターンも広く使用されています。短い動画を使うことで、テキストや画像のみでは表現することができない情報を分かりやすく伝えることができます。

具体的には、ソフトウェアの紹介ページで実際の操作画面などを埋め込むことによって操作感や機能を伝えるといったパターンが挙げられます。
デザインの難易度はそれほど高くないため、比較的導入しやすいパターンです。

 

動画を活用した優れたWebデザインの実例

動画を活用した優れたWebデザインの実例

動画を活用した優れたWebデザインの実例をご紹介します。これからWebデザインに動画を取り入れたいと考えている方は参考にしてみてください。

製品の品質の高さをアピールするWebデザイン

𠮷田カバン
高品質なカバンや財布などのメーカーとして知られる、𠮷田カバンのWebサイトです。こちらではサイト背景に、同社のカバンの製作工程の動画を取り入れています。

普段は見ることのできない製作工程はとても興味深いもので、つい最後まで見たくなってしまうのではないでしょうか。同時に、製作工程を公開することで品質の高さをアピールすることにも成功しています。

日本を代表する観光名所の魅力をアピール

清水寺
この動画は外国人観光客の間でも人気の、日本を代表する観光名所である清水寺の公式プロモーションサイトです。静かな雰囲気の中で多くの人々が行き交う風景がトップページの背景に配置されています。ブラウザ全体に動画が広がっていますが、落ち着いたトーンの上品な動画になっています。

まるで現地にいるような臨場感を動画で表現

沖縄美ら海水族館
こちらは沖縄にある沖縄美ら海水族館の公式サイトです。トップページに大きな水槽内の映像が流れています。動画の大きさもあって、まるで水族館の中にいるような臨場感を見事に表現したデザインです。
トップページを一目見るだけで、沖縄美ら海水族館がどんな場所なのかを知ることができます。

 

埋め込む動画プラットフォームは?

埋め込む動画プラットフォームは?

今日ではさまざまな動画プラットフォームがあります。Webサイトに動画を埋め込む場合、いずれかのプラットフォームに動画をアップロードして、埋め込みタグを取得するパターンが一般的です。今回は、中でも利用者数の多いYouTubeとVimeoについて詳しくご紹介します。

YouTubeのメリットとデメリット

YouTube
まず、動画プラットフォームの中でも特に多くのユーザー数を誇るYouTubeの特徴をご紹介します。
もっとも大きなポイントはユーザー数が多いという点です。埋め込んだサイトからのみでなくYouTubeの検索や関連動画からの流入も期待できます。

完全日本語対応しているという点も日本人ユーザーには嬉しいポイントです。
ただし、動画の前後に表示される広告が多いため、動画のデザインを生かしたい場合には注意が必要です。

Vimeoのメリット・デメリット

Vimeo
Vimeoというプラットフォームは、日本の一般動画ユーザーにはそれほど馴染みがないかもしれません。ですが、多くのサイトの埋め込み動画に活用されています。

Vimeoのメリットは、高画質でアスペクト比などの設定も可能な点です。そのため、さまざまな形状でサイトに埋め込むことができます。
さらにパスワードロックも可能で、広告が少ないという点もメリットといえます。

逆にデメリットとしては、プラットフォーム内の検索などからの流入はあまり期待できないという点です。
一部商用としては利用できないケースもありますので、事前に利用規約をしっかり確認する必要があります。

 

まとめ

現代では、動画を導入したWebデザインはそれほど珍しいものではなくなっています。同じ内容のサイトであっても、動画を導入するだけで印象は大きく変わるものです。
しかし、動画の制作や導入はまだまだハードルが高いと感じ、悩んでいる企業も多いようです。

プルークスでは、Webサイトに埋め込むことを想定した動画の制作にも対応しています。ただ単に動画をつくるのみでなく、その後の運用やサイトへの埋め込み方についてもサポートいたしますので、まずは一度お問い合わせください。

関連記事

以下の記事もあわせてご覧ください。
動画のテロップをより効果的にする!活用事例とデザインをご紹介

 

site-like-box

この記事が気に入ったら
「いいね」しよう!

このエントリーをはてなブックマークに追加

お役立ち資料

動画制作・動画マーケティングの基礎知識
詳しく見る
運営会社の動画マーケティングサービス資料
詳しく見る
導入事例インタビュー集 -vol.1-
詳しく見る
instagram広告運用ポイント
詳しく見る

運営会社提供サービス

動画制作・動画マーケティングに特化した(株)プルークスが運営

大企業からベンチャー企業まで動画制作・動画マーケティング支援企業「プルークス」が運営。過去1500本・500社以上もの動画制作・動画広告運用、などを通じて獲得した、成果の出るノウハウを公開しております。

この記事の後によく読まれている記事

ページトップへ