「戻ってきた人にだけ揺らす」─ リターンユーザー用のCTAアニメ

こんにちは、BigViです。Webディレクター兼フロントエンドエンジニアとして東京で働いています。今回のテーマは、リターンユーザーだけにアニメーションを表示することです。

一度来た人がもう一度来た時は、1回目よりもサービスに興味があると思います。だからそういうときには、いつもとは違うアニメーションを見せてコンバージョンしてもらいやすくしたいです。

ユーザーに心を掴むCTAアニメーション

ここでのポイントは、リターンユーザーだけに動くアニメーションを導入することです。sessionStorageを使って、2回目かどうかをチェックします。シンプルな演出ですけど、ユーザーの注意を引きつけて、お問い合わせフォームに移動しやすくします。

実装の例: HTML/CSSと簡単なJavaScript

以下に実装例をご紹介します。CSSではトランジションを、JavaScriptではsessionStorageを活用します。

<section class="cta-section">
  <h2>無料相談を予約する</h2>
  <a href="/contact" class="cta-button" id="ctaButton">
    今すぐ予約
  </a>
</section>

.cta-section {
  text-align: center;
  padding: 60px 20px;
  background: #f9fafc;
}

.cta-button {
  display: inline-block;
  padding: 18px 48px;
  font-size: 1.3rem;
  color: #fff;
  background-color: #0078d7;
  border-radius: 60px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0, 120, 215, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 120, 215, 0.35);
}

.cta-button.return-animate {
  animation: pulseBounce 1.8s cubic-bezier(0.22, 1, 0.36, 1) 2;
}

@keyframes pulseBounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(0.97); }
  75% { transform: scale(1.05); }
}

// 「戻ってきた人」だけにCTAを揺らす
(() => {
  const STORAGE_KEY = 'visitedAt';
  const cta = document.getElementById('ctaButton');
  if (!cta) return;

  const now = Date.now();
  const last = localStorage.getItem(STORAGE_KEY);

  // 初回訪問なら記録だけして終了
  if (!last) {
    localStorage.setItem(STORAGE_KEY, now);
    return;
  }

  // 前回訪問から7日以内を“リターンユーザー”とみなす
  const ONE_WEEK = 7 * 24 * 60 * 60 * 1000;
  if (now - last < ONE_WEEK) {
    // 少し間をおいてから自然にアニメーション開始
    setTimeout(() => {
      cta.classList.add('return-animate');
    }, 1000);
  }

  // 今回の訪問時間を更新
  localStorage.setItem(STORAGE_KEY, now);
})();

＊初めてこのページを見ている人は、ページをリロードしてください。ボタンが動きます

実際の利用例

実際のプロジェクトに導入したとき、フォームページのPVが向上しました。A/Bテストを行った結果、アニメーションが表示された場合、開始率が15%ぐらいあがりました。観測期間は2週間、テストに参加した数は約1000セッションでした。ページスピードのINP（インプットディレイ）やLCP（ラージストコンテンツフルペイント）に影響することもありませんでした。