マスクについて

マスクを使用すると、シェイプや透明度のレベルに基づいてホスト要素の一部を非表示にできます。ホスト要素には、画像、div、テキスト コンテナ、コンポーネントなどを指定できます。

各要素に指定できるマスクは 1 つのみですが、div でホスト要素をラップし、そのコンテナ div にマスクを適用してマスクを重ねることができます。ホスト要素内で別の要素をネストし、子要素にマスクを追加することもできます。

このページの内容:

• マスクタイプ
• マスクの選択
• マスクの編集
• マスクのアニメーション化
• レスポンシブ レイアウトのマスク

マスクタイプ

• イメージマスク
• グラデーション マスク
• クリップパス マスク

ブラウザの互換性

Microsoft Edge バージョン 40 以前では、長方形のクリップパス マスクのみがサポートされています。その他のマスクタイプとシェイプは無視されます。

イメージマスク

イメージマスクを使用すると、イメージの透明領域を使ってホスト要素を非表示にできます。

ホスト要素

イメージマスク

結果

イメージマスクを追加するには:

1. マスクする要素を右クリックします。
2. ポップアップ メニューから [イメージマスクを追加] を選択します。
3. マスクとして使用するイメージをインポートまたは選択します。

選択ツール またはプロパティ パネルを使用して、マスクのサイズと位置を調整できます。

注: イメージマスクを、割合に基づいて配置することはできません。

グラデーション マスク

グラデーション マスクを使用すると、グラデーションの透明度に応じてホスト要素が非表示になります。

ホスト要素

グラデーション マスク

結果

Google Web Designer では、次の 2 種類のマスクのグラデーションがサポートされています。

• 線形グラデーション
• 円形グラデーション

グラデーション マスクを追加するには:

1. マスクする要素を右クリックします。
2. ポップアップ メニューから [グラデーション マスクを追加] を選択します。
3. [プロパティ] パネルでグラデーションの見本をクリックして、グラデーションの種類、色、不透明度、角度（線形グラデーションのみ）をカスタマイズします。

デフォルトでは、グラデーション マスクはホスト要素と同じサイズですが、選択ツール または [プロパティ] パネルを使用して、マスクの位置とサイズのプロパティを調整できます。

注: グラデーション マスクを、割合に基づいて配置することはできません。

クリップパス マスク

クリップパス マスクを使用すると、幾何学的図形を使って、ホスト要素のどの部分を表示するかを決定できます。

ホスト要素

クリップパス マスク

結果

ツールバーのクリップパス マスクツールを長押しするとポップアップ メニューが表示され、マスクシェイプの種類を選択できます。

長方形マスク（デフォルト）
楕円マスク
ポリゴンマスク

ブラウザの互換性

• Internet Explorer と Microsoft Edge では、位置とサイズをピクセル単位で指定した長方形のクリップパス マスクのみがサポートされています。割合に基づいて配置されたマスクや、長方形以外のマスクシェイプ（角の丸い長方形も含む）は無視されます。

• Firefox と Safari で角の丸い長方形マスクを使用する場合、角の半径の値がマスクのサイズに対して大きすぎると正しく表示されません。

• Safari では、長方形ツールを使用して描画した図形のクリップパス マスクはサポートされていません。この問題を回避するには、長方形シェイプの代わりに div 要素を使用し、div 要素にマスクを配置します。

• Chrome と Opera では、ホスト要素に 3D 変換された子要素が含まれていると、クリップパス マスクが正しく表示されません。

• 角の丸みを割合に基づく半径を使用して設定した長方形マスクは、ブラウザによって表示が多少異なる場合があります。

クリップパス マスクを追加するには:

1. マスクを指定する要素を選択します。
2. 目的のシェイプのマスクツールを選択します。
3. マスクシェイプの追加オプションを設定します。
   • 長方形マスクのみ: 角を丸くするには、上部のツール オプション バーで角の半径を設定します。四隅の角すべてに同じ半径を適用するには、一定に保つボタン を使用します。
   • ポリゴンマスクのみ: 上部のツール オプション バーからシェイプを選択します。自由形式オプションを使用すると、独自のシェイプを描画できます。標準のポリゴン オプションを選択した場合は、必要なポリゴンの辺の数を入力します。
4. ホスト要素の上にマスクを描画します。
   • Shift キーを押しながら描画すると、マスクの幅と高さが同じになります。Shift キーは、自由形式のマスクや特定のプリセット シェイプ（代わりに各辺が常に同じ長さに描画される三角形、菱形、五角形、六角形、星）に対しては無効です。
   • Alt キーを押したままにすると、描画開始位置がマスクの中心点になります。

