背景コード生成用
ざらっとしたノイズ質感の背景
細かな粒子を重ねて、紙のような深みを。
用途・説明
グラデーションや単色の背景に、細かなノイズ（グレイン）を重ねて質感を足す背景を作成します。フラットすぎて物足りないとき、落ち着いた上質な雰囲気を出したいときに向いています。ノイズはSVGフィルターで生成するので、画像ファイルを用意する必要がありません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ノイズの強さ]- 不透明度。例：0.25（0.15〜0.35が目安）
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSとSVGに詳しいフロントエンドエンジニアです。 「ノイズ（グレイン）質感」を重ねた背景を持つセクションを実装してください。 ## 仕様 - 下地：#DCE8FD から #FBE3D0 への linear-gradient（135deg） - その上に、モノクロの細かなノイズを不透明度 [ノイズの強さ] で重ねる - セクションの最小の高さ：480px ## 実装方法 - ノイズはSVGの feTurbulence（type="fractalNoise"、baseFrequency 0.8〜0.9）で生成し、feColorMatrix で彩度を0にする - SVGを data URI にして background-image に指定するか、セクション内に絶対配置したインラインSVGとして重ねる（どちらを選んだか理由を書く） - mix-blend-mode: multiply または overlay で下地となじませる - ノイズの層は pointer-events: none にし、コンテンツより背面に置く ## 読みやすさ - ノイズを重ねた状態で、文字のコントラスト比4.5:1以上を確保する - 小さな文字（14px以下）の背後では、ノイズが文字のふちをにごさないか確認する ## パフォーマンス - ノイズは1セクションにつき1層まで - アニメーションさせない（粒子を動かすと負荷が高く、ちらつきの原因になる） ## 出力形式 - [使用技術]のコードを1つ出力 - 2色とノイズの強さをCSS変数にまとめる - ノイズを弱めたい・強めたいときに触る値をコメントで説明する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。