1）定義
マイクロインタラクションとは、直訳すれば「小さなやりとり」という意味になります。
Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」によれば
「単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのこと」のことであり、
ユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのこと
とのことです。
2）目的
マイクロインタラクションの目的は**「ユーザーのアクションに対するフィードバックや、現在のステータスを正しく伝える」**ということです。
具体的には
①アクションに対するフィードバックを伝える
②タスクの進行状況を伝える
③現在のステータスを伝える
④新着情報を伝える
⑤エラーの発生を伝える
などがあげられます。
3）マイクロインタラクションとUX
マイクロインタラクションを採用することによりユーザーにいい印象を与えられれば、ユーザーのエンゲージメントが上がり、離脱率の低下を期待できます。
したがっって、いかにわかりやすくユーザーの目的を達成できるようにするかがマイクロインタラクションにとって重要になります。
4）実装
CTAボタンにマイクロインタラクションを追加する例を説明します。
（これは「①アクションに対するフィードバックを伝える」の例です）
cssは以下の通りです。
.btn a {
color:#fff;
background-color: blue;
transition:all .3s ease-out;
}
.btn a:hover {
color:blue;
background-color: #fff;
}
マウスが乗っていない時には背景色が青、文字色が白
マウスが乗ったら背景色が白、文字色が青に変化していきます。
同時に、マウスオーバーする前のa要素に対して、transitionプロパティを記載することで
変化にアニメーションを加えることができます。
transition : [変化対象のプロパティ] [変化時間] [変化の仕方];
変化対象のプロパティ：all（transitonプロパティの全てのプロパティ）
変化の始まりから終わりまでの時間：.3s（0.3秒）
アニメーションの変化の仕方：ease-out（開始が速く終了がゆっくり）
ボタンの上にカーソルを持ってきた時、ボタンと文字色が変化することで、このボタンがクリック可能な要素であるということをユーザーに示しています。