animation-systems

アニメーションシステム（Stripe × Linear × Apple × Vercel）

このスキルは、品があり、製品品質の高いモーションを実現するのに役立ちます。 「アニメーションを増やす」のではありません。 より良いアニメーション、つまり、ぎこちなさを避けながら、わかりやすさ、階層、フィードバック、楽しさを実現します。

---

目標（モーションを使う理由）

アニメーションは次の目的で使います。

1. 階層を説明する（何が重要か）
2. 操作を確認する（フィードバック）
3. 注意を誘導する（次にどこを見るか）
4. 連続性を保つ（空間的な関係）
5. 仕上がりを高める（丁寧な作りを伝える）

どの目的にも役立たないアニメーションは削除してください。

---

Stripe／Linear／Apple／Vercelのスタイル（共通する特徴）

1) 控えめにする

• アニメーションは少なくし、効果的なものを選びます。
• 印象的な演出はヒーロー部分にひとつだけ使い、ほかのモーションはそれを引き立てます。

2) 明確な振り付け

• 主要な要素を最初に動かします。
• 副次的な要素は、短いずらしを加えて後から動かします。
• モーションによって「読む順序」を示します。

3) 物理的な動きでも、漫画的にはしない

• 人間らしく感じられるイージング（緩やかな加速と穏やかな停止）を使います。
• シリアスな製品 UI では、弾むようなデフォルト設定を避けます。

4) 質感と奥行き（控えめに）

• 小さな視差、柔らかな影、ぼかしのフェード、光の筋を使います。
• ヒーロー部分でない限り、強い 3D 表現は避けます。

---

モーションの基本要素（まずこれらを作る）

どこでも再利用できる基本要素として考えます。

A) フェード＋上昇（デフォルトの表示アニメーション）

用途：テキストブロック、カード、モーダル。

• 透明度：0 → 1
• Y：12–24px → 0
• 時間：サイズに応じて 300–700ms

B) スケール＋フェード（細かな強調）

用途：ポップオーバー、トースト、選択状態。

• スケール：0.98 → 1
• 透明度：0 → 1

C) スライド（ナビゲーション）

用途：ドロワー、ステップ間の遷移。

• transform translate を使い、レイアウトのアニメーションは避けます。

D) モーフィング／共有要素（高い完成度）

用途：タブインジケーター、展開するカード。

• 一貫したジオメトリと、計測済みのレイアウトが必要です。

---

デフォルト設定（実用的な数値）

まずはこれらを基本設定として使います。

時間（目安）

• マイクロ（ホバー／押下）：120–200ms
• UI の状態変化（切り替え、選択）：180–260ms
• 小さな遷移（ポップオーバー、トースト）：220–320ms
• ページセクションの表示：400–800ms
• ヒーローの連続演出：800–1600ms（内部に複数の動きを含む）

イージング（安全な設定）

少数の設定を選び、繰り返し使います。

• UI：穏やかに停止する ease-out
• 強調：やや強めの ease
• 表示：ease-out
• 非表示：ease-in（速め）

実装時：

• アニメーションライブラリの「power2.out / expo.out」に相当する設定を使います。
• ブランドの印象が遊び心のあるものでない限り、弾力やバウンスは避けます。

スタッガー

• 要素ごとに 40–90ms（テキスト行／カード）
• モバイルでは、スタッガーを短めにします

---

振り付けのパターン

1) 「ヒーロー → 副次的な要素」

• ヒーローのビジュアルを最初に表示します。
• 次に見出しを表示します。
• 最後に CTA を表示します。

2) 「スクロール時にセクションを表示」

• セクションが約 20–30% 表示された時点で開始します。
• アニメーションは一度だけ実行します（わずかなスクロールで再実行しないでください）。

3) 「ホバー：浮き上がり＋発光」

• Y：-2〜-6px
• 影：控えめに強くする
• オプション：境界線／グラデーションの発光

4) 「フォーカスリング＋細かな移動」

• フォームフィールドには、フォーカスリングと、ごく小さなスケール／移動を加えて応答性を高めます。

---

パフォーマンスのルール（必須）

適切なプロパティをアニメーションする

推奨：

• transform（translate／scale／rotate）
• opacity

避ける（必要な場合を除く）：

• width／height／top／left
• 広い領域に適用する高負荷なフィルター

GPU に配慮する

• 負荷の高いキャンバスでは、デバイスのピクセル比を 1–2 に制限します
• ぼかしは控えめにし、小さな範囲にとどめます
• 影のアニメーションを多数同時に実行しないでください

再レイアウトを減らす

• 毎フレーム、レイアウトを計測しないでください。
• スクロール効果には、読み取りと書き込みをまとめて処理するライブラリを使います。

---

アクセシビリティ：モーションを減らす設定

必ず prefers-reduced-motion に対応します。

方針：

• コンテンツは表示したままにします。
• モーションを即時の状態変化と控えめな透明度変化に置き換えます。
• スクロール連動のスクラブ／ピン留めを無効にします。

ユーザーに確認します。

• 「必要不可欠でないモーションをすべて無効にする、モーション軽減モードを使いますか？」

---

実装ガイド（ライブラリを問わない）

シンプルなサイトの場合

• 小さなホバーや切り替えには CSS トランジションを使います。
• 複雑な連続演出には、単一のモーションライブラリ（GSAP または Framer Motion）を使います。

プロダクトサイト向け

• モーションのトークンセットを作成します：
  • 所要時間
  • イージングカーブ
  • 標準オフセット（8/16/24px）
  • スタガーのデフォルト値

ヒーロー演出向け

• ラベル付きのビートを使ったタイムライン（またはキーフレーム）を使用します。
• まずカメラ／シーンの動きを固定し、その後にテキストを重ねます。

---

ユーザーに確認すること

• ブランドの方向性はどれですか？ Stripe（洗練）、Linear（ミニマル）、Apple（シネマティック）、Vercel（開発者／プロダクト向け）？
• 重要な演出ポイントは何ですか？（ヒーロー、スクロールストーリー、ホバーカード、ナビゲーションのトランジション）
• パフォーマンス上の制約はありますか？（モバイル、低性能デバイス）
• モーションを低減する要件はありますか？

---

「Stripe／Linear風のアニメーションを追加して」と依頼された場合の出力形式

以下を返します：

1. モーションの目標（伝えたいこと）
2. モーションのトークン（所要時間＋イージング＋オフセット）
3. 振り付けの計画（タイムラインのビート）
4. 実装時の注意点（パフォーマンス＋モーション低減）
5. 小さなコードレシピ（スタックに応じた CSS または GSAP／Framer）