takato(@n8takato)です!
![](https://takatoblog.org/wp-content/uploads/2022/07/man.png)
XDでクリッピングマスクをかける方法を知りたい。
この記事は上記の課題に向けて作成しています。
XDはIllustrator同様にマスクをかけることが出来ます。
マスクをかける方法について説明していきます。
この記事を読むメリット
- XDでクリッピングマスクをかける方法がわかる
この記事を書いた人
![](https://takatoblog.org/wp-content/uploads/2022/07/takato.jpg)
この記事を書いた僕はこんな人です!
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
![](https://takatoblog.org/wp-content/uploads/2022/12/illustrator-clipping-mask-300x157.png)
XDでクリッピングマスクをする方法
![XDでクリッピングマスクをする方法を説明します。](https://takatoblog.org/wp-content/uploads/2022/07/xd-clipping-mask02.png)
早速XDでクリッピングマスクをする方法を説明します。
手順は下記の通りです。
- アートボードに画像を配置する
- 切り抜く図形を作成する
- シェイプでマスクをかける
アートボードに画像を配置する
始めにアートボード上に画像を配置します。
アートボード上に画像をドラッグ&ドロップすると画像が配置されます。
![XDのアートボード上に画像を配置するには、画像をドラッグ&ドロップする必要があります。](https://takatoblog.org/wp-content/uploads/2022/07/xd01.jpg)
切り抜く図形を作成する
続いて切り抜く形の図形を作成します。
クリッピングマスクは図形の形に画像が切り抜かれます。
XD上の左側のメニューから図形を作成してください。
今回は丸い形のした図形を作成しています。
![XDでクリッピングマスクをする場合は切り抜きたい形の下図形を作成します。](https://takatoblog.org/wp-content/uploads/2022/07/xd02.jpg)
シェイプでマスクをかける
最後に「画像」と「図形」の2つを選択した状態で「右クリック」→「シェイプでマスク」を選択します。
![XDで「シェイプでマスク」を選択します。](https://takatoblog.org/wp-content/uploads/2022/07/xd03-1.jpg)
すると画像が図形の形に切り抜かれます。
![図形の形に画像が切り抜かれます。](https://takatoblog.org/wp-content/uploads/2022/07/xd04.jpg)
クリッピングマスクは以上で完了です。
その他XDでマスクをする2つの方法
![その他XDでマスクをする2つの方法を説明します。](https://takatoblog.org/wp-content/uploads/2022/07/xd-clipping-mask03.png)
XDでは「シェイプでマスク」以外にマスクをかける方法が2つあります。
- ドラッグ&ドロップでマスクをかける
- シェイプと交差でマスクをかける
ドラッグ&ドロップ
ドラッグ&ドロップは、アートボード上にある図形に画像を配置することで自動で切り抜いてくれる方法です。
手順は下記の通りです。
- アートボード上に図形を作成する
- 図形上に画像を配置する
①アートボード上に図形を作成する
まずは切り抜きたい形の図形をアートボード上に作成します。
今回は黒色の長方形を作成しました。
![アートボード上に切り抜きたい形の図形を作成します。](https://takatoblog.org/wp-content/uploads/2022/07/xd05.jpg)
②図形上に画像を配置する
続いて図形の上に画像を配置します。
「Finder」から画像を選択し図形の上にドラッグ&ドロップします。
![画像を図形の上にドラッグ&ドロップします。](https://takatoblog.org/wp-content/uploads/2022/07/xd06.jpg)
画像をドラッグ&ドロップすると画像が図形サイズに自動で切り抜かれます。
![ドラッグ&ドロップでマスクした画像です。](https://takatoblog.org/wp-content/uploads/2022/07/xd07.jpg)
ドラッグ&ドロップでマスクをかける方法は以上です。
シェイプと交差
シェイプと交差は画像と図形を重ねた状態で「交差」を選択する方法です。
通常のクリッピングマスクと異なる点は図形のサイズに合わせて画像のサイズが拡大縮小することです。
シェイプと交差の手順は下記の通りです。
- 画像と図形を用意する
- 画像と図形を選択した状態で交差を選択する
①画像と図形を用意する
まずはアートボード上に画像と図形を用意します。
今回も黒の長方形を用意しました。
![シェイプと交差で使用する画像と図形を用意しました。](https://takatoblog.org/wp-content/uploads/2022/07/xd08.jpg)
②画像と図形を選択した状態で交差を選択する
続いて画像と図形を選択した上で右側にある「交差」をクリックします。
交差はメニューの右から2番目にあります。
![マスクをきる画像と図形を選択した上で「交差」をクリックします。](https://takatoblog.org/wp-content/uploads/2022/07/xd09.jpg)
交差をクリックすると図形サイズに合わせて画像が切り抜かれます。
![シェイプと交差でマスクした画像。](https://takatoblog.org/wp-content/uploads/2022/07/xd10.jpg)
シェイプと交差でマスクをかける方法は以上です。
マスクを解除する方法
![マスクを解除する方法を説明します。](https://takatoblog.org/wp-content/uploads/2022/07/xd-clipping-mask04.png)
マスクをかけた画像を元に戻す方法を紹介します。
手順は下記の通りです。
- マスクをかけた画像を右クリックする
- 「マスクをグループ化解除」を選択する
「マスクをグループ化解除」を選択する
マスクをかけた画像を右クリックして「マスクをグループ化解除」を選択します。
![マスクをかけた画像を右クリックして「マスクをグループ化解除」を選択します。](https://takatoblog.org/wp-content/uploads/2022/07/xd11.jpg)
するとマスクをかける前の画像と図形が表示されます。
![「マスクをグループ化解除」を選択してマスクをかける前の画像と図形を表示します。](https://takatoblog.org/wp-content/uploads/2022/07/xd12.jpg)
マスクを解除する方法は以上となります。
XDのマスクは簡単
![XDのマスクは簡単に出来ます。](https://takatoblog.org/wp-content/uploads/2022/07/xd-clipping-mask06.png)
最後にまとめです。
- XDでクリッピングマスクをするには「シェイプでマスク」を選択
- XDは他にも「ドラッグ&ドロップ」と「シェイプと交差」の2つがある
- マスクの解除は「マスクをグループ化解除」で出来る
XDのマスクはIllustrator同様簡単に行うことが出来ます。
web制作ではXDを頻繁に使用するので、マスクのかけ方は覚えておいてください。
![](https://takatoblog.org/wp-content/uploads/2022/03/suitable-for-web-designer-300x157.jpg)