クリック位置から広がる Ripple エフェクトの作り方【JavaScript / UIフィードバック】

UIのクリックフィードバックとしてよく使われるのが
Ripple（波紋）エフェクトです。

Material Design などでも採用されており、
クリックした場所から円が広がることで

• クリックが認識された
• 操作が成功した

という 視覚フィードバックをユーザーに伝えます。

この記事では

• Rippleの基本仕組み
• クリック位置からアニメーションを作る方法
• CSS + JavaScriptでの実装

をシンプルなコードで解説します。

ボタンのクリックアニメーションについては、
Button Interaction Animation や Hover Animation の記事でも解説しています。

UIの基本フィードバックについて知りたい場合は、こちらも参考にしてください。

→ #19 Button Interaction Animation
→ #20 Hover Animation

Rippleの広がり方を滑らかに見せるためには、
easing（イージング）を調整することも重要です。

easingについては、こちらの記事で詳しく解説しています。

→ #03 easing / cubic-bezier

1.Rippleの仕組み

Rippleはとてもシンプルです。

1. クリック位置を取得
2. 円を生成
3. scaleアニメーションで拡大
4. opacityをフェードアウト
5. 削除

つまり

click
 ↓
ripple要素生成
 ↓
scaleアニメーション
 ↓
fade out
 ↓
要素削除

という流れになります。

HTML

<button class="ripple-btn">
  Click
</button>

CSS

body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#111;
}

.ripple-btn{
  position:relative;
  overflow:hidden;
  padding:18px 40px;
  border:none;
  font-size:18px;
  background:#4f7cff;
  color:white;
  cursor:pointer;
  border-radius:6px;
}

.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  transform:scale(0);
  animation:ripple 600ms linear;
}

@keyframes ripple{
  to{
    transform:scale(4);
    opacity:0;
  }
}

JavaScript

const button = document.querySelector(".ripple-btn")

button.addEventListener("click", function(e){

  const circle = document.createElement("span")

  const rect = button.getBoundingClientRect()

  const size = Math.max(rect.width, rect.height)

  circle.style.width = size + "px"
  circle.style.height = size + "px"

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

  circle.style.left = x + "px"
  circle.style.top = y + "px"

  circle.classList.add("ripple")

  button.appendChild(circle)

  setTimeout(()=>{
    circle.remove()
  },600)

})

JavaScriptアニメーションをより滑らかに制御したい場合は、
requestAnimationFrame を使ったアニメーション設計も重要になります。

詳しくは以下の記事で解説しています。

→ #01 requestAnimationFrameの使い方

2.重要ポイント

① click位置の取得

e.clientX
e.clientY

からボタン内の座標に変換します。

const x = e.clientX - rect.left

② 円のサイズ

Rippleはボタン全体を覆う必要があります。

そのため

Math.max(width, height)

を使用します。

③ overflow:hidden

Rippleが外にはみ出ないように

overflow:hidden

を指定します。

3.UI設計のポイント

Rippleは 使いすぎると逆効果です。

おすすめの場所

• ボタン
• リストアイテム
• カード

おすすめしない場所

• 小さいUI
• hover主体UI

4.実験:Rippleエフェクトを観察してみよう

試してみよう

• ボタンの好きな場所をクリック
• Rippleの広がりを観察
• クリック位置によって広がりが変わる

観察ポイント

① Rippleはクリック位置から広がる

中央をクリックすると中央から、
端をクリックすると端からRippleが広がります。

これは JavaScript でクリック座標を取得し、
Rippleの表示位置を計算しているためです。

② Rippleのサイズはボタン全体を覆う

Rippleの円は

Math.max(width, height)

でサイズを決めています。

そのため、クリック位置に関係なく
ボタン全体を覆う波紋になります。

③ 連続クリックでも自然に動く

Rippleはクリックごとに

• 要素を生成
• アニメーション
• 削除

という流れで処理されています。

そのため、連続クリックしても
複数のRippleが自然に重なります。

5.まとめ

Rippleエフェクトは、
クリック操作に対する視覚フィードバックを与えるUIアニメーションです。

実装のポイントはシンプルです。

• クリック位置を取得する
• Ripple要素を生成する
• scaleアニメーションで広げる
• opacityでフェードアウト
• アニメーション終了後に削除する

わずか数行のJavaScriptでも、
UIの操作感を大きく向上させることができます。

特に

• ボタン
• リスト
• カードUI

などのクリック要素に組み込むと、
ユーザーにとって分かりやすい操作フィードバックになります。

小さなアニメーションですが、
インターフェースの気持ちよさを作る重要な要素です。