#4.ニューモーフィズム

SNSでふと気になるUIデザインを発見しました。密度の高い液体のような表現で、シャドーを活用したグラフィックが印象的で目を惹きました。”ニューモーフィズム（Neumorphism）”というそうです。

こちらに記述しておりますのはあくまでも私個人の考え・感想です。本文に登場するサービスや施設、企業団体様とは全く関係ありません。御理解の方よろしくお願いいたします。

ニューモーフィズム（Neumorphism）とは

Dribbbleのある投稿に端を発して話題となったデザイン手法です。（中略）「Neumorphism」とは「New」と「Skeuomorphism」を組み合わせた造語だそうです。（AKABANE TECH BROG - Neumorphismというデザイン手法より引用）

というように、新しいスキューモーフィズムとして近年注目されています。

ニューモーフィズムについて語る前に、他のデザイン手法についても触れておきたいと思います。
それぞれ簡単に概要を載せました。

スキューモーフィズム

スキューモーフィズム（英: skeuomorphism）とは、他の物質に似せるために行うデザインや装飾を指す用語で、（中略）ユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われる。（スキューモーフィズム – Wikipediaより引用）

フラットデザイン

フラットデザインとは2012年ごろに広まったWebデザインのスタイルで、（中略）Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。（U-site - ニールセン博士のAlertboxより引用）

昨今のデジタルコンテンツはフラットデザインが採用されています。デジタルコンテンツが普及していき、デザインをユーザーに馴染みのあるものに例えずともユーザーがデザインを理解できるようになりました。

ニューモーフィズムのどこが気になった？

本題に戻ります。最も気になった点は要素感の無いところです。これまでのデザイン手法では背景と要素が分けられていましたが、ニューモーフィズムでは各デザイン要素が背景と同じカラーで作られています。画面に統一感が生まれアイコンが目立ちやすいなと思いました。

どこが良いと思った？

実用性や機能面を除いて考えると、とても美しいデザインだと思いました。画面に奥行きを感じカラーが映えます。シャドーによるアイコンの表現によって柔らかい印象を与え、グラデーションカラーとの相性が良く上品さがあります。

凹凸による表現で思わす触りたくなります。冒頭でも述べましたが、密度の高い液体から押し出されたような滑らかな曲線がそうさせるのでしょうか。

押し出された表現の他に背景を凹ませたような表現もあります。ぼこぼこした質感が伝わりそうでこちらも思わず触りたくなります。

ニューモーフィズムを取り入れたサイトを発見！！！

宮城県仙台市にあるIT企業、SRA東北のWebサイトにニューモーフィズムが取り入れられていました。要素の形と相まって、近未来を感じさせます。

気がついたこと

企業様のPC版とスマホ版を拝見しましたが、ニューモーフィズムはアイコンやボタンなど小さい要素に向いているような気がしました。背景と要素につながりがあるため、要素のオブジェクトもつながりがあるような、円形やカーブの大きい角丸が良いのかもしれません。また、各要素は背景と同じカラーや素材であると、ニューモーフィズムの特徴であるシャドーが活きてくるなと思いました。

参考文献

・スキューモーフィズム – Wikipedia
・U-site - ニールセン博士のAlertbox
・Mike Matas
・AKABANE TECH BROG - Neumorphismというデザイン手法
・Dribbble
・株式会社SRA東北