PSDtoHUBSPOT News Blog

This Blog Template is created by www.psdtohubspot.com

Written by DMN事務局
on 4月 13, 2022

DMN Design Management Report #033

オーロラUI ー 2021年の新しいビジュアルトレンド
今年は、ぼかしと有機的なグラデーションの背景が流行る

 

Michal Malewicz

ミハエル・マレーヴィチ Michal Malewicz
20年以上の経験を持つデザイナー。フォーチュン100社の企業と、小規模でアジャイルなスタートアップ企業の両方のプロジェクトに携わる。


 

今回は、2021年の新しいビジュアルトレンドとなる「オーロラUI」について、ミハエル・マレーヴィチ氏によるMediumの記事をご紹介いたします。

 

Aurora UI — new visual trend for 2021

Blurred, organic gradient backgrounds are going to be a thing this year.

1*JsXjmliRd9PocIgIotIu_g

 

UIデザインは常に進化していますが、芸術性と視覚的な面でその進化は顕著です。今のデジタルプロダクトでは、ほとんどが、メジャーなIAパターンを繰り返し使っていますが、そこでは、UIとバリュープロポジションが最大の差別化の要因となっています。

他のいくつものアプリでうまく機能している登録の手順を、再設計しようとする人はいないでしょう。もちろん、微妙な調整はしますし、できればさらに研究したいところですが、結局はユーザーがすでに使っているものをコピーして使っています。

 

すべてのモーフィズム

ニューモーフィズムグラスモーフィズムも、それまでデザイントレンドの主流だったミニマリズムの反動として生まれました。その変化の勢いは、スキューモーフィズムからマテリアルデザインの機能的なミニマリズムやモダンデザインのトレンドへと、逆に振れたときと同じくらい大きなものでした。

1*cWBwzpuXNiwtuc5hRGZc8g

モダン/マテリアルデザインのアイデアが定着する前には、一時的にスーパーミニマリズムが流行ったがあまり浸透しなかった。2014年以降は元に戻っている。

デザインのトレンドが逆転するには、7年ほどかかると言われています(多少の誤差はありますが)。初代iPhone2007年)の木目調の背景やステッチ入りのレザーから、iOS 72013年)のミニマルなデザインへと移り変わり、2020年にはリアルワールドの有機的な着想が戻ってきました。

1*jNpDlFKZ4xH9BT8SF7vbaA

右端の3Dデザインは今はデスクトップOSでのみ展開。

3Dの復活に向けてのテストが続いている。

 

