最近注目されているニューモーフィズムの繊細なデザインでつくられたフォーム -Neomorphic Form

ニューモーフィズム（Neuomorphism）が去年の暮れあたりから新しいスキューモーフィズムとして注目されています。その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。

このニューモーフィズムをCSSで実装したフォームのデモが公開されていたので、紹介します。

Neomorphic Form

• ニューモーフィズムとは
• ニューモーフィズムの繊細なデザインでつくられたフォーム
• ニューモーフィズムのデモ

ニューモーフィズムとは

ニューモーフィズム（Neuomorphism）という言葉は、UIのトレンドで「新しいスキューモーフィズム」としてJason Kelleyがコメントした「Neuomorphism?」がその起源です。

その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。ニューモーフィズムのスタイルは、dribbbleやBehanceなどでも多く見かけます。

かなり繊細なデザインなのでシャドウや、場合によっては背景とは少し違うカラーにした方がいいかもしれませんね。

ニューモーフィズムをデザインする時に知っておきたいポイント、CSSでの実装方法

ニューモーフィズムの繊細なデザインでつくられたフォーム

ニューモーフィズムのスタイルで実装されたフォームはコピペで簡単に利用できるので、試しに実装してみました。

※デモなので、ボタンをクリックしても動作はしません。

実装コードは、下記の通り。
HTMLは、非常にシンプルです。

CSSは、ニューモーフィズムの見た目を作るためには要素と背景を同じにして、あとはbox-shadowとborder-radiusを使用するくらいでしょうか。

ニューモーフィズムのデモ

実際のデモは、下記でご覧ください。

See the Pen
Neomorphic Form by Swapnil (@swapnet)
on CodePen.