2015〜2016年のWebデザイントレンドまとめ(前編)

トミー


2015〜2016年のWebデザイントレンドまとめ(前編)

こんにちは、デザイナーのトミーです。
技術の進歩とともに表現が変わるWebデザイン。トレンドの移り変わりも早くなってきましたね。


そこで、今回は2016年のWebデザイントレンドを探ってみようと思います。なぜ流行ったのかを考えることで、新しい表現にも挑戦していきたいところ。

後編はデザイナー藤田さんがまとめてくれますよ。それでは前編・後編でサクッと2016年のトレンドを振り返ってみましょ。

2016年のWebデザイントレンド(前編)

1.高解像度

retina

参考サイト:pixelmator

HD,svg,Retina対応など、高解像度モニターへの対応も増えてきました。通信速度の向上やベクターデータのブラウザ対応など技術の進歩に合わせ、「できるだけ綺麗に表示したい」といったところでしょうか。Macのretinaモニターなどターゲットに合わせて必須になる項目です。

2.ドラッグを用いたUI

drag

参考サイト:masahiromaruyama.com

ドラッグを用いたUIも増えてきました。スマホでいうところのスワイプは、PCサイトでいうとドラッグといったアクションになります。マウスが手の延長線上の感覚で操作できますね。クリックより選択できる範囲が広いのもGOOD!です。

3.アニメーション

google-brand

スクロールアニメーション・ローディングアニメーション・ホバーアニメーション・ブランドアニメーションなど、アニメーションが持つ役割も多岐にわたるようになりました。パララックスアニメーションからスクロールアニメーションにトレンドは移り変わってきていますね。もう何回アニメーションって書いてますかね……。

4.ミニマルデザイン

minimal

参考サイト:squarespace

フラットデザイン以降〜Webサイトにおけるミニマル化が進んでいます。レスポンシブデザインが主流になってきていることやcssやjsなどコードでできる表現が増えてきたことも要因ではないでしょうか。「デコレーションとミニマルのトレンドは繰り返し」と言われてきましたが、Webサイトにおいてはシンプル化は今後も進みそうですね。もちろんデザインするものによりけりですので、すべてシンプル化が正しいわけではないです。

5.ダイナミックなタイポグラフィー

typo

参考サイト:adidas

ミニマルデザインと相性がいい、ダイナミックなタイポを用いたサイトも増えてきました。ウェイトが極端に太い、細いが多いのもミニマルデザインとの相性ではないでしょうか。インタラクションを多く含むサイトでは、ウェイトが細いのがセオリーのようです。

6.ダブルトーンとオーバーレイ

duotone

参考サイト:spotify ※現在このページは表示できません。

刷物でCMYKの4色で構成されているのに対して、Duotone(ダブルトーン画像)は2色で構成することを指します。明暗が印象的になるのでこれもミニマルデザインと相性の良い配色です。ダブルトーン画像では補色の組み合わせがセオリーのようですね。オーバーレイの効果と合わせて強い印象にすることが多く、日本だと好みが分かれるのかも。

7.モバイルフレンドリー

mobile

参考サイト:Roland

Googleがレスポンシブを推奨しているので、レスポンシブデザイン増えてきました。SEOやワンソースなので開発面でも利点はあります。デザインでどこがいいかと言うと、いろんな種類のモニタサイズに対応できるのがいいですね。もちろんデザインするものによりけりですので、すべてレスポンシブが正しいわけではないです。

いかがでしたでしょうか。まとめてみると、トレンドのデザインにも理由がありました。トレンドをキャッチアップしてサイト制作したいですね。それでは、後編は藤田さんにバトンタッチ! 前編・後編でサクッと2016年のトレンドを振り返ってみましょーーー。

トミー
この記事を書いた人
トミー

デザイナー

おすすめ記事

Recommended by