2021年UIトレンド、グラスモーフィズム

https://dribbble.com/tags/glassmorphism

毎年、違うUIトレンドが人気になります。ご存知ですか？

去年ニューモーフィズムの辺りが流行になっていましたが、あまりデザイン業界を乗っ取ることはありませんでした。この表現方法が当たるあらゆる利便性の問題が指摘されました。お陰で、当年における利便性問題に対する認識が高まったでしょう。

勿論、幾つかのアプリや商品はこの表現方法で作られましたが、最も目ぼしいのは、サムスンの広告で広範な使用です。商品の全体ではなく、もっと小さな要素が、この表現方法を控えめに使えば成功できるという理論を証明します。

グラスモーフィズム

今近くには新たな表現方法が登場して、人気を集めています。ニューモーフィズムは飛び出た表面に似せるものですが、この新しいトレンドはもっと階層的です。最も決定的な特徴は、透明性、暈した透明性を強調する鮮やかな色彩、半透明の物体での精緻な枠です。

見通すことができる事とは、使い手が界面での階層と奥深さを把握することができると意味します。硝子のように、単にどの層がどの上にあるかを見定めます。

その硝子らしい見た目によって、グラスモーフィズム。

由来

背景の暈しは2013年にiOS7で初めて一般に紹介されました。かなり急進的な変化でしたが、超細い書体と醜いアイコンに巡る問題があって、あまり論争されなかった変化の一つでした。人々はそれを好んだらしいです。

アイコンがパネルの下に消えて暈けていくのがよく見えて、通知を引っ張るのが一興の一つになりました。

トレンドの増強

アップルはそれから当社のモバイルOSでは暈し硝子の効果を激減しましたが、最近マックOSビッグサーでは透明暈けを連れ戻しました。勿論、設定で効果を完全に消すことが出来ます。

マイクロソフトの流暢設計体系（フルエントデザインシステム）もこの効果で強く行きました。当社はこの特定の要素をアクリル素材と呼んで、当社の設計体系の肝心な部分の一つとして紹介しました。

「アクリルは半透明な生地を作るブラッシュの種類です。奥深さを加えて、視覚的階層の定着を手伝う為に、アクリルをアプリの表面に応用できます」マイクロソフト流暢設計体系。

さあ、この効果を出す為に

効果自体が結構簡単ですが、しかし幾つかの事項を考慮するのです。最初に、どのカード型設計と同様に、物体が我々に近ければ近くほど、光を引き寄せます。この場合ではより透明になると意味します。

この効果全体の土台は影、透明性、背景の暈しの組み合わせから出来ています。この表現方法は一枚、または複数の透明の層しか使えませんが、しかし最低二段階の半透明性が鮮やかな背景に表示するときに最も明確に見えます。

正しい透明性の設定仕方

全体の形のではなく、塗りだけを透明にすることを覚えるのが重要です。大抵の設計ツールは塗りが十割で物体の透明性が低いと単に背景の暈しを消すしかありません。

正しい背景の選定仕方

背景はこの効果が輝くに肝心な役割を果たします。単純や単調すぎてはいけません、さもなければ効果が見えません。細かすぎるのもなりません。

これがなぜアップルは色とりどりの背景をマックOSビッグサーの初期壁紙として選んだかの理由かもしれません。背景を選ぶとき、実際に硝子効果が見えるように必ず色味の違いが十分あること。

仕上げ

最後にやってみる事としてはある程度の透明性で1pの内枠を図形に加えること。硝子枠を真似て図形を背景からより目立つことが出来ます。試行錯誤です。暈した背景のようなこの表現方法の要素は今となって数年ありながら、今や人気を集めているので、まだまだ格好良くて創造的な効果を探るには沢山あります

利便性

ニューモーフィズムのように、この表現方法は恐らく、例えばマテリアルデザインの程に、利便性が良いことはないでしょう。ネウモーフィズムからの主な規則もここで適応します。機能的な階層があれば、画面上の要素は背景無しでもうまく働くはずです。それで視覚的問題のある人にもUIを把握できることを保証します。

それも、その透明性効果があくまで装飾的であって体験の肝心な部分ではないことだけに限ります。釦などに使うには避けるべきですが、カード背景に使っても大丈夫です。

とにかく階層を定めるのにカード内が十分な対照と正しい間隔を確かめること。

アップルによるこの表現方法のビッグサーへの紹介は、これからこの表現方法が倣われるのに確実な方法です。全ての界面を乗っ取ることはないでしょうが、今より少しでも人気になるでしょう。

我々は、人間がトレンドに飽きやすいように、数年毎に振り子が揺れます。一時に超単純で、ほぼ平らな界面を使いましたが、してみるともっと色とりどりで、もっと階層的になり始めました。

設計者として我々はあらゆる可能で、創造的な商品の作り方を探る必要があります。限った場合では控え目の「硝子」の使用が商品を使い手により格好良くしてより魅力的にします。

何と言っても、設計は新たな道を探って、やることを楽しんで、実に格別なものを提供するように、楽しいことであるべきです。

また向こう側で！