XDで簡単にニューモーフィズム


2020年3月13日

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

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

ニューモーフィズムとは

1

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

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

 

構成要素

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

2

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

 

作り方

背景色を作成する

3

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

凸部分を作成する

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

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

5

明暗部分を作成する

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

3

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

4

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

5

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

6

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

7

これで完成です!

1

 

まとめ

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

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

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

それでは、また!

Share Button