グラデーションCTAバナーセクション

このパーツの使いどころと実装ポイント

画面幅いっぱいのグラデーション背景に、キャッチコピーと2つのボタンを中央寄せで配置したフルワイドのCTAバナーです。背景は linear-gradient(135deg,#667eea,#764ba2) の紫系で、上端には svg の path で描いた波（wave）装飾を aria-hidden で重ねています。position:relative と overflow:hidden で装飾をはみ出させずに収め、主ボタン（白）と副ボタン（白枠）の主従でアクションを誘導します。

向いている場面

• LPやサービスページの末尾で行動を強く促す締めのブロック
• 無料相談・資料請求・申し込みへの最終導線
• セクションの区切りに視覚的なアクセントを入れたいとき

カスタマイズの勘所

グラデーションの色は linear-gradient の2色を変えるだけでブランドに合わせられます。波の形は path の座標を調整すると緩急を変えられますが、装飾なので無理に触らず色だけ変える運用でも十分です。ボタンは2つまでに絞ると主従が明確になり、文言は「無料相談する」のように得られる結果を入れると押されやすくなります。アクセシビリティ面では、グラデーション上の白文字はコントラストが確保しやすい一方、副ボタンの白枠＋透明背景は背景色によって視認性が落ちることがあるので、ホバーや文字色を調整して読みやすさを保ってください。