SVGウェーブジェネレーター｜セクション区切り用の波形SVGをコード付きで作成

Webページのセクションとセクションの境目を、まっすぐな線ではなく波形で区切るためのSVGを生成します。波の高さ・周波数・レイヤー数・2色グラデーションをスライダーで調整し、できあがったSVGコードのコピーとファイル保存に対応しています。

💡 このツールについて

ヒーローエリアの下や、フッターの上に「ゆるやかな波の区切り」が入っているサイトをよく見かけます。ボックスを積み重ねただけのカクカクしたレイアウトに、波形をひとつ挟むだけで一気に柔らかい印象になります。ただ、その波形を一から手で書こうとすると、SVGのpath座標を延々と打ち込むことになり現実的ではありません。

このツールは、5本までのレイヤーを重ねて奥行きを出した波形を、スライダー操作だけで組み立てます。レイヤーごとに不透明度と高さを少しずつ変えているため、複数の波が前後に重なったような立体感が出ます。カラー1からカラー2へのグラデーションも自動で各レイヤーに割り当てられるので、色番号を考える必要はありません。出力はそのままHTMLに貼れるインラインSVGコードと、画像として扱える.svgファイルの両方です。

セクションの上端に置きたいときは「上下反転」をオンにすれば、波の向きが逆になります。コーポレートサイトのランディングページ、ポートフォリオ、ブログのヘッダーなど、区切りに少し動きを足したい場面で使えます。

🧐 よくある質問

生成したSVGをサイトに入れるには? 出力されたコードをコピーして、区切りたい2つのセクションの間にそのまま貼り付けます。width: 100%、display: blockを付けると、横に隙間ができず端まで波が伸びます。

画面幅が変わっても崩れませんか? 出力SVGにはpreserveAspectRatio="none"が付いています。これは「縦横比を保たずに枠いっぱいに引き伸ばす」という指定で、横幅100%にしておけばスマホでもデスクトップでも自動で横に広がります。波の縦の高さだけ調整したいときは、CSSのメディアクエリで高さを上書きします。

レイヤー数は何を変えますか? 重ねる波の本数です。1にすると単色の波1本、最大5にすると不透明度と高さの異なる波が5本重なり、奥行きのある背景になります。

周波数を上げるとどうなりますか? 1周期あたりの波の数が増えます。値が小さいとなだらかな大波、大きいと細かく上下する波になります。

PNGではなくSVGで出力する理由は? SVGはベクター形式なので、拡大しても4Kディスプレイでもエッジがぼやけません。波形ひとつなら1〜2KB程度と軽量で、ページの読み込みにほとんど影響しません。

📚 波形SVGのviewBoxと座標の豆知識

出力されるコードの先頭にはviewBox="0 0 幅 高さ"という記述があります。これはSVGの内部座標系を定義する箱で、実際の表示サイズとは独立しています。だからこそCSSで横幅を100%にしても、内部の波形の比率はviewBoxが管理し、preserveAspectRatioが引き伸ばし方を決める、という二段構えで応答的な表示が成立します。

波そのものは正弦波（サインカーブ）をpathの連続した直線で近似して描いています。区間を細かく刻んで点を打ち、それを直線でつなぐと、肉眼では滑らかな曲線に見えるという仕組みです。点の数を増やすほど曲線は滑らかになりますが、その分コードは長くなるため、見た目と軽さのバランスをとった刻み幅が使われています。