【2021年】UIデザイントレンドガイド

本記事は、[Diana Malewicz](https://medium.com/@dianamalewicz)氏による「[A guide of UI design trends for 2021 Part 1](https://www.instagram.com/p/CKD7HErgrrg/) & [Part 2](https://www.instagram.com/p/CKJPmFOgynJ/)」（2020年12月8日公開）の和訳を、著者の許可を得て掲載しているものです。

#【2021年】UIデザイントレンドガイド

>より多くの3D、より多くの色、グラスモーフィズム、素晴らしいツール！🤩

![Image for post](https://miro.medium.com/max/1100/1*ec6CWdqvjaOTH7UtnTRuPA.png)

あと1ヶ月もすれば（ついに！）2020年というあまりクールではない年に別れを告げることになります。[前回のトレンド記事](https://uxdesign.cc/10-newest-and-promising-ui-design-trends-929562b25ad6)がとても好評だったので、時間をかけて業界研究をして、「2021年デザイントレンドガイド」を作りました。

2021年がどんな年になるか見てみましょう！

##1. 3Dイラスト（そう、まだね！）
![Examples of 3d imagery in UI](https://miro.medium.com/max/2200/1*777xY4q9vK4b0mbjyjAwVQ.png)
左からCuberto、Superlist、afshint2y (instagram) 、Essentials、Minh Pham

3D画像はまだ健在です。特に、普通のUIデザイナーが3Dで実際に何かを作るのが簡単になってきたら！（[Spline](https://spline.design/)という3Dツールを試してみてください。現在はベータ版ですが、とても素晴らしくて使いやすいです！)

3Dは、メインのキービジュアルとして、フルスクリーンアニメーションでも広く使用されています。ウェブサイトで見事な3Dの背景を作る方法については、[Superlist](https://superlistapp.com/)か、Minh
Phamの[素晴らしい3Dチュートリアル](https://www.youtube.com/watch?v=Wwr9USYd3So&feature=youtu.be)を見てください。

##2. グラスモーフィズム
![Examples of glassmorphism in UI](https://miro.medium.com/max/2200/1*7w3jqck9DxlIfEAVOplxAQ.png)
左からmandariuiux (instagram)、Victor Cardero、Hype4.com、day___dreamer06 (instagram) 、Blacklead Studio

**グラスモーフィズム**という最新の流行を知っていますか？（その通り、ニューモーフィズムはもうクールではありません）これはUIの最新トレンドで、主に**背景のぼかし**と呼ばれる効果を使って、基本的には要素に「ガラス越し」の外観と感触を作り出すものです。

Windows Vistaで導入され、その後iOS7でも導入されましたが、リニューアルされた形でしばらく残るようです！グラスモーフィズムをもっと詳しく見たいなら、[Glassmorphism Generator](https://glassmorphism.com/)というオンラインツールを試したり、Mikeの記事を読んだりしてください。

#### 

>[**ユーザインタフェースにおけるグラスモーフィズム**
>今年も、デザイナー間で別のUIトレンドの人気が高まっています。もう知っていますか？
>uxdesign.cc](https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9)

##3. 実際の写真
![Examples of real photography in UI](https://miro.medium.com/max/2200/1*m3a5S2MhmLbHOiEKJ3OAjA.png)
左からlogancee (instagram)、Tran Mau Tri Tam、Dmitry Lauretsky、ekokubki.pl

プロダクトデザインにおけるイラストや3Dグラフィックは、近いうちに誰もが飽きてしまいます。そこで、実際の写真が大復活を遂げることが大いに予想されます。

以前の記事にも書きましたが、イラストがすべての人に適しているとは限りません。そして、実在の人や物の方が、ユーザーに大きなインパクトを与えることもあります。[Ekokubki](https://ekokubki.pl/)のサイトは、実際の写真を使っているので、見栄えがいいです！

##4. Vivid colors　ビビッドカラー
![Examples of vivid colors in UI](https://miro.medium.com/max/2200/1*5BJoShoTaatp-CK0SxzKSg.png)
左からDiana Medviedieva、Green Illumination、Designcode.io、Sleepiest、Digital Design Talks

どこを見ても、ウェブサイトやモバイルデザインでカラフルなスプラッシュを目にします。[Designcode.io](https://designcode.io/)、[Sleepiest](https://www.sleepiest.com/)、[Design
Talks](https://digitaldesigntalks.com/)を見てみてください！色が、魔法のような幻想的な雰囲気を醸し出しているのが大好きです。**ビビッドカラーを使うと、商品を差別化し、記憶に残りやすくなります。**Instagramはずっと前にそれを知っていました（だからこそ、忘れられないアイコンに変更されたのです）。

##5. ぼかしのあるカラフルな背景
![Examples of blurred background in UI](https://miro.medium.com/max/2200/1*9JSlVbRKs6bN3VO3H8p0ZA.png)
左からTran Mau Tri Tam、Stripe、Tran Mau Tri Tam、Nadya Lazurenko、MyMind.com

上のものと似ていますが、グラスモーフィズムが少し混ざっています...。この効果の繊細さのおかげで、見ているだけで楽しいUIになっていると思います。背景をぼかしたデザインは、信じられないほどオーガニックで暖かみがあり、心地良いデザインになっています。

[Stripe](https://stripe.com/en-pl?utm_campaign=paid_brand-PL_en_Search_Brand_Stripe-6492221267&utm_medium=cpc&utm_source=google&ad_content=381612492120&utm_term=stripe&utm_matchtype=e&utm_adposition=&utm_device=c&gclid=CjwKCAiAwrf-BRA9EiwAUWwKXtsYb18Pr-r1xcaD4R3TKePsuRcXswSdVpAbABfE0FNBcwnK2hmX1BoCsLIQAvD_BwE)（グラスモーフィズムもあり）と[My
Mind](https://mymind.com/)（驚くべきシンプルな自己管理ツール）を見てみましょう。

##6. 美的ミニマリズム
![Examples of minimalism in UI](https://miro.medium.com/max/2200/1*h3LhUJoW8h7zxBXVlhliVA.png)
左からAlexey Savitskiy、Revolut、Qoals、Sketch、Hype4.com

たぶん個人的に一番好きなトレンドです。シンプルでミニマルで読みやすいUIほど、美しいものはありません。

[Revolut](https://www.revolut.com/en-PL/)（シンプルな3Dもあり）、[Sketch](https://www.sketch.com/)、[Qoals](https://qoals.com/)（ぼかした背景もあり）のようなウェブサイトは、商品を素晴らしく見せるのに、派手なUIや「すごい効果」は必要ないということが分かる完璧な例です（悲しいことに、多くのクライアントはそれを理解していません）。

##7. 幾何学的な構成
![Examples of geometric structure in UI](https://miro.medium.com/max/2200/1*xD3fFPy7XB9u55YfAlAz5A.png)
左からMateusz Madura、Offriginal (instagram) 、staromlynski.design (instagram) 、AndikaWP

とても整然として保守的なビジュアル構成のデザインが増えてきました。これによって情報が本当に整理されているように見えます。

[Rituals](https://www.rituals.com/en-us/precious-amber-scented-candle-1109604.html?source=cop&showbacklink=false#start=1)のウェブサイトは、インタフェースが幾何学的な構成になっている最も美しい例です。使うのも見るのも楽しいです（シンプルだけど楽しいアニメーションも大好き）。

##8. 大きくて洗練されたタイポグラフィ
![Examples of big typography in UI](https://miro.medium.com/max/2200/1*IqXgzU6lJT96gKrVL6G77g.png)
左からStan Yakusevich、Vadim Drut、Whirly Birdie、Dovetail+Afterpay、Synchronized Digital Creative Studio

大きくて洗練されたタイポグラフィが商品デザインの主役になっている例は数多くあります。中には、完全にタイポグラフィに基づいているものもあります。そしてその結果は、興味深いものが多いです。書体の選択肢が極端に多いことはよくあることです。

[Whirly Birdie](https://whirlybirdie.com/)、[Dovetail+Afterpay](https://dovetailstudios.com/the-story-of-dovetail-and-afterpay/)（ビビッドカラーもあり）、[Synchronized](https://synchronized.studio/)（ブルータリズムもあり）を見てください。

##9. ブルータリズム
![Examples of brutalism in UI](https://miro.medium.com/max/2200/1*lJXX4nzatRcQC-WIljCh-g.png)
左からAdam Roller、Laetitia Meunier、Ilya Kulikov、Michał Rome

これは私が最も問題にしているトレンドです（正直に言うと、ニューモーフィズムほどではないかもしれません）。ブルータリズム（残忍主義）と呼ばれ、その名の通り、強いコントラスト、よくある不快なタイポグラフィ、アクセシビリティや読みやすさに関するたくさんの問題があります。でも、私は全体的な雰囲気を理解しています。**その背後にある主なアイディアは、私達が美しく有用だと認識しているものを脱することです。**

驚くべきことに、多くのウェブサイトやアプリが実際にこのトレンドを追求しているのを目にします！（[Newonce](https://newonce.net/)というポーランドのラジオ局がその1つです）

私も実際に試してみましたが、UIに関しては好みではありません。ポスターや雑誌で使われる方がいいと思います。

##10. UX/UIプロセスの簡素化

他のものとは違うトレンドです。ビジュアル的なものでは全くありません。

業界には、プロダクトデザインの背後にあるプロセスの多くが非常に複雑になっていることに気付く人が増えています。それは、プロダクトデザイナーにとっても、クライアントにとっても、そしてほとんどの場合、デジタル商品そのものにとっても、悪いことです。

**大きな変化が求められています。**そして、ゆっくりと変化し始めていると信じています。少し前に戻ったり、業界全体を新鮮な目で見直したりする時期に来ていると強く思います。紛らわしいコンセプトや名前を考え直し、難しくて時間のかかるプロセスを再構築し、デザイナー志望の人たちがプロダクトデザインを学びやすいようにする時が来ているのです。

あなたが一番好きな／嫌いなトレンドはどれですか？コメントで教えてください！🤗

##翻訳協力
この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: [Diana Malewicz](https://medium.com/@dianamalewicz)(https://www.instagram.com/hype4academy/)
Original Article: [A guide of UI design trends for 2021 Part 1](https://www.instagram.com/p/CKD7HErgrrg/) & [Part 2](https://www.instagram.com/p/CKJPmFOgynJ/)
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。