こんにちは、ヒキノです。
お前、誰だよって方はこちら👇
最近のWebサイトでは、Googleが提唱しているマテリアルデザインが主流になっている中、Neumorphism(ニューモーフィズム)って聞いたことあるでしょうか？
僕も、たまたまTwitterを見ていたら「今後のWebデザイントレンド〇〇選！！」みたいな記事で初めて目にしたのですが、今までにない斬新なイメージと未来感のあるようなデザインだなと思いました。ちなみに、僕のポートフォリオサイトにも取り入れています(笑)
今回は、そんなNewmorphism(ニューモーフィズム)をAdobe XDで簡単にデザインする方法を紹介します！
・Neumorphism(ニューモーフィズム)とは？
Neumorphism(ニューモーフィズム)とは、New + Skeuomorphism(スキューモーフィズム)から由来しているそうで、上の写真のように2つの異なる色のドロップシャドウをつけることで要素に凹凸を表現している点が特徴的です。
下の写真のスキューモーフィズムのようなリアリティさも出しつつ、最近の主流であるマテリアルデザインらしさも感じられますね。
・ニューモーフィズムのメリット・デメリット
そんな斬新なスタイルなNeumorphism(ニューモーフィズム)の評価が気になり、僕の方で調べてまとめてみました。
メリット
- デザインが斬新で近代的
- 実装コストが低い
- ダークモードにも対応しやすい
デメリット
- 背景と同色の為、UIデザイン的に分かりにくい
- 効率的なコーディングは難しい(?)
・XDで実装してみよう！
①3つのカラーのオブジェクトを用意する
・ベースカラー (e.g. #f7f7f7)
・ベースカラーより明るい色 (e.g. #ffffff)
・ベースカラーより暗い色 (e.g. #cccccc)
②明るい色と暗い色にぼかしをつけて、それぞれずらす
・明るい色・暗い色の2色に右下の「オブジェクトのぼかし」を10px前後つける。
・明るい色はX軸・Y軸共に-10px前後、暗い色はX軸・Y軸共に10px前後移動させる。
以上、XDで簡単にニューモーフィズムを実装する方法をお伝えしました！
是非チャレンジして、デザインの引き出しの一つにしてください！！
ではまた！
