2021年も終わりが近づいていますね。
そこで本記事では、2022年のデザイントレンドを予測したいと思います！
予測だけでなく、解説したり、実際にデザインを作成しているので是非2022年のデザイン作成の
参考にしてみてください。
それではどうぞ！
目次
グラスモーフィズム
グラスモーフィズムとは、ぼかしを使ってすりガラスのような質感を表現するデザインスタイルのことです。
2020年にAppleが新しいOSである「Big sur」にグラスモーフィズムを取り入れたこともあり
現在注目を集めています。
階層構造が理解しやすく、奥行きや、透明感が表現できます。
さらにぼかしによって視認性も保たれている優れたデザインになります。
ぼかしの比較
グラスモーフィズムの大きな特徴である「ぼかし」ですが、不透明度やぼかしの量によってかなり印象に違いが出てきます。
下の表を見てみると、右下は不透明度が70％、ぼかし量が50％と、ほぼ不透明に近い質感になっており、グラスモーフィズムの良さを活かせていません。
真反対の左上はちょうどよく背景がぼやけていて、ガラスの質感をしっかり感じられると思います。
丁度よいぼかし、透明度の値は左上のほうで、表現したい質感によって値を使い分けると良いです。
実際にデザインを作成！
こちらが実際に作成したデザインになります。
グラデーションや、色の多い背景にしてみるとガラスの質感、階層構造がより感じられます。
背景は以下のようなべた塗りにしてしまうとガラスの質感が伝わりませんので注意しましょう。
デザインはXDで作成いたしました。
イラストレーターでも作成できますが、XDのほうがかなり簡単に作成できます。
ガラスの部分は、長方形などのシェイプを作成し、それに対して「背景のぼかし」をかけることでガラスモーフィズムデザインの出来上がりです。
また、背景のぼかしを付けたシェイプに、白線を1pxから2pxほどつけるとぼやけた境界がはっきりします！作りたいデザインの雰囲気に合わせてつけてみてください。
アブストラクト
次はアブストラクトです。
「アブストラクト」という言葉には
アブストラクト【abstract】
抽象的な。観念的な。
引用元：weblio辞書より引用
という意味があります。
Webにおける「アブストラクトデザイン」とは具体的な対象の再現をせず、自由な線や図形などを用いたデザインスタイルのことをいいます。
一例ですが、以下のようなデザインがアブストラクト、と呼ばれており、このような背景素材は素材サイトにたくさん存在しています。
アブストラクト × アニメーション
ただのアブストラクトデザインではなく、「アブストラクト×アニメーション」が2022年は流行ると予測します！
抽象的でモダンなアブストラクトデザインに動きが加わることによって、表現幅が広がり、よりサイトに訪れるユーザー様の目を引くこと間違いなしです。
GnGn Inc.
派手な配色が目を引くこちらのサイトは、背景が抽象的な線や図形であるアブストラクトになっており、どこかに進み続けるようなアニメーションになっています。
スクロールしていくと背景の線が進むのでページも進めたくなりますね。
GnGn Inc.
homunculus Inc. | 株式会社ホムンクルス
こちらのサイトも、メインビジュアルの背景がアブストラクトで、ページ全体が、ホバーすると水面がゆらめくようなアニメーションになっています。
おしゃれなサイトで、印象に残りやすそうですね。
homunculus Inc. | 株式会社ホムンクルス
株式会社x garden | 創造的衝動で おもしろい方の未来へ
シンプルな白い背景に、アブストラクトな線が混ざり合ったりしながら上へ進んでいます。
シンプルなサイトでも「アブストラクト × アニメーション」を取り入れるとモダンな雰囲気が増しますね！
株式会社x garden | 創造的衝動で おもしろい方の未来へ
実際にデザインを作成！
実際にデザインしてみたものがこちらになります。背景はアニメーションで線が動いている想定です。
背景をアブストラクトにすると、それだけでかなり賑やかになります。他の装飾を抑えると、まとまりのあるかっこいいデザインになりますね。
ちなみに背景はこちらのサイトで作成いたしました。
Silk – Interactive Generative Art
簡単にアブストラクトなオリジナル素材が作成、ダウンロードできます。
アプリもリリースされていて、iPadやiPhoneでも作成できるみたいです！
是非試してみてください！
ニューモーフィズム
ニューモーフィズムは、2020年ごろから流行るのではないかと言われており、じわじわと見かける機会が増えてきています。
Webというよりかは主にアプリ等のUIに使用されていることが多いようです。
ニューモーフィズムとは、リアルな質感のスキューモーフィズムと、シンプルで平面的なフラットデザインを組み合わせたデザインスタイルです。
フラットデザインとは違い、質感や、立体感などがプラスされていることが分かります！シンプルでかっこよく、清潔感がありますね。
実はニューモーフィズムに少し似た「マテリアルデザイン」という手法も存在します。
マテリアルデザインの「マテリアル」は、直訳で「物質的な」という意味で、ユーザーが感覚的に理解できるデザインである、ということを意味しています。
マテリアルデザインの特徴は、ニューモーフィズムと同じくシャドウにあります。
マテリアルデザインは、浮いたり重なり合ったりしているもので、それをシャドウで表現しています。
ニューモーフィズムは浮き出たりへこんだりさせることができます。これがマテリアルデザインとニューモーフィズムの大きな違いです。
ニューモーフィズムにはルールがある！
シャドウは、ニューモーフィズムの特徴である立体感を表現するうえで、とても大事なルールになります。
凹凸の表現
光源（図中の太陽）を左上とし、要素の左上（外側）に明るいシャドウをのせ、逆に影になる右下（外側）には暗いシャドウをのせます。
そうすることによって、ニューモーフィズムの立体感がうまれます。
逆にへこんだ表現をするためには、要素の右下（内側）に明るいシャドウをのせ、逆に影になる左上（内側）には暗いシャドウをのせます。
少し難しいですが、光源を意識すると簡単に理解することができます。
実際にデザインを作成！
ニューモーフィズムデザインにするときは全体をニューモーフィズムにすることはお勧めしません。
コントラストが弱いので、UIの構造がわかりにくくなるためです。
そのため作成例のように使う箇所を絞ってデザインすることによって、清潔感のあるスタイリッシュでかっこいいデザインになります。
実際のサイトでもこのような使われ方をしています。
【公式】イオニアシリーズ（ion“e”air）
ボタンのみニューモーフィズムに
【公式】イオニアシリーズ（ion“e”air）
株式会社アーキタイプ – ARCHETYP｜Webビジネスに関するUI/UXデザイン
ボタンと背景一部をニューモーフィズムに
株式会社アーキタイプ – ARCHETYP｜Webビジネスに関するUI/UXデザイン
ダークモード
黒を基調とした暗い画面を「ダークモード」と呼び、
白を基調とした通常の明るい画面を「ライトモード」と呼びます。
画面が暗くなるため、目への負担が抑えられると話題になっています。
また、ダークモードは高級感も演出することができます。
ダークモード対応のアプリ、サービス
ダークモードに対応しているアプリ、サービスはまだ少ないですが有名企業は既に対応しているところが多くあります。
一例になりますが、皆さんも聞いたこと、使ったことがあるアプリやサービスが多いのではないでしょうか。
- LINE
- safari
- App store
- Google play store
- Youtube
- Google chorme
- slack
実際にTwitterのライトモードとダークモードを比較してみました！
ライトモードでは白い背景で、ブラックモードは背景が2パターンあり、黒または紺になっています。
確かにダークモードのほうが目への負担が少ない気がしますね。
また、有機ELディスプレイに限った話となりますが、画面が明るい状態でダークモードを使った場合、ダークモードのほうが充電の消費が少なく済むそうです！
実は私も、Twitterのダークモードを使用しています！目が疲れないようにダークモードにしていますが、かっこいいから、という理由でダークモードを利用する人もいるそうです！
実際にデザインを作成！
まずはこちらが通常の画面、ライトモードだとします。
そこからダークモードをオンにしてみた際のデザインを作成いたしました。
こちらがダークモードにした際のデザインです。
背景は#333の黒、それぞれのリストの背景は#555の黒を使用しています。
全て同じ黒にするのではなく、明度を変えることによってレイヤー構造を明確にすることができます。
アイソメトリック
アイソメトリックとは、横幅、奥行き、高さの軸が120°になるように描く図法（等角投影図法）のことです。
もともと設計図などで使用されている図法になり、インテリアなどの俯瞰図に使用されることが多いです。
Webサイトではイラストに取り入れられていることが多く、世界観や立体感、奥行きを表現しやすいことがメリットです。
今年から引き続き、来年も流行っていくのではと予想します！
アイソメトリックの関連図法を知ろう！
アイソメトリックには関連する図法が2つあります。
ダイメトリック
ダイメトリックとは、横幅、奥行き、高さの軸のうち2つの角度を等しく描く図法のことです。
見た目はアイソメトリックに似ていますが、違いを分かりやすく言うと、
アイソメトリックは斜め上からの視点に対し、ダイメトリックは横からの視点の図法になっています。
ダイメトリックのイラストも検索してみるといろいろと出てくるので是非見てみてください。
トリメトリック
トリメトリックとは、横幅、奥行き、高さの軸をすべて異なる角度で描く図法のことです。
トリメトリックはあまり浸透しておらず、イラスト素材などはほとんどありません。
実際にデザインを作成！
実際にアイソメトリックのイラストを使用してデザインしてみました。
アイソメトリックのイラストは、立体感・奥行きによって、他のイラストと差別化し、
印象付けることができます。
また、素材も豊富にあるため、作りやすいデザインです。
しかし、何の意図もなしにアイソメトリックのイラストを使用していると、ただトレンドに乗っかっているだけのデザインになってしまいます。
そうなってしまうと流行りが過ぎたときに意味を持たないデザインになってしまいます…
なぜこのイラストを使いたいのか、使うことでサイトのユーザー様にどのように感じてもらいたいのかを考えたうえで使用しましょう！
まとめ
2022年のトレンド予測いかがでしたか？
今年から引き続き流行りそうなものもありましたね。
トレンドデザインを必ず取り入れなければならない！ということはないですが、取り入れることによって
モダンなサイトに仕上げることができます！
私はアイソメトリックとニューモーフィズムがお気に入りのデザインなのでもっと
流行ってくれたらうれしいなと思います。
では！