すりガラスのような美しさ(マイクロソフト、アップルともに)と、現実的な質感のアイコン(Mac OS Big Surのアップデート)の両方が採用され、ユーザーにはおおむね肯定的に受け入れられました。私たちが使う製品は、(マテリアルデザインのような)デザインシステムで作った実用的なホワイトラベル(注:ホワイトラベルとは、特定のブランド製品と同じ外観および使い勝手になるようカスタマイズし、そのブランドとして販売する方法ではなく、魂が宿った「手作り」のものを望んでいたのです。 

1*FYwMPe9ItG2Ldnv0oM-YRw

この誇張された例を見れば、色を変えるだけのミニマリズムでは、

製品を愛してもらうには不十分だとわかります。

 

ミニマリズムには(少しくらい極端になっても)特に悪いところはないのですが、すべてが混ざりあうと同じ一つの塊に見えてしまいます。デザインの多様性が失われて久しいですが、今、ユーザーは変化を求めています。上のAndroidの例のように、実用本位を極めるやりかたは退屈でしかありません。「それでいいんじゃない」「退屈でもいいよ」という人もいるでしょうが、いい生活とは、ToDoリストに書いたタスクをこなすようなものではありません。私たちは生活の喜びを感じたいのです。

これらの新しい、スキューモーフィックなデザイントレンドの原動力のひとつが、クラフトカルチャーの復活です。ミニマルで平凡なIKEAのテーブルではなく、たとえ不揃いでも、質感や生活感のある木製の家具を家に置きたいと考える人が増えています。財布やバッグ、洋服なども同様です。大量生産されたものではなく、「手作り」されたものを使いたいのです。

1*XazCeihZBr680daCbBCGLA

どちらのダイニングテーブルも機能的には一緒ですが、

食事をするなら右のテーブルという人がほとんどでしょう。

 

ようこそ、オーロラUI

しかしながら、インターフェイスの最大の問題点は、あまり「ファンキー」になりすぎると、機能性がなくなってしまうことです。では、機能的でありながら「有機的」で美しいフォルムを実現するにはどうしたらいいでしょうか。

その答えは、オーロラという、この背景タイプにふさわしいネーミングにあります。

 

0*aj5w4g5KgG8Sgn5D

Photo by Mike Swigunski on Unsplash

 

ボタンやフィールドやラベルなどのインターフェイスはそれほど変えなくても、背景を変えることで差別化することができます。これは、すべての「モーフィズム」と、ここで紹介する新しいオーロラスタイルの基本原則です。

機能的なものはすべてミニマムデザインにして、装飾的なところだけをいろいろ変えます。適切に行えば、実際のインターフェイス、つまり使うものがアクセシブルであれば、アクセシブルになるという利点もあります。もし微妙な背景のグラデーションに気づかない人がいても、それは装飾が伝わらなかっただけのことです。 

1*5NEcNkOyEDyB_u36fzcJqg

このニューモーフィックのカードが示すように、「重要な」要素がすべて適切な

階層構造を持っていれば、カード自体の見え方はそれほど重要ではない。

 

ニューモーフィズムはカードにだけ使わわれ、カードがきちんとした階層を持っていれば、アクセシブルになると私が考える理由もここにあります。テキストフィールドやボタンなどに使わなければ、コントラストの問題も起こらないでしょう。

「クリエイティブ」な背景と最小限のUIコンポーネントとを組み合わせることは、機能性とアクセシビリティのベストな折衷策です。ただし、すべてのアクセシブルなものにも言えることですが、適切に行なわれなければなりません。 

1*KgkuOzMnJr3wH_c_AVCsFg

Big Surのグラスモーフィズムの壁紙と、隣は壁紙をぼかしたバージョン。

 

グラスモーフィズムの認定済み

背景の話をする前に、このスタイルがグラスモーフィズムと特に相性が良いことをお伝えしておきます。アップルはそれを承知の上で、Big Surのメインの壁紙として、不規則なカラーのパターンに、ぼかしを少なくしたバージョンを作りました。

アップルとマイクロソフトは、このような新しいトレンドの開拓をリードしていますが、他の企業も負けてはいません。 

1*eQ7Is-OU4tXSdqJRMeHLlg

Stripeは、人気のあるメインストリーム企業が、オーロラバックグラウンドとグラスモーフィック要素の両方を使いながら、重要なUIをクリアで読みやすくしている良い例です。

 

オーロラUIの作り方

コントラスト、サイズ、タッチターゲットが十分であれば、既存のインターフェースコンポーネントをこのスタイルにすることができます。

この効果を出すためには、大きく分けて3つの方法があります。

 

1*RRtkmC5NPB_QHai7KchmUQ

ぼかし形状

不規則な(できれば楕円形の)図形を作り、それをぼかして重ね合わせることで、不規則なグラデーションを作る方法です。

 

1*kLu8aXXhRH0H1mlt3WMaLQ 

複数のグラデーションフィル

グラデーションフィル(放射状がベスト)の重ね合わせを、外縁に向かって不透明度を下げていく方法です。ハンドルをドラッグして、最適な組み合わせを見つけていきます。透明な外縁が重なれば重なるほど、色をブレンドできます。この方法と、最初のぼかし形状の方法を組み合わせて、さらにカスタムしたスタイルを作ることもできます。

 

1*G3zyfplATg_-ANIsjXNQLg 

写真をぼかすだけ

色がソフトに変化する写真があれば、その写真をぼかす(ぼかし値を最大にする)だけで、簡単に有機的なエフェクトを作ることができます。 

 

FigmaSketchを使ってこのエフェクトをで実現する方法について、2つのビデオを作成しました。最初のビデオがこちらです。

 

 

 

次のステップ

そして、お好みのオーバーレイスタイル(グラスモーフィズム、標準的な透明度、不透明度)を選択するだけで、見栄えのするAuroraスタイルのUIが完成します。

 

1*CUrnYfV0L9EHUFJ6oyfh2A

 

重要なインターフェースの要素をすべてアクセシブルにしておけば、あなたのUIは他から抜き出たものになるでしょう。少なくとも、周りの誰もが背景をぼかすようになって、デザイントレンドの振り子が再び振り戻るまでは。

 

でも、そうなるまでには、まだ23年(の実験期間)はかかるはずです。

 

・ ・ ・

 

この記事は、2021年3月に公開されました。英文はMediumで閲覧できます。

● Aurora UI — new visual trend for 2021

https://uxdesign.cc/aurora-ui-new-visual-trend-for-2021-c763a7daa7e2

(DMN編集部)

 

 

 

You may also like:

デザイン組織 デザインオペレーション デザイントレンド

DMN Report 023:2021年、デザイナーが知っておくべき7つのトレンド

DMN SPECIALセミナー: DMN Design Management Report #023   7 trends designers should know for 2021 from InVision [2021 PRODUCT...

デザインインパクト デザイン組織 デザイントレンド

DMN Report 044:デザインフォーエモーション

DMN Design Management Report #044 デザイン・フォー・エモーション     ダニエル・ラストン Daniel Ruston UX Lead @ Google. Brand + Product.   今回は、優...

デザイントレンド

DMN Report009:Insights in Design and Business During COVID-19

今回は、Remote Design Weekのセッションの中から「Insights in Design and Business During COVID-19」(コロナ禍におけるビジネスとデザインのインサイト)について、(株)mctの エ...