ホーム
イベント
2021年Webデザイントレンド予測まとめ

2021年Webデザイントレンド予測まとめ

［今週のデザインニュース#3］

こんにちは！
寒くて外に出れないのでジムを退会し、また健康から遠のいてしまった、デザイナー・イラストレーターのオザワです。

先日Twitterを眺めていたら、これが流れてきまして
3Dモデリングソフト「Blender」の操作を0から学べる1,400ページの解説書が無償公開／ダウンロード・インストールから基本的な操作、アニメーションの作成までを細かく解説

3Dは、先週のグラフィックトレンドまとめに上げていたので、気になっていたんですけど、
『へー、じゃあやってみれば？＼1,400p／』という……ありがたいです。

往々にして「デザイナーはMじゃなきゃ務まらない」なんて言われたりもしますが。。刷り込まれたソレを本領発揮して、地道に覚えて今後デザインに活かせていけたらなと思います。(笑

【追記】
やってみた結果、操作ごとにスクショが掲載されていて、ものすごく丁寧な解説書でした！

前書き長くなりましたが！本題に参ります！！！
今週のテーマは「2021年Webデザイントレンド」！！GOGO~！！！
（個人的に気になったものをピックアップしてます）

デザイン手法

ニューモーフィズム

ニューモーフィズムは控えめな立体感の単色カラーを重ねながら、部分的にドロップシャドウによってリアルさを真似たデザインが特長で、ミニマルとフラット、両方を融合したスタイルと言えるでしょう。

[Photoshop vip より引用]

簡単に言うと「ワントーンコーデ」みたいなことです！
紙を重ねたようなセミフラットなデザインは以前から使われていましたが、単色カラー縛りが加わることで、さらに軽く折り曲げてスイッチに見せたり、エンボス/デボス加工のようなリアルな紙の加工で装飾したりと様々な立体表現が生まれています。

ニューモーフィズムで制作されたデザインは、見せたい箇所が最初に目につき、そして画面全体でインパクトがありますね！

グラスモーフィズム

背景が透けて見えることで、コンテンツの階層を確立し、インターフェースの奥行き感を演出できます。本物のガラスの用に、どの層がどの層の上にあるのかを簡単に確認することができます。

[Photoshop vip より引用]

ドロップシャドウ、透明度、背景ぼかしの組み合わせで、すりガラスを重ねたように見せるスタイル。CSSスタイリングのみで表現でき注目されています。
美しく見せるポイントとしては、「鮮やか且つ賑やかな背景の採用」「境界線の処理」「オブジェクトの距離と光の関係性」など、よりリアルなガラスに見えるテクニックが求められるようです。

[Photoshop vip] グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ

注意点は「アクセシビリティに問題が起こりやすいスタイル」ということ、視覚に問題のある人でも理解できるUIになっているかを慎重に確認する必要があります。
コピペ可能なコードをダウンロードできる、グラスモーフィズムのジェネレーターはこちら

GlassmorphismCSSジェネレーター

モノクロ調のデザイン

カラフルでポップなデザインも魅力的ですが、あえてモノクロ調に仕上げることで印象に強く残るようなインパクトを与えるデザインを2021年は多く見かけることになるでしょう。

[Webdesign Trends より引用]

鮮やかなグラデーションや、賑やかなイラストを取り入れたサイト、ダイナミックな写真を用いたデザインが人気を集めていますが、逆にシンプルなモノトーンで統一することで、印象に残りやすくなっているとも言えます。
スタイリッシュで、洗練されたデザインに見えることが特徴で、「文字の扱い」「アニメーション」「見せたい箇所にのみ施されるアクセントカラー」が重要になっています。

配色

目にやさしい配色

スクリーン画面の白さを打ち消した昨年のダークモードのトレンドが人気だったことを説明しているとも言えるでしょう。
2021年には、快適な配色がより重要となるでしょう。健康的なみどり色や、パステル系ブルー、暖かみのある茶色、淡い薄ピンク色など、ソフトな色合いがより人気となるでしょう。

[Photoshop vip より引用]

なるほど「ダークモードの流行り」と言う裏付け、説得力があります..!
最近は、背景色を#fff（真っ白）ではなく、ほんの少しグレーがかったものを白として使用したサイトやアプリが増えたと感じます。
こちらはトレンドと言うよりも、ユーザーの目の疲れに配慮した「新しいアクセシビリティ」と考える方が適しているようです。