安心の一言つき CTA 帯
主 CTA は1つ、副 CTA は文字リンクに格下げした帯。ボタンの脇に「クレジットカード不要」「いつでも解約できます」と、押す前の不安に答える一言を添えます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- LP 末尾の申込み・無料開始の帯
- 押す前の不安（課金・解約）に答えたいとき
- 主 CTA を 1 つに絞れる場面
- 避ける場面
- 同じ強さの CTA を 2 つ並べたいとき
- 安心の一言を事実で書けない製品
- 構成要素
- 見出し
- 補足文
- 主 CTA
- 副リンク
- 安心の一言×3
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で主 CTA→資料リンクの順に移動し Enter で遷移
- 支援技術
主 CTA が先に読まれ、安心の一言は ul の 3 項目。チェック svg は aria-hidden。reduced-motion でボタン遷移を無効化
- 動き
主ボタンの背景が 150ms で明るくなるだけ
デザインの要点
- CTA は1画面に1つ。2つ目は文字リンクに格下げして主役を守る。同じ強さのボタンを2つ並べない
- ボタンの脇の一言は装飾ではなく UI。「押したら何が起きるか／なぜ安心か」を事実で書く
- 安心の一言は3つまで。多いほど不安に見える。「クレカ不要・14日間無料・いつでも解約」で足りる
- 帯の色は1色。中に置くのはボタンと文字だけで、図やイラストを入れない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<section class="cbr">
<div class="cbr-inner">
<h2 class="cbr-h">まずは無料で、明日の朝から。</h2>
<p class="cbr-p">メールアドレスだけで始められます。既存のデータは CSV でそのまま取り込めます。</p>
<div class="cbr-actions">
<a class="cbr-btn" href="#">無料で始める</a>
<a class="cbr-link" href="#">資料をダウンロード（PDF・2 分で読めます）</a>
</div>
<ul class="cbr-reassure">
<li><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>クレジットカード不要</li>
<li><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>14 日間、全機能を無料で</li>
<li><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>いつでも解約できます</li>
</ul>
</div>
</section>