Web担当者なら押さえておきたい！2016年主流のWebデザイン5選

Web業界において”トレンドが移り変わるタイミングは、突如として訪れます。
その一例がスマートフォンの普及です。

これまでのWebデザインといえばPCデバイスに合わせて制作することが主でしたが、次第にスマホ最適化が叫ばれ、その流れで一気にトレンドとなったのが「レスポンシブデザイン」でした。
もちろん、新しいトレンドが起こるタイミングが突然訪れるというのは今後も変わりません。
常に新しいトレンドを把握し、対応できる状態になっているべきです。

今回は、2016年に広まったWebデザインをピックアップしました。
新しいデザイン手法の出現には、ターニングポイントが存在するものです。
ぜひ、今後のデザイン制作にお役立てください。

2016年にWebデザインで押さえておきたいトレンド

1.パララックスデザイン

パララックスの教科書のようなサイトです。気持ち良くスクロールを誘導してくれます。
http://tokyocatspecialists.jp/

画面の多層化に加えてスクロールエフェクトが施されています。
http://enod.fr/

パララックスとは直訳すると「視差」という意味です。
Webデザインでは視差効果という意味で使われることもあります。
画面スクロールで下に行く際に、複数のレイヤーが違う速度でスクロールし、奥行きがある視覚体験を得られる表現です。
現在では画面スクロールに伴ってアイコンが回転するなどといったスクロールエフェクトも含めて括られることが多いようです。

パララックスは3年以上前から存在していますが、当時は不必要にパララックスが取り入れられていました。
スクロールが重くなったり、低解像度のディスプレイだと閲覧者がページのどこにいるのか分からなくなったりと、過剰にも思える使い方が散見されました。

それから現在に至るまでに、さりげない装飾として使われる傾向へと変わりつつあります。
パララックス特有のページをめくるような動きは、ユーザーを自然な形で誘導するデザインとして効果は高いです。

2.フラットデザイン

ディスプレイサイズに応じてサイズが変化するレスポンシブデザインによく馴染みます。
http://www.bloomingville.com/

フラットデザインについて議論するときに、避けて通れない「スキューモーフィズム」という概念があります。

ボタンにグラデーションやシャドウをかけて「ボタンである」ことを視覚的にわかりやすく表現するデザイン手法をスキューモーフィズムといいます。長方形の枠線に括るだけでもボタンとして機能しますが、立体感を持たせるなどのデザインを施すことにより本物のボタンを連想させる手法がスキューモーフィズムです。

フラットデザインとは長方形のグリッドに沿って、立体感を押さえた平面的なオブジェクトを配置したウェブUIデザインです。
Web2.0の時代に主流であったパステルカラーよりは原色的な配色がなされる傾向があります。Windows8でのフラットデザイン採用によりその流行は加速したと言われています。

そして、フラットデザインは、レスポンシブデザインと非常に相性が良く、マルチデバイスで柔軟に対応できます。そういった背景から「ハードウェア側の要求」に答えられるデザインとしてフラットデザインが定着しました。

3.マテリアルデザイン

Googleの公式マテリアルデザイン・ガイドライン。
https://material.google.com

Discover the expanded Material Design motion guidelines - Google I/O 2016
https://youtu.be/6p3i6H2oGa0

流行というのは、自然発生的・あるいは人為的な仕掛けと淘汰を繰り返していますが、ここでいうマテリアルデザインというのは、2014年にGoogleが発表し、推奨する「デザインのガイドライン」を指しています。
つまり、デザイン手法というよりは、物理的な説明までなされた”人間にやさしくフィットする思想（とその提案）”のようなものです。

平面的なx-y軸にz軸を持たせることを明確に定義し、UI（ユーザーがコンピュータと接する面）にマテリアル（物質）と質量の概念を織り込んでいます。
マルチデバイスにおいて人間への優しさを追求し、結果としてフラットデザインを押し進めたような形態で、Googleによるマテリアルデザインのモーションガイドラインであり、物理法則などを参照して人間にとって”自然な”デザイン・動きを追求しています。

4.インタラクティブでリッチな表現

近未来を想像させる重厚な動きとサウンドです。
https://www.sirinlabs.com/

マウスポインタの動きに反応してアーティスティックな色彩を放ちます。
http://www.kazarahama.jp/

インタラクティブ（双方向的）でリッチな表現が、jQuery、HTML5、CSS3で可能になりました。まるでゲーム機を見ているような重厚で、動的なビジュアルとマウスアクションが魅力的です。このような表現は、以前はFlashの独壇場だったのですが、データサイズの重さとiOS非対応によってFlashは衰退していきました。

ただ、インタラクティブなアクションを採用する際、読み込みが遅くなってしまうというデメリットも存在します。そのため、現時点ではスマートフォン用としては最適化できているとはいえず、PCサイトでそのような動的な要素を取り入れる場合は、PCサイトとは別でスマートフォン専用のサイトを制作するケースが珍しくありません。

5.動画の埋め込み

バックグラウンドに動画を敷いて、引きつけの強いサイトになっています。
http://bra-navi.com

琵琶湖の観光情報を、動画を使って積極的に紹介しています。
http://www.biwako-visitors.jp/niji-emo/

ブラウザのバックグラウンドに動画を敷くことがHTML5のVIDEOタグやjQueryで簡単にできるようになり、事実、動画を埋め込んだWebサイトもよく見かけるようになりました。
関連性が高ければGoogle検索で動画もヒットするようになり、Webサイトにおける動画の重要度は今後ますます高まると考えられます。