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

ニューモーフィズム WEBツール

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

Neumorphism.io

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

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

Neumorphism.ioの使い方

Neumorphism.io

ニューモーフィズム

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

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

カラー

ニューモーフィズム

まずはPick a colorで色の変更

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

サイズ

ニューモーフィズム サイズ

Sizeは大きさの変更

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

角丸の半径

ニューモーフィズム 角丸

Radiusは角丸の半径

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

シャドウの距離

シャドウの距離

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

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

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

シャドウの濃淡

シャドウの濃淡

Intensityはシャドウの濃淡

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

シャドウのぼかし

シャドウのぼかし

Blurはシャドウのぼかし

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

凹凸の形状

凹凸の形状

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

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

作成したコードをコピー&ペースト

コード作成

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

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