資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

SVGフィルタで実現する質感表現｜液体・ガラス・メタリックまで実装例を踏まえて徹底解説

プログラミング CSS
生徒

先生、CSSだけでは表現できない、もっと複雑な質感やエフェクトを実装したいんですけど、どうすればいいでしょうか？

ペン博士

よーく聞くんだぞ。今日はSVGフィルタを使った質感表現について詳しく解説するぞい！CSSだけでは難しい液体の揺らぎやガラス質感も実現できるんじゃ！

生徒

そうなんですね！ぜひ教えてください！

Webデザインにおいて、視覚的に魅力的な質感表現は、ユーザーの注目を集め、サイトの印象を大きく左右します。通常のCSSフィルタでは実現が難しい複雑な質感やエフェクトも、SVGフィルタを活用することで、JavaScriptを使わずに実装可能です。

本記事では、SVGフィルタを使った質感表現の実装方法について、液体の波紋効果、ガラス質感、メタリック効果など、実例を交えながら基本から応用まで詳しく解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

橋本さん
将来に繋がるスキルを身に付けたいと考え、プログラミングに出会う。在学中の大学ではプログラミングの講義がなかったため、独学で学習していたが、限界を感じWithCodeに入学を決意。短期集中カリキュラムでプログラミング学習に打ち込んだ結果、見事卒業テストに合格し、案件を勝ち取りました。現在は、新たな言語の習得に向けて学習を継続しながら就職活動に向けて準備を行っています。

詳しくはこちらの記事をご覧ください。

あわせて読みたい
【学生さん必見】大学生ながら案件を完走！案件を経験した後の活動状況もお聞きしました！ ペン博士！大学生ながら案件をこなした方がいるって聞いたんですけど本当ですか？ うむ、本当じゃ。わしが運営しておるプログラミングスクールの受講生じゃ。そして、そ...

橋本さんの主な制作実績はこちら

創業時の新規HP制作
株式会社hado 様
目次

SVGフィルタとは？

SVGフィルタとは、SVG（Scalable Vector Graphics）で定義される画像処理フィルタのことです。画像やHTML要素に対して、ぼかし、歪み、色調整、ノイズ生成など、さまざまな視覚効果を適用できます。

通常のCSSフィルタ（blur、brightness、contrastなど）と比べて、SVGフィルタはより複雑で高度なエフェクトを実現できます。複数のフィルタプリミティブ（フィルタの基本単位）を組み合わせることで、液体の質感、ガラスの透明感、金属の光沢など、リアルな質感表現が可能になります。

SVGフィルタの基本構造

SVGフィルタは、HTML内に<svg>タグと<filter>タグを使って定義します。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <filter id="myFilter">
    <!-- フィルタプリミティブをここに配置 -->
  </filter>
</svg>

定義したフィルタは、CSSのfilterプロパティで要素に適用します。

