グラデーションCTAバンド

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

このパーツは、ページの中間や末尾に置けるグラデーション背景のCTAバンドです。濃い紺から青へ斜めに流れる linear-gradient を背景に敷き、見出し・補足文・2つのボタンを中央に配置しています。主ボタンは塗り、もう一方は半透明の枠線にして主従を付け、「相談する」と「実績を見る」のように行動の優先度を見せられます。

向いている場面

長いLPの締めで申込みへ背中を押したいサービス・SaaS、無料相談へ誘導したい士業・コンサル・制作会社、記事末尾に資料請求を置きたいBtoBサイトに向きます。背景色が変わることで本文との境目になり、行動を促す区切りとして目立ちます。

カスタマイズと注意点

• グラデーションの2〜3色を変えるだけで雰囲気を温かくも冷たくも調整できます
• ボタンは1つに絞っても成立し、迷わせたくない場面では主ボタンのみにします

濃い背景に文字を載せるため、白文字とのコントラストを十分に確保してください。ボタンのラベルは何が起きるか分かる具体的な言葉にし、スマホでは2つのボタンが縦に折り返すよう余白を取りましょう。