DMN Design Management Report #033
オーロラUI ー 2021年の新しいビジュアルトレンド
今年は、ぼかしと有機的なグラデーションの背景が流行る
ミハエル・マレーヴィチ 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.
UIデザインは常に進化していますが、芸術性と視覚的な面でその進化は顕著です。今のデジタルプロダクトでは、ほとんどが、メジャーなIAパターンを繰り返し使っていますが、そこでは、UIとバリュープロポジションが最大の差別化の要因となっています。
他のいくつものアプリでうまく機能している登録の手順を、再設計しようとする人はいないでしょう。もちろん、微妙な調整はしますし、できればさらに研究したいところですが、結局はユーザーがすでに使っているものをコピーして使っています。
すべてのモーフィズム
ニューモーフィズムもグラスモーフィズムも、それまでデザイントレンドの主流だったミニマリズムの反動として生まれました。その変化の勢いは、スキューモーフィズムからマテリアルデザインの機能的なミニマリズムやモダンデザインのトレンドへと、逆に振れたときと同じくらい大きなものでした。
モダン／マテリアルデザインのアイデアが定着する前には、一時的にスーパーミニマリズムが流行ったがあまり浸透しなかった。2014年以降は元に戻っている。
デザインのトレンドが逆転するには、7年ほどかかると言われています（多少の誤差はありますが）。初代iPhone（2007年）の木目調の背景やステッチ入りのレザーから、iOS 7（2013年）のミニマルなデザインへと移り変わり、2020年にはリアルワールドの有機的な着想が戻ってきました。
右端の3Dデザインは今はデスクトップOSでのみ展開。
3Dの復活に向けてのテストが続いている。
すりガラスのような美しさ（マイクロソフト、アップルともに）と、現実的な質感のアイコン（Mac OS Big Surのアップデート）の両方が採用され、ユーザーにはおおむね肯定的に受け入れられました。私たちが使う製品は、（マテリアルデザインのような）デザインシステムで作った実用的なホワイトラベル（注：ホワイトラベルとは、特定のブランド製品と同じ外観および使い勝手になるようカスタマイズし、そのブランドとして販売する方法）ではなく、魂が宿った「手作り」のものを望んでいたのです。
この誇張された例を見れば、色を変えるだけのミニマリズムでは、
製品を愛してもらうには不十分だとわかります。
ミニマリズムには（少しくらい極端になっても）特に悪いところはないのですが、すべてが混ざりあうと同じ一つの塊に見えてしまいます。デザインの多様性が失われて久しいですが、今、ユーザーは変化を求めています。上のAndroidの例のように、実用本位を極めるやりかたは退屈でしかありません。「それでいいんじゃない」「退屈でもいいよ」という人もいるでしょうが、いい生活とは、ToDoリストに書いたタスクをこなすようなものではありません。私たちは生活の喜びを感じたいのです。
これらの新しい、スキューモーフィックなデザイントレンドの原動力のひとつが、クラフトカルチャーの復活です。ミニマルで平凡なIKEAのテーブルではなく、たとえ不揃いでも、質感や生活感のある木製の家具を家に置きたいと考える人が増えています。財布やバッグ、洋服なども同様です。大量生産されたものではなく、「手作り」されたものを使いたいのです。
どちらのダイニングテーブルも機能的には一緒ですが、
食事をするなら右のテーブルという人がほとんどでしょう。
ようこそ、オーロラＵＩ
しかしながら、インターフェイスの最大の問題点は、あまり「ファンキー」になりすぎると、機能性がなくなってしまうことです。では、機能的でありながら「有機的」で美しいフォルムを実現するにはどうしたらいいでしょうか。
その答えは、オーロラという、この背景タイプにふさわしいネーミングにあります。
Photo by Mike Swigunski on Unsplash
ボタンやフィールドやラベルなどのインターフェイスはそれほど変えなくても、背景を変えることで差別化することができます。これは、すべての「モーフィズム」と、ここで紹介する新しいオーロラスタイルの基本原則です。
機能的なものはすべてミニマムデザインにして、装飾的なところだけをいろいろ変えます。適切に行えば、実際のインターフェイス、つまり使うものがアクセシブルであれば、アクセシブルになるという利点もあります。もし微妙な背景のグラデーションに気づかない人がいても、それは装飾が伝わらなかっただけのことです。
このニューモーフィックのカードが示すように、「重要な」要素がすべて適切な
階層構造を持っていれば、カード自体の見え方はそれほど重要ではない。
ニューモーフィズムはカードにだけ使わわれ、カードがきちんとした階層を持っていれば、アクセシブルになると私が考える理由もここにあります。テキストフィールドやボタンなどに使わなければ、コントラストの問題も起こらないでしょう。
「クリエイティブ」な背景と最小限のUIコンポーネントとを組み合わせることは、機能性とアクセシビリティのベストな折衷策です。ただし、すべてのアクセシブルなものにも言えることですが、適切に行なわれなければなりません。
Big Surのグラスモーフィズムの壁紙と、隣は壁紙をぼかしたバージョン。
グラスモーフィズムの認定済み
背景の話をする前に、このスタイルがグラスモーフィズムと特に相性が良いことをお伝えしておきます。アップルはそれを承知の上で、Big Surのメインの壁紙として、不規則なカラーのパターンに、ぼかしを少なくしたバージョンを作りました。
アップルとマイクロソフトは、このような新しいトレンドの開拓をリードしていますが、他の企業も負けてはいません。
Stripeは、人気のあるメインストリーム企業が、オーロラバックグラウンドとグラスモーフィック要素の両方を使いながら、重要なUIをクリアで読みやすくしている良い例です。
オーロラUIの作り方
コントラスト、サイズ、タッチターゲットが十分であれば、既存のインターフェースコンポーネントをこのスタイルにすることができます。
この効果を出すためには、大きく分けて3つの方法があります。
ぼかし形状
不規則な（できれば楕円形の）図形を作り、それをぼかして重ね合わせることで、不規則なグラデーションを作る方法です。
複数のグラデーションフィル
グラデーションフィル（放射状がベスト）の重ね合わせを、外縁に向かって不透明度を下げていく方法です。ハンドルをドラッグして、最適な組み合わせを見つけていきます。透明な外縁が重なれば重なるほど、色をブレンドできます。この方法と、最初のぼかし形状の方法を組み合わせて、さらにカスタムしたスタイルを作ることもできます。
写真をぼかすだけ
色がソフトに変化する写真があれば、その写真をぼかす（ぼかし値を最大にする）だけで、簡単に有機的なエフェクトを作ることができます。
FigmaとSketchを使ってこのエフェクトをで実現する方法について、2つのビデオを作成しました。最初のビデオがこちらです。
次のステップ
そして、お好みのオーバーレイスタイル（グラスモーフィズム、標準的な透明度、不透明度）を選択するだけで、見栄えのするAuroraスタイルのUIが完成します。
重要なインターフェースの要素をすべてアクセシブルにしておけば、あなたのUIは他から抜き出たものになるでしょう。少なくとも、周りの誰もが背景をぼかすようになって、デザイントレンドの振り子が再び振り戻るまでは。
でも、そうなるまでには、まだ2、3年（の実験期間）はかかるはずです。
・ ・ ・
この記事は、2021年3月に公開されました。英文はMediumで閲覧できます。
● Aurora UI — new visual trend for 2021
https://uxdesign.cc/aurora-ui-new-visual-trend-for-2021-c763a7daa7e2
（DMN編集部）
