animate

機能を分析し、理解を深め、フィードバックを提供し、使う楽しさを生み出すアニメーションやマイクロインタラクションを戦略的に追加します。

必須の準備

/impeccable を実行してください。デザイン原則、アンチパターン、およびコンテキスト収集プロトコルが含まれています。作業を進める前に、このプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず最初に /impeccable teach を実行してください。さらに、パフォーマンス上の制約も確認してください。

---

アニメーションの機会を評価する

モーションによって体験が向上する箇所を分析します。

1. 静的な領域を特定する：

   • フィードバックの不足：視覚的な応答がないアクション（ボタンのクリック、フォームの送信など）
   • 唐突な遷移：急に感じられる即時の状態変化（表示／非表示、ページの読み込み、ルートの変更）
   • 関係が不明瞭：空間的または階層的な関係が明確でない箇所
   • 楽しさの不足：機能的ではあるものの、使っていて楽しくないインタラクション
   • ガイドの不足：注意を向けたり、動作を説明したりできる機会

2. コンテキストを理解する：

   • どのような個性でしょうか？（遊び心があるか、真剣か、活発か、落ち着いているか）
   • パフォーマンス予算はどのくらいでしょうか？（モバイルファーストか、複雑なページか）
   • 対象ユーザーは誰でしょうか？（モーションに敏感なユーザーか、速度を重視するパワーユーザーか）
   • 最も重要なのは何でしょうか？（ヒーローアニメーションを1つにするか、多数のマイクロインタラクションを入れるか）

コードベースからこれらを判断できない場合は、推測できない点についてユーザーに直接確認してください。

重要：prefers-reduced-motion を尊重してください。モーションを必要としないユーザー向けに、必ずアニメーションなしの代替手段を用意してください。

アニメーション戦略を計画する

目的に沿ったアニメーション計画を作成します。

• ヒーローモーメント：特徴となるアニメーションを1つ選ぶとしたら、何でしょうか？（ページの読み込み、ヒーローセクション、重要なインタラクションなど）
• フィードバック層：どのインタラクションに応答が必要でしょうか？
• トランジション層：どの状態変化を滑らかにする必要があるでしょうか？
• 楽しさの層：どこで驚きや喜びを生み出せるでしょうか？

重要：あちこちにアニメーションを散りばめるより、よく構成された体験を1つ作る方が効果的です。インパクトの大きい場面に集中してください。

アニメーションを実装する

以下のカテゴリに沿って、体系的にモーションを追加します。

登場アニメーション

• ページ読み込みの演出：要素を順番に表示する（100～150ms の遅延）、フェードとスライドを組み合わせる
• ヒーローセクション：主要コンテンツを印象的に登場させる（拡大縮小、視差、または独創的なエフェクト）
• コンテンツの表示：Intersection Observer を使ったスクロール時のアニメーション
• モーダル／ドロワーの表示：滑らかなスライドとフェード、背景のフェード、フォーカス管理

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

• ボタンのフィードバック：
  • ホバー：わずかに拡大（1.02～1.05）、色の変化、影を強める
  • クリック：素早く縮小してから拡大（0.95 → 1）、リップルエフェクト
  • 読み込み中：スピナーまたはパルス状態
• フォームのインタラクション：
  • 入力欄のフォーカス：境界線の色の変化、わずかな拡大または発光
  • 検証：エラー時に揺らす、成功時にチェックマークを表示、色を滑らかに変化させる
• トグルスイッチ：滑らかなスライドと色の変化（200～300ms）
• チェックボックス／ラジオボタン：チェックマークのアニメーション、リップルエフェクト
• いいね／お気に入り：拡大縮小と回転、パーティクルエフェクト、色の変化

状態遷移

• 表示／非表示：フェードとスライド（即時に切り替えない）、適切なタイミング（200～300ms）
• 展開／折りたたみ：オーバーフローを適切に処理した高さの変化、アイコンの回転
• 読み込み状態：スケルトン画面のフェード、スピナーのアニメーション、プログレスバー
• 成功／エラー：色の変化、アイコンのアニメーション、穏やかな拡大縮小
• 有効／無効：不透明度の変化、カーソルの変更

