ITツール

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

「ニューモーフィズム」というデザイン手法をご存知だろうか。
明暗2色のドロップシャドウを使い、オブジェクトを、浮き上がらせたり、くぼんでいるように見せる手法だ。

xd-neumorphism_22

XDを使って、これらのデザインを簡単に再現することができるので、その方法をご紹介しよう。

XDでニューモーフィズム:浮き上がったオブジェクトのデザイン

では最初に、ニューモーフィズムの基本となる「浮き上がった」ように見せるデザインの作り方をご紹介する。

ベースになるオブジェクトを作成する

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

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

xd-neumorphism_1

step

1

【暗い影づくり】ベースオブジェクトを複製する

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

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

xd-neumorphism_2

step

2

【暗い影づくり】複製したオブジェクトをぼかし、暗くして、ずらす

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

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

xd-neumorphism_3

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

xd-neumorphism_4

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

xd-neumorphism_5

step

3

【明るい影づくり】ベースオブジェクトを複製する

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

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

xd-neumorphism_6

step

4

【明るい影づくり】複製したオブジェクトをぼかし、明るくして、ずらす

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

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

xd-neumorphism_7

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

xd-neumorphism_8

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

xd-neumorphism_9

step

5

これで基本となる「浮き上がったデザイン」ができあがった。

今回はグレーで作成したが、もちろん色があるオブジェクトでも作成可能だ。

浮き上がり具合などは、作成した明暗2色の影のぼかし具合や、オブジェクトとの距離を調整すると、見え方が変わってくる。

XDでニューモーフィズム:くぼんだオブジェクトのデザイン

それではつぎに、「くぼんだ」ようにみえるデザインの作り方をご紹介する。

ベースとなるオブジェクトを作成する

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

xd-neumorphism_10

step

1

【暗い影づくり】複製し、ぼかし、暗くして、ずらす

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

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

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

xd-neumorphism_11

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

xd-neumorphism_12

step

2

【明るい影づくり】複製し、ぼかし、明るくして、ずらす

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

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

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

xd-neumorphism_13

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

xd-neumorphism_14

step

3

作成した3つのオブジェクトでマスクする

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

xd-neumorphism_15

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

xd-neumorphism_16

step

5

XDでニューモーフィズム:ボタンに立体感を出す方法

先ほどの「浮き上がったような表現」の応用として、ボタン自体に立体感をプラスすることもできる。イメージとしては以下のような感じ。

xd-neumorphism_17

それではまず、ボタン自体が立体的に盛り上がっている感じを表現する方法について。

まず、一番最初に作成した「浮き上がったオブジェクト」を用意する。そして、ベースのオブジェクトの「塗り」をグラデーションにする。

ベースのオブジェクトを選択し、「塗り」のポップアップの左上のメニューから「線型グラデーション」にする。

xd-neumorphism_18

グラデーションの方向を左上から右下に変更。左上を明るい色にして、右下を暗い色にする。

すると立体的に盛り上がったデザインになる。

xd-neumorphism_19

グラデーションの明暗を逆にして、左上を暗い色にして、右下を明るい色にする。すると、ボタンの中央がくぼんだようなデザインになる。

xd-neumorphism_20
xd-neumorphism_21

関連キーワードからさらに見る

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール
-,