前回クレイモーフィズムの作り方をご紹介いたしましたが、今回は「ニューモーフィズム」を、adobe illustrator・adobe Photoshop・adobeXD・Figma・サイトサービスそれぞれのアプリケーションで作ってみました。
ニューモフィズムとは
ニューモーフィズム（Neumorphism）とは、昔流行った、立体的で質感のあるリアルなデザイン「スキューモーフィズム」とシンプルでミニマムな「フラットデザイン」や「マテリアルデザイン」を組み合わせた新しいスタイルのデザインです。
平面的でシンプルなスタイルで、影や浮きを極力抑え、適度な色やモノクロを使い、読みやすいフォントと適切な余白を活用したデザインです。
参考サイト
https://www.digital-connect.co.jp/
ニューモーフィズムのメリットとデメリット
ニューモーフィズムを使ってデザインをする際には、メリットとデメリットを把握してから進めましょう。
さまざまなデザインにはそれを表現する上でメリットとデメリットがあります。
ニューモーフィズムデザインは少し特殊な処理を施しますので理解を深めてから進めましょう。
メリット
- 洗練されたデザイン
- 立体的なデザインによりリアルな印象を受ける
デメリット
- デザインが単調になる
- 白ベースになり他の色を入れにくくなる
- UIとしてはわかりにくい
ニューモフィズムの作り方
adobe Illustrator
STEP01
アートボード背景にグレーを引き、50px×50pxの正方形を描きます。
角をお好みの大きさにアールをかけてください。
STEP02
作成した正方形を「アビアランス」で選択し、下部にある「新規塗りを追加」をクリック。
「塗り」の複製を作ります。
STEP03
複製した塗りを「グレデーション」にします。
角度｜45°
グラデーション左｜#FFFFFF
グラデーション中央左｜#eaedf1
グラデーション中央右｜#e0e5eb
グラデーション右｜#cad3dd
に設定します。
左図のように、中央で分割するようなグラデーションが完成します。
STEP04
アビアランスでグラデーションをかけた塗りを選択し、「新規効果を追加」から、パス→パスのオフセットを選択します。
STEP05
パスのオフセット
オフセット｜3mm
角の形状｜マイター
角の比率｜4
に設定すると、左図のように作成した正方形の周りが広がります。
STEP06
アビアランスから同じ塗りを選択した状態で、「新規効果を追加」→ぼかし→ぼかし（ガウス）を選択します。
ぼかし効果
半径｜10px
大きくはみ出た部分にぼかしがかかりました。
STEP07
最後に、効果を加えた「塗り」とはじめに作った「塗り」の順番を逆にして完成です！
adobe Photoshop
STEP01
アートボード背景にグレーを引き、300px×300pxの正方形を描きます。
角をお好みの大きさにアールをかけてください。
STEP02
長方形のレイヤーをダブルクリックし、「レイヤースタイル」を開きます。
「ドロップシャドウ」を選択し、
・描画モード｜通常
・カラー｜#FFFFFF
・不透明度｜70%
・角度｜-45°
・距離｜11
・スプレット｜5
・サイズ｜25
に設定し「OK」をクリックすると、左上にうっすら白い影ができました。
STEP03
次に、「ドロップシャドウ」の右側にある「＋」をクリックし複製を作成します。
・描画モード｜通常
・カラー｜#3b3949
・不透明度｜15%
・角度｜135°
・距離｜9
・スプレット｜5
・サイズ｜25
に設定し「OK」をクリックすると、ニューモフィズムの完成です！
adobe XD
STEP01
正方形のBOXを2個作成し、
右｜300px×300px
左｜320px×320px
に設定します。
STEP02
正方形｜320px×320pxにグラデーションを設定します。
角度｜45°
グラデーション左上｜#FFFFFF
グラデーション左上中央｜#eaedf1
グラデーション右下中央｜#e0e5eb
グラデーション右下｜#cad3dd
設定します。
STEP03
正方形｜320px×320pxに「オブジェクトのぼかし」→「8」に設定します。
STEP04
正方形｜300px×300pxを上に重ね完成です！
Figma
Figmaプラグイン
実はFigmaにはプラグインで簡単に作成することができます。
STEP01
Figma上に正方形を作成します。
角にお好みのアールをかけてください。
STEP02
「neumofhism」というプラグインを実行し、作成したいスタイルを選択するだけ完成です！
Neumorphism.io
Neumorphism.io
さらに、こちらのサイトでは、以下項目を選択するだけで簡単にニューモフィズムが作れます。
・色を選ぶ
・サイズ
・半径
・距離
・強度
・ぼかし
・形
を調整するだけでニューモフィズムが完成します！
ただしこちらは画像データとして書き出すのではなく、CSSコードを出力するサイトになります。
まとめ
いかがでしたでしょうか。
仕組みがわかれば他のアプリケーションでも作成できそうです。
以下、それぞれのアプリケーションの結果を並べてみました。
手軽さはFigmaのプラグインやNeumorphism.ioですが、adobe illustratorがとても美しく感じます。
ただ対角線にシャドウをつけるだけではなく、しっかりとしたボタンの盛り上がりが表現できる手法で作成したいですね。
トラムでニューモーフィズムデザインを取り入れ制作したアプリがこちらです！
モザイク・ぼかし加工ならPOPORI ‐簡単に写真加工
app｜https://apps.apple.com/jp/app/id1547227723
GooglePlay｜https://play.google.com/store/apps/details?id=jp.co.cocoto.popori&pli=1
この記事を読んだ人は、この記事も読んでいます
