#278
インタラクション・アニメーション
#278まいくろいんたらくしょん
マイクロインタラクション
別名・表記:Micro InteractionMicrointeractions
UIXHERO Definition
「小さな親切、大きなお世話にならない程度に」。ボタンを押した時の感触や、処理中のアニメーションなど、操作の手触りを良くする仕掛け。
概要
ダン・サファー著『マイクロインタラクション』で提唱された概念。 「神は細部に宿る」の通り、優れたプロダクトと平凡なプロダクトの差は、こうした目立たない細部の作り込みに現れる。 トリガー（きっかけ）、ルール（どう動くか）、フィードバック（どう見えるか）、ループとモード（繰り返しや状態変化）の4要素で構成される。
UXでの活用
- 状態の可視化: 「今何が起きているか」を言葉ではなく動きで伝えることで、ユーザーの不安を取り除く。
- 操作の誘導: スワイプできることを示唆する動きなど、アフォーダンスを補強する。
- 感情的価値: 触っていて気持ちいい感覚（快感）を与えることで、プロダクトへの愛着を深める。
💡 使いどころ
ユーザーに「操作が受け付けられたこと」を伝えたい時。退屈な待ち時間を楽しくしたい時。エラーの原因をさりげなく教えたい時。
⚠️ 注意点・誤用
過剰な動きはユーザーを疲れさせる（Motion Sickness）。あくまで主役はコンテンツであり、インタラクションは脇役（引き立て役）であることを忘れてはいけない。0.1秒単位のスピード感が命。
具体例
- 「いいね」ボタンを押した時のハートが弾けるアニメーション
- iPhoneのサイレントモードスイッチを切り替えた時の振動（Haptic Feedback）
- パスワード入力エラー時のフォームの横揺れ
- 下に引っ張ってリロード（Pull-to-refresh）
出典・参考文献:
- Dan Saffer. (2013). Microinteractions: Designing with Details. O’Reilly Media.
- Don Norman. (2013). The Design of Everyday Things (Revised and Expanded Edition). Basic Books.
- Nielsen Norman Group. Microinteractions. Nielsen Norman Group.
関連する解説記事
関連する記事詳細が見つかりませんでした。