全幅ダーク CTA
濃紺の背景を画面の左右いっぱいに敷いた、最終誘導用のCTAセクションです。中央に見出しと一言の補足、その下に「無料で始める」「問い合わせる」の2つのボタンを横並びにしています。主ボタンは白塗りで目立たせ、副ボタンは枠線だけの控えめなデザインにして、 押してほしい行動を1つにしぼる 主従関係を作っています。
このパーツの使いどころと実装ポイント
濃紺の背景を画面の左右いっぱいに敷いた、最終誘導用のCTAセクションです。中央に見出しと一言の補足、その下に「無料で始める」「問い合わせる」の2つのボタンを横並びにしています。主ボタンは白塗りで目立たせ、副ボタンは枠線だけの控えめなデザインにして、押してほしい行動を1つにしぼる主従関係を作っています。
向いている場面
サービスやアプリのランディングページの一番下、料金ページの締めくくり、無料トライアルやデモ申し込みへの誘導などに向きます。背景が暗いぶん、前のセクションと色が切り替わってページの区切りとしても効きます。
カスタマイズと注意点
- 補足文の「クレジットカード登録不要」のような不安を消す一言を添えると、申し込みのハードルが下がります。自社の条件に合わせて書き換えてください。
- ボタンが2つで迷わせたくない場合は副ボタンを消し、主ボタン1つにすると行動がさらに明確になります。
- 画面幅720px以下ではボタンが縦積みになり、横幅いっぱいに広がって押しやすくなります。白文字と濃紺の組み合わせはコントラストが十分なので、暗背景でも読みやすさを保てます。
よくある質問
ボタンは1つに減らせますか？
減らせます。副ボタンのaタグを削除すれば主ボタン1つになり、ユーザーに迷わせず1つの行動へ集中させられます。誘導先を1本化したいランディングページではこちらが効果的です。
ボタンを押すと実際に遷移しますか？
このパーツのボタンは見た目だけで、リンク先は設定していません。aタグにhref属性を追加し、申し込みフォームや問い合わせページのURLを指定すると遷移するようになります。