CSSクリップパスで作るマスクデザイン集

CSSクリップパスで作るマスクデザイン集

CSSクリップパスで作るマスクデザイン集

CSSの clip-path は、要素を任意の形で切り抜き（マスク）するための強力な手段です。写真サムネイル、カードの斜めカット、波状マスク、アバターなど、視覚的に訴えるデザインを比較的シンプルに実装できます。本記事は中級者向けに、基本から応用（SVG連携・アニメーション・フォールバック）までの実践例をまとめます。

この記事の内容

  • clip-path の基本と主要関数
  • よく使う実例（丸型アバター、斜めカット、波マスク、複雑ポリゴン）
  • SVG <clipPath> と連携する方法（複雑な形のマスク）
  • アニメーション例（クリップパスの遷移・変形）
  • パフォーマンス、アクセシビリティ、フォールバックの注意点

clip-path の基本構文

最もシンプルな使い方はキーワード（circle() / ellipse() / inset() / polygon()）を指定する方法です。

CSS
/* 例：要素を円形に切り抜く */
.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
}

/* 例：斜めカット */
.card {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

主要な関数と使いどころ

  • circle(radius at x y)：丸い切り抜き（アバター）
  • ellipse(rx ry at x y)：楕円形
  • inset(top right bottom left round rx ry)：矩形の切り抜き＋角丸（カードのマスク）
  • polygon(x1 y1, x2 y2, ...)：任意の多角形（斜め・切り欠きなど）
  • path('M ... Z')（clip-path: path()）：SVGパスを直接記述（複雑形状）

実例1：丸型アバター（画像）

HTML
<img src="avatar.jpg" alt="プロフィール" class="avatar">
CSS
.avatar {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
  /* 代替：border-radius: 50% は互換性が高いので併用推奨 */
  border-radius: 50%;
}
avatar

ポイント：円形アバターは border-radius:50% の方が互換性・性能面で安定する場面が多いです。clip-path は同じ効果の他の形状で威力を発揮します。

実例2：斜めカットのカード

HTML
<figure class="card">
  <img src="hero.jpg" alt="Hero" class="card__img">
  <figcaption class="card__caption">斜めカットカード</figcaption>
</figure>
CSS
.card {
  width: 420px;
  border-radius: 8px;
  overflow: hidden;
}
.card__img {
  display: block;
  width: 100%;
  transition: transform 300ms ease;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); /* 斜め下右を切る */
}
.card:hover .card__img {
  transform: scale(1.06);
}
Hero
斜めカットカード

実例3：波線マスク（SVGとclip-pathの連携）

波形など複雑な形は SVG の <clipPath> を使うと管理しやすく、パス編集が容易です。

HTML
<svg width="0" height="0" style="position:absolute;left:-9999px;" aria-hidden="true">
  <defs>
    <clipPath id="wave-clip" clipPathUnits="objectBoundingBox">
      <path d="M0,0.85 C0.25,0.75 0.35,0.95 0.6,0.9 C0.8,0.85 1,0.95 1,0.95 L1,1 L0,1 Z" />
    </clipPath>
  </defs>
</svg>

<div class="hero" style="clip-path: url(#wave-clip);">
  <img src="landscape.jpg" alt="景色">
</div>
CSS
/* hero は内部で画像を適切に配置するスタイルを書く */
.hero img {
  display: block;
  width: 100%;
  height: auto;
}
景色

ポイント：SVG の clipPathUnits="objectBoundingBox" を使うと、要素のサイズに対して相対座標で定義でき、レスポンシブ対応がしやすくなります。

実例4：アニメーションするクリップパス（動くシェイプ）

clip-path をアニメートすると面白い表現ができます。ただしブラウザによっては clip-path: path() のアニメーションが制限されるため、キーは慎重に設計します。

