micro-interactions

マイクロインタラクション

マイクロインタラクションとは、ひとつの瞬間です。チェックマークを描くチェックボックス。いいねすると脈打つハート。少し行き過ぎてから自然に収まるトグル。目標を達成したときに弾ける紙吹雪。こうした瞬間は200～600msと短いものですが、製品が細部まで大切にする人たちによって作られたことを伝えます。

参考にするのは、常に自然界です。自然界のものは、瞬時に止まったり動いたりしません。すべてに重さと勢いがあり、落ち着くまでのひとときがあります。

---

優れたマイクロインタラクションとは

マイクロインタラクションが価値を発揮するのは、次のような場合です。

1. 操作を確認する — クリック、タップ、入力の結果が明確に伝わります
2. 節目を祝う — ユーザーが努力して達成したことを祝います
3. 何かを明らかにする — 理解を助ける形で情報を展開します
4. 質感を加える — 平坦な瞬間に、物理的でリアルな感覚をもたらします

次のような場合は効果がありません。

• ユーザーを待たせる（アニメーションが次の操作を妨げる）
• 頻繁に繰り返す（合図ではなくノイズになる）
• 装飾だけを目的とする（情報が伝わらない）

---

参考にする自然界

物体には慣性、弾力、重さがあります。UI にこうした性質を取り入れると、生涯を通じて身につけた期待に沿うため、直感的に感じられます。

自然界の動き	UI での表現
ドアが揺れて止まる	わずかに行き過ぎてから収まるトグル
水滴が落ちる	順番に現れるリスト項目
ゴムが弾んで戻る	引っ張って更新したときのバウンス
葉が落ちる	閉じるときに、ゆっくりフェードしながら下に流れる
鐘が鳴る	操作時に短く揺れるアイコン
スタンプが紙を押す	ボタンの外寸を変えずに、内側の要素をずらす（例：アイコンを少し動かす）

動きは「そうなるのが当然」と感じられるべきです。要素に物理的な性質があり、それ以外の動きはできないかのように感じられるようにします。

---

パターン

アイコンのアニメーション

操作をきっかけにアニメーションするアイコンは、静的な切り替えよりも状態の変化を鮮明に伝えます。

チェックマークの描画： 完了時に、始点から終点までチェックマークを描きます。

@keyframes check-draw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
.checkmark path {
  stroke-dasharray: 20;
  animation: check-draw 300ms ease-out forwards;
}

いいね時のハートの鼓動： 少し拡大してから、元のサイズに戻します。

@keyframes heart-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

ハンバーガーアイコンから閉じるアイコンへの変形： メニューを開くと、線がアニメーションして × を形作ります。

通知時のベルの揺れ： 短く揺れる回転アニメーションです。

読み込みスピナー： 一定速度ではなく、イージングを付けて回転させます。バネのような回転は生き生きと感じられますが、一定速度の回転は機械的に感じられます。

トグル／スイッチ

トグルは単なる状態変化ではなく、物理的なスイッチのように感じられるべきです。

.toggle-thumb {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* cubic-bezier with overshoot — the thumb slides and bounces slightly */
}
.toggle:checked .toggle-thumb {
  transform: translateX(20px);
}

cubic-bezier (0.34, 1.56, 0.64, 1) はバネのような効果を生みます。つまみが少し行き過ぎてから収まります。これが、安っぽく感じるスイッチと高級感のあるスイッチの違いです。

成功／完了

フォームの送信、オンボーディングのステップの完了、目標の達成など、本当に何かを成し遂げた瞬間を示します。

• 描画されるチェックマークのアニメーション
• 価値の高い節目（初回購入、アカウント作成、目標達成）での控えめな紙吹雪 — 使いすぎないようにし、日常的な操作には使わないでください
• プログレスバーの完了時に緑色へ変化するトランジション
• 統計値が最終値に達する際の数字のカウントアップ

表示と開示

アコーディオン、ツールチップ、ポップオーバーは、小さな動きを伴って開くと、瞬時に表示される場合よりも配慮が感じられます。

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms ease-out;
}
.accordion-content.open {
  max-height: 500px; /* generous upper bound */
}

重力に引かれて所定の位置に収まるように下へスライドするコンテンツは、自然に感じられます。瞬きするように突然現れるコンテンツは、自然に感じられません。

ボタン操作のフィードバック（安定性のルール）

ボタンは、ホバー、フォーカス、クリックの際に、外寸が変わったりレイアウト内で位置がずれたりしてはいけません。

