みなさんこんにちは！デザイナーの古屋です。

今回はニューモーフィズムのデザインを、
XDで簡単に作成する方法についてご紹介いたします。

ニューモーフィズムとは

Neumorphism（ニューモーフィズム）とは、上図のように
シャドウで凹凸を表現したデザイン手法のことです。

要素と地面（背景）が離れているわけではなく、
平面から押し出されて（あるいは窪んで）いるような印象が特徴的です。

 

構成要素

先ほどのデザインはXDで作成したのですが、
その要素を一つ一つに分けると下図のようになります。

背景も含めてたったの3要素です！

 

作り方

背景色を作成する

長方形ツールで背景色を作成します。

凸部分を作成する

背景色と同じ色で凸部分を作成します。
今回は角丸の正方形にしました。

（見やすいように境界線をつけていますが、実際に作成する場合は不要です）

明暗部分を作成する

先ほど作成した角丸の正方形をcommand（Ctrl）+Dで同じ位置に2回複製します。

複製した二つの正方形のうち、一つに一番明るい部分の色を、
そしてもう一つに一番暗い部分の色を指定します。
今回は明るい部分を#FFFFFF、暗い部分の色を#CCCCCCにしました。

明るい色と暗い色の両方のレイヤーに対して、
「オブジェクトのぼかし」を設定します。

凸部分がいちばん手前にくるようにレイヤーを並べ替えます。

明るい色のレイヤーを凸部分よりもやや左上に、
そして暗い色のレイヤーを凸部分よりもやや右下に移動させます。

これで完成です！

 

まとめ

XDでニューモーフィズムのデザインを作成する方法を解説しました。

非常に繊細なデザインですので使いどころが難しそうですが、
簡単な手順で面白い表現ができますので活用してみたいですね！

これからも色々なデザイン手法を学んでいこうと思います。

それでは、また！