WebやUIデザインのトレンドは、デバイスやユーザーのニーズの変化、新しい技術の開発などによって変化し続けています。ユーザーが求めるものを提供するためにも、トレンドを知っておくことが大切です。

今回は、2022年に話題になったWebデザイン・UIデザインを紹介します。2023年は2022年に話題となったデザインを踏襲しつつ、新しいトレンドへと発展する可能性があるため、まずはこの記事を読んで現状のトレンドを押さえておきましょう。

2022年話題になったWeb・UIデザイン

2022年に話題となった、以下6つのデザインの特徴をそれぞれ見ていきましょう。

• グラスモーフィズム
• ニューモーフィズム
• アブストラクトデザイン
• アイソメトリックデザイン
• スクロールテリング
• イラストをモチーフにしたデザイン

グラスモーフィズム

グラスモーフィズムは透明度とぼかしを調整することで、レイヤーをすりガラスのようにみせる手法です。グラスモーフィズムを利用したレイヤーを複数配置することで、オブジェクトに浮遊感を持たせ、透明感のある表現が可能になります。

グラスモーフィズムで表現すると、オブジェクトの階層表現を明確にできるため、ユーザーはより直感的に操作できるようになります。

ただし、グラスモーフィズムを多用すると、全体的にぼんやりとした印象になってしまうため、使用頻度を調整する・背景に濃い色を配置する・枠線と併用するなどの対策が必要です。

グラスモーフィズムを用いたサイトの例
株式会社ピュール｜PYURU

ニューモーフィズム

ニューモーフィズムは、従来のスキューモーフィズムを進化させたデザインです。スキューモーフィズムはリアルな質感と立体感を重視したもので、これらをシンプルにしたのがニューモーフィズムとなります。

ニューモーフィズムは、要素がベースから浮き出たりくぼんだりして見えるのが特徴です。明るい色のシャドウと暗い色のシャドウを組み合わせれば、控えめで洗練された印象を与えられます。

ただし、ニューモーフィズムは背景色と要素の差がはっきりしていないことから、UIデザインとしては優れていません。ニューモーフィズムを使用する際はUIに考慮して、シャドウのつけ方やカラーの選び方を工夫しましょう。

ニューモーフィズムを用いたサイトの例
株式会社博報堂プロダクツ

アブストラクトデザイン

曲線などを主体とした抽象的なデザインをモチーフにしたものを、アブストラクトデザインと呼びます。

具体的なイラストを掲載せず、シンプルなカラーとオブジェクトの組み合わせのみでデザインするため、表現の幅が広がり、工夫次第でユーザーにさまざまな印象を与えられます。アニメーションも組み合わせれば、より印象的なデザインを作成できるでしょう。

ただし、構成要素が少ないため、カラーや配置、形を工夫しなければ単調な印象を与えてしまいかねません。ターゲットにどのような印象を与えたいのかを明確にした上で、印象に残りやすいデザインになるよう心がけましょう。

アブストラクトデザインを用いたサイトの例
株式会社リクルート｜スタディサプリ

アイソメトリックデザイン

アイソメトリックデザインは、オブジェクトを斜め上から見下ろしたようなデザインのことです。フラットデザインと3Dデザインを組み合わせたようなスタイルで、縦横高さがそれぞれ120度になるような立方体の中にシンプルさを保ちながらも複雑なデザインを組み込めます。

全体的にアクティブな印象を与えるアイソメトリックデザインは、Webサイトのトップページなど、ユーザーが最も注目するページに使用されます。にぎやかで楽しい雰囲気を作りたい場合に、アイソメトリックデザインは向いているといえるでしょう。

アイソメトリックデザインを用いたサイトの例
株式会社メルペイ｜Merpay

スクロールテリング

スクロールテリングは、スクロールとストーリーテリングを組み合わせた言葉で、スクロールに合わせてアニメーションや画像を自動で表示するデザインです。サービスや製品の内容にストーリーを持たせ、ユーザーの興味をひき続けます。

スクロールテリングは、製品やサービスの世界観を表すのに効果的ですが、ストーリーがターゲット層に合っていないと魅力を発揮できません。ターゲットが求めるストーリーを考え、それに沿って文章や画像、アニメーションを配置する必要があります。

