CTABanner

コール・トゥ・アクション

GitHub でソースを見る

プレビュー

今すぐ始めましょう

無料で始められます。クレジットカードは不要です。

使いどころ

使う場面

  • ページの終わり近くで、次の行動をもう一度促す帯。ページに 1 つ置く
  • title で行動の価値を 1 文で伝え、description に安心材料（無料、期間、解約の条件など）を添える
  • children に操作を置く。主な操作は 1 つ、補助は 1 つまで

使わない場面

  • ページ最上部。Hero を使う
  • 1 つのページに何度も置くこと。節ごとに CTA を重ねると、どれが主役か分からない
  • お知らせや警告。Alert を使う
  • 背景に多色のグラデーションを使うこと。単色か単一アクセントにする

使い方

<CTABanner title="今すぐ始めましょう" description="無料で始められます。">
  <Button variant="secondary">はじめる</Button>
</CTABanner>

プロパティ

名前型デフォルト説明
title必須stringなしタイトル
descriptionstringなし説明テキスト
childrenReact.ReactNodeなしアクションボタン

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • title は <h2> で出力される。Hero の h1 の下の階層で、直前の節と同じ階層に並ぶ
  • 中のボタンやリンクは通常の操作として読み上げられる。リンクの文言だけで行き先が分かるようにする

文言

  • title は読み手の得を言い切る（「今日から請求業務を 1 画面にまとめる」）。「お問い合わせはこちら」のような案内にしない
  • ボタンは動詞で書く（「無料で始める」「資料を請求する」）。Hero の CTA と同じ言葉にそろえると迷わない
  • description は 1 文。条件（無料、クレジットカード不要など）は事実確認してから書く

関連するコンポーネント