ご依頼・ご相談はこちら
WEB制作

2020年のWEBデザインはこれに注目!最新トレンド10選を紹介

WEBデザインには毎年、人気のデザインがあります。トレンドにのる必要はありませんが、トレンドを知っておくことで、興味を引きやすかったり、デザイナーにとってはさまざまな手法の勉強になったりデザインの幅が広がったりすることもあるでしょう。

そこで本記事では、2020年のトレンドのWEBデザインを紹介します。WEB制作の際に、最新のトレンドを参考にしてください。

ひと昔前を感じさせるレトロモダン

1980年代から1990年代を彷彿とさせるデザインで、くすんだ色使いやわざとノイズを残した加工に現代のデジタルな要素がミックスされています。デザイナーのスキルやセンスが必要とされるサイトデザインです。

レトロモダンを用いたサイトとして、今昔仕事図鑑やOn the Gridなどが挙げられます。今昔仕事図鑑は、ひと昔前の時代を感じさせる絵やストーリーが用いられ、多くの人を引きつける個性的なデザインです。

他方、On the Gridは、背景や枠線、配色などにレトロ感を残しつつ、細部のイラストは現代風のスタイリッシュなデザインでまとめられています。

参考:今昔仕事図https://tenshoku-web.jp/retro-career/ 

参考:On the Grid https://onthegrid.city/

巨大フォントのタイポグラフィ

海外に多いデザインで、巨大なフォントサイズのテキストがサイト一面に施されています。メッセージを瞬時に伝えることができ、アクセントとしてのテキストが特徴です。

このデザインを用いたサイトとして、Florian MonfriniとRedscoutの2つが挙げられるでしょう。Florian Monfriniは、タイトルなどのテキストが大きく施され、メッセージをわかりやすく伝えており、完成度の高い仕上がりになっています。

Redscoutは、個性的なフォントを用いて見出しを表示することで、特別な要素や装飾を加えなくても、それだけでデザインとして仕上がっているのが特徴です。

参考:Florian Monfrini https://florianmonfrini.com/

参考:Redscout https://www.redscout.com/

手描き風イラストとテキストがアクセントに

これまでの主なデザインは、シンプルであったり機械的であったり、あまり温かみの感じられないものが主流でしたが、2020年は人が描いたようなイラストとテキストが特徴のデザインが増えてくるでしょう。

このような手法を用いたサイトとしては、BasecampとForward Youの2つが挙げられます。Basecampは、重要な箇所に手書き風のテキストが施されており、シンプルなデザインでありながらも、人の温かみを感じられる仕上がりになっているのがわかるのではないでしょうか。

Forward Youのほうは、ファーストビューに手書きのメッセージが書かれており、日本でもよく見られるデザインです。

参考:Basecamp https://basecamp.com/

参考:Forward You https://www.forwardyou.com/en/

3Dグラフィックとアニメーションの融合

3D制作のためのツールやサービスが多く誕生したことにより、3Dグラフィックを用いたデザインが増えています。平面のWEBサイトに3Dの要素を加えることで、より魅力的なデザインに仕上げることが可能です。

この手法を用いたデザインとしては、Bruno Simonと#24HourAceが挙げられるでしょう。Bruno Simonは、3Dグラフィックとアニメーション、モーションデザインがミックスされ、ユーザーがよりサイトに引き込まれるようなデザインです。

#24HourAceは、サイトの中央にスニーカーが表示され、ほかのスニーカーを選ぶと中央のスニーカーが変化するモーションデザインが楽しめます。

参考:Bruno Simon https://bruno-simon.com/

参考:#24HourAce http://24hourace.gucci.com/

鮮やかな配色とグラデーションのミックス

2020年は、鮮やかな配色とグラデーションのミックスも多く見られるようになっています。ファッション性やアート性の高いサイトにマッチするデザインです。

このデザインが取り入れられたサイトとしては、#このラジオがヤバいとdanilodemarcoの2つが挙げられるでしょう。#このラジオがヤバいは、鮮やかな黄色がベースのポップな仕上がりになっており、思わずスクロールしてしまうような興味をわかせるデザインです。

