Web制作 
Webマーケティング 
その他
2016.09.20 Web制作
【2016年トレンド】動画を使ったWebデザインのおすすめWebサイト15選
最近のWebデザインのトレンドとして、デザインの一部として動画やアニメーションを使うWebサイトが増えています。単に背景に動画を設置するだけでなく、パララックスデザインと呼ばれる、スクロールに合わせてサイトの一部がアニメーションとして動くWebデザインも盛んに使われるようになっています。
動画やアニメーションをWebデザインの一部に使うトレンドは、2016年にさらに加速することでしょう。今回は、こうしたWebデザインを取り入れたWebサイトを15個集めました。WebデザイナーやWebディレクターといったWeb制作に関わる方は、こうした最新トレンドを踏まえたWebサイトは、見るだけでも参考になる部分が必ずあるはずです。
1. 吉田カバン
吉田カバンのコーポレートサイト。トップページの部分に、吉田カバンが出来上がるまでの一連の作業が収められた動画が再生されるようになっています。職人が手作業で作っているということが一目でわかる動画だけで、見事にブランドの魅力を伝えています。
動画をコーポレートサイトに使う場合、「どんな動画を使うのか」という点も重要で、吉田カバンのようにブランドのコアとなる映像を使うことは非常に効果的です。ぜひ動画選びの参考にしてみてください。
2. MUJI TO RELAX｜無印良品
無印良品の睡眠サポートするアプリ「MUJI TO RELAX」と、「体にフィットするソファ」のプロモーションサイトです。ページをスクロールするとパララックスデザインによるアニメーションと動画がスムーズに再生されて、アプリと商品を通して、無印良品が提案する睡眠のスタイルを知ることができます。
動画では実際のアプリを使っている様子や、ソファを使っている場面を見ることができるので、買うときにイメージしやすいですね。
3. 日清食品
日清食品の公式サイト。現在は、3分をカウントしながら自社商品を映した様子、ラーメンを作る様子、カップヌードルを食べている様子などが次々と映し出される作りとなっています。
3分間を計測できるので、なんとカップ麺のタイマーとして使えます。日清食品ならではのアイデアが光るサイトですね。カップ麺を作るときに使ってみようかな、と思わせるようなユニークな映像なので、カップ麺が出来上がるのを待つ間も楽しめそう。クリエイティブを重視したサイトを作ることを検討している方は、お手本にしてみてはいかがでしょうか。
4. さわろう。ふだんプレミアム インタラクティブムービー｜Panasonic
さわろう。ふだんプレミアム インタラクティブムービー｜Panasonic
Panasonicの「ふだんプレミアム」ブランドのプロモーションサイトで、衣・食・住ごとにムービーが用意されています。動画の中で商品が出てくる場面でクリックをすると商品情報を見ることができたり、ドラッグしてムービーの中の商品を操作することができるなど、インタラクティブな作りとなっています。
出演しているのは、俳優の西島秀俊さん。映像を楽しみながらも映像を触ることができるという、新たな体験ができるようになっていて、うまくブランドのイメージを伝えることに成功しています。
5. Giorgio Armani
ファッションブランドのアルマーニ、そのアイウェアラインのWebサイト。トップページにはプロモーションムービー、そして、別々のアイウェアをかけた5人の人物ごとにそれぞれ動画が埋め込まれています。動画は全体的にシックでラグジュアリーな雰囲気で統一されていて、ブランドの魅力を伝えてくれます。
モノトーンで統一された色合いのムービーに、それと連動するようなデザインが際立つサイトですね。
6. DADAAB STORIES
世界最大の難民キャンプがある、DADAABの情報を動画で発信しているWebメディア。「ABOUT」、「CAMP LIFE」、「THE ARTS」といった7つのカテゴリに分けられており、カテゴリのタブを押すと、その内容が一目でわかる動画が自動的に再生されるようになっています。
このメディアは難民自身が発信することによって、DADAABの住人のリアルをありのままに伝えています。それだけに、見る人に強いインパクトを残す動画ばかり。ぜひ一度ご覧になって欲しいメディアです。
7. GUSTAVE CAFE
フランスのカフェ「GUSTAVE CAFÉ」の公式サイト。コンテンツごとに動画が埋め込まれていて、店内の様子はもちろん、美味しそうな料理が映っている映像や、ドリンクを注ぐ様子の映像などを見ることができます。コンテンツは白をベースにシンプルなデザインで載っており、カフェのセンスの良さが伺える作りとなっています。
カフェの雰囲気を動画によってうまく伝えている事例で、これは実際にWebデザインを作る際の参考になるはず。
8. Waaac
海外のWebデザイン会社のコーポレートサイト。サイトを開いたときにフルサイズで再生される映像では会社の様子や仕事をしている社員などが映っていて、会社の雰囲気がわかるようになっています。
トップページにフルサイズで動画を埋め込むデザインが流行っていますが、コーポレートサイトであれば見習いたい動画の使い方ではないでしょうか。ワンカラムでパララックスデザインとなっているので、スクロールすると滑らかにコンテンツが流れていきます。
9. 株式会社ホムンクルス
デジタルコンテンツの制作を手掛ける、株式会社ホムンクルスのコーポレートサイト。様々なコンテンツを手掛けてきた同社のスキルを、存分に発揮したサイトとなっています。まず、サイトを開くと社員の方が3Dグラフィックで表現されています。そして、携わったプロジェクト一覧でもアニメーションを用いていて、クリエイティブな工夫が凝らされています。
デジタルコンテンツを制作する仕事に携わる会社であれば、Webサイト自体が「どんなデザインを手がけているのか」ということを依頼者に伝えるためのPRの場です。同社のように、クライアントワークで携わる業務と同じように凝ったサイト作りは、いまや必須といえるでしょう。
10. HABIB FADEL
トップに出てくる油絵風の絵の中に浮かぶ、「HABIB FADEL」という文字がインパクトのある、アーティストHABIB FADELさんの公式サイト。アートワークやバイオグラフィなどのメニュー間の遷移もスムーズにでき、さらに、アーティストの核となる作品を種類別に検索して見ることができます。アーティストの個人サイトを考えるうえで、とても参考になるはず。
11. Mint Design Company
Webデザイン会社のMint Design Companyの公式サイト。サイトを開くと、トップページ部分に手描きのイラストが描かれるアニメーションがまず目に飛び込んできます。しかもスクロールすると、手描きイラストがアニメーションで動くんです。
シンプルで温かみがありながらも、これだけのハイセンスなデザインのコーポレートサイトを作っている会社なら、Webデザインを依頼先を探しているクライアントもすぐに応募したくなりそうです。
12. DreamTeam Katarzyna Konkowska
ステージデザインを行うKatarzyna Konkowskaさんの公式サイト。サイトを開くと、3Dのグラフィックがぬるぬると動くアニメーションが再生されます。実際に手がけているステージセットのデザインのように、豪華なWebサイトが魅力的ですね。
ステージデザインはWebだけではなかなか分かりづらいものですが、スムーズなページ遷移と画像遷移で、動的に表現することで、仕事の依頼を考えている人の興味を惹くサイトとなっています。
13. RALLY
アメリカのソルトレイクにあるWebデザイン会社、RALLYのコーポレートサイトです。トップページ部分では、リボン状のものが漂っている、ゲームのメニュー画面のような印象のデザイン。そこからスクロールすると、リボンが次のページの上部にスムーズに組み込まれて、そのままページのデザインへと変わります。この遷移がスムーズで、見ていて驚きがあります。
さらに、このページは左右にもドラックで移動することができ、プロダクトを見ることができるようになっています。Webデザイン会社ならではのクリエイティブを実感できるWebサイトですね。
14. DESIGN STUDIO L
長野にあるWebデザイン会社、有限会社デザインスタジオ・エルのコーポレートサイト。トップページ部分には、いくつものアニメーションがスピーディーに描かれていて、とてもユニークです。
Webデザインを受注する仕事に携わる会社だと、コーポレートサイト自体が会社のクリエイティブをアピールする重要な場です。このように自然な形で会社のクリエイティブを見ることができる、効果的なPRができているWebサイトはお手本にしたいですね。
15. 万国學生藝術展覧祭
2016年8月にデザインフェスタが主催する、学生のみが出展可能の万国學生藝術展覧祭の公式Webサイト。学生限定のデザイン展示会ということで、フレッシュな印象。Webデザインとしては、フル画面の動画がトップページに組み込まれている、流行の作りとなっています。
こういった動画が自動で再生されるタイプのデザインは、サイトを開いた瞬間にコンセプトやメッセージを視覚的に伝えることができるので、コーポレートサイトやイベントサイトなどにぴったりです。
2016年のトレンド、動画・アニメーションを使ったWebデザインを作ろう！
コーポレートサイトからプロモーションサイトまで、2016年もさらに広まっていくことが期待される動画やアニメーションを使ったWebデザイン。今回、紹介してきたWebサイトは、どれも動画やアニメーションの取り入れ方が魅力的なデザインばかりです。
Web制作担当者やWebサイトを作ろうと考えている方は、いち早く動画やアニメーションをWebデザインに取り入れて、他社と差が付くWebサイトに挑戦してみましょう！
WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします
フライング・ハイ・ワークスの紹介
フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・システム開発会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。
実績
デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。
また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。
500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください！
東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします
お問い合わせはこちら