下部に波形 SVG のヒーロー

解説

ヒーローの下端を波形の曲線にして、次のセクションへやわらかくつなぐ定番デコレーションです。波は svg の path をベジェ曲線で描き、塗りを次セクションの背景と同じ白にすることで、境界が波打って見えます。SVG は position:absolute でヒーロー下部に貼り、preserveAspectRatio=none を指定して横幅いっぱいに引き伸ばしています。背景はオレンジ〜ピンクのグラデーション、CTA は白い丸ボタンという親しみやすい配色です。

使う場面

• キッズ・教育系スクールのトップ
• ウェルネス・ヘルスケアの案内ページ
• やわらかい印象を出したいサービス紹介

波の形は path の C（曲線）の制御点の数値で決まり、ここを変えると波の高さやうねりを調整できます。波の塗り色は必ず次のセクションの背景色と一致させるのがコツで、ずれると境目が目立ちます。背景グラデーションの色を変えればブランドに合わせられます。注意として、波は装飾なので読み上げ上の意味はなく、svg に余計なラベルは不要です。SVG は拡大しても粗くならないため、どの画面幅でもなめらかな曲線を保てます。

使用例・適したシーン

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