簡易なCall To Actionを作る方法

この記事では、Webサイトの離脱防止やコンバージョン率アップに欠かせない「CTA（Call To Action）」セクションの作り方を紹介します。プラグインを使わず、HTMLとCSSのみでシンプルに実装できます。

1 実装のポイント

• 背景にグラデーションを使用して視認性を高める
• ボタンにホバーエフェクトを付けてクリックを誘導
• レスポンシブ対応でスマホでも崩れないデザイン

2 HTML構造

<section id="contact" class="easy-cta-box">
  <h2>無料相談・お問い合わせ</h2>
  <p>ご相談・お見積もりは無料です。お気軽にお問い合わせください。</p>
  <a class="btn-main" href="https://example.com</a>
</section>
    

3 汎用CSS

/* -------------------------------- 
 * CTA（Call To Action）セクション 
 * ------------------------------ */

/* 全幅表示＆レイアウト設定 */
.easy-cta-box {
  width: 100%; /* 全幅にする */
  max-width: none; /* 最大幅制限を解除 */
  background: linear-gradient(135deg, #0073aa, #004c80); /* 青系グラデーション背景 */
  color: #fff; /* テキスト白 */
  text-align: center; /* 中央寄せ */
  padding: 80px 20px; /* 余白 */
  border-radius: 0; /* 全幅なので角丸なし */
  box-sizing: border-box; /* 幅計算を内側余白込みに */
}

/* 見出しの設定 */
.easy-cta-box h2 {
  font-size: 1.8rem; /* 見出し文字サイズ */
  font-weight: 700; /* 太字 */
  margin-bottom: 20px; /* 下余白 */
  color:#ffc; /* 文字色 */
}

/* 説明文の設定 */
.easy-cta-box p {
  font-size: 1rem; /* 標準文字 */
  line-height: 1.8; /* 行間 */
  margin-bottom: 30px; /* ボタンとの間隔 */
}

/* CTAボタン */
.easy-cta-box a.btn-main {
  background: #fff; /* 背景を白に */
  color: #004c80; /* テキストを濃紺に */
  border-radius: 40px; /* 丸みを強調 */
  font-weight: bold; /* 太字 */
  padding: 14px 36px; /* 上下左右の余白を調整 */
  text-decoration: none; /* 下線を消す */
  display: inline-flex; /* 中央寄せを安定させる */
  align-items: center; /* 縦方向中央寄せ */
  justify-content: center; /* 横方向中央寄せ */
  transition: all 0.3s ease; /* スムーズなホバー */
}

/* ホバー時のアニメーション */
.easy-cta-box a.btn-main:hover {
  background: #004c80; /* 背景を濃紺に反転 */
  color: #fff; /* 文字を白に */
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .easy-cta-box {
    padding: 60px 15px; /* コンパクト化 */
  }
  .easy-cta-box h2 {
    font-size: 1.5rem;
  }
  .easy-cta-box p {
    font-size: 0.95rem;
  }
}
  

4 完成イメージ

6 まとめ

• CTAは「ユーザーを行動へ導く」重要な要素
• グラデーション背景＋コントラストの高いボタンで目立たせる
• スマホでも崩れないようレスポンシブ対応を忘れずに