マイクロインタラクションデザインガイド
30秒で要点
マイクロインタラクション＝ボタンを押したときの反応、読み込み中の表示、完了メッセージなど、小さな「できた／待って」のやりとりです。
目的は派手にすることではなく、迷いと不安を減らすことです。
4つの要素（設計の整理）
| 要素 | かんたんな意味 | 例 |
|---|---|---|
| きっかけ | 何で始まるか | クリック、送信 |
| ルール | 何が起きるか | 3秒で完了表示 |
| フィードバック | ユーザーへの返事 | チェックマーク、文言 |
| 状態 | 今どうなっているか | 送信中・完了・エラー |
よく使う場面
- フォーム送信（成功・エラー）
- お気に入り・いいねの切り替え
- コピー完了のトースト
- 必須項目のエラー表示
注意（初学者向け）
| やる | 避ける |
|---|---|
| 0.2〜0.4秒程度の短い反応 | 長いアニメで待たせる |
| 色＋文字で状態を伝える | 色だけ |
| 動きを減らす設定を用意 | 常に自動再生 |
アクセシビリティでは 「動きを減らす」 設定への配慮も重要です。
進め方
- 不安が出る操作を1つ選ぶ（送信、決済など）
- 今のフィードバックを書き出す
- 「完了」「失敗」「処理中」の3状態を言葉で定義
- 1画面だけ試して、離脱・エラー率を見る
チェック（はい／いいえ）
- [ ] 操作後に「次に何をすればよいか」が分かるか
- [ ] エラーが色だけで伝わっていないか
- [ ] 装飾のためだけのアニメになっていないか