小さな瞬間の構造
セイファー（2013）はトリガー、ルール、フィードバック、ループとモードの4要素に分けました。ケンドリック（2018）は状態の伝達や誤り防止の役割を説明しています。モバイルではハプティックフィードバックを加えると効果的です。
待ち時間を縮める
マイヤーズ（1985）は進捗表示が満足度を高めることを、ハリソンら（2010）は進捗バーの動きだけで体感時間が短くなることを示しました。スケルトンスクリーンと組み合わせ、完了時の小さなお祝いはピーク・エンドの法則の通り記憶を良くします。
動きの原則とアクセシビリティ
チャンとアンガー（1993）はアニメーションの原理をUIに応用し、ヒーアとロバートソン（2007）は遷移が変化の追跡を助けると示しました。WCAG 2.2の2.3.3は動きを無効にできるよう勧め、prefers-reduced-motionで端末設定に従えます。これはウェブアクセシビリティの配慮です。
よくある質問
- アニメーションと同じ？
- いいえ。アニメーションはフィードバックの手段の一つです。
- 長さは？
- 短く即時に、目的のある動きだけにします。
出典確認日：2026-10-27
参考文献
- Saffer, D. (2013). Microinteractions: Designing with details. O'Reilly Media. トリガー・ルール・フィードバック・ループの4要素を示した原典です。
- Kendrick, A. (2018, October 21). Microinteractions in user experience. Nielsen Norman Group. 実際のアプリ例で役割を説明しています。
- Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. 進捗バーの動きを変えるだけで体感時間が縮んだ実験です。
- Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 進捗表示が満足度を高めることを示した古典研究です。
- Chang, B.-W., & Ungar, D. (1993). Animation: From cartoons to the user interface. In Proceedings of the 6th Annual ACM Symposium on User Interface Software and Technology (pp. 45–55). ACM. アニメーションの原理をUIに応用した古典です。
- Heer, J., & Robertson, G. (2007). Animated transitions in statistical data graphics. IEEE Transactions on Visualization and Computer Graphics, 13(6), 1240–1247. アニメーション遷移が変化の追跡を助けることを示しています。
- World Wide Web Consortium. (2023). Understanding Success Criterion 2.3.3: Animation from interactions. In Understanding WCAG 2.2. 操作で生じる動きを無効にできるようにする基準です。