こんなことしてる場合じゃないっ|デジハリ
こんなことしてる場合じゃないっ|デジハリ
2018.04.11

【2018年流行りそう!】気になるWebデザイントレンドまとめ

藤田

こんにちは、デザイナーの藤田です!
毎回、同じことを言っておりますが、技術の進化と共にWebサイトの表現も目まぐるしく変わってきておりますね。
油断をすると次々と見たことのない表現が増えていく今日この頃なので、自身の備忘録も兼ねてサイト制作に取り入れたいWebデザインのトレンドをまとめてみました! よろしければ皆様もご覧ください。

2018年気になるWebデザイントレンド

画像を揺らす

Mustafa Çelik

デザインにひと味足す方法として、最近よく見かけるのがシェーダーで画像を揺らす手法。
アイキャッチに対して誘目性が高まりデザインに奥行き感が出るのが良いですね!
http://www.themustafacelik.com/
http://culture.basicagency.com/

パララックス

ENTER THE WORLD EXPOSITION

手前のものは早く動き奥のものはゆっくりと動く視差効果をスクロールアニメーションに取り入れるこの技術は4〜5年前に流行ったのですが、勝手にリバイバルするんじゃないのかなーって思ってます。
http://springsummer.gucci.com/
https://www.adidas.co.uk/speedfactory

テキストエリアの丁寧なアニメーション

BLUES DESIGN    愛知県のプロダクトデザイン事務所

テキストエリアのアニメーションといえばラインが出現しそのラインが抜けた時にテキストが出現するパターンと、下から上にアニメーションしながらテキストを出現させる2パターンが王道でしたが今年は回転や斜めのアニメーションを取り入れたサイトを多く見かけるようになってきました。
https://www.denso.com/jp/ja/innovation/technology/maas/
https://www.blues-d.co.jp/#/about/

モバイルビューを意識したサムネイルのアスペクト比

Open Wear  Sustainable Outerwear  Made affordable

今まではWebサイトのサムネイルといえば横長画像を使用するのが主流でしたが、スマホで見ると画像の表示が小さくなってしまうので、縦長のサムネイルを使用するサイトを昨年頃から少しずつ見るようになった気がします。
https://www.open-wear.com/
https://supercrowds.co/projects

カーソルのオリジナルデザイン

Twotwentytwo   Creative studio

こちらの手法も昨年頃から多く見かけるようになってきたと思います。
この辺のUIを変更すると「ユーザービリティが悪くなる」とか言われそうですけど、見た目のプライオリティーが高いような案件では取り入れていきたいテクニックのひとつですね。
http://twotwentytwo.se/
http://www.ronin161.com/

まとめ

どれもおしゃれなサイトばかりでしたね!
それではまた!

キャリアアップ
「Studio上野でWebクリエイターを目指す!」