こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、見出しの背景に“モヤッ”と揺らめくノイズを入れる、ちょっとクセになるデザイン手法をご紹介します。
最近のトレンドとして、背景に微細な動きをのせるミニマルアニメーションが人気です。
派手すぎないのに印象的で、サイトの「洗練感」をぐっと高めてくれます。
この記事では、
- CSSだけで作れる柔らかいノイズ
- モヤモヤが自然に流れるアニメーション
- どんなサイトにも合わせやすい調整ポイント
まで、コピペで使える形でまとめています。
CSSだけで“モヤモヤノイズ”を作る
今回のノイズは、
filter: blur() × background-size × animation を組み合わせて作ります。
静的な画像を使わず、CSSのグラデーションをぼかして動かすことで、
「ゆらゆら濃淡が変わっていくノイズ感」を表現します。
コピペで使えるコード
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ノイズ感を調整するポイント
- ノイズの強さ → blur(20px) を調整
- 動きの速さ → animation: noiseMove 6s の秒数を変更
- 明るさ → radial-gradient の opacity を調整
- モヤモヤの細かさ → background-size を「150%」「300%」などで変更
応用編:粒子系（パーティクル）ノイズ背景
ノイズがチラチラ漂うような「粒子風」の背景です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
歪み系（うねり・ゆらぎのノイズ背景）
背景が“ぐにゃっ”と歪む液体ノイズ風。
まとめ：モヤモヤノイズはUIに“奥行き”をつくる
ノイズというと「汚し」「質感追加」の印象がありますが、
動くノイズは“視線誘導”にも有効です。
背景に控えめなモヤモヤがあるだけで、
「ただの見出し」が「情報セクションの入口」にグレードアップします。
強すぎれば主張しすぎますが、今回のように軽い濃淡の流れにすると、
ビジネスサイトでも十分使える上品な演出になります。
ぜひ、あなたのデザインにも取り入れてみてください！
