マスク

はじめに

この機能を使用できるユーザー

すべてのチームおよびプラン のユーザー全員

Figmaデザインファイルの編集アクセス権限があるユーザーは、マスクを使用できます

オブジェクトの特定の領域を表示しながら残りの領域を隠す場合に、マスクを使用します。

これは小さな隙間がある額縁の中に写真を置くようなものです。写真の一部がその隙間から見えますが、それ以外の部分は切り詰めてサイズを変更することなく隠されます。

このプロセスでは、マスクされたレイヤーのどの部分に対して修正も削除も行われないので、マスクは非破壊的なアクションになります。これにより、切り詰めてサイズを合わせることなく隠された領域を維持できます。

マスクの仕組み

ベクターシェイプ、テキストレイヤー、透明チャンネルのついた画像、グループなどあらゆるレイヤーをマスクとして使用できます。

レイヤーをマスクとして使用する場合、マスクオブジェクトが作成されます。これには、マスクとそれがマスクしているレイヤーが含まれます。マスクオブジェクトは、マスクを示すベースのと、マスクされているレイヤーに沿った上向き矢印によってレイヤーパネル内で特定できます。

マスクは、Z軸上のマスクされたレイヤーの下に置かれます。マスクは、その状態になるまで上にあるすべての兄弟に適用されます。

• 別のマスクまたはマスクオブジェクト
• マスクの親フレームまたはグループ
• コンテンツを隠しているフレームまたはコンポーネント

親、兄弟、子の関係について詳しくはこちら→

下の例では、紫色の楕円がマスクの役割を果たしています。Z軸上の人物の画像の下にマスクが置かれている場合は、画像は正しくマスクされます。画像の上に置かれている場合は、マスクされません。

マスクのタイプ

アルファ

Figmaのすべてのマスクは、アルファチャネルをサポートします。 アルファチャンネルは、色、画像、またはオブジェクトにおける透明度の程度、つまり不透明度を表します。

アルファマスクを使用する場合、マスクの不透明度に基づいてマスクは適用されます。不透明度が大きくなると、それだけはっきり表示されます。不透明度をゼロパーセントにすると何も表示されません。

これは、マスクでぼかしと不透明度を利用できることを意味します。

• 既存のPNG、GIF、およびWebPファイルに透明度(アルファチャネル)をつけてインポートする
• レイヤーブラーエフェクトを使用してフェザリングを再現する
• ドロップおよびインナーシャドウを適用して奥行きを作る
• 不透明度が変化する塗り、線、およびグラデーションを追加する

以下の例では、外側の線をマスクとして楕円を使用しました。楕円の塗りの不透明度は100%で、線の不透明度は30%です。画像の中央ではマスクの不透明度がより高い(100%)ため、さらにはっきりと表示されます。

ベクター

ベクターマスク、つまりシェイプのアウトラインをマスクとして使用したものは、マスクの塗りまたは線の透明度(つまりゼロパーセントを超える不透明度値)を無視します。不透明度がゼロパーセントを超える領域がマスクに含まれる場合、そのアウトラインがマスクとして使用され、マスク全体の不透明度は100%と想定されます。

以下の例では、背景が完全に透明なハートの画像がマスクとして使用されています。左下のオブジェクトではアルファマスクが使用されているため、ハートのアウトラインが表示されます。右下のオブジェクトでは、ベクターマスクが使用され、画像全体のアウトラインがマスクとして使用されています。

輝度

輝度では、明るさを使用してマスクを決定できます。マスクの領域が明るくなるほど、よりはっきりと表示されます。つまり、マスクされるレイヤーの不透明度が高くなります。

領域が暗くなるほど、はっきりと表示されなくなります。マスクに黒色の塗り、つまり#000000がある場合は何も表示せず、マスクされたレイヤーはゼロパーセントの不透明度でレンダリングされます。

マスクの作成と編集

マスクの作成

1. マスクとして使用するオブジェクトを選択し、Z軸上でマスクされるすべてのオブジェクトの背後に配置します。
2. マスクオブジェクトの一部になるレイヤーをすべて選択します。
3. 上部のツールバーの をクリックするか、次のボタンを押してマスクオブジェクトを作成します。
   
   • Mac: ⌃ Control ⌘ Command M
   • Windows: Ctrl Alt M
4. デフォルトで、マスクタイプはアルファに設定されています。これを変更するには、マスクとして使用されているレイヤーを選択して、右のサイドバーの[マスク]セクションでドロップダウンを開きます。いずれかのオプションにマウスカーソルを合わせ、キャンバス上にプレビューします。マスクタイプについて詳しくはこちら↑

既存のマスクオブジェクトにレイヤーを追加するには、レイヤーパネルを使用して、これらのレイヤーをクリックしマスクオブジェクトへドラッグします。

レイヤーの順序変更について詳しくはこちら→

サイズ変更と移動

マスクとマスクされたレイヤーの移動およびサイズ変更は、互いに独立して行われます。これは、マスクを移動したりサイズ変更したりしてもマスクされたレイヤーには影響せず、逆の場合も影響しないことを意味します。

これはこれらが互いの兄弟であるためで、フレーム、グループ、またはコンポーネントにペアレンティング動作があったとしても、マスクにはありません。

親、兄弟、子の関係について詳しくはこちら→

マスクの削除

マスクとしてのオブジェクトの使用を停止するには、次のいずれかの方法を用いてオフに切り替えます。

• マスクを選択し、上部のツールバーでをクリックする
• マスクを右クリックして、[マスクとして使用]を選択する
• マスクを選択して、次のキーボードショートカットを使用する
  • Mac: ⌃ Control ⌘ Command M
  • Windows: Ctrl Alt M

マスクで隠されていたすべての部分が再表示されます。

マスクアウトラインの表示

デフォルトでは、Figmaはマスクの境界を表示していません。複雑なマスクを扱うとき、または意図しない空白のスペースがないか確認するときにマスクアウトラインを使用します。

マスクアウトラインに切り替えるには、次の手順に従います。

1. Figmaメニューを開きます。
2. [表示] > [マスクアウトライン]の順に移動します。

設定をオンにすると、ファイル内のマスクが緑色でアウトラインされます。