Webサイトに使われると、第一印象で大きな影響を与える「動画」。
動画には、
などといったメリットがあり、世界中のWebデザイナーが採用しています。
そこで今回は、動画を効果的に使っているWebサイトをまとめてみました。一括りに「動画を取り入れたWebデザイン」といっても、各サイトで様々な工夫がされていて奥深いですよ。
画像出典：無印良品
衣料品から家庭用品、食品など日常生活全般にわたる商品のブランド「無印良品」の、リラックスを目的とした商品の特集サイト。
人をダメにするほど心地良いということで評判の「体にフィットするソファ」やスマートフォンアプリ「MUJI to Relax」といった商品の画像や動画がページ内でふんだんに使われています。ソファを使っている様子の動画は、実物を手に取りたくなるような気持ちを与えてくれます。
画像出典：吉田カバン
「PORTER（ポーター）」や「LUGGAGE LABEL（ラゲッジレーベル）」といった鞄ブランドを展開する吉田カバン（株式会社吉田）のサイト。
鞄の製作の様子が、動画としてサイトの背景となっています。普段見ることはあまりない製作過程が最初から順に、コンパクトにまとめられており、つい最後まで見たくなります。同時に製作過程を公開することで、ブランドの安心感も高めているのではないでしょうか。
画像出典：Panasonic
総合家電メーカー「Panasonic」の商品紹介サイト。
家庭用家電からカメラ、自転車といった家庭で使う機器をはじめ、業務用機器や内部製品など非常に幅広い商品ラインナップを集めた動画がトップページに据えられています。さらには実際に使っている人の声や使い方の提案、ドキュメンタリーなども配信。確かなブランドイメージがそのまま表現されたかのようなWebデザインです。
画像出典：青空木材
鹿児島県で、建設資材の販売に携わる会社「青空木材」のコーポレートサイト。
木が"木材"となるまでのいくつかの過程をピックアップした動画をトップページで見ることができます。普段まず見ることはない場所の動画、専門家でなければ深くかかわることのない分野なので、見る人に興味を持たせたり知識欲を満たしたりといった影響を与えそうです。
画像出典：TF corporation
宮城県仙台市で飲食事業を展開する「TF corporation（株式会社ティー・エフコーポレーション）」のサイト。
特にリクルートのページでは料理を作る側から見た調理の様子、提供する側から見た店の様子を描いた動画が使われています。料理の魅力もさることながら、ここで働きたいと思わせる仕掛けが巧みです。
香港に拠点を構え、飲食事業を展開する「NATURAL FOOD & BEVERAGE」。
トップページの読み込み完了までの待機時間に動画を割り当てており、ユーザーに退屈な時間を与えないような工夫が見られます。サイトの雰囲気に合わせたモノクロの動画が特徴的です。
画像出典：the Q
海外の防水コンパクトカメラ「the Q」のサイト。
防水機能をはじめとしたカメラの特徴が、カメラに収めたくなるような風景とともに紹介されている動画があります。海外のサイトですが外国語をあまり使っていない作りなので、国や地域を問わずさまざまな人に商品の魅力を伝えることができますね。
画像出典：小笠原ベストマッチ
小笠原村観光局が発信する、小笠原観光をサポートするサイト。
冒頭の動画では、小笠原諸島の美しい自然が余すところなく紹介されています。スマートフォンではスクリーンセーバー風に画像が切り替わります。小笠原ならではのゆったりとした雰囲気を感じることができますね。
画像出典：清水へ参る道
京都府にある清水寺のプロモーション・サイト。
2017年の夏は、風鈴の音や蝉の声とともに、朝から晩までの寺の様子や人々が行き交う様子などが、静かな雰囲気で描かれている動画がトップページに登場しています。縦書きで書かれた文の美しさも京都を連想させ、品の良さを醸し出していますね。
画像出典：沖縄美ら海水族館
沖縄県の観光スポット「沖縄美ら海水族館」のサイト。
魚やイルカたちの泳ぐ動画が、トップページの背景となっています。美しい水槽の青、いきいきと泳ぐ色鮮やかな海の生き物たちに、黒を基調としたメニューの対比が鮮やか。同施設の魅力が活かされているWebデザインです。
画像出典：北海道エコ・動物自然専門学校
動物園の飼育員、水族館スタッフ、ペットトリマーなど動物に関わる仕事に就くための専門学校「北海道エコ・動物自然専門学校」のサイト。
動物たちとのさまざまな実習の様子が動画に収められています。この動画の視聴対象者は、動物に関わる仕事を希望しているティーンズとその保護者と考えられます。この学校でどのように学ぶのかを伝えるとともに、たくさんの動物たちの魅力が動画でわかりやすく表現されています。
画像出典：アース製薬 RECRUIT 2018
殺虫剤や入浴剤などが有名な製薬会社「アース製薬」の新卒採用サイト。
スペシャルムービーには若手社員が働く様子や商品の製造過程、会社のビジョンやモットーが収められています。求める人物像やコンセプトが若者向けに表現されており、TVCMでも見かける身近な商品とは裏腹に、スマートさが引き立ちます。
画像出典：AQUARING
愛知県名古屋市・東京都を中心に展開するWeb制作・コンサルティング会社・AQUARINGの企業サイト。
「いいモノづくり」と「社員がいつまでも働き続けられる企業」の両立というメッセージの通り、さまざまな技術を紹介しつつ、若手社員の様子もともに動画に収められています。
画像出典：ONE PIECE.com
週刊少年ジャンプでの連載が2017年で20周年を迎えた人気漫画「ONE PIECE」の、アニメーションやイベント、グッズなどの情報をまとめた総合ポータルサイト。
漫画やアニメーションを織り交ぜて20年あまりの歴史が詰め込まれた、連載20周年の記念ムービーがトップページにあります。連載当初からの読者や最近読みだした子どもまで、幅広い年齢層の人たちを惹きこむ動画です。
画像出典：DADAAB STORIES
世界の大規模な難民キャンプ「DADAAB」の現状を発信するWebサイト。1ページのなかに動画が複数埋め込まれており、DADAABの厳しい現状が無意識のうちに目に入ってきます。世界中の人に訴えかける、メッセージ性の高いWebデザインです。
＼一流デザイナーのスキルが身に付く／
以上15サイトの動画の特徴をご紹介しました。動画は読み込み時間が課題となり、技術的・デザイン上の工夫が必要ですが、その分文字ではできない大きなインパクトを与えることができます。
印象に残るサイトを目指しているのなら、さまざまな分野の動画のポイントを研究してみてはいかがでしょうか？
