SVGマスクで“水滴のぞき見”エフェクトを実装する方法｜画像の一部だけを透かして見せる表現テクニック

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「サイトの背景に少し遊び心を追加したい」
「画像やヒーローエリアに、“なにか覗き込んだような”表現を入れて印象的にしたい」

そんな時に使えるのが SVG マスク（mask）を使った “水滴でのぞき見る” エフェクト です。

CSS の mask-image や SVG の mask を活用することで、
背景画像の一部だけが “水滴の形” でくり抜かれ、まるで窓から覗いているような表現が作れます。

今回は、
・仕組み
・メリット
・実装コード
・応用のヒント
をまとめて、すぐに真似できる形で紹介します。

SVG マスクとは？

SVG の mask は 白い部分が表示、黒い部分が非表示になる透明マスク です。

水滴のような円や変形パスを白で描けば、
その形の部分だけ背景が表示される、という仕組みです。

この仕組みを使えば、水滴のようなくり抜きが簡単に作れます。

実際の“水滴でのぞき見る”表現：完成デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

水滴をもっとリアルにするテクニック

水滴感を出すには、“レンズ効果” や “フチの明暗” を少し追加すると一気にリアルになります。

1. 内側グラデーションで立体感を出す

.droplet {
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), rgba(255,255,255,0) 60%),
    url('画像URL');
}

2. 少し拡大（background-size を 110%）でレンズっぽく

background-size: 110%;

3. 影をつける

box-shadow: 0 0 30px rgba(255,255,255,0.2),
            inset 0 0 20px rgba(0,0,0,0.4);

応用：複数の水滴をランダムに配置する

水滴が複数あると “曇ったガラス越しに外を覗く” ような演出になります。

SVG のマスクを複数の円に変更

<mask id="droplet-mask">
  <rect width="100%" height="100%" fill="black"/>
  <circle cx="40%" cy="40%" r="80" fill="white"/>
  <circle cx="70%" cy="60%" r="50" fill="white"/>
  <circle cx="30%" cy="70%" r="40" fill="white"/>
</mask>

どんなサイトで使える？（利用シーンのアイデア）

・カフェや飲食店のヒーロー写真
ガラス越しの写真のような温かみある演出。

・美容系 / ビジュアル優先サイト
水滴・レンズ感が “透明感” を演出。

・背景にストーリーを持たせたいサービスサイト
覗き見る＝気づき・解放・発見 を象徴できるUI。

・採用サイトの印象的な導入部
“未来を覗く” というメタファーにも使える。

まとめ

SVG マスクを使うと、「ただの画像」 → 「ストーリーあるビジュアル」へと変化します。

というメリットがあるため、背景演出としてとても使いやすい手法です。