Softonic

ノイズテクスチャジェネレーター

ステップ 1 / 2
次へ

ほんの少しノイズを乗せるだけで、バンディングが目立たなくなり、ベタ塗りの面はやわらかくなり、UIのグラデーションも無機質さが薄れます。このジェネレーターは、SVGのfeTurbulenceフィルターで継ぎ目なく敷き詰められる正方形のノイズテクスチャを作ります。背景色、ノイズの不透明度、粒の周波数、ノイズの種類を調整でき、出力は背景色とインラインのSVGデータURIからなる完成済みのCSSなので、スタイルシートにそのまま貼り付けられます。

ノイズテクスチャの作り方

  1. 1

    背景色を選ぶ

    粒はこの色の上に重なるので、実際に使う面の色から始めてください。

  2. 2

    不透明度を決める

    ほとんど見えない程度（2〜5%）から、しっかりしたフィルムグレイン（25%以上）まで。UIでは控えめな値が有効です。

  3. 3

    周波数を調整する

    基本周波数を上げると細かく密な粒に、下げると大きくやわらかい斑になります。

  4. 4

    ノイズの種類を選ぶ

    フラクタルノイズはやわらかく自然な質感、タービュレンスはコントラストが強く雲のような質感になります。

  5. 5

    CSSをコピーする

    出力は背景色とインラインのSVGデータURIで、そのままスタイルシートに貼り付けられます。

feTurbulenceによるSVGノイズ

ノイズをいちばん軽く実装する方法は、SVGとタービュレンスフィルターの組み合わせです。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

background-image: url("data:image/svg+xml,...") としてインラインで埋め込めば、数百バイトのマークアップだけで、どんな面にもタイル状に敷けます。追加のHTTPリクエストも発生しません。

用途別のおすすめ設定

用途 不透明度 基本周波数 ノイズの種類
ダークモードのUIパネル 3-5% 0.8-1.0 フラクタルノイズ
ヒーロー部分のグラデーションに重ねる 5-10% 0.7-0.9 フラクタルノイズ
紙の質感のカード 8-15% 0.6-0.8 フラクタルノイズ
フィルムグレイン風の写真 15-25% 0.9-1.2 フラクタルノイズ
レトロポスターの粒状感 25-40% 0.4-0.6 タービュレンス

パフォーマンスに関するメモ

  • SVGのタービュレンスは、多くのブラウザーでGPUを使いません。 CSSの背景で問題なく動き、再描画のコストも低く抑えられます。
  • タイルは1枚を使い回す。 このツールはstitchTiles="stitch"を指定した200 x 200のタイルを出力するため、大きなビューポートでも継ぎ目が見えません。
  • ノイズをアニメーションさせない。 feTurbulenceはbaseFrequencyを変化させないとうまくアニメーションせず、長時間の使用ではパフォーマンスが大きく落ちます。
  • グラデーションの上に重ねる。 CSSのグラデーションに不透明度10%の粒を重ねると、グラデーション単体より豊かな面になります。

よくある質問

ベタ塗りやグラデーションの広い面が、きれいすぎて物足りないと感じるときです。ヒーローセクション、モーダルの背景、ダークUIのパネルは、3〜10%のノイズで奥行きが出ます。可読性を損なうため、本文が乗る領域では避けてください。

SVGのfeTurbulenceフィルターでは、type="turbulence"はパーリンノイズの絶対値を用いるためコントラストが高く雲のような見た目になり、type="fractalNoise"は符号付きの値を使うためやわらかく自然な粒になります。UIではほぼ常にフラクタルノイズが適しています。

なりません。このツールが出力するのはCSSに直接埋め込む数百バイトのインラインSVGデータURIなので、画像ファイルも追加のリクエストも発生しません。リサンプリングなしでどんなサイズの面にも拡大できます。

はい。チャンネルあたり8ビットのディスプレイでは、コントラストの低いグラデーションにバンディングが見えることがあります。2〜3%のノイズを重ねると階調の変化がディザリングされ、スマートフォンでもモニターでもバンディングが消えます。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

このツールは他の言語でも利用できます