CTAを確実に届ける！CSSアニメーションで”視線誘導”するテクニック

おはようございます！株式会社ファストコーディングの働くおかんです。

最近、上の子と一緒にオンラインの学習教材を見ていたんですが、画面の下にある「次のレッスンへ」ボタンがぽわんと光って、子どもが迷わずタップしていたんですよね。でも別のサイトでは、申し込みボタンがページの一番下にひっそりあるだけで、子どもは「どこ押すの？」と困っていました。大人でも同じで、CTAボタン（Call To Action、「お問い合わせ」や「資料請求」などの行動を促すボタン）が目に入らなければ、クリックされることはありません。

案件でヒートマップを見ていても、静的なボタンってびっくりするくらい見られていないんですよね。テキストや画像には視線が集まるのに、ボタンは背景に溶け込んでしまう。いわゆる「バナーブラインドネス」と同じ現象です。でも、ちょっとした動きをつけるだけで、視線がCTAに向かうようになります。

今回は、CSSアニメーションだけでCTAに視線を誘導するテクニックを3つ紹介します。JavaScriptは使いません。

CSSアニメーションで視線を誘導する3つのテクニック

ここからは、実際に使えるCSSアニメーションのテクニックを3つ紹介します。どれもコピーしてすぐに使えるコードです。

1. パルスアニメーション ─ ボタンをさりげなく「呼吸」させる

最もシンプルで効果的なのが、パルスアニメーションです。ボタンの周囲にうっすらとした影が広がって消える動きで、ボタンが「呼吸しているように」見えます。

<!-- HTML -->
<a href="/contact" class="cta-pulse">お問い合わせはこちら</a>

/* CSS */
.cta-pulse {
  display: inline-block;
  padding: 16px 36px;
  background: #2563EB;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  position: relative;
  transition: background 0.3s ease;
}

.cta-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  animation: pulse 2.5s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.cta-pulse:hover {
  background: #1D4ED8;
}

ポイントは ::after 擬似要素を使っていることです。ボタン本体ではなく擬似要素にアニメーションをかけることで、テキストの可読性に影響しません。animation-duration は2.5秒にしています。速すぎると「チカチカして鬱陵しい」、遅すぎると「気づかない」ので、2〜3秒が適切です。

2. シマーエフェクト ─ 光が横切る演出

ボタンの表面を光がスッと横切るエフェクトです。高級感があり、ブランドサイトやキャンペーンページでよく使われます。

<!-- HTML -->
<a href="/contact" class="cta-shimmer">無料相談を予約する</a>

