Neumorphismについて調べてみた

はじめまして、エンジニアのyuiです。今回はニューモーフィズム（Neumorphism）というデザインについて調査＆考察した内容を記載しようと思います。

元々は私がWEB R&Dという勉強会でやろうとしている、Web動画プレイヤー作成のデザインとして採用したことが調査の発端です。
コーディングでの表現方法が気になったこと、ジェネレータが開発されコーディングが容易になっていたことから、今回使用するに至りました。

(WEB R&Dについてはこちら↓)

Neumorphismとは

元々2010年代に全盛だったスキューモフィズムから派生したデザインです。（New+Skeuomorphism）3次元としての表現が追加されており、柔らかなプラスチックの凹凸を想像させるグラデーションを使用し、物質を表現しています。

マテリアルデザインは背面から要素が浮いていますが、ニューモーフィズムは背面からの凹凸として要素が存在します。

引用画像：https://webdesign-trends.net/entry/11155

dribbbleの以下の投稿が発端で注目されたそうです。

Skeuomorph Mobile Banking

こちらのサイトにニューモーフィズムデザインがたくさん投稿されています。是非見てみて下さい。

デザインの長所・短所

ーUI/UXプロダクト感の演出
その柔らかなプラスチックの様な見た目から、現実に存在するプロダクトの様な印象を与えることができます。
フラットデザインの装飾を極限まで削ぎ落としたデザインと比較し、装飾を加え"もの"としての表現が追加されています。
Appleの初期プロダクトのUI/UXを想起させ、プロダクトの操作の楽しさを持たせられます。

現実にあるものに置き換えることでより親しみやすく、直観的な操作が可能です。Webサイトのマイクロインタラクションでイージングがかけられているのもその理由です。（現実世界の動きは連続している）
これこそ、このデザインが注目された理由の一つであると思います。
次にグラスモーフィズムという磨りガラスの様な質感のデザインが注目を集めているのですが、これも現実世界の物質を表現したデザインです。

ー可視性の欠如
Webアクセシビリティの一つとして可視性が挙げられます。
この点で言うと色のコントラストも小さく見辛いと言っても過言ではないでしょう。
またそれはこのデザインの魅力でもあります。

ベースのデザインに緩急が少ない分、前面に物を配置したり、色を変えることでパーツをより強調することができます。
また、前面の要素も3D要素を持っているとより印象的なアプローチができるでしょう。
dribbbleにはこのような前面にものを配置したデザインがたくさん公開されています。
製品のプロモーションに有効であると思いました。

引用画像：https://dribbble.com/shots/10565080-Adidas-Neumorphism-Landing-Page

コントラストが少ない場合、判別のしにくさをカバーする処理も必要になってきます。
凹凸でON/OFFを判別する様なボタンを作成する際は、凹凸以外のなんらかの変化やアクションを使用することで分かりやすくできます。
（色が変わる、発光する、なんらかのアニメーションが走る等）

※ダークモードでボタンが発光します。

また背景色より暗い色、明るい色で凹凸を表現しているので、ベースである背景色が完全な白、黒だと成り立ちません。

ー空間に対するコンテンツ受容量は小さい
余白にシャドーで緩急をつけるデザインのため、情報を詰め込みたい時など範囲に対し内容が多いデザインは合わないと思いました。
逆に少ない内容でも魅力的なデザインに仕上げることができるということです。

今後のプロトタイプに向けて

今回はニューモーフィズム（Neumorphism）というデザインの考察を紹介しました。
デザイナーとこの考察を元に議論し、Web動画プレイヤーのプロトタイプ制作を進めていきたいと思います。
この考察を活かして、開発も頑張ります！