注: ポリゴンマスクを描画した後、各頂点をドラッグするとマスクシェイプを変更できます。ただし、辺の数は変更できません。

ポリゴンマスクのシェイプ

	自由形式（独自のシェイプを描画します）
	標準のポリゴン（辺の数を指定します。各辺は同じ長さで描画されます）
	三角形
	長方形
	フレーム
	菱形
	五角形
	六角形
	右山型
	左山型
	十字
	星
	右矢印
	左矢印

マスクの選択

• ステージ上: ホスト要素を選択してマスクをクリックします。マスクに緑色の枠線が付きます。

• 詳細モードのタイムライン: ホスト要素レイヤの下のマスクレイヤを選択します。マスクレイヤには、レイヤ名の前に 記号が付いています。

詳細モードのタイムラインでマスクレイヤの非表示とロックを行うことができるため、ホスト要素をより簡単に操作できます。

複数のマスクの選択

詳細モードのタイムラインで Ctrl キーを押しながらクリックして、複数のマスクレイヤを選択し、一度に削除できます。複数のマスクを一度に編集することはできません。

マスクのホスト要素が選択範囲に含まれている場合にのみ、要素とマスクを一緒に削除できます。

マスクの編集

ステージでマスクを直接編集するには、プロパティ パネルを使用します。CSS パネルで、マスクの CSS プロパティは編集できません。

マスクの編集には次の方法があります。

• マスクを切り取る、コピーする、貼り付ける
• マスクを移動する
• マスクのサイズを変更する
• マスクを回転する
• イメージマスクのソースを変更する
• グラデーション マスクのグラデーションを変更する
• 長方形マスクの角の曲率を変更する
• ポリゴンマスクのシェイプを変更する

マスクを切り取る、コピーする、貼り付ける

マスクを切り取る、または別の要素（別のドキュメント内の要素も含む）にコピーして貼り付けるには、次のいずれかの方法を使用します。

• ステージまたは詳細モードのタイムラインで:
  • マスクを右クリックし、[切り取り] または [コピー] を選択します。
  • マスクする要素を右クリックし、[貼り付け] または [マスクを置き換える] を選択します。
• 詳細モードのタイムラインで:
  • マスクレイヤを要素レイヤにドラッグして、マスクを別のホスト要素に切り替えます（マスクの置き換えはできません）。
  • Alt キーを押しながらマスクレイヤをドラッグすると、マスクが別の要素にコピーされます（マスクの置き換えはできません）。
• キーボード ショートカット:
  • 切り取り - Ctrl+X キー（Windows の場合）または ⌘+X キー（Mac の場合）
  • コピー - Ctrl+C キー（Windows の場合）または ⌘+C キー（Mac の場合）
  • 貼り付け - Ctrl+V キー（Windows の場合）または ⌘+V キー（Mac の場合）
• メニュー コマンド:
  • [編集] > [切り取り]
  • [編集] > [コピー]
  • [編集] > [貼り付け] または [マスクを置き換える]

マスク アニメーションも貼り付けられます。

マスクのコピーと貼り付けに関する制限

• 切り取りまたはコピーするマスク、マスクを貼り付ける要素は、それぞれ 1 つだけ選択できます。
• すでにマスクがある要素にマスクを貼り付けると、既存のマスクが置き換えられます。
• マスクの切り取り、コピー、貼り付けはメディアルールではできません。

マスクを移動する

移動するマスクを選択し、次のいずれかの方法を使用します。

• [プロパティ] パネルで上部と左側の位置に関するプロパティを編集します。値は、ホスト要素の左上隅からの相対値です。
• 矢印キーを使用して、マスクを 1 ピクセルずつ移動します。Shift キーを押しながら矢印キーを押すと、マスクを 10 ピクセルずつ移動できます。
• 選択ツール を使用して、マウスでマスクをドラッグします。Shift キーを押しながらドラッグすると、マスクは単一の軸に沿ってのみ移動します。

マスクは、ホスト要素の境界外に配置できます。

注: イメージマスクとグラデーション マスクを、割合に基づいて配置することはできません。

マスクのサイズを変更する

サイズを変更するマスクを選択し、次の操作を行います。

• [プロパティ] パネルで幅と高さのプロパティを編集します。
• 上部にあるツール オプション バーで、[変形コントロール] オプションをオンにして選択ツール を使用します。
  • Shift キーを押しながらドラッグすると、元のアスペクト比を維持できます。
  • Alt キー（Windows）または option キー（Mac）を押しながらドラッグすると、中心点を変更せずにマスクのサイズを変更できます。

