中央揃えCTAヒーロー（グラデ背景）
ページ冒頭のファーストビューを、中央揃えで力強く見せるヒーローセクションです。背景は radial-gradient による楕円のグラデーションに、 ::after で描いたドット柄のテクスチャを重ね、画像を一切使わず CSS だけで奥行きのある背景を作っています。
このパーツの使いどころと実装ポイント
ページ冒頭のファーストビューを、中央揃えで力強く見せるヒーローセクションです。背景は radial-gradient による楕円のグラデーションに、::after で描いたドット柄のテクスチャを重ね、画像を一切使わず CSS だけで奥行きのある背景を作っています。前面にはバッジ・大見出し（<h1>）・リード文・2つのCTAボタン・信頼ポイントのトリオを縦に積み、視線を中央へ集めます。
構造とレスポンシブ
見出しは clamp(28px,5vw,52px) で画面幅に応じて滑らかに伸縮し、スマホでも大きすぎず、PCでも迫力を保ちます。CTAは flex-wrap で並べているため、狭い画面では自然に縦積みへ折り返します。信頼トリオ（初期費用0円から、等）にはチェックマークの SVG が付き、サービスの安心材料を簡潔に示します。
向く場面とカスタマイズ
- サービスサイト・LPのトップ
- SaaS や制作会社の集客ページ
- キャンペーン・申込み導線のあるページ
キャッチコピーの改行 <br> は中途半端な位置で文が切れないよう調整できます。h1 はページに1つだけにし、サービスを表す主要キーワードを含めてください。背景の SVG ドットは装飾なので aria-hidden 相当に分離し、読み上げの邪魔をしない構造にしています。
よくある質問
背景の模様は画像ファイルですか。
画像ではありません。楕円のラジアルグラデーションと、CSSのradial-gradientで描いたドット柄を重ねて表現しています。画像読み込みがないため軽く、色やドット間隔もCSSだけで自由に変えられます。
見出しの文字サイズはスマホで大きすぎませんか。
なりません。clampで画面幅に応じて最小28px〜最大52pxの範囲で滑らかに伸縮するよう指定しているため、スマホでは収まりよく、PCでは迫力のあるサイズに自動調整されます。