必見:2022年に知っておきたい Web デザイントレンド10選


早いものでもう新たな年を迎える時期になりました。デザイン業界の潮流に興味のある方々は、そろそろ2022年に来そうなトレンドをチェックしておこう、と思う時期ではないでしょうか?

「2022年の新しい Web デザインのトレンドが切り開く勢いを止めることはできません」と、Wixのクリエイティブ・プロダクトマネージャーを務めるアディ・フリはコメントしています。今回の記事では彼女とともに、2022年にどのようなトレンドが現在のルールを塗り替えていくかについて掘り下げて紹介します。

今後来そうな流れとしては、3D デザインパーツやアニメーションの人気の高まり、クラシックなデザインの再来などが考えられます。しかし、このような流行を捉えながらも、今日の Web デザイントレンドはやはり「ブラウジング時の体験」にフォーカスした要素を同様に重視する傾向にあるといえます。

2022年に注目すべき10の Web デザイントレンド

毎日、ウェブ上で新規公開されるサイトの数は50万件を超えるといわれています。2022年にホームページを作成しようと考えている方は、その中で自分のサイトをどう差別化するかも合わせて検討しておきましょう。以下では上述のアディを含む Wix チームが厳選した Web デザインのトレンドをご紹介していきますので、ぜひインスピレーションの参考にしてみてください。

  1. クリーンなデザイン

  2. 対称レイアウト

  3. セリフ(Serif)& ライトウェイトフォント

  4. アースカラー & 原色(+ネオンカラー)

  5. 人物画像

  6. 3D モーションパーツ

  7. 超現実的なビジュアルの組み合わせ

  8. ぼかし効果

  9. メッシュグラデーション

  10. 意外性のあるインタラクション

01. クリーンなデザイン

ポイント:2021年に流行したマキシマリズムから一転、要素をそぎ落としたクリーンなデザインに注目。

新たな Web デザインのトレンドでは、マキシマリズムのように要素を詰め込んだコンセプトは一旦下火になる模様です。2021年の需要と比べて、ミニマルなデザインや、より繊細なビジュアルを重視する Web サイトが好まれる傾向にあります。

しかし、これは全てを取り払った「究極のミニマリズム」が求められるということではありません。

「これまでのミニマリズムとは異なり、2022年の Web デザインではダイナミズムを残しつつもスマートさが重視されます。そのため、Wix でもより一層クリーンなデザインを意識するようにしています」(アディ)

高度なエフェクトはそのままに、さらに洗練された、パーツ同士が干渉し合わないデザインで、かつスムーズなブラウジングを兼ね備えたサイトが理想だといえます。

「ミニマリズムといえば白と黒のイメージが強いですが、今回のトレンドは色を活用したミニマルスタイルです。ごちゃ混ぜ感のあるレイヤーを排除し、大胆なデザインを取り入れることで、コンテンツの本質をより追求した Web サイトが完成します」

クリーンなWebデザイン例
グアテマラ発のテキスタイルブランド「The New Denim Project」 のウェブデザイン。ニューヨークと東京でもショールームを展開

02. 対称レイアウト


ポイント:すべてのパーツを対称に配置したバランス重視のデザイン。


見栄えの良いホームページに仕上げるには、調和のとれた構成が必要です。デザインの原則では、バランスを取る際に「左右対称」と「非対称」のいずれかのレイアウトを使用します。昨年は「統制された中でのカオス」を意識した非対称のデザインが人気でしたが、2022年はシンプルさを重視したレイアウトが目立ちます。


2022年の Web デザインのトレンドは、ダ・ヴィンチの『ウィトルウィウス的人体図』のような完璧な対称性がテーマになると考えられます。ページの分割やグリッドレイアウトの使用、画像とテキストのバランスを考慮したデザインなどに人気が出てくることでしょう。


「左右対称のレイアウトは、訪問者の目線を意図的な場所に誘導することができるのが特徴で、それが人気の理由のひとつです。例えば、ページを2つのコンテンツブロック(ビジュアルとテキストを半分ずつ)に分け、フォーカスを分離させることでユーザーに完全なストーリーを伝えることができます」(アディ)


このトレンドに関連して、サイト上のコンテンツを繊細なパーツで分割したデザインも流行しそうです。

「セクションやメニュー、画面を細い線で区切ったデザインが多くなるでしょう。こうすることで画面上に秩序が生まれるため、一般的にクリーンなコンセプトを求める動きと連動して人気が高まる傾向にあります」


対称レイアウトのWebデザイン例
ポッドキャストや記事などのコンテンツ配信を行うプラットフォーム 「Tumult」のウェブデザイン



03. セリフ(Serif)& ライトウェイトフォント


ポイント:太字で強調しながらも、洗練された雰囲気を醸し出すタイポグラフィがトレンドに。


2022年の Web デザインのトレンドは、モダンな雰囲気と相反するセリフ系のフォント。タイポグラフィにおいて、セリフ体とは Times New Roman、Garamond、Georgia など、文字のストロークの端に装飾がある書体のことを指します。


