ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

Neumorphism(ニューモーフィズム)をフォトショップ、イラストレーターでデザインしてCSSに実装する

Neumorphism(ニューモーフィズム)のUIをイラストレーター、フォトショップで作成する方法やCSSにUIとして実装する方法。サンプルなどをご紹介します

スキューモーフィズムをアレンジしたUI「ニューモーフィズム(Neumorphism)」が提案されています。

「スキューモーフィズム」から「フラット」「マテリアル」へとUIが変化していき「マテリアル」でも一部「スキューモーフィズム」が取り入れられています。

「ニューモーフィズム」はこの流れをさらに進めたUIデザインの可能性を提案するもので、実際にトレンドになるかは現状では分かっていません。

NeumorphismのUIを作る

下記のサンプルとなるベーシックなニューモーフィズムをイラストレーター、フォトショップを使って作成してみます。

Neumorphism

イラストレーターで作成する方法

ドロップシャドウで簡単に作成できます。

背景色「#f0f5f7」と同じ色の楕円を作ります。

メニューの「効果」から「スタイライズ」の「ドロップシャドウ」を選択します。

ドロップシャドウを下記のように設定します。シャドウの色は、ベースカラーより少し暗い「ebf0f2」にしています。

楕円を背面にコピペします。
楕円をコピーしてメニューの「編集」から「背面へペースト」します。

手前の楕円を選択して「アピアランス」の「ドロップシャドウ」をクリックします。
表示されたシャドウプロパティを下記のようにします。色は「白」にします。

後は好きなアイコンを重ねれば「ニューモーフィズ」のUIデザインになります。

ドロップシャドウのを調整したい場合は「アピアランス」の「ドロップシャドウ」でいつでも調整できます。

フォトショップで作成する方法

背景色と同じシェイプを作成します。

シェイプにレイヤースタイルの「ドロップシャドウ」を2つ適用します。

後はアイコンを重ねると完成です。

ドロップシャドウの数値や描画モードなどは適宜調整してみてくださいね。

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.

ミニマムなデザインにはフィットしそうですね。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