今回は、2021年WEBデザインのトレンドを予想してみたい。昨年2020年は、ダークモード、グラデーション、3Dグラフィック、マイクロインタラクション、スクロールコンテンツなど、さまさまなテクニックや様式がトレンドとなった。
2021年はどのようなWEBデザインがトレンドとなるのだろう。
ここではそのトレンド予測とWEBデザインには欠かせない、2021年の流行色についてもあわせて紹介する。
2020年からスクロールされるスピードに合わせて、アニメーションするWEBサイトが増えてきている。アニメーションにはWEBサイトの魅せるかっこ良さもあるが、見る人を視覚的に引き込みたいときなどメリットがある。
パララックスとは「視差」という意味で、近くにあるものが遠くのものより速く動いて見えるような表現のことを指す。
パララックス・アニメーションは、ユーザーのスクロールに反応し、立体感、奥行き、フェードイン、フェードアウト、拡大、縮小、または回転など、様々なエフェクト演出が展開されるようになった。
メリットしては、ユーザーがスクロールすることで、ユーザー自身が操作しているような感覚になり、ユーザーに没入感を与え、コンテンツに興味を持つようになるところ。
デメリットは、アニメーションをつけるときは、基本的にJavaScript言語を使うので、内容によっては表示スピードが遅延し、ユーザー離脱の可能性もある。
また、パララックス・アニメーションはPCには良いが、モバイルではアニメーションの内容によっては混乱する場合もあるので、ユーザーテストを行ったうえで設置を試みるのが良いだろう。
WEBサイト:https://www.aalimentaria.com/es/about
2021年以降、5Gの普及で注目を集めることが予想されるのは、動画コンテンツである。
WEBデザインにおいてもこの動画コンテンツをトップページのヘッダーに配置したり、または、スクロールされる途中に詳細な解説動画が埋め込まれているWEBサイトが多くみられるようになった。
動画は言うまでもなく、画像より説得力がある。
ブランドイメージや世界観を伝えたり、お店の雰囲気や商品紹介、スタッフの人柄など、画像では伝えることができない多くの情報量を伝達することができる。
WEBサイト:https://www.metmuseum.org/
これまでのWEBデザインの主流だった、フラットデザインから、最近では立体的で質感のあるデザインが特徴の「ニューモーフィズム」という新しい表現を採用するWEBデザインが増えている。
語源はかつてのSkeumorphism(スキューモーフィズム)+New(新しい)で、新しいスキューモーフィズム表現ということらしい。
ニューモーフィズムはボタンやロゴなどに優しい立体感を持たせたいときは良いだろう。
サンプルにもあるように、アイコンなどのオブジェクトの影にドロップシャドウを用い、わずかな凹凸を作ることで、心地よい奥行き感を表現している。
また、オブジェクトに丸みを持たせているところも特徴的だ。
リアルな3D(立体)表現はニューモーフィズム同様、フラットデザインの呪縛から離れ、表現の多様性を生み出している。
3Dデザインは毎年進化し、精度の高い背景と3Dを組み合わせたものや、3Dキャラクターといったもの、さらにAR、VRにまで幅広く活用されている。
洗練された3Dイラストは見る人に感動を与え、サイトに没入できるという、動画などにはない違った現実感を表現できるだろう。
少しの現実感をユーザーに与えたい場合は、3Dアイコンから試してみるのはいかがだろう。
WEBサイト:https://go.pioneer.com/cornrevolution#
2020年は新型コロナの影響でPCやスマートフォンを利用する時間が増えることにより、目に負担のかからない配色のWEBサイトを良く見るようになった。
黒を基調としたダークモードも、目の負担が少ない、文字が読みやすい、気持ちを落ち着かせるなど効果がある。
そして、ダークモードから、このナチュラルな配色にトレンドが変わろうとしている。
目に優しい配色とは、健康的なグリーン、パステル系のブルーや淡いピンク、温かみのあるブラウンなど、自然でナチュラル、落ち着いた色合いが特徴である。
WEBデザイナーはユーザーに対して快適で、目に優しいデザインを意識し、このような配色を選ぶ傾向が高まっているのだろう。
WEBサイト:https://ceremonycoffee.com/
2020年12月、世界的な色見本帳ブランドであるPANTONEは、2021年のトレンドカラーを発表した。
トレンドカラーはイエローとグレーの2色である。
イエローは、「希望に満ちた元気」、グレーは「堅実で信頼」をイメージできる。
また、2色を組み合わせることで、日当たりの良い、親しやより深い思いやりの気持ちを表現した色物語にもなる。
イエローの色番号は、PANTONE 13-0647、sRGBは「245, 223, 77」である。
グレーの色番号は、PANTONE 17-5104、sRGBは「245, 223, 77」となっている。
また、 JAFCA(日本流行色協会)が発表した2021年の流行色は、「ゼロホワイト(Zero White)」である。カラーコードは「#FFFFFF」のはじまりの色、清潔白、希望のホワイトなどイメージされている。
2021年のWEBデザイントレンド予測をまとめると、より現実的なリアル感、ナチュラル志向とアニメーションテクノロジーの融合と言えるだろう。
WEBサイトは今や日常生活にはなくてはならない存在になっており、今後さらに、ユーザーの使いやすさ、負担軽減を追求したWEBデザインが求められるだろう。
参考