urgency-action

緊急性と行動を促すアニメーション

即時の対応を促し、時間的な制約を伝えるアニメーションを作成します。

感情的な目標

緊急性は、今すぐ行動しなければならないという強い必要性を生み出します。行動を促すアニメーションは、注目を集め、勢いを生み出し、ダイナミックで前進する動きによってためらいを取り除きます。

緊急性を表現するディズニーの原則

スクワッシュ＆ストレッチ

鋭く、インパクトのある変形です。着地時に素早く圧縮（15〜25％）すると、インパクトが生まれます。動作中に素早く伸長すると、速度と力を表現できます。

予備動作

ごく短くするか、なくします（0〜50ms）。緊急時には準備する時間がありません。直接的で即時の動作にします。即座に反応させるには、振りかぶる動作を省きます。

演出

行動喚起に強く焦点を当てます。高いコントラストと、動きの分離を使います。それ以外の要素は後退させます。緊急性の高い要素を際立たせます。

ストレート・アヘッド・アクション

予測不能で、注目を集める動きを作り出します。脈打つ動き、揺れ、緊急性を示すインジケーターのアニメーションに使います。

フォロースルーとオーバーラッピング・アクション

フォロースルーは最小限にします。鋭く止めることで、断固とした印象を伝えます。余韻を残さず、即座に終わらせることで行動を促します。

スローイン＆スローアウト

非対称にします。速く始まり、急に終わります。初速の高い ease-out を使います。積極的に加速させるには cubic-bezier(0.0, 0, 0.2, 1) を使います。

アーク

速度を高めるには、直接的で直線的な軌道を使います。緊急時には最短経路をたどります。曲線的な軌道は悠長な印象になるため、直線を使います。

セカンダリー・アクション

注目を集めるパルス、発光、揺れを使います。バッジのカウンターを弾ませます。控えめながら継続的な動きで視線を引きつけます。

タイミング

素早く、歯切れよくします（100〜200ms）。高速なアニメーションで活気を生み出します。煩わしくならずに注目を保つには、パルスの間隔を1〜2秒にします。

誇張

中程度から強めにします（20〜40％）。動きを強調すると注目を集められます。通知では大きく弾ませ、エラーでは揺れを強調します。

立体感のある描画

力強く、太い形状を使います。注目を集める高コントラストの形状にします。繊細さよりも明瞭さを優先します。

魅力

大胆な色（赤、オレンジ）を使います。強いコントラストをつけます。静的ではなく、活動的な印象を与える非対称でダイナミックな構成にします。

タイミングの推奨事項

要素	時間	イージング
注意を引くパルス	150-200ms	ease-out
CTA のバウンス	200-300ms	ease-out-back
カウントダウンの刻み	100ms	linear
エラー時の揺れ	300-400ms	ease-in-out

CSS イージング

--urgency-snap: cubic-bezier(0.0, 0, 0.2, 1);
--urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

注意を引くパターン

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

@keyframes urgent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

使用する場面

• 期間限定のオファーやセール
• 在庫僅少の警告
• カウントダウンタイマー
• フォームの入力検証エラー
• 通知バッジ
• 行動喚起ボタン
• 購入手続きで緊急性を伝える場合

倫理に関する注意

緊急性は誠実に伝えましょう。偽の希少性は信頼を損ないます。本当に時間的な制約がある場合に限って使用してください。