クリッピングマスク

丸いフォトフレームに大きな写真を重ねて、フレームからはみ出た部分をきれいに隠してくれる『魔法の額縁』です。

定義クリッピングマスク（Clipping Mask）とは、下にある図形や文字の形を「型抜き用の枠」として使い、そのすぐ上にある画像や色を枠の内側だけに表示させるグラフィック編集技術です。元の画像を直接切り抜くことなく、好みの形の窓の中にすっぽり収める効果を生み出します。

丸いフレームに写真をすっぽり収める仕組み

おしゃれな丸いアイコンやプロフィール写真を作りたいとき、四角い写真の角をハサミで切り落とす必要はありません。下側に丸い図形を描き、そのすぐ上に写真を重ねてクリッピングマスクを適用するだけで完成します。

するとパソコンは、下にある丸い部分だけを「透明な窓」として認識します。写真自体は元の四角い形のまま残っていますが、私たちの目には丸い図形と重なっている部分だけが透けて見えるようになります。

この方法の最大のメリットは、元の写真を傷つけない（非破壊編集）点です。写真の位置を少しずらしたりサイズを縮小したりしても丸いフレームはそのまま維持されるため、いつでも自由に構図を再調整できます。

デザインツールを使っていると、「レイヤーマスク」という似た機能に出会います。どちらも特定の部分を隠すという目的は同じですが、枠を作るアプローチに明確な違いがあります。

レイヤーマスクは、1枚の写真の上に白と黒のペンキを塗りながら「どの部分をどれくらい透明にするか」をブラシで直接指定する方法です。黒く塗った部分は消しゴムで消したように隠れ、白い部分だけがくっきりと現れます。

一方、クリッピングマスクは別の「図形レイヤー」や「テキストレイヤー」の形をそのまま枠として借ります。わざわざブラシで塗らなくても、あらかじめ作っておいた星型や太い文字の形に合わせて、画像が一瞬でその枠の中に収まる仕組みになっています。

映画のポスターや雑誌の表紙で、太い文字の中にキラキラ輝く夜空や都会の夜景が敷き詰められたかっこいいデザインを見たことはありませんか？これもクリッピングマスクを活用した代表的な演出です。

テキストレイヤーでお好みの単語を大きく入力し、その上に天の川の写真を重ねてクリッピングマスクをかけるだけで完了します。文字の線の形に合わせて宇宙の写真がすっぽり入り込み、洗練されたタイポグラフィがあっという間に作れます。

さらに、1つの形の枠に対して複数の写真や影のエフェクト、グラデーションを重ねてクリッピングすることも可能です。ベースとなる一番下の図形を1つ変えるだけで、上に重なるすべての要素が一括で新しい枠に収まるため、作業効率も劇的にアップします。

✕ 誤解

クリッピングマスクを適用すると、枠からはみ出た画像の部分は完全に切り取られて削除されてしまう。

✓ 事実

元の画像データはそのまま残っています。マスクを解除したり、枠の中で画像を動かしたりすれば、隠れていた部分がいつでも再び現れます。

1 PhotoshopやFigmaで、丸い円の中に人物写真をきれいに収めてプロフィールアイコンを作るときに使います。

2 ポスターのタイトル文字の太いフォントの中に、海や炎などのテクスチャ画像を流し込むときに活用します。

💡 つまりひとことで

下のレイヤーの形を「窓枠」として使い、元の画像を傷つけることなく枠の内側だけにすっぽり表示させるグラフィック技術です。