大型見出し CTA

このパーツの使いどころと実装ポイント

このパーツは、巨大な見出しと border-radius:999px のピル型ボタン一つだけで構成した、ランディングページ最後尾向けの行動喚起（CTA）セクションです。linear-gradient の濃紺背景に font-size:54px の見出しを text-align:center で大きく置き、ボタン下の small に「カード登録不要 / 14 日間無料」のような不安を打ち消す一文を添える構成で、視線を一点に集中させます。

向いている場面

SaaS の無料トライアル誘導、オンライン講座の申込、サブスク登録など、ページの読了後にひと押ししたい場面に向きます。選択肢を一つに絞ることで、迷わせず決断を促せます。要素が少ないので、商談予約やメルマガ登録のような主要導線が一本のLPに特に適しています。

カスタマイズと注意点

• 見出しの <br> は改行位置を手で調整するためのもの。文言を変えたら、語のまとまりで折れるよう <br> 位置を見直してください。
• ボタンは見た目が a 要素なので、実装時は href を必ず指定し、ホバーの translateY だけに頼らずフォーカスリングも残します。
• セリフ体（Georgia）が主役なので、和文では Noto Serif など明朝系に置き換えると質感が揃います。スマホでは 54px が大きすぎるため clamp() での縮小を推奨します。