シェイプを使用してマスクを作成する方法を説明します。

マスクを使用して、画像またはオブジェクトの一部をクリップし、デザインの特定の要素にフォーカスすることができます。

マスクは、例えば以下のようなプロフィールアバターの作成や、ダークモードエクスペリエンスのシミュレーションに使用できます。

モバイルアプリケーションのプロフィールアバター

ダークモードエクスペリエンスをシミュレートするアニメーションマスク

マスク効果を作成、編集、削除するには、次の手順に従います。

マスクとして使用するシェイプを描画し、画像の維持したい部分に置きます。画像とシェイプを選択します。

macOS の場合は、オブジェクト／シェイプでマスクを選択し、Windows の場合は、選択したコンテンツを右クリックしてシェイプでマスクを選択します。このシェイプの外部にある画像または描画の部分がマスクされます。

マスクシェイプ内のコンテンツを編集するには、マスクされたコンテンツをダブルクリックします。マスクされた領域はプロジェクトから削除されるわけではありません。必要に応じてマスクを再調整し、画像の別の部分をハイライト表示することができます。

マスクを解除または削除するには、オブジェクトを選択して、右クリック（Windows）または Ctrl を押しながらクリック（Mac）して、コンテキストメニューから「マスクをグループ化解除」を選択します。

1 つのベクターオブジェクトを別のオブジェクトでマスクする場合、一番上のオブジェクトがマスクとして機能します。
図形、コンポーネント、グループ、シンボル上のテキストをマスクすることはできません。
XDは、アルファマスクや不透明度を設定したマスクをサポートしていません。UserVoiceでは、この機能に関する興味深い議論に参加したり、この機能の実装に賛成票を投じることができます。

プレースホルダーグラフィックを使用してデザインを開始する場合（プロフィール写真の代わりに円を配置するなど）、アセットをシェイプにドロップすることでマスクを作成できます。

アセットをシェイプにドラッグする方法や、既存のシェイプをマスクとして使用する方法については、以下のチュートリアルをご覧になるか、サンプルファイルで実際にお試しください。

視聴時間：1 分

数値カウンターアニメーションを使用すると、面白く目立つ方法で数値を表示できます。マスクを使用してランニングスコアボードを作成できます。このビデオをご覧になり、サンプルファイルをダウンロードしてお試しください。

視聴時間：1 分 2 秒

マスクを使用して数値カウンターアニメーションを作成する

また、XD サポートコミュニティで、サンプルやチュートリアルをチェックすることもできます。

マスクを使用して画像をカスタムシェイプに配置し、画像の表示したくない部分を切り抜きます。このチュートリアルでは、XD で画像とマスク処理を操作する方法が解説されています。

視聴時間：1 分

Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

シェイプでマスクを作成