動画を使用したWEBサイトのデザインを7つ紹介

Shindo

2023.05.22

こんにちは、WEBディレクターのしんどうです。

インターネットの速度が上がったことや、YouTubeを筆頭とした動画サイトが普及したことによって、私たちの生活の中で動画はとても身近なものになりましたね。

最近では気になることがあったら、Google検索するよりもまずYouTubeで動画を検索するという方も多くいると思います。

ちなみにしんどうのおすすめのYouTubeチャンネルはぴよぴーよ速報です。
世界史や哲学を小学生でもわかるようにコミカルに解説してくれる動画で、多分学生の時よりも世界史に強くなっています。

ぴよぴーよ速報チャンネルはこちら
https://www.youtube.com/@Piyopiiyosokuhou

余談は置いてさておき…

ネット記事や本では文章を読んでいかなければならないのに対して、動画では音声を含む動的なコンテンツのため、内容が入ってきやすい上に気軽に視聴することができるというのは大きな特徴です。

前置きが長くなりましたが、最近はWEBサイトに動画をうまく活用している事例が多くあります。

WEBデザインに動画を組み合わせると、動きが生まれてサイトが華やかな印象になります。動画内容にサービスや商品についてのアピールポイントが盛り込まれていれば、なおのこと効果的です。

今回は、弊社スピカデザインの実績の中で、動画を活用したWEBサイトの制作実績をいくつか紹介します。

思い切って背景全体が動画！なWEBサイト

電子事業を行っていることから、電子的なイメージを一発で伝えられる動画を背景にしています。

サイトアクセス時には「テクノロジーを支える」というキャッチコピーが散らばった状態から形成されていくアニメーションを動画とは別に実装しています。

電子事業の製品開発や技術支援を行うことで「テクノロジーを支えている」ということWEB上で動きをもって表現しています。

世界最大の電動モビリティブランド「YADEA」の製品紹介サイトです。

背景には、YADEAの電動キックボードに乗って公道を走行している様子を映しています。

トップページでは常に背景に動画が映るようになっており、電動キックボードに乗りたくなる気持ちを駆り立てます。

坂道を軽々と登る様子など、電動キックボードの特徴もアピールしています。

「LUCKY Industries」が提供しているベビー用品「Pittoresk（ピトレスク）」のブランドサイトです。

「ハイスペック機能を持った素材を使用し、従来のベビー用品にはなかったファッション性を取り入れた、全く新しいベビー用品」というブランドコンセプトの通り、やさしさとファッション性が織り交ぜられた素敵な動画がファーストビューを全面に使用しています。

資料を中心としたBPOサービスを提供している「株式会社イー・ブレイン」のコーポレートサイトです。

ファーストビューでは、キャッチコピーと合わせて業務風景のイメージ動画が流れており、言葉だけで語るよりも視覚的なビジュアルがあることでどのようなサービスを提供しているのかぐっと伝わりやすくなっています。

美容業界向けのSaasや店舗運営事業を行っている「株式会社クラウドビューティ」のコーポレートサイトです。

ファーストビューでキャッチコピーとともに事業内容を紹介する動画を流し、どのような事業を行っているか伝わりやすくしています。

イベント制作・運営会社「エフ・ブレイン」のコーポレートサイトです。

全面ではなく、小窓のようにコンセプトムービーが背景で流し、スクロールしても固定で見せ続けています。

途中、コンテンツが載っているところでは透明度を上げて視認性の妨げにならないようにし、ページの最後では再びくっきりと見えるようになっています。ページの上から下までストーリーを感じられるのがいいですね。

渋谷の美容外科「ANGIE」のWEBサイトです。

小窓のような枠に美しい動画が流れ、WEBサイト全体の余白感やサイズ感も含めて、とてもリラックスした雰囲気です。

背景やファーストビュー全面に動画を敷くとインパクトがあっていいですが、こちらのサイトのように限られた枠に動画を取り入れるのもおしゃれですね。

また枠にシャドウがかかっていることでサイトの向こう側に世界が広がっているかのような奥行きを感じられるのがポイントです。

動画一つ撮っても、さまざまな種類や使い方があります。

サービスや商品内容、サイトの種類によってどのように落とし込むのが効果的なのか変わってきます。

スピカデザインでは、動画を使用したWEBサイト制作はもちろんのこと、撮影からお手伝いすることも可能です。

動画を効果的に使用したWEBサイト制作は、ぜひスピカデザインにご相談ください。