マスクを回転する

マスクを直接回転することはできませんが、マスクを追加する前に次の手順を行うと同じ効果が得られます。

1. マスクを指定する要素をラップします。
2. マスクをコンテナ div に追加します。
3. コンテナ div を回転させるとマスクも回転します。
4. 元の要素を逆方向に回転させます。

イメージマスクのソースを変更する

イメージマスクに使用するイメージは、次の手順で入れ替えることができます。

1. マスクを選択します。
2. [プロパティ] パネルで、[ソース] フィールドの [イメージマスクの設定] ボタンをクリックします。
3. [ライブラリ] からイメージを選択するか、「アセットをインポート」 ボタンをクリックして別のイメージを使用します。
4. [OK] をクリックします。

グラデーション マスクのグラデーションを変更する

グラデーション マスクに使用するグラデーションをカスタマイズできます。

1. マスクを選択します。
2. [プロパティ] パネルで、グラデーションの見本をクリックします。
3. グラデーションを編集します。
   • グラデーションの種類: 「線形グラデーション」ボタン または「円形グラデーション」ボタン をクリックします。
   • トランジション間隔: 透明度が変化する間隔を変更するには、グラデーション バー上部に沿って透明度マーカーをドラッグします。
   • 透明度: 透明度マーカーで、グラデーションの特定のポイントの不透明度レベルを設定できます。100% はホスト要素が完全表示であることを示し、0% は完全非表示であることを示します。透明度マーカーをクリックして、右側の割合フィールドで不透明度レベルを編集します。
   • 追加の透明度マーカー: 透明度マーカーを追加するには、グラデーション バーをクリックします。透明度マーカーを削除するには、マーカーを下方向にドラッグします。
   • 角度: 線形グラデーションの場合、角度を調整できます。
   • デフォルト: デフォルト グラデーション ボタン をクリックして、グラデーションをデフォルト設定に戻します（0～100% の線形グラデーションで 90 度）。

長方形マスクの角の曲率を変更する

長方形マスクの角は、直角または丸い角にできます。丸い角にした場合、曲率半径の調整も行えます。

1. マスクを選択します。
2. [プロパティ] パネルで、角の半径をピクセル単位または割合で設定します。半径を 0 に設定すると、角が直角になります。
3. 一定に保つボタン が有効な場合、四隅の角すべてに同じ値が適用されます。それぞれの角を個別に設定するには、このボタン を無効にします。

ポリゴンマスクのシェイプを変更する

ステージ上でポリゴンマスクのシェイプを調整できます。

1. マスクを選択します。
2. ツールバーから「ポリゴンマスク」ツール を選択します。各頂点にハンドルが表示されます。
3. 各頂点を任意の場所にドラッグします。
   • Shift キーを押しながらドラッグすると、1 つの軸（垂直または水平）のみに沿って頂点を移動できます。

注: 既存のポリゴンマスクの辺の数は変更できません。

マスクのアニメーション化

マスクのサイズと位置をアニメーション化できます。また、視認性の範囲を使用して、マスクの表示と非表示を切り替えることもできます。マスク アニメーションは、ホスト要素のアニメーションとは関係ありません。

アニメーション化した楕円マスク

長方形マスクの場合、丸い角をアニメーション化できます。ポリゴン クリップパス マスクの場合、キーフレームで頂点の位置を変更することで、マスクのシェイプをアニメーション化することもできます（辺の数は変更できません）。

複数のフレームでマスクを編集することはできません。マスク アニメーションを編集するには、キーフレームを 1 つずつ選択します。

注: イメージマスクを低速でアニメーション化すると、キーフレーム間のピクセル値の小数点以下は丸められるため、ジッター効果が顕著になる場合があります。

ブラウザの互換性

トランジション ギャラリー、画像の効果、パーティクル エフェクト コンポーネントなどの <canvas> 要素がドキュメントに含まれている場合、クリップパス マスク アニメーションは Safari で再生されません。

レスポンシブ レイアウトのマスク

メディアルールを使用すると、特定のビューポート サイズ範囲のマスク プロパティとアニメーションをオーバーライドできます。イメージマスクの場合、ソースをオーバーライドして別のイメージを使用することもできます。グラデーション マスクの場合、グラデーションを変更できます。

注: 位置またはサイズのプロパティのオーバーライドを削除すると、両方の位置プロパティ（上と左）または両方のサイズ プロパティ（幅と高さ）が自動的にリセットされます。クリップパス マスクの場合、位置とサイズのプロパティはすべてリセットされます。