danilodemarcoは、緑をベースにした大胆で鮮やかな色とグラデーションが特徴的で、思い切った配色を用いることでユーザーの目を引きつけています。

参考:#このラジオがヤバい https://konoradiogayabai.com/

参考:danilodemarco https://www.danilodemarco.com/

流体シェイプと幾何学図形の組み合わせ

流体シェイプと幾何学図形を組み合わせたデザインは、トレンドというより定番デザインになりつつあります。さらに動画も追加することで、よりデザイン性が向上するでしょう。

この手法を取り入れているサイトとして、KanarysとAleks Faureが挙げられます。Kanarysは、丸や四角などの図形とアニメーションがミックスされ、シンプルながらも幾何学図形がアクセントとなっているのが特徴です。Aleks Faureは、背景の画像がシェイプでマスクされていて、アニメーションによって枠組が動くエフェクトが施されています。

参考:Kanarys https://www.kanarys.com/

参考:Aleks Faure https://aleksfaure.com/case/metaflow

立体的なアイソメトリックイラスト

斜め上からの視点で立体的に作られており、人の温かみを感じさせるようなものが多く、年齢を問わず多くの人に受け入れられるデザインです。アニメーションと組み合わせたサイトも増えています。

アイソメトリックイラストが取り入れているサイトとしては、株式会社メルペイとつながる研究所が挙げられるでしょう。どちらのサイトも柔らかいテイストで、さらに動きが加わり親近感の湧くデザインに仕上がっています。

参考:株式会社メルペイ https://jp.merpay.com/

参考:つながる科学研究所 https://tsunaken.co.jp/

スクロールに合わせて変化するデザイン

昨今、スクロールで下に読み進めるようなWEBサイトが人気です。コンテンツが追加されたり変化したりしながら内容が展開していくデザインにより、ユーザーは飽きることなくコンテンツを読み進めることができます。

このデザインが取り入れられているサイトとして、Cellular Agriculture SocietyとIAD Labが挙げられるでしょう。どちらもスクロールに合わせてフォーカスされるようになっており、それぞれのコンテンツがひとつずつ引き立つデザインとなっています。

参考:Cellular Agriculture Society https://www.cellag.org/?p=m2

参考:IAD Lab https://iad-lab.ch/

デザインが引き立つダークモード

2019年にios13の機能として、ダークモードが標準搭載されました。ダークモードは目に優しくバッテリー節約になるため、普段から利用している人も多いことでしょう。

ダークモードはデザインを際立たせる効果がありますが、ブランドイメージが変わることもあるため、取り入れるかどうかを慎重に決める必要があります。

WEBサイトでダークモードを取り入れているサイトとしては、ソニックジャムスタジオとZOOMMYが挙げられるでしょう。どちらも非常にスタイリッシュに仕上がっており、一つひとつのコンテンツが引き立ちます。

参考:ソニックジャムスタジオ https://sonicjam.studio/

参考:ZOOMMY https://zoommyapp.com/

グリッドを崩したデザイン

2019年は、グリッドをわざと崩したブロークングリッドやグリッドがないノングリッドデザインがトレンドでしたが、2020年も引き続きこのデザインが人気です。あえて一部を崩すことで、オリジナリティのあるデザインに仕上がります。

グリッドを崩したデザインとしては、Dada Dataと2nd STREET USAが挙げられるでしょう。どちらも画像とテキストが重なっていたりはみ出していたり、見る人の視線にとらわれない自由な動きが魅力的です。

参考:Dada Data http://www.dada-data.net/en/news

参考:2nd STREET USA https://2ndstreetusa.com/

まとめ

WEBデザインは、オリジナリティを追求するだけでなく、トレンドを取り入れたりOSの機能に合わせたりすることも重要です。技術的には、モバイルデバイスが巨大化したり、ダークモードが取り入れられたりと新しいものが生まれています。

デザインも3Dやアニメーションなど、動きのあるサイトが増えており、今後もこのようなサイトは増えていくことでしょう。