グラデーションCTAバンド
このパーツは、ページ途中や末尾に置く 全幅グラデーションのCTAバンド です。背景は linear-gradient(135deg) の帯で、内側を display:flex; justify-content:space-between にして、左にキャッチコピー＋サブテキスト、右に2つのボタンを横並びに配置します…
このパーツの使いどころと実装ポイント
このパーツは、ページ途中や末尾に置く全幅グラデーションのCTAバンドです。背景は linear-gradient(135deg) の帯で、内側を display:flex; justify-content:space-between にして、左にキャッチコピー＋サブテキスト、右に2つのボタンを横並びに配置します。flex-wrap:wrap を効かせているため、画面幅が狭まるとテキストブロックとボタン群が自然に縦に折り返します。ボタンは白背景の primary とアウトラインの ghost で主従を付け、最も押させたい行動を白ボタン側に割り当てています。
向いている場面
- サービス紹介の締めくくりで「無料相談」「資料請求」へ誘導
- 記事やLPの中間に置いて、離脱前に行動を促す切り替えポイント
- キャンペーンページの「今すぐ申し込む」導線
カスタマイズと注意点
見出しは clamp(20px,3vw,28px) で可変なので、長めのコピーでも収まりやすい作りです。グラデーション2色を差し替えるとブランドに合わせられます。CTAボタンのラベルは行動が一目で分かる動詞で書き、過度な装飾アイコンは付けないのが原則です（矢印は最小限に）。背景がグラデーションのぶん白文字とのコントラストを確保し、ボタン同士も色で明確に差を付けてください。同一ページ内にCTAバンドを複数置く場合は、誘導先を散らしすぎず、主要なゴールへ集約すると迷いが減ります。
よくある質問
ボタンを2つ並べると、どちらを押せばいいか迷いませんか？
白背景のprimaryボタンとアウトラインのghostボタンで明確に主従を付けているため、見た目の強さで「まずこちら」と伝わります。最も達成したい行動（例：無料相談）を白ボタンに割り当て、補助的な導線（例：実績を見る）をghost側に置くと、迷いを生まずに主要ゴールへ集約できます。
テキストとボタンはモバイルでどう並びますか？
内側はflexにflex-wrapを効かせているので、画面幅が狭まると左のテキストブロックと右のボタン群が自動的に縦方向へ折り返します。スマートフォンでは見出し・サブテキスト・ボタンが上から順に積み重なる形になり、横スクロールや見切れが起きにくい設計です。