Neumorphism（ニューモーフィズム）をフォトショップ、イラストレーターでデザインしてCSSに実装する
Neumorphism（ニューモーフィズム）のUIをイラストレーター、フォトショップで作成する方法やCSSにUIとして実装する方法。サンプルなどをご紹介します
スキューモーフィズムをアレンジしたUI「ニューモーフィズム（Neumorphism）」が提案されています。
「スキューモーフィズム」から「フラット」「マテリアル」へとUIが変化していき「マテリアル」でも一部「スキューモーフィズム」が取り入れられています。
「ニューモーフィズム」はこの流れをさらに進めたUIデザインの可能性を提案するもので、実際にトレンドになるかは現状では分かっていません。
NeumorphismのUIを作る
下記のサンプルとなるベーシックなニューモーフィズムをイラストレーター、フォトショップを使って作成してみます。
イラストレーターで作成する方法
ドロップシャドウで簡単に作成できます。
背景色「#f0f5f7」と同じ色の楕円を作ります。
メニューの「効果」から「スタイライズ」の「ドロップシャドウ」を選択します。
ドロップシャドウを下記のように設定します。シャドウの色は、ベースカラーより少し暗い「ebf0f2」にしています。
楕円を背面にコピペします。
楕円をコピーしてメニューの「編集」から「背面へペースト」します。
手前の楕円を選択して「アピアランス」の「ドロップシャドウ」をクリックします。
表示されたシャドウプロパティを下記のようにします。色は「白」にします。
後は好きなアイコンを重ねれば「ニューモーフィズ」のUIデザインになります。
ドロップシャドウのを調整したい場合は「アピアランス」の「ドロップシャドウ」でいつでも調整できます。
フォトショップで作成する方法
背景色と同じシェイプを作成します。
シェイプにレイヤースタイルの「ドロップシャドウ」を２つ適用します。
後はアイコンを重ねると完成です。
ドロップシャドウの数値や描画モードなどは適宜調整してみてくださいね。
CSSでNeumorphismボタンを作る
CSSも影を作るプロパティ「ボックスシャドウ（box-shadow）」で簡単に作る事ができます。
See the Pen
Neumorphism by itti (@staff-pop)
on CodePen.
ボックスシャドウをもっと滑らかにすると更に良くなると思います。
NeumorphismのCSSジェネレーター
CSSのジェネレーターもあります。
Neumorphismのサンプル
Codepenに投稿されているニューモーフィズのサンプルです。
See the Pen
Neumorphism Button by Sebastian Piskaty (@sebastian-piskaty)
on CodePen.
See the Pen
Soft-UI Button Pattern by Tyler Scott Williams (@ogdenstudios)
on CodePen.
See the Pen
Neumorphism UI // Button by Cosimo Scarpa (@coswise)
on CodePen.
See the Pen
Payment App (Neumorphism) by Steven Brannum (@sdbrannum)
on CodePen.
See the Pen
Neumorphism Soft UI Music Player by mixj93 (@mixj93)
on CodePen.
See the Pen
A bit of neumorphism by Damir (@drovosek2703)
on CodePen.
See the Pen
Neumorphism inputs dark/light by Mika Gurrola (@MikaGurrola)
on CodePen.
ミニマムなデザインにはフィットしそうですね。
