attention-grabbers

注意を引くアニメーション

ディズニーの12の原則を、注意を引く動きに応用します。

原則の適用

スクワッシュ＆ストレッチ：スケールを脈動させて注意を引きます。1.0 → 1.1 → 1.0 のサイクルで、周辺視野からも気づきやすくなります。

予備動作：注意を引くアニメーションの前に、短い間を置きます。徐々に盛り上げてから動かします。

演出：ユーザーの目に留まる位置に注意を引く要素を配置します。隅のバッジや、テキスト内のハイライトなどです。

ストレート・アヘッドとポーズ・トゥ・ポーズ：注意を引く状態を設計します。待機中、アクティブ／脈動中、確認済みの各状態です。

フォロースルーとオーバーラッピング：バッジが脈動した後に、カウントを更新します。注意を引く信号を時間差で表示します。

スローイン／スローアウト：脈動の始まりと終わりを滑らかにします。滑らかな揺れは、鋭いバウンスよりも不快感が少なくなります。

アーク：シェイクアニメーションは、弧を描く動きにします。左右に動かしながら、わずかに上下にも揺らします。

二次動作：脈動＋発光＋色の変化で、最大限に注意を引きます（使用は控えめにします）。

タイミング：

• 1回の注意喚起：300～500ms
• 脈動の繰り返し：2000～3000msのサイクル
• 緊急時の脈動：1000～1500msのサイクル
• 減衰：3～5サイクル、または10秒後に停止

誇張：誇張が効果を発揮する場面です。スケールを1.2にし、明るい色と大胆な動きを使います。

立体感のある描画：注意を引く要素も、浮いたり切り離されたりせず、UIの一部として感じられる必要があります。

魅力：注意喚起は、強引な要求ではなく、役立つ通知として感じられるようにします。

タイミングの推奨事項

注意喚起の種類	継続時間	サイクル数	減衰
バッジの脈動	300ms	2～3	アニメーション後に停止
通知ドット	2000ms	3	合計6秒
新機能	500ms	2	控えめな状態を保つ
エラーシェイク	400ms	1	なし
緊急アラート	1000ms	無限	閉じられるまで
プロモーション	3000ms	2	6秒

実装パターン

/* Pulse attention */
.badge-pulse {
  animation: pulse 2000ms ease-in-out 3;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Subtle glow */
.glow-attention {
  animation: glow 2000ms ease-in-out 3;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3); }
}

/* Error shake */
.shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Ring animation (notification) */
.ring {
  animation: ring 2500ms ease-in-out 2;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(10deg); }
  20%, 40% { transform: rotate(-10deg); }
  50%, 100% { transform: rotate(0); }
}

注意喚起の予算

// Auto-stop attention after timeout
const attention = element.animate([
  { transform: 'scale(1)' },
  { transform: 'scale(1.15)' },
  { transform: 'scale(1)' }
], {
  duration: 2000,
  iterations: 3
});

// Or with CSS
setTimeout(() => {
  element.classList.remove('attention');
}, 6000);

主なルール

1. 同時に表示する注意喚起アニメーションは最大1つにします
2. 3～5サイクル後に自動停止します（最大10秒）
3. 完全に非表示にできる方法を用意します
4. 必須ではないコンテンツには使用しません
5. prefers-reduced-motion：アニメーションなしの静的なインジケーターのみを表示します
6. 緊急アニメーションには、アクセシビリティのため、音声または触覚による代替手段が必要です