ナビゲーションとフロー

• ページ遷移：ルート間のクロスフェード、共有要素のトランジション
• タブの切り替え：インジケーターのスライド、コンテンツのフェード／スライド
• カルーセル／スライダー：滑らかな変形、スナップ位置、慣性
• スクロールエフェクト：視差レイヤー、状態変化を伴うスティッキーヘッダー、スクロール進捗インジケーター

フィードバックとガイダンス

• ホバー時のヒント：ツールチップのフェードイン、カーソルの変化、要素のハイライト
• ドラッグ＆ドロップ：持ち上げる効果（影＋拡大）、ドロップ領域のハイライト、スムーズな位置変更
• コピー／貼り付け：貼り付け時の短いハイライト表示、「コピーしました」という確認
• フォーカスの流れ：フォームやワークフロー内の経路をハイライト

喜びを感じる瞬間

• 空の状態：イラストにさりげない浮遊アニメーション
• アクションの完了：紙吹雪、チェックマークの演出、成功を祝う演出
• イースターエッグ：見つけて楽しめる隠しインタラクション
• 状況に応じたアニメーション：天候の演出、時間帯のテーマ、季節の演出

技術的な実装

アニメーションごとに適切な手法を使用してください。

タイミングとイージング

目的別の長さ：

• 100～150ms：即時のフィードバック（ボタンの押下、切り替え）
• 200～300ms：状態の変化（ホバー、メニューを開く）
• 300～500ms：レイアウトの変化（アコーディオン、モーダル）
• 500～800ms：登場時のアニメーション（ページの読み込み）

イージングカーブ（CSS のデフォルトではなく、こちらを使用）：

/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */

/* AVOID - feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */

終了時のアニメーションは、開始時より短くします。 開始時の長さの約 75％を使用してください。

CSS アニメーション

/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)

JavaScript アニメーション

/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences

パフォーマンス

• GPU アクセラレーション：transform と opacity を使用し、レイアウト関連のプロパティは避けます
• will-change：負荷の高いアニメーションがわかっている場合に限り、控えめに追加します
• 描画を減らす：再描画を最小限にし、適切な場合は contain を使用します
• FPS を監視する：対象デバイスで 60fps を維持します

アクセシビリティ

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

絶対に避けること：

• バウンスや弾性のあるイージングカーブを使うこと。古くさく感じられ、アニメーション自体に注意を引いてしまいます
• レイアウト関連のプロパティ（width、height、top、left）をアニメーションさせること。代わりに transform を使用します
• フィードバックに 500ms を超える長さを使うこと。反応が遅く感じられます
• 目的のないアニメーション。すべてのアニメーションに理由が必要です
• prefers-reduced-motion を無視すること。これはアクセシビリティ違反です
• 何でもアニメーションさせること。アニメーション疲れによって、インターフェースが煩わしく感じられます
• 意図的な場合を除き、アニメーション中の操作を妨げること

品質を確認する

アニメーションを徹底的にテストします。

• 60fps でスムーズに動く：対象デバイスでカクつかない
• 自然に感じられる：イージングカーブが機械的ではなく、自然に感じられる
• 適切なタイミング：速すぎて唐突になったり、遅すぎて反応が鈍くなったりしない
• モーションの軽減が機能する：アニメーションが適切に無効化または簡略化される
• 操作を妨げない：アニメーション中や終了後にユーザーが操作できる
• 価値を加える：インターフェースをよりわかりやすく、または楽しくする

覚えておいてください。モーションは理解を助け、フィードバックを提供するためのものであり、単なる装飾ではありません。目的を持ってアニメーションさせ、パフォーマンスの制約を守り、常にアクセシビリティを考慮してください。優れたアニメーションは目立ちません。すべてがしっくりくるようにするだけです。