"Neumorphism" なるUIデザインのトレンド
「新しいスキューモーフィズム」を謳う "Neumorphism" というデザインが最近一部で提唱されているようです。
Skeuomorph Mobile Banking by Alexander Plyuto
この例のようにボタンやカードなどの要素が凹凸で表現されていて、明るい影（光）が落とされているのが特徴です。それによってボーダーや塗りを使わずに要素の形状を表します。
Neumorphism in user interfaces
単色の物体に凹凸が付けられているように見えるビジュアルは、ディーター・ラムスがBRAUNで手掛けたブロダクトや初期iPodのデザインをちょっと想起させますね。
端的に言えば「スキューモーフィズムに半分回帰した」ようなUIデザインです。
The Book Of Life - "Dieter Rams"
ルール
こちらに解説記事がありますが、次のようなルールがあるように見えます。
・要素に明暗2色のドロップシャドウを付ける
・明るいシャドウ（光）は左上に、暗いシャドウは右下に落とす
・要素の色は要素を配置している背景色と同じにする
・凸型（convex）と凹型（concave）がある
・凹型はインナーシャドウを使い、明暗を逆にする
要素は浮いていない
フラットデザインやMaterial Designでは、ドロップシャドウのある要素は厚みゼロの板が背景の上に浮いているものとしてデザインされます。
一方、Neumorphismの要素は背景の一部が手前に突き出ている（または奥へ窪んでいる）ものとして扱うようです。そのメタファーの合理性を保つために、基本的に要素の色は背景色と同じにします。
背景から突き出ているなら、要素には側面の厚みがあることになります。
Blenderで「背景から突き出ているオブジェクト」を作り、左上に光源を置いてみました。オブジェクトの左側がオブジェクトの左側面に反射した光によって明るくなっているのが分かります。Neumorphismのビジュアルはおそらくこの状況を疑似的に再現したものなのだと思います。だからそれなりに自然に感じられるのでしょう。
（補足）
シャドウで表現されているのは素材を高圧成形してできたRだという解釈もあるようです。確かにそのように見える例もありますね。自分は押せる・沈むインタラクションがある前提で考えていたため、成形とは見ていませんでした。Neumorphismにはオフィシャルなルールがあるわけではないので、各デザイナーの意思でロジックを定めればよいのではないでしょうか。
どこが良いの？
「新鮮でいい感じだから」という理由が挙げられているみたいです笑
メリットを想像してみましたが、たとえばテキストやアイコンだけを使ってフラットに組んだモバイルアプリのUIは、大型のスクリーンだと間延びしたり、少し物足りない感じになってしまう場合もあると思います。Neumorphismはそれをほどほどに埋め合わせられるかもしれません。
また、要素をボーダーで囲ったり、すべての辺に黒のシャドウを落としたりするよりもデザインがうるさくならず、すっきりした印象になることも利点かもしれません。
良くない点は？
UIのわかりやすさにはほとんど寄与しないと思います。
たとえば突き出した要素を入れ子にすると、どこを押せるのかや要素の包含関係が不明瞭なUIになりがちです。dribbbleに投稿されている作品にもあまり褒められないようなものが多数見つかります。
解説記事でも指摘されていますが、凹凸の状態を利用してトグルボタンを作る場合、シャドウの凹凸だけでユーザーにON/OFFを視認させるのは相当つらいと思います。カバー画像のようにボタンのアイコンもソリッド/アウトラインを用意して、併せて切り替えるようにする必要がありそうです。
ただ、それだと「じゃあシャドウは要らないじゃん」という矛盾をはらむことになるんですよね。
トレンドなの？ 流行るの？
よくわかりません。dribbbleには数百点の作品が投稿されていますが、実戦投入されている例を自分は知りません。
表現手法にすぎないので、既存のデザインシステムを置き換えるようなものにはならないでしょう。スキューモーフィックな要素をフラットなデザインに部分的に組み合わせたいときに、この表現を取り入れるのは可能だと思います。
React Nativeのコンポーネントがすでにあったり、Sketchのサンプルも配布されているので、試してみてはどうでしょうか。
（追記）
UIKitで実装できるライブラリを試作してみたのでご紹介します。
https://qiita.com/hirokimu/items/d16a332f46e1a4e84479
https://github.com/hirokimu/EMTNeumorphicView
参考
この記事が気に入ったらサポートをしてみませんか？