/* CSS */
.cta-shimmer {
  display: inline-block;
  padding: 16px 36px;
  background: #2563EB;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}

.cta-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.cta-shimmer:hover {
  background: #1D4ED8;
}

linear-gradient で半透明の白い帯を作り、left の値を -100% から 100% まで動かすことで光が横切る表現になります。overflow: hidden をボタンに指定しているので、光の帯がボタンの外にはみ出しません。

注意点として、このエフェクトは背景色が暗めのボタンで効果的です。白やライトグレーのボタンだと光の帯が見えにくくなります。

3. バウンスアニメーション ─ 視線の終点で跳ねる

ページの下部に配置したCTAに使うと効果的なのが、バウンスアニメーションです。ユーザーがコンテンツを読み終えてスクロールが止まったとき、CTAが軽く跳ねて「ここにあるよ」と伝えます。

<!-- HTML -->
<a href="/contact" class="cta-bounce">まずは相談してみる</a>

/* CSS */
.cta-bounce {
  display: inline-block;
  padding: 16px 36px;
  background: #2563EB;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  animation: bounce 2s ease infinite;
  transition: background 0.3s ease;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

.cta-bounce:hover {
  background: #1D4ED8;
  animation-play-state: paused;
}

translateY で上方向に移動させて戻すことで跳ねる動きを表現します。移動量は -8px と控えめにしています。大きく跳ねすぎるとレイアウトが不安定に見えるので、5〜10pxの範囲に抑えるのがおすすめです。

ホバー時に animation-play-state: paused を指定しているのもポイントです。マウスを乗せたときにアニメーションが止まることで、「クリックしようとしているのにボタンが動いてしまう」ストレスを防ぎます。

導入時に気をつけるべき3つの注意点

CTAアニメーションは効果的ですが、使い方を間違えると逆効果になります。導入時に意識しておきたい注意点を整理しました。

注意点1：動くのは1ページに1〜2箇所まで

画面上で複数のCTAが同時にアニメーションしていると、どこを見ればいいか分からなくなります。視線誘導の目的は「一番押してほしいボタンに注目させる」ことなので、動かすのはプライマリCTAだけに絞ってください。

セカンダリCTA（例：「詳細を見る」リンク）にはホバーエフェクトだけにして、常時アニメーションは避けるのが無難です。

注意点2：prefers-reduced-motionに対応する

前庭障害などの理由でアニメーションが苦手なユーザーもいます。CSSの prefers-reduced-motion メディアクエリを使って、アニメーションを無効化する対応は必須です。

@media (prefers-reduced-motion: reduce) {
  .cta-pulse::after {
    animation: none;
  }
  .cta-shimmer::before {
    animation: none;
  }
  .cta-bounce {
    animation: none;
  }
}

W3CのWCAG 2.1では、「自動的に開始し、5秒以上続くアニメーションには、ユーザーが一時停止、停止、または非表示にできる仕組みを提供する」ことが求められています（達成基準 2.2.2）。W3Cが公開している実装技法（Technique C39）では、prefers-reduced-motion の使用がこの要件への対応手段のひとつとして紹介されています。OSの設定に依存するため万能ではありませんが、CSSだけで導入できる手軽さは大きなメリットです。

注意点3：アニメーション速度は2〜4秒サイクル

一般的にUIのトランジション（ボタンの色変化やメニューの開閉など）は200〜400ms程度が自然とされていますが、これは状態変化の話です。CTAのような常時アニメーションの場合、1サイクルは2〜4秒が目安になります。

速すぎるアニメーションはユーザーを焦らせ、遅すぎると気づいてもらえません。実際のプロジェクトでテストした際も、2.5秒のパルスアニメーションが最も自然に感じられるという結果でした。

実際のプロジェクトでの効果

あるサービスサイトのリニューアル案件で、CTAボタンにパルスアニメーションを追加した際の数値を紹介します。

もちろん、アニメーションだけの効果ではありません。同時にCTAの文言やカラーも調整しています。ただ、ヒートマップで確認したところ、アニメーション追加後はCTA周辺の注目度が明らかに上がっていました。「動き」がユーザーの視線を引きつけたことは確かだと思います。

夜、子どもが寝た後にリニューアル前後のヒートマップを比較していたんですが、パルスアニメーションを入れた箇所にくっきりと赤い領域ができていて、やっぱり動きがあると目が行くんだなと実感しました。

一方で、当初はパルスアニメーションとシマーエフェクトを同時に使っていたのですが、テスト期間中に「どちらかひとつにしたほうが自然」というフィードバックをもらい、パルスだけに絞りました。アニメーションの組み合わせは慎重に判断したほうがいいと思います。

まとめ

今回は、CSSアニメーションでCTAに視線を誘導するテクニックを紹介しました。

CTAが「見えない」問題は、デザインの良し悪しではなく、ユーザーの視覚特性に原因があります。CSSの animation と @keyframes だけで、この問題を改善できます。

押さえておきたいポイントは以下の3つです。

• パルス、シマー、バウンスの3パターンで、CTAの性質や配置場所に合ったアニメーションを選ぶ
• 動かすのは1ページに1〜2箇所まで。プライマリCTAだけに絞ることで、視線を分散させない
• prefers-reduced-motion でアクセシビリティに配慮する。WCAG 2.1の達成基準もクリアできる

実際のプロジェクトでは、パルスアニメーションの追加でCTAのクリック率が1.1ポイント改善しました。CSSを数行追加するだけの変更で、コストをかけずにコンバージョン率を底上げできる手法です。次の案件でCTAの反応が悪いと感じたら、まずはアニメーションの追加を試してみてください。

株式会社ファストコーディングでは、こうしたCTAの改善やCSSアニメーションの設計・実装をお手伝いしています。「CTAのクリック率を改善したい」「ページの導線を見直したい」といったご相談があれば、お問い合わせフォームからお気軽にご連絡ください。