実際にどのようなストーリーにするかは、スクロールテリングを活用したサイトを参考にしながら考えるとよいでしょう。

スクロールテリングを用いたサイトの例
Apple Japan｜AirPods Pro

イラストをモチーフにしたデザイン

イラストをモチーフにしたデザインには、先述のアイソメトリックデザインや、線だけで表現されたラインアート、漫画風なデザインのコミカルタッチ、水彩画などを参考にした手書き風デザインなどがあります。

イラストをモチーフにしたデザインを使用するメリットは、伝わりやすさです。写真では表現できないようなものもイラストなら簡単に実現でき、よりユーザーに伝わりやすくなります。

イラストにはさまざまな表現方法があるため、サイトのイメージに合ったものを選択することが大切です。デザイン用にイラストを提供しているサイトも多くあるため、適宜活用するとよいでしょう。

イラストをモチーフにしたデザインを用いたサイトの例
天藤製薬株式会社｜ボラギノールタウン

過去に話題になったWeb・UIデザイン

WebデザインやUIデザインにはトレンドがあり、時がたつと新しいデザインが生まれ、トレンドも移り変わっていきます。

トレンドのデザインはユーザーの興味をひきやすいため、デザイナーもトレンドのデザインについ目を向けてしまうものです。しかし、トレンドが過ぎてしまったデザインにも魅力があり、その魅力を知っておくと、新しくデザインを考える際の参考になります。

今後の参考にするためにも、過去に話題になったWebデザインやUIデザインを振り返っていきましょう。

スキューモーフィズム

スキューモーフィズムは、ニューモーフィズムの元となったデザインです。既存のデザインに似せることで、操作性や視認性を上げることを目的としており、スマートフォンが普及した頃によく用いられました。

スキューモーフィズムでは、影や装飾によって立体感を生み出し、現実に存在するものを3Dに落とし込んだかのように表現します。

現実に似せようとすればするほどデザインは細かくなっていきますが、細かいデザインは全てのデバイスに受け入れられるわけではありません。あらゆるデバイスで視認性を確保するのは難しいため、スキューモーフィズムは次第にトレンドから外れていきました。

スキューモーフィズムを用いた例
iOSアプリのアイコン

フラットデザイン

フラットデザインは、スキューモーフィズムの衰退に併せてトレンドとなったデザインです。スキューモーフィズムとは対照的に、立体感や過度な装飾がなくなりました。

要素をシンプルにすることで、伝えたい情報を確実にユーザーへ伝えられるのが、フラットデザインのメリットです。スキューモーフィズムが苦手とした多様なデバイスへの対応も、シンプルなフラットデザインなら容易に行えます。

ただし、フラットデザインは全体的に平坦なデザインのため直感的な操作がしづらく、ユーザビリティ観点でのデメリットがありました。 結果的に、ユーザーが困惑する恐れがあるため、フラットデザインもトレンドから外れることになります。

フラットデザインを用いた例
Microsoft ModernUI

マテリアルデザイン

フラットデザインの次に台頭したのが、Googleが発表したマテリアルデザインです。マテリアルデザインは、フラットデザインになかったユーザビリティの実現を目的とし、ユーザーがより理解しやすいデザインとなっています。

マテリアルデザインについては、Googleがガイドラインを公表しているため、ガイドラインに沿ってサイトを作成すれば、デザイン性の高いサイトを作れるでしょう。

ただし、Googleのガイドラインに沿っただけでは、他のサイトとの差別化は図れません。他のサイトとの差別化をするため、マテリアルデザインのガイドラインをふまえた上で、新しいデザインを模索するようにトレンドは移り変わっていったのです。

マテリアルデザインのガイドライン
Google｜Material Design

まとめ

トレンドになっているデザインにはトレンドになるだけの理由があり、その理由を知ることは、より良いデザインの創作につながります。今回紹介したデザインは2022年に話題となったものや、それ以前に話題となったものですが、これらのデザインを通して、新しいトレンドをつかんでいきましょう。

トレンドを知るためには情報収集を欠かさないことも大切です。日本国内だけでなく、海外でどのようなデザインが流行しているのかを把握し、取り入れられるものがないかを日頃から探しておきましょう。

ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援も行っております。
下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。

ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！