左右分割CTAセクション

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

このパーツは、左側にキャッチコピーと補足文、右側にCTAボタンと注記を配置した行動喚起セクションです。背景は斜め方向の linear-gradient で、視線を引きつけます。レイアウトは display:flex と justify-content:space-between で左右に振り分けており、画面幅640px以下では flex-direction:column に切り替わって縦並び・中央寄せになるため、スマートフォンでもボタンが画面中央で目立ちます。

向いている場面

サービスページやLPの締めくくり、料金表の直後、問い合わせを促したいページの区切りに向きます。「無料相談」「資料請求」「お見積り」など、次に取ってほしい行動が1つに決まっているときに効果的です。サブの注記欄に「返信は1営業日以内」のような安心材料を添えると、押すハードルが下がります。

カスタマイズと注意点

• ボタンは1つを前提とした設計です。複数並べたい場合はアクション側のレイアウトを見直し、主従が分かるよう差をつけてください。
• グラデーション背景に白文字を重ねるため、コピーを差し替えても十分なコントラストを保ちます。
• ボタンのリンク先は実際の問い合わせフォームや電話リンクに置き換えてください。