.btn {
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn:hover {
  background-color: var(--color-brand-600); /* subtle shift in hue or brightness */
}
.btn:active {
  background-color: var(--color-brand-700); /* deeper contrast on press */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* inner shadow suggests depth without scaling */
}

ボタンはレイアウト内でしっかりと位置を保ちます。フィードバックは、色、内側のシャドウ、またはボタンの占有領域に影響を与えない内側の要素の控えめなマイクロアニメーション（矢印を右に2px動かすなど）で伝えます。

スケルトンからコンテンツへのトランジション

コンテンツの読み込み時に、突然表示しないでください。150～200msかけてスケルトンの上にフェードインさせます。スケルトンが消え、コンテンツが現れます。

.content-loaded {
  animation: fade-in 150ms ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

リモートでの変更に注意を向ける

ユーザーは、現在の注目箇所やクリック範囲から離れた場所で発生した更新を見落としがちです（変化盲）。ユーザーが現在見ていない場所（離れた隅にある通知など）が変化した場合は、控えめなアニメーションで視線を誘導します。

• 通知バッジの拡大： 新しい通知が届いたら、バッジを一時的に拡大（1.2）し、1.0に戻します。
• 背景のハイライトをフェード： リスト項目が更新されたり、新しい行が追加されたりした場合は、背景を控えめなブランドカラーでハイライトし、1～2秒かけて透明にします。
• 控えめな揺れ： ごく小さな水平方向の揺れ（2～4px）で、強く主張することなくサイドバーやツールバーの項目に注意を引けます。

ルール： アニメーションをループさせてはいけません。視線を引きつけたら、恒常的な妨げにならないよう動きを止めます。

---

コンポーネントの安定性に関する絶対ルール

インタラクティブ要素、特にボタンは、レイアウトが安定していなければなりません。

• 拡大しない： ボタンのホバー時やクリック時に transform: scale() を使ってはいけません。見た目が震える原因になり、上質というより「ふにゃふにゃ」した印象になります。
• 位置をずらさない： translate やマージンを使って、隣接する要素に対する位置を変えてはいけません。
• 理由： レイアウトの安定性は、プロフェッショナルなエンジニアリングと「堅牢さ」を感じさせます。ユーザーのカーソルの下で UI が動くと、予測しづらく感じられます。

---

動きの宣言方法

状態にはトランジション、連続した動きにはキーフレームを使います。 CSS トランジションは途中で中断できます。ホバーの途中でカーソルを離せば、要素はその時点から逆方向に動きます。一方、キーフレームアニメーションは中断できず、最後まで再生されたあとに切り替わります。ホバー、フォーカス、アクティブ、選択の各状態にはトランジションを使います。段階的な登場や、単独で実行されるループには @keyframes を使います。

プロパティを指定します。 transition: all は、変更されたプロパティをすべてアニメーションの対象にします。その中には、フレームごとにブラウザーにページの再レイアウトを強いるレイアウトプロパティも含まれます。また、無関係なクラスが適用されたときに、コンポーネントが動き出す原因にもなります。

/* the element decides what moves */
transition-property: opacity, scale;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

will-change は最終手段です。 最初のフレームでカクつきを確認した場合に限り、transform、opacity、filter にのみ指定し、アニメーションが終わったら削除します。これはコンポジターレイヤーを確保するため、広範囲に適用すると、時間の節約以上にメモリを消費します。

---

控えめに使う

マイクロインタラクションは料理の味付けであり、主役ではありません。

• トリガーごとに一度だけ — 保存時のチェックマークは一度だけアニメーションさせ、再レンダリングのたびには動かしません
• 繰り返し操作では省略 — 50 項目の一括削除で、50 回アニメーションさせてはいけません
• 操作を妨げるアニメーションは禁止 — ユーザーはすぐに操作を続けられる必要があります。アニメーションは結果の代わりではなく、結果と並行して実行します
• prefers-reduced-motion を常に尊重する

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

各インタラクションについて確認します： これによって結果が分かりやすくなりますか、それとも見た目が煩雑になるだけですか？ 後者なら、削除してください。

---

レビューチェックリスト

• 絶対ルール： ホバー時やクリック時に、ボタンやインタラクティブ要素は完全に安定していますか（サイズ変更や位置ずれがありませんか）？
• 各マイクロインタラクションは、操作を確認したり、節目を祝ったり、理解を助けたりしていますか？
• 表示時間は 200～600ms ですか。瞬時すぎず、待たされるほど遅くありませんか？
• 動きは、一定速度ではなく、自然な物理現象（スプリング、イーズアウト、オーバーシュート）を参考にしていますか？
• アニメーションは操作を妨げず、ユーザーはすぐに操作を続けられますか？
• prefers-reduced-motion を尊重していますか？
• 手間のかかる演出（紙吹雪、拡大効果）は、本当に重要な節目にのみ使っていますか？
• アニメーションアイコンは、それが表す状態の変化を明確に伝えていますか？
• トグル／スイッチは、一定速度ではなくスプリングのイージングカーブを使っていますか？
• 焦点領域の外で起きた変更は、短時間のループしないアニメーションで強調し、視線を誘導していますか？