ボタンの気持ちいいクリックアニメーションの作り方【JavaScript / UI Feedback】

1.Button Interaction Animation

UIアニメーションの基礎については、以下の記事もおすすめです。

• easingの基本
• 入力イベント設計
• 数値アニメーション

ユーザーがボタンを押したとき、
何も反応がないUIは不安になります。

逆に、少しだけボタンが沈むだけで

• 操作できた
• UIが反応した
• 気持ちいい

という体験になります。

このような反応を UIフィードバック と呼びます。

今回は
ボタンのクリックアニメーション（Press Animation） を作ってみましょう。

2.クリックアニメーションの基本

ボタンのクリック演出は、
主に scale（拡大縮小） を使います。

押した瞬間

scale(1)
↓
scale(0.95)

少し縮めることで
「押した感」 が生まれます。

アニメーションの動きは
easing を使うとより自然になります。

3.シンプルな実装

HTML

<button class="press-button">Click</button>

CSS

.press-button {
  padding: 14px 28px;
  font-size: 16px;
  background: #111;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  transition: transform 0.1s ease;
}

.press-button:active {
  transform: scale(0.95);
}

ポイント

:active

を使うことで

クリック中だけ縮む

挙動になります。

4.JavaScriptで制御する方法

UIアニメーションを作る場合、
JavaScriptで制御することもあります。

HTML

<button id="btn">Click</button>

CSS

button {
  padding: 14px 28px;
  font-size: 16px;
  background: black;
  color: white;
  border: none;
  border-radius: 8px;
  transition: transform 0.12s ease;
}

button.pressed {
  transform: scale(0.92);
}

JavaScript

const button = document.getElementById("btn");

button.addEventListener("mousedown", () => {
  button.classList.add("pressed");
});

button.addEventListener("mouseup", () => {
  button.classList.remove("pressed");
});

button.addEventListener("mouseleave", () => {
  button.classList.remove("pressed");
});

UIクリックは Inputイベント によって処理されます。

Input設計について詳しく知りたい場合はこちら

→ Input設計の記事

5.なぜUIフィードバックが重要なのか

ボタンが押されたときのフィードバックは

UXに大きく影響します。

例

悪い例

クリック
↓
何も変わらない

ユーザー

押せたの？

良い例

クリック
↓
ボタンが少し沈む

ユーザー

押せた

小さなアニメーションですが
UIの品質を大きく変える要素です。

6.実験：Press Animation Playground

これまでのシリーズでは

• 数値アニメーション
• プログレスバー
• easing

などを扱ってきました。

今回は UIインタラクション の基本として
ボタンのクリックアニメーションを作ります。

ボタンの押し込みアニメーションを
実際に体験してみましょう。

以下のデモでは

• Scaleの強さ
• Animation speed

を調整できます。

観察ポイント

試してみてください

• Scaleが 0.95 → 軽いクリック感
• Scaleが 0.90 → 強いクリック感
• Speedが速い → シャープ
• Speedが遅い → 重いUI

UIデザインでは
このような微調整が 操作感の質を決めます。

7.まとめ

ボタンのクリックアニメーションは

• UIの反応を伝える
• 操作ミスを減らす
• 操作を気持ちよくする

といった役割があります。

シンプルな scaleアニメーション だけでも
UIの体験は大きく改善します。