目次
BRIK GALLERYについて
デザインやコンテンツの参考になる国内最大規模のWebサイトリンク集・デザインギャラリーの BRIK GALLERY では、日々クリエイターの方々の参考になる作品を更新しています。
クリエイティビティを刺激し、デザインの参考になり、仕事に役に立つ、Webサイトなどを中心に紹介しています。BRIK GALLERYでは、カテゴリーやタグから検索し、気になった作品はお気に入り機能で保存可能な機能があります。
作品は、INDUSTRY (業種)、TYPE (Webサイトなどの種類)、COLOR (キーカラー)、DESIGN (デザイン表現の方法) などのカテゴリーで分類されています。ここから目的としているデザインを絞り込んで探すことが可能です。
本特集では、BRIK GALLERYに掲載されている作品の中から、特定のテーマで作品をピックアップしていきます。
動画が流れるWebサイトに求められることとは？🤔
動画は、文字や静止画よりも情報やイメージをわかりやすく伝え、見る人の記憶に残りやすいという効果があります。そのため、Webサイトに動画を挿入することで感覚的に商品やサービスの魅力を伝えることができます。本記事では、動画が流れるWebサイトを作る際にデザインやコンテンツなどの面で参考になる、優れたウェブサイト15選を紹介します。ぜひ参考にしてみてください。
ご紹介する作品は、以下の3つの基準を元に選出しました。
- ✅動画を取り入れることで世界観を作り出しているデザイン
- ✅動画の存在によって感覚が揺すぶられるデザイン
- ✅ターゲットに合わせたデザイン
参考になる動画を使ったWebサイトのご紹介🎨
DRO-ASMR
泥を使ったシャンプーのブランドDROAS。ASMR音声付きの動画は、ヘッドスパを実際に体験しているような気分にさせてくれます。背景全体に配置された動画の上にグラスモーフィズムの効果がかかっていて、浮遊感が表現されています。
FAS
発酵化学スキンケアブランドfasのブランドサイト。トップページに配置されたブランドの世界観が表現された動画は、速度があるため強いインパクトをもたらします。サイト全体として、動画が浮かずにうまくコンテンツとして馴染んでいる点にも注目です。
武蔵野美術大学電子音楽研究会
武蔵野美術大学電子音楽研究会のサイト。暗い室内で研究会のメンバーがDJプレイをしている動画は、インパクトがありクールな雰囲気を醸せるだけでなく、何をやっている団体なのか、一目でわかるという利点もあります。また全体のデザインが非常にシンプルなことから、動画の存在感を高めている点もポイントです。
Fa-So-La AKIHABARA
成田空港にあるお土産ショップFa-So-La AKIHABARA。サイバーパンク的な世界観のなかに、東京タワーや招き猫、浮世絵など日本のアイコンを取り入れたアニメーションが様々なバリエーションで流れています。ゲームの世界に入り込んだような没入感があり、見るものを惹きつけるでしょう。
Blue Ocean Trade
漁業関連のサービスを提供する会社のサイト。トップページには、水色の襞が揺れているアニメーションが配置されています。波を思わせるモーションは滑らかで目が釘付けになります。水産業界の象徴でもある海の美しさをアピールしたデザインです。
9m88
台湾出身のミュージシャン9m88のアルバムの特集サイト。各曲のトレイラームービーが画面全体に流れており、気になる動画をクリックすると、Youtube上でフルのミュージックビデオを視聴できる仕組みになっています。プロモーションとしてユニークなだけでなく、映像の世界観が絶え間なく変わっていくので、ずっと見ていたくなるようなWebサイトになっています。
THE PILLOW
オーダーメイド枕のブランドTHE PILLOW。トップページには、枕に頭をのせ気持ちよさそうに眠っている女性の動画が配置されています。ベージュ系のカラーや小さなフォントを採用することで、サイトの中での動画の存在感が大きくし、動画に集中しやすい導線が作られている点もポイントです。また大胆なタイポグラフィもトレンド感があり、垢抜けた印象を見るものに与えるでしょう。
LOEWE FOUNDATION CRAFT PRIZE
ファッションブランド、ロエベが運営するロエベ財団が開催したデジタル空間での展示サイト。サイトでは、現地の会場の映像が流れているだけでなく、アーティストの作品の映像が断片的に公開されています。シンプルなデザインですが、ピアノの音、水中の音、布が擦れるような音など、アーティストのページごとに異なる音楽が流れており、立体的に作品を感じることができます。
日本大学理工学部建築学科
日本大学理工学部建築学科のサイト。丸と線のアニメーションと校舎や学生を写した映像が滑らかにつながっており、「建築はつづく。未来がはじまる」のキャッチコピーが見事に体現されています。建築学科ということもあり、校舎を建築物的な眼差しで映している点が面白いです。
rise
オンラインで、フィットネスやヨガのクラスの動画をサブスクリプション方式で提供しているブランド。Youtube等で無料のフィットネス系動画が溢れかえっている中で、あえて有料の動画を提供する本サービスは、クリーンでヘルシーな美学を演出し、差別化を狙っています。トップページに配置された動画内の、インテリアやインストラクターの持つ雰囲気から独自の世界観を演出することに成功しています。
REMOME
スキンケアブランドREOME。トップページに配置されたブランドムービーには、モデルの肌の艶がエモーショナルに映し出されています。また、一部モノトーンのシーンがあり、懐かしさも込み上げてきます。動画を用いることで、見るものの感情を揺さぶることに成功した一例と言えるでしょう。
きょうの日本酒
一合瓶の日本酒専門店、きょうの日本酒。日本酒ということで、全体的に余白を活かした日本的なデザインとなっています。トップページの動画は同じく余白を生かした構図で、さらにモーション自体が微細なため、侘び寂び的な雰囲気も醸しています。
天ノ寂
松島に位置するホテル天ノ寂。背景全体に動画が挿入されていますが、カラーが暗めのトーンであるため、動画の上に書かれた字が読みやすくなっています。動画の速度がスローなため、ユーザーに上品なイメージを与えるだけでなく、ホテルでの快適でゆったりとした滞在を想像させるでしょう。
THE BUTTER CAKE
フランス産バターを使ったバターケーキブランド。商品の包装を魅せる動画や、スイーツの食感が想像できるような動画がフリーレイアウトで貼られています。通信販売のみであるため、動画によって消費者が商品のイメージをしやすくなっています。また、それぞれの動画のサイズが小さいため、乱雑な印象を与えていない点もポイントです。
まとめ
学校のWebサイトの制作時にデザインやコンテンツの面で参考になる、優れたWebサイト13選をピックアップし解説していきました。どのサイトも動画の効能や機能を十分に理解し、うまく利用していたかと思います。ぜひこれからの制作の参考にしてみてください。
