スプリット2アクションCTA
濃紺背景の上に、左へ見出しとリード文、右へ2系統の行動ボタンを縦並びにしたCTA（行動喚起）セクションです。 grid-template-columns:1fr 1fr でコピーとアクションを左右に分け、各ボタンはアイコンバッジ・主見出し・補足テキスト・右端の矢印という3要素を横一列に並べた大きめのタッチ領域になっ…
このパーツの使いどころと実装ポイント
濃紺背景の上に、左へ見出しとリード文、右へ2系統の行動ボタンを縦並びにしたCTA（行動喚起）セクションです。grid-template-columns:1fr 1fr でコピーとアクションを左右に分け、各ボタンはアイコンバッジ・主見出し・補足テキスト・右端の矢印という3要素を横一列に並べた大きめのタッチ領域になっています。主アクション（相談予約）は白背景で目立たせ、副アクション（資料DL）は半透明枠で控えめにする視覚的な優先順位付けが特徴です。
向いている場面
「いきなり契約は不要」と心理的ハードルを下げたいサービスサイトやLPの締めに向きます。主＝予約・問い合わせ、副＝資料請求・無料体験のように、温度差のある2つの導線を同時に提示したい場面で力を発揮します。BtoBの相談獲得や、講座・サブスクの申込前段にも使えます。
カスタマイズと注意
- 各ボタンの
strong（主文）とsmall（補足）の2段組みで「何が起きるか・条件」を簡潔に伝えられます。補足に所要時間や費用感を入れると離脱が減りやすいです。 - 768px以下で1カラムに畳まれます。ボタンは元々縦積みなので、スマホでも押しやすさが保たれます。
- 暗い背景に明るい文字の配色なので、テキストと背景のコントラスト比を確保してください。リンク先は実際のフォームやファイルに必ず接続します。
よくある質問
ボタンを2つではなく1つや3つにできますか。
できます。アクション列はボタンを縦に並べる構造なので、不要なボタンを削れば1つに、同じ構造を複製すれば3つにも増やせます。ただしCTAは選択肢が増えるほど迷いが生まれやすいため、主アクションを1つに絞り、副アクションは1つまでに留めるのが一般的におすすめです。
主アクションと副アクションの見分けはどう付けていますか。
主アクションは白い塗りで明るく目立たせ、副アクションは半透明の枠線スタイルで控えめにすることで、視覚的な優先順位を付けています。色のコントラストとボタンの塗りの強さで「まずこちらを押してほしい」を伝える設計です。自社で配色を変える場合も、主従の差がはっきり出るようにしてください。