Neumorphism（ニューモーフィズム）とは？CSS作成ツールも紹介

昨年2020年に、Neumorphism（ニューモーフィズム）というUIデザインが流行りそうと噂されていたようです。（今頃ですが...）

そこで、本記事ではNeumorphism（ニューモーフィズム）とは？からCSSをコピペで簡単に実装できるスニペットツールを紹介したいと思います。

ニューモーフィズムがどんなものか調べてみましたので、備忘録として残しておきます。

本記事が参考になりましたら幸いです。

ニューモーフィズムとは？

まずは、ニューモーフィズム（Neumorphism）とは？についてご紹介します。

ニューモーフィズムは、要素を押し出されたり窪んだりメリハリをつけることで、浮き出てみえ”３D感”を感じられるデザイン手法です。

影と光を用いることで凸凹とした見た目になるため、パッとみてスタイリッシュな印象を受けます。

ちなみに、ニューモーフィズムは、「ニュー」と「スキューモーフィズム」を組み合わせて作られた造語のようです。

スキューモーフィズムとは、他の物質に似せるために行うデザインや装飾のこと。

一見すると、マテリアルデザインと似ています。しかし、ニューモーフィズムにはシャドウの付け方にルールがあります。

続いてニューモーフィズムのデザインルールについて紹介します！

結論、ニューモーフィズムのデザインルールは

上記のルールでデザインを作成してく感じです。これで、凸型のニューモーフィズムができちゃいます。

また、反対に凹型を作りたい時は、光源の位置を反転させてインナーシャドウをつけることで作成できます。

この２つのルールを守ることで、ニューモーフィズムのデザインを作成ができます。

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

『マテリアルデザインとの違いは？』についてですが、マテリアルデザインは要素を重ねて奥行きを表現する手法です。

それに対して、ニューモーフィズムはシャドウで凸凹を表現することで奥行きがでて、より現実的なデザインになります。

なので、イメージとしましてニューモーフィズムは、１枚の紙に１つ１つの要素が突き出てたり・窪んで見えるようなデザインになることです。

『ニューモーフィズムのシャドウデザインを作るのが難しそう...』と感じますよね。

ただ、以下アプリケーションツールを使用することで、ニューモーフィズム用のCSSコードを簡単に生成できます。

※クリック後、外部サイトへ飛びます

使い方として、右のスライダーを左右に動かして角丸や凸凹の度合いを調整できます。

スライダーを動かすとCSSボックスのプロパティの値が自動で変わります！

また、ボタンの周りにある三角で光のあたる方向を変更でき、「Shape」で凸凹の種類を選択できます。

一通りの調整が終われば、生成されたCSSをコピー&ペーストするだけです！

いかがでしたか？

今回は、ニューモオーフィズムについて紹介しました。

2010年にフラットデザインが主流になってから、こういった立体的なUIデザインを見る機会が少なくなりました。

2020年に注目されてからニューモオーフィズムのデザインが今後流行るのか？引き続き動向を注視してみたいと思います。

最後に、ニューモオーフィズムの参考デザインを集めたリンクを貼っておきます。

※クリック後、外部サイトへ飛びます

ここまで読んでいただき、ありがとうございました。