女性向けエンジニアスクール
3秒でわかる
操作に対して画面が返す小さな反応のこと。押せたのか処理中なのかが一目で伝わり、同じ操作の繰り返しや問い合わせを減らせます。
もう少し詳しく
どういうものか
ボタンに触れたときの色の変化、押した瞬間のわずかな沈み込み、送信後に出るチェックマーク、入力欄が空のまま送信されたときの短い揺れ。こうした、1つの操作に対して画面が返す小さな反応をまとめてマイクロインタラクションと呼びます。
派手な演出ではなく、状態が変わったことを伝えるための最小限の動きを指します。実装は CSS の transition と animation、あるいは JavaScript による状態の切り替えが中心です。
なぜ必要か
反応が無い画面では、利用者は「押せたのか」を判断できません。判断できないと同じボタンを何度も押します。決済であれば二重送信になり、問い合わせであれば重複したチケットが立ちます。
送信中を示す表示があるだけで、この連打はほぼ止まります。マイクロインタラクションは装飾ではなく、状態を伝えるための情報として働きます。無効なボタンが押せない見た目になっていることも同じ役割です。
具体例
.btn {
background: #0071e3;
color: #fff;
transition: background 150ms ease, transform 100ms ease;
}
.btn:hover { background: #005bbb; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
}button.addEventListener("click", async () => {
button.disabled = true;
button.textContent = "送信中";
await submit();
button.textContent = "送信しました";
});つまずきやすいところ
時間の設定が長すぎると、演出が操作の邪魔になります。押した反応は100ミリ秒前後、要素の出現は200から300ミリ秒あたりが目安で、500ミリ秒を超えると待たされている感覚に変わります。
動かすプロパティの選び方も重要です。width や top を動かすとレイアウトの再計算が毎フレーム走り、動きがかくつきます。transform と opacity に限れば滑らかに動きます。
動きが苦手な利用者への配慮も必要です。OS の設定を読み取る prefers-reduced-motion に対応し、指定されている場合は動きを止めます。
マウスを乗せたときだけ状態を示す作りも避けます。タッチ操作の端末には hover 相当の状態が無く、その反応は一切届きません。
覚え方
「押した」「進んでいる」「終わった」の3つが画面から読み取れるか。これが満たせていれば、動きの量は少なくて構いません。
