フィルムグレイン — 動きの伝え方辞典

media

film grain / grain overlay

フィルムグレイン

画面にフィルム粒子のノイズを薄く乗せ続け、デジタルの平滑さを消す質感演出。feTurbulenceのdata URIなら画像ファイルもcanvasも不要で軽い。opacity 0.03〜0.08の「気づかれない濃さ」に留められるかが品位の分かれ目。

01 — Demo video

Play live →

02 — Prompt template

画面全体にフィルム粒子のノイズを重ねる film grain を実装してください。

- ノイズは外部画像にせず、SVGの feTurbulence(type="fractalNoise"、baseFrequency={{grain}}、stitchTiles="stitch")+ feColorMatrix(saturate 0)を data URI 化して background-image に敷く
- グレインは position: fixed; inset: 0 のオーバーレイ1枚に持たせ、pointer-events: none と最前面の z-index を指定する(コンテンツ側のDOMには手を入れない)
- オーバーレイの opacity は {{opacity}} にする(0.03〜0.08が目安。それ以上は可読性を削る)
- ゆらぎはノイズの再生成ではなく、オーバーレイを毎秒 {{fps}} 回 transform: translate でランダムな位置に飛ばして表現する(オーバーレイは200%サイズで敷き、端の露出を防ぐ)
- stitchTiles="stitch" でタイルの継ぎ目を消す。SVGの生成は初回1回だけにし、毎フレーム作り直さない
- prefers-reduced-motion 時はゆらぎを止め、静止したテクスチャとして重ねる

画面全体にフィルム粒子のノイズを重ねる film grain を実装してください。

- ノイズは外部画像にせず、SVGの feTurbulence(type="fractalNoise"、baseFrequency={{grain}}、stitchTiles="stitch")+ feColorMatrix(saturate 0)を data URI 化して background-image に敷く
- グレインは position: fixed; inset: 0 のオーバーレイ1枚に持たせ、pointer-events: none と最前面の z-index を指定する(コンテンツ側のDOMには手を入れない)
- オーバーレイの opacity は {{opacity}} にする(0.03〜0.08が目安。それ以上は可読性を削る)
- ゆらぎはノイズの再生成ではなく、オーバーレイを毎秒 {{fps}} 回 transform: translate でランダムな位置に飛ばして表現する(オーバーレイは200%サイズで敷き、端の露出を防ぐ)
- stitchTiles="stitch" でタイルの継ぎ目を消す。SVGの生成は初回1回だけにし、毎フレーム作り直さない
- prefers-reduced-motion 時はゆらぎを止め、静止したテクスチャとして重ねる

画面全体にフィルム粒子のノイズを重ねる film grain を実装してください。

- ノイズは外部画像にせず、SVGの feTurbulence(type="fractalNoise"、baseFrequency={{grain}}、stitchTiles="stitch")+ feColorMatrix(saturate 0)を data URI 化して background-image に敷く
- グレインは position: fixed; inset: 0 のオーバーレイ1枚に持たせ、pointer-events: none と最前面の z-index を指定する(コンテンツ側のDOMには手を入れない)
- オーバーレイの opacity は {{opacity}} にする(0.03〜0.08が目安。それ以上は可読性を削る)
- ゆらぎはノイズの再生成ではなく、オーバーレイを毎秒 {{fps}} 回 transform: translate でランダムな位置に飛ばして表現する(オーバーレイは200%サイズで敷き、端の露出を防ぐ)
- stitchTiles="stitch" でタイルの継ぎ目を消す。SVGの生成は初回1回だけにし、毎フレーム作り直さない
- prefers-reduced-motion 時はゆらぎを止め、静止したテクスチャとして重ねる

03 — Params

opacity(粒子の濃さ) — 範囲 0.01〜0.15 / 初期 0.05
0.03〜0.08が「言われないと気づかない」適正域。0.1を超えると汚れに見え、可読性を削り始める。
grain(粒の細かさ baseFrequency) — 範囲 0.3〜1.2 / 初期 0.8
feTurbulenceのbaseFrequency。大きいほど粒が細かい。0.6〜0.9がフィルムらしく、0.3台は粗粒でザラつきが主張する。
fps(ゆらぎの更新回数 /秒) — 範囲 0〜24 / 初期 12
8〜16でフィルムの明滅感が出る。0は静止テクスチャとして使える。24は砂嵐に寄る。

04 — Vocab

feTurbulence — パーリンノイズを生成するSVGフィルタ。fractalNoise型がフィルム粒子に近い。画像ファイルなしでノイズテクスチャを作れる。
baseFrequency — ノイズの周波数=粒の細かさ。値が大きいほど細かい粒になる。0.6〜0.9あたりがフィルムグレインの定番域。
data URI — 画像をファイルではなく文字列としてCSSに埋め込む形式。SVGノイズはテキストなので軽く、HTTPリクエストも増えない。
stitchTiles — feTurbulenceのタイル境界を連続させる指定。"stitch"にしないと、背景リピートの継ぎ目に線が出る。

05 — NG → OK examples

言い方: 「「画面にノイズというかフィルムっぽい質感が欲しい」」

なぜNG: 数百KBのnoise.pngを読み込む実装や、canvasで毎フレーム全ピクセルを描き直す重い実装が返ってきがち。濃さの指定がないとopacity 0.2〜0.3の「砂嵐」が乗り、質感ではなく画面の劣化に見える。

言い方: 「「grain overlayを実装。feTurbulence baseFrequency 0.8+saturate 0のSVGをdata URIでfixedオーバーレイに敷き、opacity 0.05、毎秒12回translateでゆらす。pointer-events: none、reduced-motionは静止」」

なぜOK: 生成方式(data URI)・濃さ・ゆらし方(再生成ではなくtranslate)まで指定している。「translateでゆらす」の一言が、毎フレームSVGを作り直す重い実装を防ぐ。