素朴でかわいいニューモーフィズムデザインを直感的な操作で簡単に作成できるNeumorphism.ioを使ってみました!
Neumorphism.io
Neumorphism.ioは、ニューモーフィズム独特のシャドウや凹凸感を直感的なスライダーで調節して作成できる無料のWEBツール。
作成したデザインはCSSコードをコピーできるようになっているので、そのまま貼り付ければニューモーフィズムデザインを簡単に再現できます。
Neumorphism.ioの使い方
![ニューモーフィズム](https://sukimanosukima.com/wp-content/uploads/2020/12/nm1.jpg)
画面右側のスライドを動かして作成していきます。
左側に出ているのが実際のオブジェクトの見え方です。
カラー
![ニューモーフィズム](https://sukimanosukima.com/wp-content/uploads/2020/12/mn2.jpg)
まずはPick a colorで色の変更
□をクリックするとカラーピッカー、コードで入力したい場合は左側の枠内にカラーコードを入力しましょう。
サイズ
![ニューモーフィズム サイズ](https://sukimanosukima.com/wp-content/uploads/2020/12/nm3.jpg)
Sizeは大きさの変更
スライダーで直感的に操作できます。スライドを動かすと右側にpx数も表示されます。
角丸の半径
![ニューモーフィズム 角丸](https://sukimanosukima.com/wp-content/uploads/2020/12/nm4.jpg)
Radiusは角丸の半径
角丸の半径は大きくなるほど円に近づき、小さくなるほど角がはっきりとした四角形になります。
シャドウの距離
![シャドウの距離](https://sukimanosukima.com/wp-content/uploads/2020/12/nm5.jpg)
Distanceはオブジェクトとシャドウの距離
ぼかしなどと連動するので単純な距離ではありませんが、数値が大きくなるほどシャドウが拡散されていきます。
数値が小さい方がはっきりとした凹凸が出ます。
シャドウの濃淡
![シャドウの濃淡](https://sukimanosukima.com/wp-content/uploads/2020/12/nm6.jpg)
Intensityはシャドウの濃淡
数値が大きくなるほどシャドウが濃くなり、数値が最小だとシャドウとオブジェクトの区別がなくなります。
シャドウのぼかし
![シャドウのぼかし](https://sukimanosukima.com/wp-content/uploads/2020/12/nm7.jpg)
Blurはシャドウのぼかし
数値が大きくなるほど淡いぼかしになります。
凹凸の形状
![凹凸の形状](https://sukimanosukima.com/wp-content/uploads/2020/12/nm8.jpg)
Shapeで凹凸の出方を決めます
4種類のアイコンで凹凸の形状を決めましょう。
作成したコードをコピー&ペースト
![コード作成](https://sukimanosukima.com/wp-content/uploads/2020/12/nm9.jpg)
すべての項目の調整が終わったら生成されたコードを、適応させたいCSSへコピー&ペーストで完成です。
Neumorphism.ioで生成したコードをベースにニューモーフィズムに慣れれば、アレンジも簡単にできるようになりますよ。