2022年は、これらのフォントが持つ優雅さをデザインに活用するブランドが増えています。また、実際の印刷物を彷彿とさせるセリフ体の人気の高まりにより、2022年のデザイントレンドには少しクラシックな側面が加わりそうです。


ミニマリズムの流れを受けて、セリフ系だけでなくライトウェイトフォントをデザインに取り入れるデザイナーも増えているそうです。

「テキストは大き目のサイズでありながら、より洗練された形で表現されています。カラフルなミニマリズムのコンセプトと同様に、2022年の色とフォント使いはより大胆になっていくでしょう」(アディ)


「ホームページの表示領域全体を1つの単語やフレーズで覆い、画像や背景の上にライトウェイトフォントを使用して魅せ方のバランスを調整するなど、このトレンドにさらに遊び心をプラスした例も多くみられます」


ライトウェイトフォントを活用したWebデザイン例
健康的なレシピとライフスタイルを発信する 「Suvelle Cuisine」のウェブデザイン


04. アースカラー & 原色(+ネオンカラー)

ポイント:Web のトレンドと色使いにも「サステナビリティ」の影が。

自然にインスピレーションを受けたカラースキームや原色がまた流行になりつつあります。2022年の Web デザインでは、アースカラーを基調とした配色が多くみられることでしょう。

サステナビリティを重視する社会的な動きに伴い、自然を意識したデザインに大きな注目が集まると考えられます。

「サステナブル(持続可能)な社会の実現と気候保全への意識の高まりは Web デザイン業界にも浸透しています。自然をイメージした色合いと、ベーシックな原色をミックスして調和を生み出したデザインが登場しそうです」とアディもコメントしています。

しかし、それでもデザインの世界は21世紀流に進化しています。差し色としてスタイリッシュなネオンカラーをミックスさせ、さりげなくエッジを効かせた配色が今後は人気になりそうだとか。

「メニューにネオンカラーのアイコンを使用したり、主張しすぎないカラフルなラインを配置したりと、明るいアクセントカラーを加えることでサイトがポップな構成に仕上がります。2022年は繊細かつ調和の取れたデザインが主流であることを忘れてはいけません」



アースカラー & 原色を駆使したWebデザイン
食と栄養をベースに総合的なライフスタイルの向上をアドバイスしている Mikaela Rubin さんのウェブデザイン



05. 人物画像

ポイント:実際の人物イメージを使用して、よりリアルさを表現。

理想とされる美の形は10年ごとに変化します。文化、歴史、社会が原動力となり、2022年の Web には「多様性」という新しいスタンダードが到来していることは明らかです。

「Web デザインの世界でもそれ以外でも、多様な背景、人種、年齢について取り上げ、インクルージョン(包括性)を強調するイメージを採用するブランドが増えています」(アディ)

Wix はこの傾向が Web 上で当たり前の感覚になりつつあることをとても嬉しく思っています。

2022年のホームページには、LGBTQ+ コミュニティ、障がいをお持ちの方、シニア世代、多様な肌の色や体型など、あらゆる人々を表現する画像を掲載することが求められてくるでしょう。

「ここ数年、これが各業界で重視されてきていることがわかります。というより、もはや常識だといっても過言ではありません。多くの高級服飾メーカーや一流ブランドが、モデルやプロではない等身大の人々をショーや広告に登場させています」

顧客やその友人、家族に近い実在の人物の画像を使うことで、顧客はそのブランドに対して親近感を持つようになります。特にネットショップなどの場合は、製品を使用しているイメージをより多くの人に持ってもらいやすくなるため、この Web デザインのトレンドは賢明なブランディングの判断だと言えるでしょう。


人物の画像を用いたWebデザイン
容姿や体型にかかわらず多様性を受け入れ、すべての人をフィーチャーすることを掲げる「Amber Magazine」のウェブデザイン



06. 3D モーションパーツ

ポイント:すべてのホームページに、ユニークな3D オブジェクトを追加。

この1年ですでに花開いたこのトレンドですが、アディによれば「まだピークに達していない」とか。文字や抽象的なビジュアルから透過動画まで、3D 要素はそれ自体がデザイン要素として機能し、まさに非日常的な効果を生み出します。

3D は進化を遂げたトレンドでもあります。2021年のマキシマリストデザインの流行により、モーションパーツや透過動画を使った様々なスタイルの Web デザインが誕生しました。しかし、2022年には、モーションは3D ビジュアルの代名詞となり、より計算された形で用いられるようになると考えられます。

今回のリストにある Web デザインのトレンドに関して、アディは「Wix では、ミニマリズムにエッジを効かせるためにこれらのパーツを使用しています」とコメントしています。「3D 要素を持つ透過動画とクリーンかつミニマルなホームページを組み合わせることで、うまくかみ合えば驚くべき効果が生まれます」


3D モーションパーツを活用したWebデザイン例
3D グラフィックアーティストの Yonson さんのウェブデザイン

07. 超現実的なビジュアルの組み合わせ

ポイント:ビジュアル使いで異次元的な世界観を演出。

2022年は、多くの Web サイトで、超現実的なビジュアルの組み合わせによる驚きの効果を狙った、想像を絶するデザインが生まれる可能性が出てきています。宇宙に浮かぶオンラインストア、世にも奇妙な仮想空間など、ダリ的なイマジネーション溢れる世界を思い描いてみてください。

