こんにちは、デザイナーのトミーです。 【90年代のWebサイトを振り返る】昔と今のデザイントレンド比較まとめ
技術の進歩とともに表現が変わるWebデザイン。トレンドの移り変わりも早くなってきましたね。
トミー
そこで、今回は2016年のWebデザイントレンドを探ってみようと思います。なぜ流行ったのかを考えることで、新しい表現にも挑戦していきたいところ。
後編はデザイナー藤田さんがまとめてくれますよ。それでは前編・後編でサクッと2016年のトレンドを振り返ってみましょ。
2016年のWebデザイントレンド（前編）
1.高解像度
参考サイト：pixelmator
HD,svg,Retina対応など、高解像度モニターへの対応も増えてきました。通信速度の向上やベクターデータのブラウザ対応など技術の進歩に合わせ、「できるだけ綺麗に表示したい」といったところでしょうか。Macのretinaモニターなどターゲットに合わせて必須になる項目です。
2.ドラッグを用いたUI
参考サイト：masahiromaruyama.com
ドラッグを用いたUIも増えてきました。スマホでいうところのスワイプは、PCサイトでいうとドラッグといったアクションになります。マウスが手の延長線上の感覚で操作できますね。クリックより選択できる範囲が広いのもGOOD!です。
3.アニメーション
スクロールアニメーション・ローディングアニメーション・ホバーアニメーション・ブランドアニメーションなど、アニメーションが持つ役割も多岐にわたるようになりました。パララックスアニメーションからスクロールアニメーションにトレンドは移り変わってきていますね。もう何回アニメーションって書いてますかね……。
4.ミニマルデザイン
参考サイト：squarespace
フラットデザイン以降〜Webサイトにおけるミニマル化が進んでいます。レスポンシブデザインが主流になってきていることやcssやjsなどコードでできる表現が増えてきたことも要因ではないでしょうか。「デコレーションとミニマルのトレンドは繰り返し」と言われてきましたが、Webサイトにおいてはシンプル化は今後も進みそうですね。もちろんデザインするものによりけりですので、すべてシンプル化が正しいわけではないです。
5.ダイナミックなタイポグラフィー
参考サイト：adidas
ミニマルデザインと相性がいい、ダイナミックなタイポを用いたサイトも増えてきました。ウェイトが極端に太い、細いが多いのもミニマルデザインとの相性ではないでしょうか。インタラクションを多く含むサイトでは、ウェイトが細いのがセオリーのようです。
6.ダブルトーンとオーバーレイ
参考サイト：spotify ※現在このページは表示できません。
刷物でCMYKの4色で構成されているのに対して、Duotone（ダブルトーン画像）は2色で構成することを指します。明暗が印象的になるのでこれもミニマルデザインと相性の良い配色です。ダブルトーン画像では補色の組み合わせがセオリーのようですね。オーバーレイの効果と合わせて強い印象にすることが多く、日本だと好みが分かれるのかも。
7.モバイルフレンドリー
参考サイト：Roland
Googleがレスポンシブを推奨しているので、レスポンシブデザイン増えてきました。SEOやワンソースなので開発面でも利点はあります。デザインでどこがいいかと言うと、いろんな種類のモニタサイズに対応できるのがいいですね。もちろんデザインするものによりけりですので、すべてレスポンシブが正しいわけではないです。
いかがでしたでしょうか。まとめてみると、トレンドのデザインにも理由がありました。トレンドをキャッチアップしてサイト制作したいですね。それでは、後編は藤田さんにバトンタッチ！ 前編・後編でサクッと2016年のトレンドを振り返ってみましょーーー。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
