全幅グラデーションCTAバナー

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

このパーツは、ページ下部に置く幅100%のグラデーション背景CTAバナーです。linear-gradient(135deg, ...) で斜め方向の色の移り変わりを作り、その上に見出し・補足文・2つのボタンを中央寄せで重ねています。見出しは clamp() を使った可変サイズで、画面が小さくても大きくても自然な大きさに収まるのが特徴です。主要ボタンと副ボタンの2つを並べ、「相談する」と「料金を見る」のように行動の選択肢を提示できます。

向いている場面

• LPやサービスページの締めくくりで行動を促したいとき
• 無料相談・資料請求など、最後にもう一押ししたい導線
• 記事下に共通設置する問い合わせ誘導バナー

背景が全幅で目立つため、ページの流れの中で「ここが行動の場所」と認識させやすい構成です。

カスタマイズと注意

グラデーションの2色はブランドカラーに合わせて差し替えられます。ボタンは主と副で見た目に差を付け、本当に押してほしい行動を主ボタンにすると迷いが減ります。実装上の注意として、グラデーション上の白文字はコントラストが不足しがちなので、背景色を暗めにするか文字に少し影を足して可読性を確保してください。CTAのラベルだけで意味が伝わるよう、矢印などの装飾アイコンに頼らない文言にするのが望ましいです。スマホでは2つのボタンが横に収まらないと flex-wrap で縦に折り返すため、縦並びでも押しやすい高さを確保しておくと安心です。