2020年流行するであろうwebデザインのトレンド

ここ最近はざっくり言ってしまえばフラットデザイン2.0、マテリアルデザインが主流になっていると思います。
視認性もよく操作もしやすいのが好まれる傾向になています。
そんな中でこれからあるいは、今も流行っているものもありますが2020年で流行するwebデザインを紹介したいと思います。
なるべくサイトも載せていこうと思いますが、ページが更新されて違うデザインになっていたり、サイトがなくなってしまっていたらごめんなさい。

・ダークモードに対応したデザイン

ios13からiphoneでもダークモードが搭載されました。
すでに対応しているサイトもありますがまだまだダークモードに対応していないサイトが多く見れれます。
目に優しいから、かっこいいからなどの理由で利用している人は多いと思いますのでこれからもっと増えてくるでしょう。
ただカラーが変わるのでブランドイメージとかの兼ね合いもあるのでなかなか難しい部分ではありますが…
スクリーンショット 2020-01-20 7.15.19.png
https://www.webcreatorbox.com/tech/dark-mode

・余白スペースを多く利用したデザイン

最近のwebサイトはフルスクリーンの画像を背景に設定しているページが多く存在しますが、
あえて画像をフルスクリーンサイズにせず、空いた余白をうまく利用することによってその画像や文字を引き立たせ、
伝えたいコンテンツをうまく伝えることができる作り方になっています。

スクリーンショット 2020-01-20 7.00.09.png
https://www.crazy.co.jp/

スクリーンショット 2020-01-20 6.58.33.png
https://www.rainbow.co.jp/

・3Dアニメーションを利用したデザイン

アニメーションを利用したサイトが増えてきましたが、
さらにこれからは3Dイラストをアニメーションさせる時代になってくるのではないかと思います。
PCのスペックも昔と比べて格段に上がりwebサイトでも表現できるようになってきたと思います。
もちろんそれでもパフォーマンスの向上も必ず必要にはなりますが…

スクリーンショット 2020-01-20 6.48.31.png
https://w-wired.com/ww/pc/

・イラストを多く使ったデザイン

イラストを使うことで硬いイメージの題材でも親しみのあるものにすることができるのと、とてもわかりやすく物事を伝えることができるのでデザインになります。

スクリーンショット 2020-01-20 6.50.32.png

https://payme.tokyo/

・スクロールに合わせてアニメーションが展開されるデザイン

google pixel4 や macbook pro のページが主なところかと思います。
次はどんなアニメーションが起こるんだろうとスクロールしたくなる感情を揺さぶられます。

スクリーンショット 2020-01-20 6.41.48.png
https://www.apple.com/jp/macbook-pro-16/

スクリーンショット 2020-01-20 6.42.19.png
https://store.google.com/jp/product/pixel_4

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account