CSS
/* アニメーション例：ポリゴン点を切り替える（ステップ的） */
.shape {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 600ms cubic-bezier(.2,.8,.2,1);
}
.shape.is--open {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 85%);
}

/* より滑らかなアニメーションは SVG path を使い、SMILやJSで制御するのが現実的 */

注意：CSSネイティブで clip-path を滑らかにアニメーションさせる場合、polygon() の頂点数が変わらないように揃える、もしくは SVG を用いると安定します。

SVGマスク（mask）との違い

  • clip-path：形状で切り抜く（透明/非表示の領域が単純）
  • mask / mask-image：透過度（アルファ）を用いるグラデーション的なマスク表現が可能（半透明を使ったフェードなど）

微妙なフェードやグラデーションマスクは SVG マスクや mask-image が適します。

レスポンシブ対応と単位の選び方

  • %（パーセント）／objectBoundingBox：要素サイズに合わせて相対的に形状を定義する時に有利
  • px / vw / vh：ピクセルベースで固定したい箇所に使用
  • SVG の clipPathUnits を objectBoundingBox にすると、パスが要素サイズにフィットする

ブラウザ互換性とプレフィックス

  • 近年のブラウザは clip-path を広くサポートしていますが、古いブラウザでは非対応の場合あり
  • SVG を使う場合は clip-path: url(#id) の挙動がブラウザにより扱いが異なるため、必ず実機で確認する
  • WebKit系古いバージョンで -webkit-clip-path が必要になることがある（必要な場合のみ付与）

パフォーマンスの注意点

  • 単純な clip-path（circle/ellipse/inset）は軽量
  • 複雑な SVG パスや大量の要素で頻繁に再計算が発生するとレンダリング負荷が上がる
  • アニメーションでレイアウト再計算が発生しないよう、可能なら transform / opacity を併用する設計を検討する

アクセシビリティとフォールバック戦略

  • 重要な情報（テキスト等）を切り抜きで隠す場合は、スクリーンリーダーやキーボード利用者に配慮する
  • フォールバック：clip-path 非対応時の代替として border-radius、overflow:hidden、または別スタイル（代替画像）を用意
  • 画像の意味が失われないように alt 属性や aria-label を適切に付与する

実践サンプル：波状ヘッダー（コピペ可）

HTML
<svg width="0" height="0" style="position:absolute;left:-9999px;" aria-hidden="true">
  <defs>
    <clipPath id="wave" clipPathUnits="objectBoundingBox">
      <path d="M0,0.85 C0.25,0.6 0.4,1 0.6,0.85 C0.8,0.7 1,1 1,1 L1,1 L0,1 Z" />
    </clipPath>
  </defs>
</svg>

<header class="hero-wave" style="clip-path: url(#wave);">
  <img src="header.jpg" alt="ヘッダー画像">
  <h1>波状ヘッダーの見出し</h1>
</header>
CSS
.hero-wave {
  position: relative;
  height: 360px;
  overflow: hidden;
}
.hero-wave img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-wave h1 {
  position: absolute;
  left: 24px;
  bottom: 40px;
  color: #fff;
  text-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
ヘッダー画像

波状ヘッダーの見出し

便利なツール・ジェネレーター

  • Clip-pathジェネレーター（polygon作成） — GUIで頂点を操作してコードを得られるツール
  • SVGパスエディタ — 複雑な波形やロゴのパスを作成
  • ブラウザの DevTools（要素の clip-path をライブ編集）

まとめ

  • clip-path は写真や要素を魅力的に切り抜く強力な表現手段
  • 複雑な形状は SVG <clipPath> を活用すると管理しやすい
  • アニメーションは可能だが互換性と性能に注意。必要なら JS や SVG を併用する
  • フォールバックとアクセシビリティを忘れずに実装する

ひと言：「クリップパスはページに“カタチの個性”を与える魔法。まずは小さな箇所で試して、見栄えとパフォーマンスのバランスを探してみよう！」

関連記事

PAGE TOP