AdobeXDでドロップシャドウを付ける方法

こんにちは、サコです！

サコ

Adobe XDでドロップシャドウを付ける方法が知りたい！

この記事ではそんな課題を解決するための方法を紹介します。

最後にドロップシャドウを活用したデザイン例もあるので、参考にしてみてください

1.ドロップシャドウを付ける方法

1-1.オブジェクトを作成

長方形ツールなどを使って、オブジェクトを作成します。

1-2.『効果』から『ドロップシャドウ』を選択する

オブジェクトを選択した状態で
画面右下にある「ドロップシャドウ」にチェックを入れます。

これでオブジェクトにドロップシャドウが付きます！

2.ドロップシャドウの内容を変更する

ドロップシャドウは、色・不透明度・シャドウの位置を変更できます。
画像を使って解説していきます。

A.ドロップシャドウの色を変更

ドロップシャドウのチェックボックスの右側にある格子柄をクリックするとカラーピッカーが出てきます。
ここでドロップシャドウの色が変更できます。

色の指定方法は2つ。
①カラーピッカーで選択する方法
②下部にある入力欄に数値を入れる方法

B.ドロップシャドウの不透明度を変更

ドロップシャドウの不透明度を調整するには、画像のBのバーまたは数値で調節できます。

ここで数値が高ければ高いほど、シャドウが濃くなります。

C.ドロップシャドウの位置を変更

画像のCの数値を変更することで、ドロップシャドウの位置を指定できます。

デフォルトでは、X軸「0」、Y軸「3」、B（ぼかし）「6」となっています。
ぼかしの数値をあげると、よりやわらかいシャドウが広がるイメージです。

ドロップシャドウを使ったデザイン例

最後にドロップシャドウを活用したデザイン例を紹介します。

デザイン例①：ボタンにドロップシャドウを使う

ボックスにドロップシャドウをつけ、ボタンらしさを加えた例です。
少し浮いているように見えるので、他の要素と区別でき認識してもらいやすいメリットがあります。

デザイン例②：主張しすぎないドロップシャドウ

やわらかいドロップシャドウを広めに設定した例です。
透明度を下げ、広くぼかしをかけることで自然なシャドウができます。
ボックスに枠を付けず、このドロップシャドウを使うことで洗練された印象を与えることができます。

デザイン例③：ベタ塗りのドロップシャドウ

ベタ塗りのドロップシャドウをつけることもできます。
ポップな印象で、イラスト調のデザインやキャンペーンバナーなどにも使えそうですね。

まとめ

いかがでしたでしょうか？
Adobe XDではドロップシャドウが簡単に作れます。

ドロップシャドウの色や不透明度により
単調になりがちなデザインにアクセントを加えられるので
トンマナにあった調整をたくさん試してみてください！