XDでニューモーフィズムデザインを作る方法！パターン別4種類の作り方

まずはじめに、基本の図形となるオブジェクトを設置する。このとき、設置する背景色と同じ色で塗りつぶそう。

また、明暗2色のドロップシャドウを付ける必要があるため、真っ白（#ffffff）を使ってはいけない。立体感を出せなくなってしまう。

ベースのオブジェクトをcommandCでコピーし、そのまま,commandVを押してペーストする。

すると、ベースにピッタリ重なる位置にオブジェクトが配置される。

複製したオブジェクトを選択した状態で、右下の「背景ぼかし」を「オブジェクトのぼかし」に変更し、数値を「10」程度にする。

そして、暗い影にしたいので、「塗り」のカラーを、ベースの色からすこし暗くする。

最後に、右下にずらす。shiftを押しながら、→を1回、↓を1回押し、右と下に10pxずつ移動させる。

最後に、レイヤーを、基準のオブジェクトの下に配置する。

再び、ベースのオブジェクトをcommandCでコピーし、そのまま,commandVを押してペーストする。

ベースにピッタリ重なる位置にオブジェクトが配置される。

複製したオブジェクトを選択した状態で、右下の「背景ぼかし」を「オブジェクトのぼかし」に変更し、数値を「10」程度にする。

そして、明るい影にしたいので、「塗り」のカラーを、ベースの色からすこし明るくする。

最後に、左上にずらす。shiftを押しながら、←を1回、↑を1回押し、左と上に10pxずつ移動させる。

最後に、レイヤーを、基準のオブジェクトの下に配置する。

まずは先ほどと同様、ベースとなるオブジェクトを作成する。背景色と同じ色で塗りつぶそう。また、今回も明暗2色の影を使うので、真っ白は使えない。

基本的な作業の手順は「浮き上がった」デザインと似ている。しかし細かいところで違いがあるので、注意して読んでほしい。

ベースのオブジェクトを複製したら、右下で「オブジェクトのぼかし」を選択し、数値を 5 にする。

「塗り」はオフにして「線」にチェックをいれる。そして、線の色をベースより少し暗くして、線の太さを 5 にする。

基準より右下にずらしたいので、右に5px、下に5pxずつずらす。最後にレイヤーを基準より下にして完了。

基本的な作業の手順は「浮き上がった」デザインと似ている。しかし細かいところで違いがあるので、注意して読んでほしい。

ベースのオブジェクトを複製したら、右下で「オブジェクトのぼかし」を選択し、数値を 5 にする。

「塗り」はオフにして「線」にチェックをいれる。そして、線の色をベースより少し明るくして、線の太さを 5 にする。

基準より左上にずらしたいので、左に5px、上に5pxずつずらす。最後にレイヤーを基準より下にして完了。

そして最後に、作成した3つのオブジェクトを選択して、shiftcommandMを押して、マスクをする。

すると、凹んだような、くぼんだようなデザインになる。もしキレイに作れなかったら、影の位置や、ぼかしの具合を調整する。