【コピペOK】サイト背景にざらざら質感を追加しておしゃれな背景に【cssのノイズテクスチャ】

2025年1月5日2025年1月7日

URLをコピーしました！

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

最近、ノイズエフェクト、ノイズ加工、ノイズテクスチャなどと言われるざらざらした粒状感のある質感デザインが流行しています。

今回、画像を使用したノイズの配置方法と、CSSのみで実現するテクニックをご紹介します。簡単だよ

ノイズテクスチャとは？

ノイズテクスチャは、単調な背景に細かな粒子状の模様を加えることで、テクスチャや奥行きを演出するデザイン手法です。これにより、フラットなデザインでも視覚的な魅力を向上させることができます。

ノイズテクスチャのイメージ

質感の追加：シンプルな背景に奥行きや魅力をプラス。

視覚的なアクセント：ミニマルなデザインにも動きや立体感を演出。

以下では、ノイズテクスチャを実現する2つの方法を解説します。

画像を使ったノイズ背景

Noise Effect

ノイズ画像を背景として利用する方法です。この方法はシンプルで軽量なノイズ画像を用意するだけで手軽に導入できます。

サイト背景全体に効果を入れるのでbodyタグにスタイルを当てていきます。

    body {
        background-color: #fdf6ee;
        /* 基本の背景色 */
        background-image: linear-gradient(#fdf6eecf, #fdf6eecf),
            /* ベース色 */
            url(画像リンク);
        /* ノイズ画像 */
        background-repeat: repeat;
        /* 繰り返し */
        background-size: 100px;
        /* ノイズパターンのサイズ調整 */
        color: #333;
        /* テキスト色 */
    }

ポイント

background-image: ノイズ画像を指定し、繰り返し配置。
linear-gradient: ノイズ背景の下地となるベース色を指定し、ノイズの濃さを調整できます。例えば、#fdf6eecfのアルファ値（透明度）を変えることで、背景の明るさやノイズの目立ち具合を微調整可能です。
background-size: ノイズの粒度を調整。小さくすると細かいノイズ、大きくすると粗いノイズになります。
軽量なノイズ画像: サイズが数KBのPNG画像を使用するのがおすすめです。

画像はこれをダウンロードして使ってみてくださいね

noise ダウンロード

CSSのみで実現するノイズ背景

Noise Effect

画像を使わず、CSSだけでノイズを再現する方法です。軽量かつ柔軟に調整可能で、プロジェクトによっては画像よりも便利です。

ノイズは擬似要素を使ってスタイルを当てます。

body {
    background-color: #fdf6ee;/* 基本の背景色 */
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, rgba(255, 0, 0, 0.774) 1px, transparent 1px), /* 赤 */
        radial-gradient(circle, rgba(0, 72, 117, 0.674) 1px, transparent 1px), /* 青 */
        radial-gradient(circle, rgb(0, 255, 119) 1px, transparent 1px); /* 緑 */
    background-size: 3px 3px; /* ノイズの粒のサイズ */
    background-position: 
        0 0,
        1px 1px,
        2px 4px; /* ノイズの配置をランダムに見せる */
    opacity: 0.3; /* 透明度を設定 */
    pointer-events: none;
    z-index: 1;/* 要素によって調整が必要 */
}

radial-gradientで円形のグラデーションを利用して、細かな粒子状の模様でノイズを作っています。

こんな感じ