こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
最近のWebデザインでは、ノイズエフェクト（ノイズ加工）と呼ばれる
ざらざらとした粒状感のある質感がトレンドになっています。
単調になりがちなフラットデザインもこの「ノイズ」を少し加えるだけで
- 奥行き
- 情報量
- 視覚的な心地よさ
を簡単にこなれ感を出すことができちゃいます！
この手法は、「つるつるのプラスチック板に、きめ細かな砂を薄くまぶす」ようなものです。ほんの少し質感を足すだけで、触れたくなるような実在感と深みが生まれます。
そんな感じで、グラデーション × ノイズ × 曲線的な形状（流体シェイプ）を組み合わせた装飾パーツの作り方を、CSSコードとあわせて解説します。
完成イメージ
See the Pen Untitled by reydesign8376 (@reydesign8376) on CodePen.
LPやセクション装飾など「背景が少し寂しい」と感じた場面で使いやすいあしらいです。
実装コード
コピペOK
HTML
<div class="gradation_circle"></div>CSS
.gradation_circle {
width: 300px;
height: 200px;
padding: 4rem 1rem;
/* 不規則な形状を作る */
border-radius: 62% 38% 63% 37% / 40% 60% 40% 60%;
/* グラデーションとノイズを重ねる */
background: radial-gradient(at 25% 32%, #ff7aa0 0px, #f7fe7bb6 120%), url(https://maisondelamer-design.com/blog/wp-content/uploads/2025/01/noise.png);
}画像は、お馴染みこれをダウンロードして使ってみてくださいね。👇
“ノイズ画像” をダウンロード noise.png – 689 回のダウンロード – 176.12 KBデザインのポイント
1. ノイズ画像による質感の追加
実装の大きな特徴はbackground プロパティで グラデーションとノイズ画像を重ねている点です。
background:
radial-gradient(...),
url(noise.png);軽量なノイズPNGを使うことで、パフォーマンスを保ちつつ
背景に立体感と情報量を加えることができます。
グラデーションだけだと「つるっとしすぎる」場合でも
ノイズを足すことで、一気にWebデザインらしい質感になります。
2. 曲線の作り方
border-radius: 62% 38% 63% 37% / 40% 60% 40% 60%;このように複数の値を指定することで
正円ではない柔らかい形状を作ることができます。流体シェイプとか言われてます。
- 完璧すぎない形
- 少し歪んだ曲線
が加わることで、ミニマルなデザインの中にも親しみやすさや自然な動きを感じさせる表現になります。
ジェネレーターもあります参考に👇
3. radial-gradientで立体感を演出
radial-gradient(at 25% 32%, #ff7aa0 0px, #f7fe7bb6 120%)上下グラデーションの色の濃さに差をつけると立体感を加えます。明度差＋透過によって、光を受けているような奥行きを作ります。
- 上側の色
#ff7aa0はやや濃く設定する - 下側の色
#f7fe7bb6は薄めにして、ノイズ画像が透けて見えるようにする
この少しの違いで、背景が「面」ではなく球体のような印象になります。
どちらの方法でノイズを取り入れる？
今回は画像を使った方法ですが、用途に応じて以下の使い分けがおすすめです。
- 画像を使用する方法
→ 特定の質感を狙いたい／デザインを安定させたい場合 - CSSのみで再現する方法
→ 画像を増やしたくない／色や粒子を細かく制御したい場合
プロジェクトの規模や運用方法に合わせて選ぶとよいでしょう。
cssのみ方法は、こちらの記事に書いてます！
まとめ
ノイズテクスチャを取り入れたデザインはシンプルながら非常に効果的です。
今回紹介した「曲線的な形状 × グラデーション × ノイズ」の組み合わせを使えば
- のっぺりした背景を回避できる
- さりげない装飾でデザイン性を高められる
といったメリットがあります。
背景が少し物足りないと感じたときは、ぜひこうした静的な装飾パーツを取り入れてみてください。
補足！
noise.pngは、できるだけ軽量で粒子の細かいものを使用してください- ノイズは「効いているか分からない」くらいが最適です👍
コメント