安心の一言つき CTA 帯
主 CTA は1つ、副 CTA は文字リンクに格下げした帯。ボタンの脇に「クレジットカード不要」「いつでも解約できます」と、押す前の不安に答える一言を添えます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
デザインの要点
- 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>