背景コード生成用
波形のセクション区切り
色の違うセクションを、なめらかな曲線でつなぐ。
用途・説明
背景色の異なる2つのセクションの境目を、直線ではなくゆるやかな波形でつなぐSVGの区切りを作成します。画像を使わないので軽く、色もCSSから変えられます。CTAセクションやフッターの手前に置くと、ページの流れがやわらかくなります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[上のセクションの背景色]- 例：#FFFFFF
[波の高さ]- 例：PC 80px / スマホ 40px
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはSVGとCSSに詳しいフロントエンドエンジニアです。 背景色の異なる2つのセクションをつなぐ「波形のセクション区切り」を実装してください。 ## 仕様 - 上のセクションの背景色：[上のセクションの背景色] - 下のセクションの背景色：#1463F0 - 波の高さ：[波の高さ] ## 実装方法 - 波はインラインSVGの path 1本で描く（画像ファイルは使わない） - SVGは幅100%で、preserveAspectRatio="none" を指定して横幅いっぱいに伸ばす - path の fill は currentColor にし、CSSの color で下のセクションの色を指定できるようにする - SVGは下のセクションの直前に置き、display: block と下方向 -1px のマージンで、境目に隙間の線が出ないようにする ## 波の形 - 山と谷が1.5〜2回ほどの、ゆるやかで左右非対称なカーブ - とがった部分や急な傾きを作らない ## レスポンシブ - スマホでは波の高さを半分程度にする - 画面幅が広くても波が間延びしすぎないよう、viewBoxの比率を調整する ## アクセシビリティ - SVGは装飾なので aria-hidden="true" と focusable="false" を付ける - 波の上にテキストを重ねない ## 出力形式 - [使用技術]のコードを1つ出力（上のセクション・波・下のセクションを含む最小の例） - 波の高さと色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。