ニューモーフィズムCSS作成ツール「Neumorphism.io」

素朴でかわいいニューモーフィズムデザインを直感的な操作で簡単に作成できるNeumorphism.ioを使ってみました！

Neumorphism.io

Neumorphism.ioは、ニューモーフィズム独特のシャドウや凹凸感を直感的なスライダーで調節して作成できる無料のWEBツール。

作成したデザインはCSSコードをコピーできるようになっているので、そのまま貼り付ければニューモーフィズムデザインを簡単に再現できます。

画面右側のスライドを動かして作成していきます。

左側に出ているのが実際のオブジェクトの見え方です。

まずはPick a colorで色の変更

□をクリックするとカラーピッカー、コードで入力したい場合は左側の枠内にカラーコードを入力しましょう。

Sizeは大きさの変更

スライダーで直感的に操作できます。スライドを動かすと右側にpx数も表示されます。

Radiusは角丸の半径

角丸の半径は大きくなるほど円に近づき、小さくなるほど角がはっきりとした四角形になります。

Distanceはオブジェクトとシャドウの距離

ぼかしなどと連動するので単純な距離ではありませんが、数値が大きくなるほどシャドウが拡散されていきます。

数値が小さい方がはっきりとした凹凸が出ます。

Intensityはシャドウの濃淡

数値が大きくなるほどシャドウが濃くなり、数値が最小だとシャドウとオブジェクトの区別がなくなります。

Blurはシャドウのぼかし

数値が大きくなるほど淡いぼかしになります。

Shapeで凹凸の出方を決めます

４種類のアイコンで凹凸の形状を決めましょう。

すべての項目の調整が終わったら生成されたコードを、適応させたいCSSへコピー＆ペーストで完成です。

Neumorphism.ioで生成したコードをベースにニューモーフィズムに慣れれば、アレンジも簡単にできるようになりますよ。

楽天ブックス