マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

背景に動画を取り入れたWEBデザイン

投稿日:2014年4月28日 更新日:

動画を取り入れたWEBサイト。
大分主流となってきて、見かける頻度も一段と増えました。

動画 = 重い

という概念もどこへやら。。

最近のWEB動画はとても軽い。
背景として動画を入れ、飽きさせることなく、
ユーザーとのコミュニケーションにより成功しているWEBサイトを
いくつかご紹介します。

petit-ACCUEIL
petit ACCUEIL

シャルトリキュールのお取り寄せサイトは、アクセスした瞬間に動画が流れ、なんともオシャレな食卓、そこに並ぶ美味しそうなお料理たちが
目に飛び込んできます。
「こんな食卓を囲みたい!」と思った人は少なくないはず。

”それを実現するのがここで販売している食材たちだよ”
→”ぽちっ(カートを押した音)”

そんな導線が見えてくるようです。

静止画では伝わらないお料理の魅力と、シチュエーションの雰囲気を
動画を使い、最大限に引き出していますね。

 

questantQuestant

無料セルフアンケートのコンテンツサイト。
このようなコンテンツサービスは「どのような機能なのか」を
ストレスなく、どう理解して貰えるかがとても重要。
少しでも分かり難い説明は、残念ながら離脱に繋がってしまいますね。

その一番 ”面倒” だけど ”重要” な部分を
動画によって、感覚的に理解させる事に成功しています。
それも一瞬で。
非常に効果的な使い方で、サービス自体にも好印象を持ちますね。

 

POOL-incPOOL inc.

広告企画・制作会社のWEBサイト。
”面白い提案をバシャバシャ生み出す”というコンセプトのもと作られたサイトのようで、最初の動画のインパクトは絶大。
面白いアイデアの中にどこか親しみと懐かしさを覚える演出も、
企業ブランディングの一貫なのでしょうね。
アイデアや動きのひとつひとつが精巧で面白いため、
ずっーと見ていたくなります(笑)

このように自社の企業ブランディングにも動画表現は大いに役立ちます。静止画に比べて動画は表現方法が無限です。

 

”動画で面白いことをする”のではなく、
”面白いことを動画にする”
これが成功の秘訣かもしれませんね。

-WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

Webデザインを制作する中で、写真素材を使用することが多々あります。 これらの素材にひと手間加えることで、写真の魅力がグッと加わったり、 サイトの印象を変えることができたり、ポイントにもなったりします …

【デザイナー必見!】 ロゴデザインをつくるとき役立つ4つのサイトをご紹介

【デザイナー必見!】 ロゴデザインをつくるとき役立つ4つのサイトをご紹介

WEB制作会社というと、ホームページデザインのイメージが強いと思いますが、 マーカーネットではロゴデザインの制作も承っています。 そこで、今回はロゴデザインを作成する際、参考になるサイトについてご紹介 …

phpフレームワークlaravel4でデータベースを操作してみました。

phpフレームワークlaravel4でデータベースを操作してみました。

phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

<WordPress>カスタムフィールドテンプレートのテキストエディター(TinyMCE Advanced)で プラグインの設定通り反映されないとき

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

前回構造疑似クラスについて便利な使い方をご紹介しましたが、 (知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】) 今回はCSS3の属性セレクタをご紹介します。 E[foo] fo …