グラデーションヒーローセクション

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

このパーツは、背景にグラデーションを敷き、キャッチコピーと2つのCTAボタンを置いたシンプルなヒーローセクションです。背景は linear-gradient(135deg,...) による斜めの3色グラデーションで、min-height:480px の領域に display:flex の中央寄せでコンテンツを配置します。見出しは clamp(28px,5vw,52px) で画面幅に応じて伸縮し、装飾の円が背景に浮かびます。画像を使わないため軽量で表示も速いのが特徴です。

向いている場面

• サービスサイトやSaaSの、第一印象を素早く伝えたいファーストビュー
• 写真素材が用意できない段階の、暫定ヒーローとして
• コーポレートサイトで、コピー重視の落ち着いた導入を作りたいとき

差し替えどころは、ラベル・見出し・本文・2つのボタンのラベルとリンク先です。プライマリボタンは主要な行動（相談・申込）に、ゴーストボタンは補助的な導線（実績・資料）に割り当てると役割が明確になります。グラデーションの色は linear-gradient の停止色を変えるだけでブランドカラーに寄せられます。

実装上の注意

見出しは h1 なので、1ページに複数置かないよう注意してください。暗い背景に明るい文字の配色ですが、グラデーションの明るい側でも本文のコントラストが十分か確認します。装飾の円には aria-hidden が付いており読み上げ対象外です。ボタンが2つ折り返すスマートフォンでは、縦に並んでも押しやすい余白を保ってください。