マイクロインタラクションとは

クリックやチェックなど、ひとつの操作に対して一瞬だけ返す小さなアニメーション。操作が反映されたことを直感的に伝える。

概要

ボタンを押す、チェックを入れる、送信するといったひとつの操作に対して、一瞬だけ再生される小さなアニメーションです。いいねボタンを押すとハートが弾む、チェックボックスにチェックが描かれる、送信ボタンが完了マークに変わるなど、操作が確かに受け取られたことを直感的に伝える役割があり、動きは短く控えめにするのが基本です。

別名

表記ゆれ：マイクロインタラクション、小さな動き、フィードバックアニメーション

AI への伝え方

「いいねボタンを押したらハートが弾むようにして」「チェックボックスにチェックが描かれるアニメーションにして」のように、対象の操作と欲しい反応を伝えると実装しやすいです。動きが大きすぎると煩わしく感じられるため、「短く、控えめに」と度合いを伝えると安全です。

似たパーツとの違い

「ホバーエフェクト」はマウスを乗せている間ずっと続く見た目の変化ですが、マイクロインタラクションはクリックなどの操作の瞬間に一度だけ再生される点が異なります。「ボタン」はクリックできる部品そのものを指し、マイクロインタラクションはそのボタンを押したときの反応の演出という関係です。

デモ

同意する

コード

HTML

<div class="micro-demo">
  <div class="micro-demo__item">
    <button class="micro-demo__like" type="button" aria-pressed="false" data-micro-like>
      <span class="micro-demo__heart" aria-hidden="true">♥</span> いいね
    </button>
  </div>

  <div class="micro-demo__item">
    <label class="micro-demo__check-label">
      <input class="micro-demo__checkbox" type="checkbox" data-micro-checkbox />
      <svg class="micro-demo__checkmark" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
        <rect x="1" y="1" width="22" height="22" rx="5" fill="none" stroke="#0017c1" stroke-width="2" />
        <path class="micro-demo__checkmark-path" d="M6 12l4 4 8-8" fill="none" stroke="#0017c1" stroke-width="2.5"
          stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      同意する
    </label>
  </div>

  <div class="micro-demo__item">
    <button class="micro-demo__submit" type="button" data-micro-submit>送信する</button>
  </div>
</div>

CSS

.micro-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  font-family: sans-serif;
  color: #333333;
}

.micro-demo__item {
  display: flex;
  align-items: center;
}

/* いいねボタン */
.micro-demo__like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #b3b3b3;
  border-radius: 20px;
  background: #ffffff;
  color: #333333;
  font-size: 14px;
  cursor: pointer;
}

.micro-demo__heart {
  color: #b3b3b3;
  transition: color 0.15s ease;
}

.micro-demo__like[aria-pressed="true"] .micro-demo__heart {
  color: #ff4d6d;
  animation: micro-demo-bounce 0.4s ease;
}

@keyframes micro-demo-bounce {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

/* チェックボックス */
.micro-demo__check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.micro-demo__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.micro-demo__checkmark-path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.3s ease;
}

.micro-demo__checkbox:checked + .micro-demo__checkmark .micro-demo__checkmark-path {
  /* チェックが左から右へ描かれるように見せる */
  stroke-dashoffset: 0;
}

.micro-demo__checkbox:focus-visible + .micro-demo__checkmark {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

/* 送信ボタン */
.micro-demo__submit {
  padding: 10px 20px;
  border: 0;
  border-radius: 6px;
  background: #0017c1;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.micro-demo__submit.is-done {
  background: #2e7d32;
}

@media (prefers-reduced-motion: reduce) {
  .micro-demo__heart {
    animation: none;
  }

  .micro-demo__checkmark-path {
    transition: none;
  }

  .micro-demo__submit {
    transition: none;
  }
}

const likeButton = document.querySelector("[data-micro-like]");
const submitButton = document.querySelector("[data-micro-submit]");

likeButton?.addEventListener("click", () => {
  const pressed = likeButton.getAttribute("aria-pressed") === "true";
  likeButton.setAttribute("aria-pressed", String(!pressed));
});

submitButton?.addEventListener("click", () => {
  if (submitButton.classList.contains("is-done")) return;
  submitButton.classList.add("is-done");
  submitButton.textContent = "送信しました ✓";
  setTimeout(() => {
    submitButton.classList.remove("is-done");
    submitButton.textContent = "送信する";
  }, 1800);
});