背景コード生成用
重なる波のセクション区切り
濃淡3層の波を重ねて、奥行きのある区切りに。
用途・説明
同じ色の濃淡で3層の波を重ねた、奥行きのあるセクション区切りを作成します。ファーストビューの下端や、フッターの手前に置くと、ページにやわらかい動きが出ます。SVGで描くので、どの画面幅でもなめらかです。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[上のセクションの背景色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「重なる波のセクション区切り」を持つセクションを実装してください。 ## 仕様 - 上のセクションの背景色：[上のセクションの背景色] - 波：3層。奥から #1463F0 の25%の淡い色、55%の色、#1463F0 - 波の高さ：全体で 120px。いちばん手前の波の色が、下のセクションの背景色になる ## 実装方法 - インラインSVGで、形の違う3つの path を重ねる。preserveAspectRatio="none" で横幅いっぱいに伸ばす - SVGは上のセクションの下端に置き、下のセクションとの間に 1px のすき間が出ないようにする - 3つの波は、山の位置を少しずつずらして重なりが見えるようにする - SVGには aria-hidden="true" を付ける ## 読みやすさ - 下のセクションの文字色は、#1463F0 に対してコントラスト比 4.5:1 以上になる色にする - 波に文字が重ならないよう、上のセクションの下の余白を波の高さぶん確保する ## レスポンシブ・その他 - スマホでは波の高さを 64px にする - 波をゆっくり横に流すアニメーションの例も併記する（prefers-reduced-motion で無効化） - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 色・波の高さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。