CTAセクション
藍のグラデーション帯の上に、太い見出し・補足文・主要ボタンを中央寄せで置く行動喚起セクション。ページ末尾の締めに使います。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- ページ末尾の申込み・無料開始の締め
- 主ボタン 1 つと補足文で行動を促す帯
- ログイン導線を小さく添えたい場面
- 避ける場面
- 同格の CTA を 2 つ並べたいとき
- 安心の一言（クレカ不要など）を事実で書けない製品
- 構成要素
- グラデーションの帯
- 見出し
- 補足文
- 主ボタン
- ログインリンク
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で主ボタン→ログインリンクの順に移動し Enter で遷移
- 支援技術
見出し→補足→ボタン→ログインの順に読まれる。白文字は藍グラデーション上でコントラスト確保。focus-visible で白の枠線。reduced-motion で浮き上がりを無効化
- 動き
主ボタンのホバーで 2px 浮き上がる 150ms、押下で透明度 0.8
デザインの要点
- 帯は藍のグラデーション 1 色。中に置くのは見出し・補足・白ボタン・小さなログインだけで、図や写真を入れない
- 主ボタンは白地に藍文字で帯の中で最も明るい面にする。ホバーで 2px 浮かせ、押下で沈める
- 補足文で「クレジットカード不要・14 日間無料」と押す前の不安に答える。事実で書けない語は入れない
- ログインは既存ユーザーの逃げ道。下線の小さなリンクに格下げして、主 CTA と競わせない
コード（コピーして使えます）
<div class="stage">
<section class="cta-band">
<h2 class="cta-head">今日から、見積りをもっと速く。</h2>
<p class="cta-sub">クレジットカード不要。14日間すべての機能を無料でお試しいただけます。</p>
<a href="#" class="cta-btn">無料ではじめる</a>
<p class="cta-note">すでにアカウントをお持ちですか？ <a href="#" class="cta-link">ログイン</a></p>
</section>
</div>