押した瞬間が気持ちいい！リップル効果付きボタン

(Sample)

今回は、ボタンをクリックしたときに「水の波紋（リップル）」のようなアニメーションが広がるリップルエフェクト（ripple effect）付きボタンの作り方を、新人エンジニアの方にもわかりやすく解説します。

このようなアニメーションは、マテリアルデザインでも使われており、ユーザーの「クリックした感」を視覚的に演出できるので、ユーザー体験を大きく向上させることができます。

そもそもリップル効果とは？

「リップル」とは、水面に石を落としたときに広がる波紋のような動きのことです。

ボタンを押した位置からアニメーションが広がることで、「押した」というフィードバックを自然に伝えてくれます。

リップル効果の動作ステップ

1. ボタンがクリックされる
2. 押した位置に白っぽい円（波紋）が出現
3. 円が徐々に広がって消える
4. 波紋が終わったら要素を削除してクリーンに保つ

HTML構造の基本

<button class="ripple-button">クリック</button>

これだけのシンプルなボタンですが、JavaScriptとCSSの力で美しいアニメーションが加わります。

スタイリングのポイント

波紋を生成するCSS

.ripple-button {
  position: relative;
  overflow: hidden;
}
.ripple-button .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
}
@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

• position: relative; → 子要素の位置をボタン内に制限
• overflow: hidden; → 波紋がはみ出さないようにする
• .ripple → 実際にアニメーションする白い円
• animation: ripple-animation → 広がって消える動き

JavaScriptで波紋を発生させる

実際のコード

document
  .querySelector(".ripple-button")
  .addEventListener("click", function (e) {
    const button = e.currentTarget;
    const ripple = document.createElement("span");

    const rect = button.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;

    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.classList.add("ripple");

    button.appendChild(ripple);

    ripple.addEventListener("animationend", () => {
      ripple.remove();
    });
  });

それぞれの処理の意味

なぜクリック位置を使うの？

ボタンの中央から波紋が広がるだけだと、どこを押しても同じでつまらないですよね。

今回のコードでは、クリックした場所が波紋の中心になるように座標計算を行っています。

const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;

この計算で、マウスカーソルの位置から波紋が出るようになっているのです。

応用ポイント

色や大きさの変更

• background: rgba(255, 255, 255, 0.6); → 他の色にも変更可能
• transform: scale(4); → 大きさの拡大率を変えれば波紋の範囲も変わる

ボタンの種類を増やす

複数のボタンで同じエフェクトを適用したい場合は、以下のようにすればOKです。

document.querySelectorAll(".ripple-button").forEach((btn) => {
  btn.addEventListener("click", rippleEffect);
});

関数を共通化して使い回せば、効率もアップ！

よくある質問

Q1. スマホやタブレットでも動きますか？

→ touchstartイベントを使えばタップでも動作可能にできます。ただし、今回のコードでもPCと大半のスマホで動作します。

Q2. Bootstrapのボタンと共存できますか？

→ できます。ただし、position: relative;とoverflow: hidden;を上書きしてしまう可能性があるので、カスタムクラスを使って制御しましょう。

今後の学習の指針

このリップルボタンは、Web開発における「見た目 × 操作性 × コードの応用力」がすべて詰まった素晴らしい教材です。

次のような応用に挑戦すると良いでしょう！

まとめ

• リップル効果は「押した感覚」を可視化するUX改善テクニック
• JavaScriptで動的にエフェクト要素を生成し、CSSでアニメーション
• 実務だけでなく、ポートフォリオや採用課題にも使える汎用的な技術

こういった小さなインタラクションも、積み重ねれば大きな信頼になりますよ！まずは自分のWebサイトに取り入れて試してみてください。