近年、WEBサイトのデザインは大きく様変わりしました。2000年初頭にはテキストとわずかな画像だけで再現していましたが、今では動画コンテンツが使われているケースも珍しくありません。2017年のWEBデザインはどのようなトレンドがあり、

 

今後はどのような展開になっていくのでしょうか。

 

ここでは、近年のWEBデザインのトレンド、そして動画がWEBサイトの中でどのように使われるべきかをご紹介します。

 

■WEBデザインのトレンドはフラットデザインの一歩先
ここ数年、WEBデザインのトレンドはフラットデザインが主流でした。しかし、最近ではフラットデザインから派生した新たなデザインが誕生しています。まずはフラットデザインのおさらいと、新たに人気を集めているマテリアルデザインについて見てみましょう。

 

【フラットデザイン】

フラットデザインとは、あえて立体感や質感を出さないデザインのことです。スマートフォンの流行を受け、インターネットで立体感のあるサイトが負担になるケースも増えてきました。そこで、スマートな印象のあるフラットデザインが流行したと言われています。

 

【マテリアルデザイン】

マテリアルデザインとは、物理法則に基づいた操作ができるデザインです。Googleが2016年に発表し、同社のほとんどのサービスに取り入れられています。一般企業でも採用するケースが増えてきました。マテリアルデザインはすべてのデバイスで通用するフレームワークを想定しています。メールの送信フォームであれば手紙のようなデザインだったり、日付が入っているならカレンダーのようなデザインだったりと直感的な操作ができることから、フラットデザインに代わるデザインになるかもしれません。

 

 

■注目を集めるWEBデザイン手法
昨今のWEBデザインは、フラットデザインとマテリアルデザインが席巻していることがわかりました。具体的に、デザインの現場ではどのような手法が取り入れられているのでしょうか。

【セミフラットデザイン】
フラットデザインにわずかな影を加え、半立体的なデザインにしたのがセミフラットデザインです。フラットデザインのよさを生かしながら、WEB上に奥行きや複雑さを加えています。

 

【3Dデザイン】
VR/ARの成長を見てわかるように3D分野も着実に進化を遂げました。WEB上に3Dを取り入れたデザインは、今後数年のうちにさらに流行するのではないかという意見も見受けられます。

 

【アニメーション】
GIF、SVG、WebGL、CSS、さらにはビデオ動画などを駆使し、WEBデザインにアニメーションを取り入れるケースが増えてきました。2016年の一大ムーブメントになりましたが、視覚的なインパクトはやはり強いです。

 

【スクロールの変化】
複数のレイヤーを重ね、スクロール時に一番上のレイヤーだけが動くという技法もブームです。パララックスと呼ばれる手法ですが、ファッション分野で使われるケースも見受けられます。弊社、株式会社インディゴのホームページもパララックスデザインで構築されています。

 

【鮮やかな配色】
目を引くような鮮やかな配色も近年のトレンドです。フラットデザインとの相性がよく、大胆な色遣いをするWEBサイトも増えました。

 

 

 

■WEBサイトへの動画の使い方
WEBデザインのギミックに動画を導入するケースも増えてきました。主なパターンはメインイメージ、メインコンテンツ、背景への使用です。それぞれが与える効果を見てみましょう。

【メインイメージ】
フルスクリーンで動画を流す手法です。WEBサイトの全体を動画にすることで、商品・サービスをダイナミックに訴求できます。時には映像だけでなく音声も使うことがあり、文章では伝わらない臨場感を表現できる点がメリットです。弊社、株式会社インディゴのホームページでもTOPページにフルスクリーンで動画を流しています。

 

【メインコンテンツ】
動画中にリンクを仕掛ける手法です。商品カタログのような楽しみ方ができるため、読者にワクワク感を提供できます。動画中にサービス概要や商品の機能紹介を盛り込むことで、その場で説明を受けたり体験したりしているような感覚が得られるのもポイントです。

 

【背景動画】
メインコンテンツはあくまでロゴや文章で、その背景に動画を流す手法です。メインコンテンツを読んでいるユーザーに対し、イメージを喚起させる効果が期待できます。サブコンテンツなので、データ容量を軽くするために画質を落としても違和感を与えません。ユーザビリティの高い手法と言えます。

 

 

 

■WEBサイトへの動画導入の是非
動画をWEBサイトに取り入れる方法をご説明しました。実際にWEBサイトへ取り入れるメリットとデメリットを見てみましょう。

【WEBサイトに動画を使用するメリット】
WEBサイトに動画を使用するケースが増えています。主なメリットはマルチデバイスへの対応、製品イメージの伝達、コンテンツへの付加価値提供です。

・多様化するデバイスに対応
メインコンテンツに据える場合の効果です。今のようなマルチデバイス時代では、シンプルな画面設計のWEBデザインが欠かせません。最小限のスペースで訴求するために、動画は欠かせないコンテンツとなりました。動画コンテンツによって短時間で多くの情報を正確に伝えることができます。

・製品の使用イメージを伝える
背景が動画のWEBサイトではイメージをシンプルに伝えることができます。ITサービスの利用方法、アパレルショップの着用イメージなど、動画で訴求できる情報は多いです。WEBサイトの背景でアピールすることで邪魔にならず、かつ直感的に製品の使用イメージを発信できます。

・コンテンツへの付加価値提供
メインコンテンツにするほどでない情報を伝えるとき、文章ではユーザーへの負担が重すぎることがあります。動画を背景に据えてサブコンテンツにすれば、ユーザーに対してイメージを伝える効果は十分です。

 

 

【WEBサイトに動画を使用するときの注意点】
WEBサイトへの動画使用は万能ではありません。以下のようなサイトでは効果が半減または逆効果になってしまいます。注意すべきポイントを見てみましょう。

・情報量が多いWEBサイトには使わない
背景用の動画を使用する場合、元々コンテンツが多いWEBサイトでは情報量が多くなってしまいます。余白が少ないWEBサイトに動画を取り入れる場合、情報量を削るか、余白を使ってうまくデザインすることが大切です。

・データ容量を重くしない
高速インターネット通信が可能な時代ですが、動画のページ読み込みには時間がかかります。高画質であればあるほど負荷がかかるため、読者のページ離脱が増えてしまうかもしれません。1秒でページが開くWEBサイトに対し、3秒で53%、7秒で113%ものユーザーが直帰してしまうそうです。

・音声やBGMは流さない
普通の動画は音声やBGMが流れます。しかし、WEBサイトに動画を使う場合は別です。急に音声が流れたとき、驚いて離脱するユーザーも少なくありません。あくまで動画はサブコンテンツであると考え、音声やBGMで主張しすぎないようにしましょう。

・静止画を準備しよう
動画の表示はWEB上での最新技術です。しかし、デバイスによっては動画再生に追いついていないことも珍しくありません。また、表示に時間がかかるリスクも考慮し、静止画も用意しておくとよいでしょう。

WEBサイトのデザインはまだまだフラットデザインが主流です。しかし、マテリアルデザインの登場によって、近い将来はもっと直感的なデザインが進化していくかもしれません。さまざまな手法でユーザーへ訴求する試みが行われていますが、特に動画は高い訴求力が期待できます。メインコンテンツとして全面的に使うもよし、背景動画としてイメージを喚起させるもよし、さまざまな使い方ができるのがメリットです。WEBデザインに使う動画作成が必要なときは、ぜひ当社、株式会社インディゴまでお問い合わせください。