グラデーション CTA バナー
このパーツは、横幅いっぱいのグラデーション背景に、大きなキャッチコピーと2つのボタンを置いた行動喚起（CTA）バナーです。背景は linear-gradient で青系の3色を斜めにつなぎ、見出しは clamp() を使って画面幅に応じて文字サイズが滑らかに変わります。
このパーツの使いどころと実装ポイント
このパーツは、横幅いっぱいのグラデーション背景に、大きなキャッチコピーと2つのボタンを置いた行動喚起（CTA）バナーです。背景は linear-gradient で青系の3色を斜めにつなぎ、見出しは clamp() を使って画面幅に応じて文字サイズが滑らかに変わります。主ボタンと枠線だけの副ボタンを並べ、優先度の違いを見た目で表しています。
向いている場面
ページの締めくくりで申し込みや相談へ誘導したい場面に向きます。たとえばサービス紹介ページの最後、料金ページの下部、LPの結びなど、読み終えた利用者に次の一歩を促したいところに置くと効果的です。
カスタマイズの勘所
グラデーションの色を自社ブランドカラーに変えると、サイト全体との一体感が出ます。ボタンのラベルは「無料相談」「資料請求」など具体的な行動を示す言葉にしましょう。
- 主ボタンは1つに絞ると、利用者が迷わず行動しやすくなります
- 文字色は白前提なので、背景を明るい色に変える場合は読みやすさを確認してください
- ボタンは狭い画面では縦積みに切り替えると押しやすくなります
よくある質問
ボタンを1つだけにしてもいいですか？
問題ありません。むしろ最も取ってほしい行動が1つに決まっているなら、ボタンを1つに絞った方が利用者は迷いません。2つ置く場合は、主ボタンと枠線だけの副ボタンで優先度の差をはっきり付けるのがコツです。
背景のグラデーションの色は変えられますか？
変えられます。背景は3色をつなぐグラデーションで指定しているので、その色コードを自社のブランドカラーに差し替えれば、サイト全体と統一感のある印象になります。文字は白を前提にしているため、明るい色にする場合は読みやすさの確認が必要です。