ノイズ背景ヒーロー

解説

ノイズ背景ヒーローは、淡い背景にうっすらと粒状のノイズを重ね、紙のような質感と高級感を出すファーストビューです。ノイズは画像ファイルではなく、::before 擬似要素に SVG の feTurbulence フィルターをデータ URI として埋め込んで生成しています。外部画像を読まずに表現できるため、追加のリクエストが発生せず軽量なのが利点です。

使う場面

• ブランドサイトやポートフォリオの冒頭
• 「手仕事」「クラフト」感を伝えたいプレミアム系 LP
• のっぺりしがちなベタ塗り背景に質感を足したいとき

ノイズの強さは擬似要素の opacity、粒の細かさは feTurbulence の baseFrequency で調整します。値を上げるほど細かく、下げるほど粗い質感になります。背景色は .hn の background で変えられます。ノイズが濃すぎると本文の可読性が落ちるので、文字色とのコントラストを確認しましょう。擬似要素には pointer-events:none が付いており、上のボタンやリンクの操作を妨げません。

使用例・適したシーン

• LP のファーストビュー
• サービストップの導入
• コーポレートサイトのトップ