グラデーション波形ヒーロー
これは、ページ最上部のファーストビューに使う グラデーション背景のヒーローセクション です。背景は linear-gradient(135deg) の紫系グラデーションで、下端には viewBox と preserveAspectRatio="none" を指定したインライン SVG の波形を重ねています。
このパーツの使いどころと実装ポイント
これは、ページ最上部のファーストビューに使うグラデーション背景のヒーローセクションです。背景は linear-gradient(135deg) の紫系グラデーションで、下端には viewBox と preserveAspectRatio="none" を指定したインライン SVG の波形を重ねています。波形は path のベジェ曲線で描いた帯で、半透明の白を乗せることで奥行きを出しています。中央にメインコピー（h1）・サブコピー・CTA ボタン2本を縦並びで配置し、min-height:420px と display:flex; align-items:center で上下中央に揃えています。
向いている場面
- コーポレートサイトやサービス紹介サイトの第一印象づくり
- SaaS・アプリの「無料で始める／資料請求」を促すLP冒頭
- 採用サイトのトップで企業メッセージを大きく見せたいとき
カスタマイズと注意点
見出しは clamp(36px,6vw,64px) で画面幅に応じて伸縮するので、長いコピーでもはみ出しにくい設計です。色を変えるときは linear-gradient の2色を差し替えるだけで雰囲気が一変します。SVG 波形は装飾なので aria-hidden を付与済みで、消しても文章の意味は変わりません。白文字を半透明グラデの上に置く構成のため、背景色を明るくする場合は文字色とのコントラスト比を必ず確認してください。ボタンは primary と ghost の2系統で主従を付けており、最も押してほしい行動を primary に割り当てます。
よくある質問
背景の波形はどうやって作られていますか？
画像ではなくインラインSVGのpathで描いたベジェ曲線です。preserveAspectRatio="none"を指定しているため横幅に合わせて自由に伸び縮みし、どんな画面幅でも下端いっぱいに波が広がります。装飾要素なのでaria-hidden付きで、不要なら削除しても本文の意味は変わりません。
見出しが長いとレイアウトが崩れませんか？
見出しはclamp(36px,6vw,64px)で画面幅に応じて自動縮小するため、ある程度の長さなら収まります。ただし日本語コピーは折り返し位置が不自然になりやすいので、br要素やmax-widthで文節の区切りを明示すると、行末で語句が中途半端に切れるのを防げます。