興味を持ちそうなタイミングで実績をチラ見せ（トースト表示）

こんにちは、WebディレクターのBigViです。東京はとても寒いので早く帰りたいです。。。もうすぐ私の国のベトナムもお正月です。

前にクライアントから「サービスの実績をもっとアピールしたい」という相談を受けました。でも「常に表示されるバナーは邪魔だから嫌だ」とも言われました。そのとき、私は「ミニ・トースト」という方法を提案しました。ユーザーがページを読み進めたタイミングで、右下に小さく実績を表示します。だいたいセクション２ぐらいです。1.5秒だけ見せて、すぐ消えます。邪魔にならないし、でもちゃんと目に入ります。

なぜ「第2セクション」で表示するのか

最初から表示すると、読者はまだ何も読んでいません。興味を持つ前に実績を見せても、あまり効果がないです。

でも、第2セクションまでスクロールした人はきっと「このサービス、気になるな」と思っています。そのときにたとえば「3,000社以上が利用中」と見せると、「多くの会社が使っているなら安心だ」という気持ちになります。これは「社会的証明」という考え方です。みんなが使っているものは良いもの、ということになります。

実装の概要

今回の実装は以下のポイントを守ります：

第2セクションが画面に入ったら発火
右下にミニ・トーストをフェードインで表示
1.5秒だけ表示して、フェードアウトで消える
音は鳴らさない、点滅もしない
一度表示したら、同じページでは二度と表示しない
アニメーション苦手な人への配慮（prefers-reduced-motion）

HTML構造

HTMLはシンプルです。トーストのコンテナを作って、中に実績の内容を入れます。

<!-- 第2セクション（監視対象） -->
<section id="section-2" class="section">
  <h2>サービスの特徴</h2>
  <p>私たちのサービスは...</p>
</section>

<!-- ミニ・トースト（実績表示用） -->
<div class="social-proof-toast" id="socialProofToast" aria-live="polite" aria-atomic="true">
  <div class="toast-content">
    <span class="toast-number">3,000+</span>
    <span class="toast-text">社以上が利用中</span>
  </div>
</div>

aria-live="polite"を付けています。これはスクリーンリーダー向けの配慮です。「polite」は「他の内容を邪魔しないで、区切りの良いところで読み上げて」という意味です。

CSSでフェードイン/アウトを作る

CSSでアニメーションを作ります。最初は非表示で、クラスが付いたら表示します。

/* ミニ・トーストの基本スタイル */
.social-proof-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  
  /* 初期状態：非表示 */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  
  /* トランジション設定 */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* 表示状態 */
.social-proof-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* トーストの見た目 */
.toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
}

.toast-number {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
}

.toast-text {
  color: #374151;
}

/* アニメーション苦手な人への配慮 */
@media (prefers-reduced-motion: reduce) {
  .social-proof-toast {
    transition: opacity 0.1s ease-out;
    transform: none;
  }
  
  .social-proof-toast.show {
    transform: none;
  }
}

ポイントはprefers-reduced-motionです。アニメーションが苦手な人や、動きに酔いやすい人のために、動きを最小限にします。

JavaScriptで発火タイミングを制御

IntersectionObserverを使って、第2セクションが画面に入ったかを監視します。

document.addEventListener('DOMContentLoaded', function() {
  const section2 = document.getElementById('section-2');
  const toast = document.getElementById('socialProofToast');
  
  // 要素がなければ何もしない
  if (!section2 || !toast) return;
  
  // すでに表示済みかチェック（sessionStorageで管理）
  const alreadyShown = sessionStorage.getItem('socialProofShown');
  if (alreadyShown) return;
  
  // IntersectionObserverを作成
  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      // 第2セクションが画面に入ったら
      if (entry.isIntersecting) {
        showToast();
        
        // 一度だけ実行するので、監視を止める
        observer.unobserve(section2);
      }
    });
  }, {
    threshold: 0.3  // 30%見えたら発火
  });
  
  // 監視開始
  observer.observe(section2);
  
  // トーストを表示する関数
  function showToast() {
    // 表示
    toast.classList.add('show');
    
    // 表示済みフラグを保存
    sessionStorage.setItem('socialProofShown', 'true');
    
    // 1.5秒後に非表示
    setTimeout(function() {
      toast.classList.remove('show');
    }, 1500);
  }
});

このコードのポイントを説明します。

sessionStorageで表示済み管理
同じページで何度もスクロールしても、トーストは一度だけしか表示しません。sessionStorageを使っているので、タブを閉じたらリセットされます。「しつこい」と思われないための工夫です。

threshold: 0.3
セクションの30%が画面に入ったら発火します。これより小さいと、ちょっとスクロールしただけで発火してしまいます。

1500ミリ秒（1.5秒）で消える
長すぎると邪魔だし、短すぎると読めません。1.5秒がちょうどいいです。