UIデザイントレンド「Aurora UI」魅力と制作方法

すでに多くのアプリで使われているUIを、そのまま使うデザイナーはいないでしょう。ただのコピーではユーザーの印象に残らないからです。UIは芸術的・視覚的に進化しつづけています。

今回紹介するのは、2021年からのUIデザイントレンドである「Aurora UI（オーロラUI）」。名前のとおり、オーロラのような絶妙なグラデーションが特徴です。

ミニマリズムからモーフィズムへ

近年、Webデザインのトレンドは、ミニマリズムから要素を強調するニューモーフィズムや曇りガラスのエフェクトを使うグラスモーフィズムなどに移り変わりました。

マテリアルデザイン／モダンデザインなどの機能的なミニマリズムから、他の物質に似せるデザインが特徴のスキューモーフィズムに至るまで、Webデザインのトレンドは近年大きく揺れ動いています。

▲マテリアルデザインやモダンデザインが定着する前は、過度なミニマリズムが一時的に流行した（出典：UX Collective）

デザインのトレンドが戻るのには、およそ7年ほどかかると言われています。

上の図からも分かるように、2007年当時、初代iPhoneのUIデザインは木目調やステッチ入りのレザーでした。そこから2013年のiOS 7ではミニマルなデザインに変化し、2014年以降は現実世界に即した有機的なデザインに戻ってきています。

▲スキューモーフィズムを取り入れたアイコン（出典：UX Collective）

MicrosoftとAppleのすりガラスのような美しいデザインや、Mac OS Big Surで導入されたスキューモーフィズムを取り入れたアイコンは、おおむね肯定的に受け入れられています。

現代のユーザーは、マテリアルデザインのように機械的に作られたデザインではなく、魂がこもった工芸品のようなデザインを求めているようです。

▲色による差別化のみの過度なミニマリズムだけでは、製品が愛されるには不十分（出典：UX Collective）

上の図のようなAndroidの例は、実用的ではあるものの、感動するようなデザインではありません。いま求められているのは、均質なミニマリズムから脱却した、喜びを感じさせてくれるようなデザインです。

こうした新しいトレンドの原動力になっているのが、クラフト文化の復活です。家具や洋服についても、大量生産されたものではなく、生産者の想いを感じられるような製品の需要が高まっています。

▲どちらのダイニングテーブルも機能は同じだが、右のテーブルのほうが「手作り感」がある（出典：UX Collective）

Aurora UIの魅力

UIデザインにおける最大の問題点は、質感を重要視しすぎると機能性が損なわれる可能性がある、ということです。では、どうすれば機能性と有機的で美しいフォルムを両立できるのでしょうか。

それを実現できるのが、オーロラが由来の「Aurora UI」です。

▲出典：Mike Swigunski

機能に関わる部分はミニマルにし、有機的な部分だけで勝負するのが、すべての「モーフィズム」と、今回のAurora UIの基本原則です。この原則をきちんと守れば機能性を保てます。

▲重要な要素に適切な序列をつければ、ニューモーフィズムを適用しても使いやすさは変わらない（出典：UX Collective）

上記のように、カード部分にだけニューモーフィズムを使えば、コントラストは問題になりません。装飾的な背景とミニマルなUIコンポーネントの組み合わせは、機能性とアクセシビリティのバランスをうまく保ってくれます。

▲Big Surの背景。左側がグラスモーフィズム、右側が背景をぼかしたもの（出典：UX Collective）

グラスモーフィズムと相性抜群

背景の説明に入る前に強調しておきたいのが、グラスモーフィズムとの相性です。

AppleはグラスモーフィズムとAurora UIの相性がよいことを理解しており、両者を組み合わせた背景を採用しています。AppleとMicrosoftは新しいトレンドの開拓をリードしていますが、Aurora UIを取り入れているのはもはやこの2社だけではありません。

▲Aurora UIとグラスモーフィズムを取り入れている例（出典：UX Collective）

Aurora UIの制作方法

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

ここからは、Aurora UIを作るための3種類の方法を紹介します。

方法その1. 図形をぼかす

楕円形などの不規則な図形を作り、それをぼかして混ぜあわせると、不規則なグラデーションが作れます。

▲出典：UX Collective

方法その2. グラデーションを組み合わせる

放射状のグラデーションを組み合わせて、外縁にむかって不透明度を下げます。ハンドルをドラッグして最適な組み合わせを見つけましょう。透明な外縁部が重なれば重なるほど、色の混ざり具合が増します。

方法その1と組み合わせることも可能です。

▲出典：UX Collective

方法その3. 写真をぼかす

複数の色がやわらかく混ざりあっている写真があれば、その写真を最大限ぼかすことで、Aurora UIを簡単に作れます。

▲出典：UX Collective

仕上げ

あとはお好みのオーバーレイスタイル（グラスモーフィズムなど）を選ぶだけで、Aurora UIの完成です。

Aurora UI制作方法の解説動画

以下は、FigmaとSketchを使ってAurora UIを制作する方法について解説した動画の前編です。解説は英語ですが、後半からはソフトを使った実践的な内容になるため、英語が分からなくても参考になるはずです。

2021年はAurora UIを取り入れよう

Aurora UIやグラスモーフィズムを取り入れるときに注意したいのが、アクセシビリティです。ビジュアルにこだわりすぎてアクセシビリティが低くならないよう、重要な要素はミニマルでクリアにしておきましょう。

本記事を参考にすれば、簡単にAurora UIが取り入れられるはずです。ぜひ2021年はAurora UIにチャレンジしてみてください。

（執筆：Michal Malewicz　翻訳：Nakajima Asuka、編集：北村有　提供元：UX Collective）