ニューモーフィズムをCSSで簡単に実装するのに便利なジェネレーター

マテリアルデザインやフラットデザインといったものが主流となっている中で、『ニューモーフィズム』といったデザインが注目を集め始めているのはご存知でしょうか？

デザインの世界も表現方法の流行りがあり、わかりやすいところで言えばスマートフォン上のアプリアイコンのデザインに採用されることが多いです。

インスタグラムでも過去に使われていた馴染みあるデザインのスキューモーフィズムが、急に派手なフラットデザインに変わったことは記憶に新しいです。

他のアプリアイコンでもスキューモーフィズム→フラットデザインの流れが採用されていることが多かったですが、現在はフラットデザインがメインになっているような気がします。

 

当記事のアイキャッチ画像で使っているニューモーフィズはフォトショップで作ったものですが、『CSSでウェブに実装したい場合どうするのか』を紹介する記事を書いていきます。

 

なおニューモーフィズムについてわかりやすい説明が、以下の記事に記載されていたので表現の参考にさせていただいております。

 

ニューモーフィズムをCSSでウェブに実装する方法

CSSが得意な方はおそらく自分で解決できるとは思いますが、苦手な方や未経験の方は実装することすら困難なのではないでしょうか。

CSSでデザインするためにはそれなりの知識が必要になります。ただ便利な世の中になっていて、誰でもニューモーフィズムを実装できるようにしてくれている親切な方が存在しています。

苦手な人もそうでない人も、以下で紹介するニューモーフィズムジェネレーターでCSSをコーディングしていただければ簡単にウェブで実装できるようになるのでぜひ。

neumorphic.design

 

「neumorphic.design」は直感的に扱いやすいUIになっていて、Presetsの中からおおよそ希望の〈色〉〈形〉〈凸凹〉を選択するだけでニューモーフィズムのCSSが作成できます。

色や形を決めたら［Next］を押してOptionsを表示させます。

 

 

Optionsに切り替わったら先程のニューモーフィズムの細かい調整ができるのでお好みのデザインにしましょう。

下部の枠内の［copy all］を押すと出力されたCSSが自動的にデバイスにコピーされるのであとはスタイルシートに適切に書き込めばOKです。

 

 CSS
background: #EEF0F4;
border-radius: 15%;
box-shadow: inset 7.21px 7.21px 15px #E2E4E8, inset -7.21px -7.21px 15px #FAFCFF;

なお、コピー出来たか出来ていないかは表示されないのでテキストエディターに貼り付けて確認する必要があります。

neumorphism.io

 

「neumorphism.io」も直感的な操作で好きなようにニューモーフィズムを作ることが出来ます。

neumorphic.designのようなプリセットデザインはないですが、全てを確認しながら作ることができるので操作の問題はないと思います。

 

 

neumorphic.designと調整できる項目もほぼ同じなので、お好きな方で始めてるといいと思います。

違いは凹凸や窪み方をビジュアルで確認できるところで、この部分のわかりやすさはありがたいですね。

 

あとは表示されたCSSを［COPY］を押すと〈Copied to Cripboard!〉と表示されるのでテキストエディター等に貼り付けて保管してください。

 

以上が簡単に作れるニューモーフィズムのCSSジェネレーターの紹介でした。

どちらのジェネレーターも直感的で非常に使いやすいものなので、自分でCSSを作れない人はぜひブックマークしておくようにしましょう。