このような「この世のものではない」デザインは、訪問者の注意を引きつけて魅了するにあたっての大きな可能性を秘めています。最近では、大手ファッション企業もこのトレンドをデザインに取り入れている模様です。その好例が下記のバレンシアガの22年春夏キャンペーンで、印象的なクリエイティブがブランドのコレクションをより一層際立せています。

Web デザインへの応用を考えるとき、このトレンドは「動画を使って作る必要はない」とアディは指摘しています。

「こうした超現実的な体験は、サイト上で鮮やかな画像を使い、インタラクションと組み合わせることで思いがけない印象を与えることができます」

ただ、この Web デザインのトレンドは万人向けではないため少し注意が必要です。

「これは本当にエッジの効いたデザインなので、誰にでも合うものではありません。本当にハイエンドでエッジの効いたブランドは超現実的なデザインの恩恵を受けることができますが、非常にデリケートなので、慎重に扱う必要があります」




08. ぼかし効果


ポイント:ぼかしを入れたレイヤー使いも、2020年の Web デザインのトレンドにランクイン。


今、多くのウェブサイトでぼかし効果が使われているのを目にします。このエフェクトは汎用性があることがメリットのひとつ。ビジュアルの一部のみをぼやけさせたり、画像を引き延ばしたり、歪曲させたり、グラスモーフィズム(すりガラスのような特徴的なエフェクト)を少し取り入れたりと、使い方や強度によってさまざまな表情を表現できます。サイトのデザインに自然に溶け込みながらも、外観にさりげない驚きを加えられるところがポイントです。


「Web デザイン上で見せるものと見せないものを操作できることがこの効果の魅力です。ガラスモルフィズムを使うと見せたい部分だけを強調し、他の要素はより曖昧にしてぼかすことができます」(アディ)


「また、この効果を使うことでサイトのデザインに洗練されたレイヤーを加えることができますし、もう少し冒険してみたいという場合は色をプラスしてデザインをレベルアップさせることもできます」


ぼかし効果を活用したWebデザイン例


09. メッシュグラデーション

ポイント:グラデーションの進化版でトレンドを先取り。

ポスター、ロゴデザイン、ウェブサイトの背景など、印刷物からデジタルデザインに至るまで、グラデーションはとどまるところを知らない存在です。複数の色と歪みを一つの構図にすることで、オンラインプレゼンスの確立を目指すブランドにエッジをもたらし続ける汎用的なエフェクトです。

グラデーションデザインのルーツは90年代に遡りますが、Wix は2022年に向けて全く新しいデザインである「メッシュ」をリリースする予定です。

「メッシュはかつてカスタムコーディングでのみ可能でしたが、印刷物、ポスター、ファッションの至る所でこのエフェクトを目にするようになり、今回のリリースを思いつきました。

Wix を使用しているすべての人が、メッシュを使って革新的なデザインを制作できるようにしたいと思ったからです。このビジュアルエフェクトの作成はカスタムコードでのみ可能で、主要なオフラインのデザインソフトウェアで提供されているのですが、オンラインのホームページ作成ツールでこの機能を実装したのは Wix が初めてです」

では、メッシュとは何でしょう?下記のアディの説明をご覧ください。

「グリッドが網状に進化し、その網のそれぞれの点が特定の色を持っていると想像してください。メッシュの凄いところは、これらの点を混ぜ合わせることができることです」

自由形式のグラデーションとは対照的に、グラデーションをより計算された方法で適用できるのがメッシュのひとつの魅力だと言えます。

メッシュグラデーションを活用したWebデザイン例



10. 意外性のあるインタラクション


ポイント:インタラクティブな Web サイトはやはり勝ち組。


Web サイトのインタラクションは、「スクローリーテリング(画面スクロールと連動させた形でストーリーを展開する手法)」や訪問者のアクションに反応するアニメーションなど、洗練された印象を与えるのに最適です。2022年には、多くの Web デザイナーが注目を集めるためのツールとして動きのあるエフェクトを利用することが予想されますが、2022年の注目株は、アニメーションを利用したミニマルかつ意外性のある Web デザインです。


例えば、「あるビジュアルパーツの背後に情報を隠しておき、訪問者がマウスオーバーすると情報が現れる」といったものが挙げられます。この「かくれんぼ」のようなインタラクションは、Web サイトのクリーンなレイアウトを維持しつつも情報をしっかりと保持し、訪問者に意外性を与えることができる楽しい効果のひとつです。


アディは、2021年の「more is more(多ければ多い方が良い)」アプローチから一転し、2022年はこのようなインタラクションが主流になっていくと指摘しています。

「ページはよりミニマルでありながら、ダイナミックでスムーズなものへと変化していくでしょう。アニメーションを多用する場合でも動き自体はシンプルに抑え、情報を便利に見せることを目的としたものになると考えられます」



意外性のあるインタラクションを取り入れたWebデザイン
ロンドン発のフレグランスブランド「モルトンブラウン」のデザインサンプル

ja03.png