.element {
  filter: url(#myFilter);
}

SVGフィルタで質感表現を実現するメリット

1. JavaScriptなしで高度なエフェクトが実装可能

SVGフィルタの大きな魅力は、JavaScriptを書かなくてもリッチな視覚表現ができる点です。

例えば、

  • ガラスのような透過表現
  • 波打つ液体エフェクト
  • ノイズを使ったメタリック質感
  • ライトが当たっているような立体感

といった演出も、SVGフィルタのプリミティブ（feTurbulence や feGaussianBlur など）を組み合わせるだけで実装できます。

これにより、

  • Canvas描画
  • Three.jsなどの重量級ライブラリ
  • 独自JSロジック

といった構成が不要になります。

結果として、

  • バンドルサイズが小さい
  • デバッグしやすい
  • デザイン変更に強い

という、保守性の高いフロントエンド構成が実現できます。

2. 画像編集ソフト不要でリアルタイム調整

PhotoshopやIllustratorを使った質感表現は、一度書き出してしまうと

「もう少しぼかしたい」
「ノイズを弱めたい」

といった微調整のたびに再エクスポートが必要になります。

SVGフィルタの場合は、

stdDeviation="2"
numOctaves="1"
scale="15"

といった数値を変更するだけで、その場で見た目が変わります。

つまり、

  • ブラウザで確認
  • 数値を調整
  • 即反映

というリアルタイムデザインが可能になります。

デザイナーとエンジニアの間で
「もう一回画像ください」
という往復がなくなり、制作スピードが大幅に向上します。

3. レスポンシブ対応が容易

画像ベースのエフェクトは、

  • 拡大でぼやける
  • Retina対応で容量が増える
  • デバイスごとに別画像が必要

といった問題を抱えがちです。

SVGフィルタはベクター＆動的処理なので、

  • 4Kモニター
  • スマホ
  • タブレット

すべてで同じクオリティを維持できます。

さらにCSSと組み合わせることで、

  • モバイルでは効果を弱める
  • デスクトップではリッチにする

といった条件分岐も簡単。

レスポンシブ設計と非常に相性が良いのも大きなメリットです。

4. CSSアニメーションと組み合わせ可能

SVGフィルタは「静的な効果」だけでは終わりません。

フィルタのパラメータは、

  • CSSアニメーション
  • トランジション
  • SVGの <animate>

で動的に変更できます。

これにより、

  • ホバーで質感が変わる
  • スクロールに合わせて揺らぐ
  • ロード中に波打つ

といったインタラクティブな質感表現が実装可能になります。

SVGフィルタの主要なプリミティブ

ペン博士

SVGフィルタには、さまざまなフィルタプリミティブが用意されている。ここでは、質感表現に特に有効な主要プリミティブを紹介するぞ！

feTurbulence：ノイズ生成

feTurbulenceは、パーリンノイズやフラクタルノイズを生成するフィルタプリミティブです。液体の揺らぎ、雲の質感、大理石模様など、自然な不規則パターンを作り出します。

主要な属性

  • type: ノイズのタイプ（fractalNoiseまたはturbulence）
  • baseFrequency: ノイズの細かさ（値が大きいほど細かい）
  • numOctaves: ノイズの複雑さ（オクターブ数）
  • seed: ノイズのランダムシード値

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

このコードでは、グラデーション背景にパーリンノイズを適用し、自然な質感を加えています。

feDisplacementMap：歪み効果

feDisplacementMapは、別の画像やフィルタの出力を基に、ピクセルの位置をずらすフィルタプリミティブです。液体の波紋、ガラスの歪み、熱気の揺らぎなどを表現できます。

主要な属性

  • in: 歪ませる対象（SourceGraphicなど）
  • in2: 歪みの基準となる入力
  • scale: 歪みの強さ
  • xChannelSelector: X軸方向の歪みに使用するカラーチャンネル
  • yChannelSelector: Y軸方向の歪みに使用するカラーチャンネル

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

このコードでは、feTurbulenceで生成したノイズをfeDisplacementMapに渡し、画像に波打つような歪みを加えています。

feGaussianBlur：ぼかし効果

feGaussianBlurは、ガウシアンぼかしを適用するフィルタプリミティブです。ガラス質感やソフトフォーカス効果に使用されます。

主要な属性

  • in: ぼかす対象
  • stdDeviation: ぼかしの強さ（標準偏差）

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

feColorMatrix：色調整

feColorMatrixは、色相、彩度、明度などを行列演算で変換するフィルタプリミティブです。グレースケール化、セピア調、色相回転などに使用されます。

実装例：セピア調

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

feMorphology：形状変更

feMorphologyは、形状を膨張または収縮させるフィルタプリミティブです。アウトライン効果や影の調整に使用されます。

主要な属性

  • operator: erode（収縮）またはdilate（膨張）
  • radius: 変形の半径

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

feBlend：合成

feBlendは、2つの入力を特定の合成モードでブレンドするフィルタプリミティブです。Photoshopのレイヤー合成モードと同様の効果が得られます。

主要な属性

  • mode: normal、multiply、screen、darken、lightenなど
  • in: 背景レイヤー
  • in2: 前景レイヤー

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

実践できる質感表現の応用例

生徒

具体的にどんな質感表現ができるんですか？

ペン博士

液体の波紋、ガラス、メタリック、ネオンなど、さまざまな質感を実装できるぞい。一つずつ見ていこう！

応用例1：液体のような波紋効果

液体の波紋効果は、feTurbulenceとfeDisplacementMapを組み合わせて実現します。アニメーションを加えることで、水面のような動的な揺らぎを表現できます。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

コード解説

  • feTurbulence: baseFrequency="0.01 0.03"で、X軸とY軸で異なる周波数のノイズを生成し、より自然な波紋を作ります
  • animate: baseFrequencyの値を20秒かけて変化させ、波紋が動いているように見せます
  • feDisplacementMap: scale="15"で歪みの強さを調整。値を大きくすると波紋が強くなります

ポイント： baseFrequencyの値を変えることで、波紋の細かさを調整できます。小さい値（0.01など）で大きな波、大きい値（0.1など）で細かい波になります。

応用例2：フロストガラス質感

フロストガラス（すりガラス）の質感は、feGaussianBlur、feTurbulence、feColorMatrixを組み合わせて実現します。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

コード解説

  • feGaussianBlur: 背景をぼかして、ガラス越しに見えるような効果を作ります
  • feTurbulence + feColorMatrix: 細かいノイズを生成し、半透明の白色に調整してガラスの質感を表現
  • feBlend: mode="screen"でぼかしとノイズを合成し、柔らかいガラス質感を実現

ポイント： backdrop-filterとSVGフィルタを併用することで、よりリアルなガラス質感を表現できます。

応用例3：メタリック（金属）質感

金属の質感は、光沢とハイライトが重要です。feSpecularLighting（鏡面反射）を使うことで、金属特有の光沢感を表現できます。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

コード解説

  • feSpecularLighting: 鏡面反射を計算し、金属特有のハイライトを生成
  • specularExponent: 値が大きいほどハイライトが鋭くなり、金属感が増します
  • fePointLight: 点光源を配置し、光の方向を設定
  • feComposite: 図形と鏡面反射を合成して、金属の質感を完成

応用例4：ネオンエフェクト

ネオンエフェクトは、feGaussianBlur、feColorMatrix、feBlendを組み合わせて、光が発光しているような効果を作ります。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

コード解説

  • 複数のfeGaussianBlur: 異なる強度のぼかしを重ねることで、ネオンの発光を再現
  • feColorMatrix: 青色成分（B値）を3倍に強調し、ネオンの色味を強調
  • feMerge: 複数のレイヤーを順番に重ねて、多層的な発光効果を実現
  • CSSアニメーション: flickerでネオンが点滅するような動きを追加

パフォーマンス最適化の注意点

生徒

SVGフィルタって重くなりませんか？パフォーマンスが心配です…

ペン博士

いい質問じゃ！SVGフィルタは確かにCPU/GPUリソースを使うから、適切な最適化が必要なんじゃ。

1. will-changeプロパティの活用

will-changeプロパティを使うことで、ブラウザに事前に最適化を指示できます。

.filtered-element {
  filter: url(#myFilter);
  will-change: filter;
}

2. フィルタの複雑度を抑える

フィルタプリミティブを過度に重ねると、処理負荷が高くなります。必要最小限のプリミティブで効果を実現しましょう。

  • feTurbulenceのnumOctavesは、4以下が推奨
  • feGaussianBlurのstdDeviationは、10以下が推奨

3. アニメーションの範囲を限定

フィルタのアニメーションは、画面全体ではなく特定の要素のみに適用します。

/* 良い例：特定の要素のみアニメーション */
.hero-image {
  filter: url(#liquidRipple);
}

/* 悪い例：body全体にアニメーション（避ける） */
body {
  filter: url(#liquidRipple);
}

4. モバイルでの使用を慎重に

モバイルデバイスはデスクトップよりも処理能力が低いため、複雑なSVGフィルタは避けるか、メディアクエリで無効化します。

/* デスクトップのみフィルタを適用 */
@media (min-width: 768px) {
  .filtered-element {
    filter: url(#myFilter);
  }
}

/* モバイルではシンプルなCSSフィルタのみ */
@media (max-width: 767px) {
  .filtered-element {
    filter: blur(2px) brightness(1.1);
  }
}

5. ハードウェアアクセラレーションを有効化

transform: translateZ(0)やtransform: translate3d(0, 0, 0)を追加することで、GPUアクセラレーションを強制的に有効化できます。

.filtered-element {
  filter: url(#myFilter);
  transform: translateZ(0);
  backface-visibility: hidden;
}

ブラウザ対応状況

SVGフィルタは、すべてのモダンブラウザでサポートされています。

ブラウザSVGフィルタ基本機能アニメーション備考
Chrome完全対応ありバージョン8以降
Firefox完全対応ありバージョン4以降
Safari完全対応ありバージョン6以降
Edge完全対応ありすべてのバージョン
IE11部分対応なし一部プリミティブ非対応

フォールバック（代替手段）の実装

古いブラウザ向けに、フォールバックを用意することをおすすめします。

/* SVGフィルタをサポートしていない場合のフォールバック */
.filtered-element {
  /* 基本的なCSSフィルタ */
  filter: blur(2px) brightness(1.1);
}

/* SVGフィルタをサポートしている場合は上書き */
@supports (filter: url(#myFilter)) {
  .filtered-element {
    filter: url(#myFilter);
  }
}

実務での活用シーン

生徒

SVGフィルタの実践的な活用方法を知りたいです！

ペン博士

うむ。SVGフィルタを使った質感表現は、以下のようなシーンで効果的じゃ！

1. ヒーローセクションの背景

ファーストビューは、サイトの印象を決める数秒間です。
ここに液体の波紋エフェクトやグラデーションアニメーションを加えることで、静的なサイトとの差別化が可能になります。

特に、

  • テック系サービス
  • Web制作会社
  • クリエイター系ポートフォリオ
  • AI・ブロックチェーン関連

などのブランドと相性が良く、未来感・先進性・没入感を演出できます。

ただし重要なのは、あくまで背景として使うこと。
テキストの可読性を損なわないように、

  • コントラストを確保する
  • エフェクトの動きを緩やかにする
  • Core Web Vitalsに影響しない設計にする

といったバランスが鍵になります。
適切に設計すれば、「普通のLP」とは一線を画す体験を作れます。

2. カードUIのホバーエフェクト

カードUIは、情報の整理と視認性を高めるための定番コンポーネントです。
そこにガラス質感（glassmorphism）やネオンエフェクトを組み込むことで、触りたくなるUIへ進化させることができます。

.card {
  transition: filter 0.3s ease;
}

.card:hover {
  filter: url(#frostGlass);
}

3. ロゴやタイトルの装飾

ロゴやメインタイトルは、ブランドの象徴です。
ここにメタリック質感やネオンエフェクトを適用すると、印象は一気に変わります。

例えば：

  • 高級感を出したい → メタリック・光沢感
  • 近未来感を出したい → ネオン発光
  • ゲーミング感 → 強い発色＋グロー効果

といった方向性の演出が可能です。

特にランディングページやイベントページでは、
ロゴの質感だけで世界観を一瞬で伝えることができます。

ただし、常に強いエフェクトをかけるのではなく、

  • 通常状態は控えめ
  • スクロールやホバー時に発光

といった動きのメリハリをつけることで、上品さを保てます。

4. ポートフォリオサイトの作品展示

ポートフォリオにおいて重要なのは、
「何を作ったか」だけでなく「どう魅せるか」です。

制作物サムネイルに質感エフェクトを適用することで、

  • 作品が浮き上がるように見える
  • 立体感が出る
  • 実装力を視覚的に示せる

といった効果が得られます。

特にフロントエンドエンジニアやWebデザイナーの場合、エフェクト自体がスキル証明になります。

ただし過剰に使うとギャラリーが騒がしくなるため、

  • メイン作品だけに強い演出
  • その他は控えめ

といった設計にすると洗練されます。

単なる「作品一覧」から、
体験できるポートフォリオへ昇華させる要素として活用できます。

デバッグとトラブルシューティング

生徒

もし、トラブルがあった時の対処法も知りたいです！

ペン博士

うむ。ここでは、よくあるトラブルと解決法について紹介するぞい！

問題1：フィルタが適用されない

原因：

  • filter IDの指定ミス（url(#myFilter)の#を忘れている）
  • SVGがdisplay: noneになっていない（可視化されている）

解決法：

  • SVGは非表示にする
  • CSS側で正確にIDを指定する
<!-- SVGは非表示にする -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <filter id="myFilter">
    <!-- ... -->
  </filter>
</svg>

<!-- CSSで正確にIDを指定 -->
.element {
  filter: url(#myFilter); /* #を忘れずに */
}

問題2：アニメーションが動かない

原因：

  • <animate>タグの属性指定ミス
  • ブラウザが<animate>をサポートしていない

解決法：

  • 正しい属性構成で <animate> を記述する
<!-- 正しいanimate属性の書き方 -->
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2">
  <animate
    attributeName="baseFrequency"
    dur="10s"
    values="0.01; 0.02; 0.01"
    repeatCount="indefinite"
  />
</feTurbulence>

問題3：パフォーマンスが悪い

原因：

  • フィルタプリミティブを過度に重ねている
  • numOctavesやstdDeviationの値が大きすぎる

解決法：

  • プリミティブの数を減らす
  • パラメータの値を小さくする
  • will-changeプロパティを追加
  • モバイルではフィルタを無効化
<filter id="myFilter">
  <!-- numOctaves を小さく -->
  <feTurbulence baseFrequency="0.01" numOctaves="1" />

  <!-- stdDeviation を小さく -->
  <feGaussianBlur stdDeviation="2" />

  <feDisplacementMap in="SourceGraphic" scale="15" />
</filter>

.element {
  will-change: filter, transform;
}

/* モバイルはフィルタOFF */
@media (max-width: 768px) {
  .element {
    filter: none;
  }
}
生徒

SVGフィルタって、思ったより簡単に使えるんですね！これでWebデザインの表現の幅が広がりそうです！

ペン博士

その通りじゃ！SVGフィルタは奥が深いが、基本を押さえればさまざまな質感表現ができるんじゃ。パフォーマンスに気をつけながら、実際のプロジェクトで試してみるんじゃぞ！

生徒

はい！まずは液体の波紋効果から実装してみます！ありがとうございました！

まとめ

本記事では、SVGフィルタを使った質感表現の実装方法について、実例を交えながら詳しく解説しました。

重要なポイントは以下の通りです。

・SVGフィルタの基本：feTurbulence、feDisplacementMap、feGaussianBlurなどのプリミティブを組み合わせることで、複雑な質感を実現
・液体の波紋：ノイズと歪みを組み合わせ、アニメーションで動的な揺らぎを表現
・ガラス質感：ぼかしとノイズを合成し、透明感のある質感を作成
・メタリック質感：鏡面反射を利用して金属の光沢を再現
・ネオンエフェクト：多層的なぼかしと色調整で発光効果を実現
・パフォーマンス最適化：will-change、フィルタの簡素化、モバイル対応が重要

WithCodeで学んだHTML・CSSの基礎知識に、SVGフィルタの技術を組み合わせれば、どんな複雑な質感表現でも実現できます。

SVGフィルタは、JavaScriptを使わずに高度なエフェクトを実装できる強力な技術です。ぜひ実際のプロジェクトで活用し、ユーザーに驚きと感動を与えるWebサイトを作成してください。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

  • 期間：1週間
  • 学習内容：
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →
プログラミング CSS
CSS SVG アニメーション

この記事を書いた人

WithCode 編集部のアバター WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

関連記事

  1. ホーム
  2. プログラミング
  3. CSS
  4. SVGフィルタで実現する質感表現｜液体・ガラス・メタリックまで実装例を踏まえて徹底解説

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次