takato(@n8takato)です!
![](https://takatoblog.org/wp-content/uploads/2022/07/man-300x300.png)
XDでドロップシャドウを作る方法を知りたい
この記事は上記の課題に向けて作成しています。
XDでは簡単にドロップシャドウを作成することが出来ます。
この記事ではXDでドロップシャドウを作る方法を紹介します。
この記事を読むメリット
- XDでドロップシャドウを作成する方法がわかる
この記事を書いた人
![](https://takatoblog.org/wp-content/uploads/2022/07/takato.jpg)
この記事を書いた僕はこんな人です!
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
〜個人的にオススメなwebデザインスクール3選〜
今なら無料オンライン説明会実施中です!
興味のあるスクールに申し込んでみてください!
XDでドロップシャドウを作る方法
早速XDでドロップシャドウを作成する方法を説明します。
XDでドロップシャドウを作成する手順は下記の通りです。
XDでドロップシャドウを作成する手順
- 図形を作成する
- 「ドロップシャドウ」をオンにする
- 影を調節する
図形を作成する
始めに図形を作成します。
図形はXDの左側にあるメニューから作成出来ます。
今回は長方形を作成します。
![①長方形ツールで図形を作成します。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow01.jpg)
「ドロップシャドウ」をオンにする
続いて「ドロップシャドウ」をオンにします。
図形を選択した状態で「ドロップシャドウ」にチェックを入れます。
※ドロップシャドウは右側にあるメニューの「効果」の中に含まれています。
チェックを入れると図形の外側に影が現れます。
![②図形を選択します。③「ドロップシャドウ」にチェックを入れます。④図形の外側に影が出来ます。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow02.jpg)
影を調節する
最後に影を調節します。
XDでは下記4つの内容が調節出来ます。
- 影の色
- 影のぼかし
- X座標の影の広さ
- Y座標の影の広さ
①影の色
影の色を変更することが出来ます。
「ドロップシャドウ」のチェックボックスの隣から色を変更出来ます。
![「ドロップボックス」のチェックボックスの隣から影の色を変更することが出来ます。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow03.jpg)
![カラーパレットから好きな色を選択出来ます。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow04.jpg)
②影のぼかし
影をぼかすことが出来ます。
「ドロップシャドウ」の下にある「B」の数値を変えることでぼかすことが出来ます。
![「B」から影のぼかしを調節出来ます。数値が大きくなるほど影がぼけるようになります。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow05.jpg)
※数値が大きいほど影がぼけていきます。
ぼかし過ぎると影が見えなくなるので適度にぼかしてください。
③X座標の影の広さ
X座標(横軸)の影の広さを調節出来ます。
「ドロップシャドウ」の下にある「X」から調節出来ます。
※数値が増えること影が右側に広がります。
※数値をマイナスにすると左側に影が広がります。
![「X」の数値を増やすと影が右側にずれます。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow06.jpg)
![数値をマイナスにすると影が左へずれます。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow07.jpg)
④Y座標の影の広さ
Y座標(縦軸)の影の広さを調節出来ます。
「ドロップシャドウ」の下にある「Y」から調節出来ます。
※数値が増えること影が下に広がります。
※数値をマイナスにすると上に影が広がります。
![「Y」の値を大きくすると影が下へずれます。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow08.jpg)
![「Y」の値をマイナスにすると影が上にずれます。](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow09.jpg)
XDでドロップシャドウを作る作業は以上です。
XDでは簡単にドロップシャドウを作成出来る!
最後にまとめです。
XDでドロップシャドウを作る手順
- 図形を作成する
- 「ドロップシャドウ」をオンにする
- 影を調節する
ドロップシャドウは簡単に作れます。
まだ作成したことの無い方は是非やってみてください。
webデザインの独学は何から行えば良いかまとめました。
![](https://takatoblog.org/wp-content/uploads/2021/12/webdesign-study-order-300x157.jpg)
webデザインの独学にオススメな本はこちらの記事を読んでください。
![](https://takatoblog.org/wp-content/uploads/2022/03/web-design-books-300x157.png)