【Webデザイン】シンプルおしゃれな”ニューモーフィズム”とは？？

ブログ - 2021-10-21 10:56:00

【Webデザイン】シンプルおしゃれな”ニューモーフィズム”とは？？

Posted by

江口史和里
Shiori Eguchi

いいね♡35

みなさん、こんにちは！

前回に引き続き、Webデザインについて調べていたところ

”ニューモーフィズム”という聞き慣れない言葉。

New（新しい）＋Skeumorphism（スキューモーフィズム）

＝Neumorphism（ニューモーフィズム）

....スキューモーフィズムとはなんでしょうか？？

スキューモーフィズム（英: skeuomorphism）またはリッチデザイン（英: Rich Design）とは、他の物質に似せるために行うデザインや装飾を指す用語である。たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる。

(Wikipediaより)

なんとなくイメージしてみるとするならば、

iPhoneのアプリアイコンでしょうか。

昔のOSのアプリアイコンでは、リアルで立体的なデザイン（スキューモーフィズム）に対し

最近は、フラットデザインが使用されているものが多いです。

スキューモーフィズム・フラットデザイン、と出てきて

そして二つを掛け合わせた”ニューモーフィズム”と移り変わってきているようですね。

画像右のinstagramアイコンも、フラットではあるけどちょっと立体的。

実際にニューモーフィズムでデザインをつくってみました。

See the Pen <a href="https://codepen.io/shiori_peacsmind/pen/XWaKwow"> Neumorphism</a> by shiori (<a href="https://codepen.io/shiori_peacsmind">@shiori_peacsmind</a>) on <a href="https://codepen.io">CodePen</a>.

めちゃめちゃ便利なニューモーフィズムサービス☞☞☞　https://neumorphism.io/

マテリアルデザインとは違い、

ひとつの紙(レイヤー)が膨らんでいたりへこんでいるように見えるのが特徴。

どのように表現しているかというと、2種類のドロップシャドウ(影)をつけているためです。

影をぼかさずにくっきりさせるとこう。

意外と単純ですが・・・

影の色などを良い感じにするのが難しい・・。

シャドウの入れ方一つで、雰囲気ががらっと変わるのが不思議ですね。

以下おまけ。

ニューモーフィズム的・ボタン要素も作ってみました。※PC推奨

See the Pen <a href="https://codepen.io/shiori_peacsmind/pen/xxLOozg"> Neumorphism hover&click</a> by shiori (<a href="https://codepen.io/shiori_peacsmind">@shiori_peacsmind</a>) on <a href="https://codepen.io">CodePen</a>.

マウスポインタを上にのせたり、クリックしてみてくださいね！

いいね♡35

Posted by Shiori Eguchi

<Remote>WEBコーダー/クリエイター江口史和里