コンテンツに簡単にマスクを作成する

Adobe XDでマスクを作成する方法

マスクとは、XDドキュメントのコンテンツを部分的に隠す機能です。大きな画像の一部のみを見出しとして表示するのにも使用できます。XDでマスクを作成するには、画像などの素材をシェイプにドラッグする方法と、ドキュメント内のコンテンツのマスクとしてシェイプを使用する方法の2つがあります。

素材をシェイプにドラッグする

プロフィール写真の代わりの円など、デザインの開始時にプレースホルダーグラフィックを配置した場合、そのシェイプに素材をドロップできます。画像などの素材は縦横比を保持しながらシェイプに入り、シェイプの外側の部分はマスクにより隠されます。

• フォルダーから、開いているXDドキュメントのシェイプに素材をドラッグします。シェイプがハイライトしたときにマウスを放すと、素材がシェイプ内に配置されます。
• 選択したシェイプのポイントをドラッグすれば、シェイプとともに中のコンテンツもサイズ変更できます。

ヒント：シェイプ内のコンテンツを入れ替えるには、フォルダーからシェイプに素材をドラッグします。これで新しいコンテンツが縦横比を保持したままシェイプ内に入ります。

シェイプまたはマスクしたコンテンツを編集する

• シェイプ内のコンテンツを編集するには、シェイプをダブルクリックしてその中のコンテンツを選択します。この状態で、コンテンツを自由に変形できます。

シェイプでマスクを作成する

• コンテンツの表示する部分の上に、マスクとして使用するシェイプを描画または配置します。 シェイプの外側のコンテンツはマスクにより隠されます。
• 画像とシェイプ（マスク）を選択します。
• 右クリック（Windows）またはオブジェクトメニュー（macOS）から「シェイプでマスク」を選択します。

マスクまたはコンテンツを編集する

• 選択したシェイプのポイントをドラッグすれば、シェイプとともに中のコンテンツもサイズ変更できます。
• マスクシェイプ内のコンテンツを編集するには、マスク範囲のコンテンツをダブルクリックします。マスクが選択され、自由に変形できます。
• マスク範囲のコンテンツをクリックして、自由に変形します。

ヒント：シンプルなSVGコンテンツを読み込んで、マスクとして使用することもできます。フォルダーから画像をXDドキュメント内のSVGコンテンツにドラッグすると、SVGコンテンツがマスクシェイプになります。また、フォルダーからシンプルなSVGファイルをXDの画像にドラッグしても、そのSVGコンテンツがマスクになります。

Adobe Stock提供元：sonyachny、DedMityay、andreaobzerova、sergiophoto、Jodie Johnson、tata_cos、Valeriy Lebedev、olalalala、eqroy、neirfy、VIGE.co、emojoez、grandfailure、Kevin Carden、Andrey Bandurenko、ikostudio、blvdone、nirutft、GavranBoris、TTstudio

プレゼンター：Brian Wood